@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400;1,700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap');*/




/* UTILITY */
:root {
  --border: hsl(200, 15%, 18%);
  --background: hsla(200, 20%, 95%, 1);
  --color: hsl(200, 15%, 90%);
  --color-over: hsl(200, 15%, 100%);
  --color-clear: hsla(200, 15%, 80%, 0.5);
/*  --inv: hsl(200, 100%, 99%);*/
/*  --inv-over: hsl(200, 100%, 94%);*/
/*  --brand: hsl(186, 100%, 40%);*/
  --brand: #326c9d;
  --brand-over: hsl(186, 76%, 42%);
  --cta: hsl(330, 100%, 35%);
  --transition-timing: 200ms;
  --shadow: hsla(200,50%,0%, 0.2);
/*  --text: hsl(200, 15%, 90%);*/
  --text: hsl(200, 60%, 30%);
  --text-bg: hsla(200, 10%, 100%, 0.3);
  --text-bg2: hsla(200, 10%, 100%, 0.9);
  --icons: url(../img/Icons-for-Website-Large-Blue.png);
/*  font-family: 'Roboto', sans-serif;*/
  font-family: 'Ubuntu', sans-serif;
  --font: 'Ubuntu', sans-serif;
  --font-logo: 'Roboto Slab', serif;
  font-size: 16px;
  --panel: hsla(0, 0%, 100%, 0.76);
  
  --clientBG-prev: url(../img/photo/spineyskeletonleaves.jpg);
  --clientBG-next: url(../img/photo/Rocket-Boy-image.jpg);
    --whatsapp: #128c7e;
    --whatsappbutton: #075e54;
}



body .qed-whatsapp-r-fixed {display: none !important;}

* { 
  box-sizing: border-box; 
  
/*  border: 1px solid hotpink !important;*/
}

/* BODY */
body {
  width: 100svw;
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
/*  transition: 300ms ease-in-out;*/
  margin-top: 4.2rem;
}


/* TYPESTYLES */
h1, h2, h3, h4, h5, p {
  margin-bottom: 1em;
  color: var(--text);
  font-family: var(--font);
}
p {
  font-weight: 300;
  font-family: var(--font);
  color: var(--text);
}
.strong { font-weight: 700; }
.italic { font-style: italic; }
.thin {
  font-family: var(--font);
}

a { text-decoration: none; }

a.btn {
  display: inline-block;
  padding: 0.5rem 2rem;
  color: var(--text);
  outline: 2px solid var(--text);
  margin-top: 2rem;
  transition: 100ms ease-out;
}
a.btn:hover {
  background: var(--3);
  opacity: 0.8;
}

a.btn-wide {
  width: 100%;
}
a.btn-outline {
  outline: 3px solid var(--brand);
  color: var(--brand);
  font-size: 1.2rem;
  text-align: center;
  margin-top: 0;
  background: hsla(186, 50%, 99%, 0.3);
}
a.btn.btn-outline:hover {
  background: hsla(186, 50%, 99%, 0.5);
  opacity: 1;
}

a.btn-inline {
  outline: 1px solid var(--brand);
  outline-offset: 4px;
  color: var(--brand);
  font-size: 1rem;
  text-align: center;
  margin-top: 0;
  background: hsla(186, 50%, 99%, 0.3);
  margin: 0 8px;
  cursor: pointer;
}
a.btn-inline:hover {
  outline: 1px solid hsla(186, 100%, 40%, 1);
  color: hsla(186, 100%, 40%, 1);
}

.logo { font-family: var(--font-logo) !important; font-weight: 300; text-transform: lowercase;}
.logo > span { font-weight: 700; }



.contact-link-wrap {
  position: fixed;
  top: 70px;
  right: 28px;
  z-index: -1;
  display: flex;
  width: 180px;
  height: 50px;
  justify-content: flex-end;
  margin: 0;
  
}
.contact-link {
  background: var(--brand);
  color: white;
  padding: 0px 16px;
  margin: 0;
  height: 26px;
  text-align: center;
  transition: 200ms ease-in-out;
  border-radius: 0 0 8px 8px;
}

.contact-link-wrap:hover .contact-link {
  
  padding: 8px 36px;
  height: 46px;
  border-radius: 0 0 16px 16px;
}

.contact-link span {
  display: inline-block;
  transform: translateY(-4px) scale(1);
  transition: 200ms ease-out;
}
.contact-link-wrap:hover .contact-link span {
  transform: translateY(0px) scale(1.2);
  
}
/* FOOTER */

.alt-nav {
  position: fixed;
  top: 68px;
  right: 340px;
  transform: translateY(-8px);
  transition: 200ms linear;
  opacity: 0;
  z-index: -1;
  margin: 0;
}
body.mobile .alt-nav {
  display: none;
}
body .mobile-only { display: none; }
body.mobile .mobile-only { display: block; }

body.mobile .hide-mobile { display: none; }

.show-alt-nav .alt-nav {
  transform: translateY(0px);
  opacity: 1;
}
.alt-nav ul {
  border: 2px solid var(--brand);
  border-radius:  0 0 16px 16px;
  background: var(--background);
  display: flex;
  justify-content: center;
  gap: 1rem;
  height: 33px;
  padding: 0 16px;
}

.alt-nav ul li a,
.alt-nav ul li a:visited,
.alt-nav ul li a:link {
  color: var(--brand);
  padding: 1px 18px 4px;
  margin: 0px 0 0 0;
  font-weight: 400;
  background-color: var(--background);
  color: var(--brand);
  border-radius: 12px;
  opacity: 0;
}
.show-alt-nav .alt-nav ul a,
.show-alt-nav .alt-nav ul a:visited,
.show-alt-nav .alt-nav ul a:link {
  opacity: 1;
  transition-delay: 100ms;
  transition: 200ms ease-out;
}
.alt-nav ul li a:hover {
  background-color: var(--brand);
  color: var(--background);
}

/* FOOTER TOGGLE */
#footer {
  background: #ffffff00;
  position: fixed;
/*  top: calc(100vh - 0rem);*/
  left: 0px;
  right: 0px;
  z-index: 500;
  transition: transform 200ms ease-out;
  
}
body.mobile #footer {
  position: relative;
}

#footer.showing {
  background: white;
/*
  top: calc(100vh - 100%);
  transform: translateY(0);
  height: auto;
  overflow: hidden;
*/
}

#footer #footer-button {
  position: absolute;
  top: -42px;
  left: 0px;
  z-index: 999;
/*  border: 10px solid hotpink;*/
  background: #8ea1b2;
  padding: 0.5rem 1rem;
  color: white;
  border-radius: 0 4px 0 0;
}
#footer #footer-button:hover {
  background: #326c9d;
}

/* FOOTER TOGGLE // END */

footer {
  position: relative;
  padding: 1rem 4rem;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  grid-template-columns: auto 200px 200px 200px auto;
  gap: 2rem;
}
body.mobile footer {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

footer .col { position: relative; padding-top: 1rem; }
footer .col-1 { grid-column: 2 / 3; }
footer .col-2 { grid-column: 3 / 4; }
footer .col-3 { grid-column: 4 / 5; }

@media screen and (max-width: 800px) {
  footer { 
    width: 100%;
    padding: 2rem;
    grid-template-columns: 100%; 
    gap: 1rem;
  }
  
  footer .col-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  footer .col-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }
  footer .col-3 {
    grid-row: 3/ 4;
    grid-column: 1 / 2;
  }
  footer .legal {
    margin-top: 2rem;
  }
  footer .footer.copyright p {
    margin-top: 1rem;
  }
}


footer h3 {
  margin-top: 0rem;
  margin-bottom: 0;
}
.footer.logo {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: left;
  min-width: 280px;
  top: 0; left: 0;
}

.footer.logo .logo {
  position: relative;
  font-size: 1.5rem;
  width: 190px;
  margin: 0;
  top: 0; left: 0;
}
.footer.logo .sting {
  font-size: 1.0rem;
  margin: 0px 0 0 0;
}
.footer.addresses {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  padding-top: 0.5rem;
}
.footer.socials {
  display: none !important;
  min-width: 150px;
  margin-top: 1rem;
}
.footer ul {
  list-style: none;
  padding-left: none;
  padding-inline-start: 0;
}
.footer.socials li {
  font-size: 2rem;
  display: inline-block;
  width: 20px;
  list-style: none;
  margin-right: 2rem;
}
.footer.socials li:last-child {  margin-right: 0rem;}
.footer.socials li a {
  font-size: 1.8rem;
}
.footer.socials li span { display: none; }
.footer.copyright p {
  font-size: 0.75rem;
  margin-top: 3rem;
}

footer p {
  font-size: 1rem;
  color: var(--text)
}
footer a, footer a:visited {
  font-size: 1rem;
  color: var(--brand);
  transition: 100ms linear;
  font-weight: 300;
}
footer a:hover,
footer a:focus {color: #009fbc;}

/* HEADER */

header {
  position: fixed;
  top: 0px;
  width: 100svw;
  display: flex;
/*  flex-wrap: wrap;*/
  justify-content: space-between;
  background: var(--background);
  border-bottom: 1px solid var(--shadow);
  border-bottom: 3px solid var(--brand);
  box-shadow: 0 10px 30px -5px var(--shadow);
  z-index: 3998;
}

.mobile header {
  width: 100vw;
}

header .gdpr {
  display: block;
  width: 100%;
  background: black;
  color: white;
}
header .gdpr > div {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .gdpr > div p { color: white; margin: 0; font-size: 0.9rem; }
header .gdpr > div a { color: #aaa; font-weight: 400; border-bottom: 1px solid #555; }
header .gdpr > div a:hover { color: #fff; }
header .gdpr > div button { color: white; border-bottom: 1px solid #aaa; background: var(--brand); width: 200px; margin: 1rem; border: 0; padding: 0.5rem; }
header .gdpr > div button:hover { cursor: pointer; background: var(--cta); }
#logo {
  padding: 0.5rem;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile #logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding-left: 1rem;
}

#logo a {
  color: var(--brand);
  text-transform: lowercase;
  font-size: 2rem;
  filter: hue-rotate(0deg);
  transform: translateY(-6px)
}
#logo a p { 
  font-family: var(--font-logo);
  transition: 0.3s ease-out; 
  color: var(--brand); 
}
body.mobile #logo a p {
  font-size: 1.5rem;
}

#logo a:hover p { 
  filter: hue-rotate(360deg); 
}
#logo a:hover p span { animation: textLink 2.4s ease forwards; }
#logo a p { margin: 0; }


#logo-icon {
/*  background: #333;*/
  padding: 28px 19px;
  margin: -6px 12px 0 0;
  transform-origin: center;
  transform: scale(1.1);
/*  background-image: url(../img/Icons-for-Website-Large-Blue.png);*/
  background-image: var(--icons);
  background-size: 726px;
  background-position: -6px 0px;
/*  background-position: -106px 0px;*/
  background-position: calc((6px + (48.25px * 13)) * -1) 0px;
  background-repeat: no-repeat;
  filter: hue-rotate(0deg);
}
#logo:hover #logo-icon {
  animation: logoflicker 3s steps(14,end) forwards;
/*  animation: logoflicker 3s forwards;*/
}
.mobile #logo-icon {
  padding: 0px;
  margin: 0px 0px 0px 0px;
  height: 50px;
  background-size: cover;
  object-position: left;
  background-image: var(--icons);
  background-size: 726px;
  background-position: -6px 0px;
}

@keyframes logoflicker {
  0% { 
    background-position: calc((2px + (48.25px * 0)) * -1) 0px; 
    filter: hue-rotate(0deg);
  }
  100% { 
    background-position: calc((6px + (48.25px * 13)) * -1) 0px;
    filter: hue-rotate(360deg);
  }
}

/* NAVIGATION */
.burger-bars-list {
  margin-left: 2rem;
}
header nav .nav-item.burger-bars {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.05rem;
  padding: 4px 0;
  transform: scale(1) translateX(0px);
  transition: 300ms ease-in-out;
  height: 36px;
}
.burger-bars.open {
  transform-origin: center;
  transform: scale(1.2) translateX(6px);
}
.bar { 
  background: var(--text); 
  padding: 0.12rem; 
  width: 24px;
  transition: 500ms ease-in-out;
  margin: 0;
}
.bar-1 {
  transform-origin: top left;
  transform: rotate(0deg);
}
.burger-bars.open .bar-1 {
  transform: rotate(45deg) translateY(1px);
}
.bar-2 {
  transform-origin: center;
  transform: rotate(0deg);
  opacity: 1;
}
.burger-bars.open .bar-2 {
  transform: rotate(90deg) scale(0.1);
  opacity: 0;
}
.bar-3 {
  transform-origin: bottom left;
  transform: rotate(0deg);
}
.burger-bars.open .bar-3 {
  transform: rotate(-45deg) translateY(-1px);
}

body.mobile .burger-bars-list .bar-1,
body.mobile .burger-bars-list .bar-2,
body.mobile .burger-bars-list .bar-3 {
  display: none;
}

/* HEADER NAVIGATION */


#hamburger {
  box-sizing: border-box;
  position: absolute;
  top: 10px;
  right: 30px;
  width: 44px;
  height: 41px;
  background: var(--background);
  border: 2px solid var(--brand);
  display: none;
  flex-direction: column;
  margin: 0;
}
body.large #hamburger { display: none; }
body.small #hamburger { display: flex; }
#hamburger .hambar {
  background: var(--brand);
  position: absolute;
  
  margin: auto;
  transform-origin: center center;
  width: 32px;
  height: 7px;
  top: 15px;
  left: 2px;
  transition: 0.3s ease-in-out;
}

#hamburger .hambar:nth-child(1) {
  transform: rotate(0deg) translate(2px, -12px);
  width: 32px;
}
#hamburger .hambar:nth-child(2) {
  transform: translate(1.5px, 0px);
  
}
#hamburger .hambar:nth-child(3) {
  transform: rotate(0deg) translate(2px, 12px);
  width: 32px;
}
nav.active #hamburger .hambar:nth-child(1) {
  transform: rotate(45deg) translate(0px, 0px);
  width: 36px;
}
nav.active #hamburger .hambar:nth-child(2) {
  transform: translate(18px, 0px);
  width: 0px;
  
}
nav.active #hamburger .hambar:nth-child(3) {
  transform: rotate(-45deg) translate(-0px, -0px);
  width: 36px;
}

body.small header nav { 
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 9999;
}
body.small header nav #hamburger { pointer-events: all; }
  body.small header nav ul {
  display: flex;
  flex-direction: column;
  padding: 4rem 2rem 2rem 2rem;
  background: var(--3);
}
header nav {
  margin: auto 1rem;
  z-index: 9997;
  
}
header nav ul { list-style: none; }
.small header nav ul {
  margin: auto 1rem;
  display: none;
}
body.small header nav ul { 
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
/*  transition: 200ms ease-in;*/
  pointer-events: none;
  z-index: 9998;
}

body.small header nav ul li {
  transition: 200ms ease;
  transform: translateY(-30px)
}
body.small header nav.active ul li {
  transform: translateY(0px)}

/*header nav ul {pointer-events: none;}*/
header nav.active ul {pointer-events: all;}
body.small header nav.active ul { 
/*  display: block;*/
  opacity: 1;
  pointer-events: all;
  transform: translateX(0px);
  background: white;
  border: 1px solid #e9e9e9;
}
header nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0;
}
header nav li {
  margin-left: 0.15rem;
}
header nav .nav-item {
  position: relative;
  height: 100%;
  margin: auto;
}
header nav .nav-link {
  display: inline-block;
  font-size: 1.0rem;
  color: var(--brand);
  padding: 0.25rem 0.75rem;
  transition: 300ms ease;
  font-weight: 400;
  box-shadow: none;
  background: none;
  font-family: 'Ubuntu';
  margin: 0;
  border-radius: 0;
}

header nav .nav-item .nav-item-sub {
  position: absolute;
  top: 100%;
  left: 0px;
  opacity: 0;
  pointer-events: none;
  
  background: var(--background);
}
header nav .nav-item:hover .nav-item-sub {
  opacity: 1;
  pointer-events: all;
  
}
header nav button.nav-link {
  outline: 0;
  border: 0;
  
  padding: 0.69rem 0.75rem;
  
}
header nav .nav-link:hover {
  --btn-bg: hsla(186, 100%, 40%, 1);
}
header nav li:nth-child(5) .nav-link:hover {
  --btn-bg: hsl(35, 100%, 50%);
}
header nav .nav-link:hover, 
#extra-nav .nav-link:hover{
/*  background: hsla(200, 0%, 100%, 1);*/
  animation: navLink 0.4s ease forwards; 
}
@keyframes navLink {
  0% {
    color: hsl(186, 100%, 40%);
    background: hsla(200, 100%, 90%, 0)
  }
  4% { background: hsla(0, 100%, 70%, 0.1) }
  8% { background: hsla(50, 100%, 70%, 0.2) }
  16% { background: hsla(100, 100%, 70%, 0.2) }
  20% { background: hsla(150, 100%, 70%, 0.3) }
  28% { background: hsla(200, 100%, 70%, 0.3) }
  34% { background: hsla(150, 100%, 70%, 0.4) }
  50% { background: hsla(186, 100%, 100%, 0.8) }
  70% { color: hsl(186, 100%, 40%); }
  100% {
    color: hsl(186, 100%, 100%);
/*    background: hsla(186, 100%, 40%, 1);*/
    background: var(--btn-bg);
  }
}
@keyframes textLink {
  0%  { color: hsl(186, 100%, 40%); }
  4%  { color: hsla(0, 100%, 70%, 0.8) }
  8%  { color: hsla(50, 100%, 70%, 0.9) }
  16% { color: hsla(100, 100%, 70%, 0.8) }
  20% { color: hsla(150, 100%, 70%, 0.9) }
  28% { color: hsla(200, 100%, 70%, 0.8) }
  34% { color: hsla(150, 100%, 70%, 0.9) }
  50% { color: hsla(186, 100%, 70%, 0.8) }
  70% { color: hsl(100, 100%, 40%); }
  100% {color: hsl(200, 60%, 30%);
  }
}

/* NAV MEDIA QUERY FOR SMALL SCREENS */


@media screen and (max-width: 690px) {
} 

#magic-menu {
  display: none;
  background: var(--background);
  position: fixed;
  left: 0;
  right: 0;
/*  top: 71px;*/
  justify-content: center;
  align-items: center;
  gap: 1rem;
   transform: translateY(-71px);
  transition: 200ms ease-out;
  box-shadow: inset 0px 10px 5px -5px #00000022, 0 10px 5px -5px #00000022;
  
}
#magic-menu.active { display: flex; transform: translateY(0)}
#magic-menu .nav-item {
  max-width: 200px;
  margin: 0;
}

@keyframes magicmenushow {
  from {
  opacity: 0;
   transform: translateY(-71px);
  }
  to {
    opacity: 1;
   transform: translateY(0);
    
  }
}

/* HEADER CANVAS */

#header-leaves {
  position: absolute;
  width: 100vw;
  height: 68px;
  z-index: -1;
}

/* GDPR */

#GDPR {
  position: absolute;
  top: 4.15rem;
  left: 0;
  right: 0;
  background: var(--brand);
  z-index: -1;
  transition: 500ms ease;
  opacity: 1;
}
.gdpr-wrap {
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gdpr-blurb h1 { color: white; }
.gdpr-blurb p { width: 75ch; color: white; }
.gdpr-blurb a { color: hsl(186, 100%, 86%); }
.gdpr-blurb a:hover { border-bottom: 1px solid hsl(186, 100%, 86%); }
.gdpr-buttons button {
  cursor: pointer;
    padding: 0.5rem;
    background: white;
    border: 2px solid var(--background);
    color: var(--brand);
}

#GDPR.gdpr-init {
  opacity: 0;
  top: -50px;
}

/* OTHER NAVIGATION */

#extra-nav {
  background: var(--background);
  box-shadow: 0 5px 10px #00000055;
  z-index: 99;
  position: fixed;
  width: 100vw;
}

#extra-nav ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
}


#extra-nav li a {
  display: block;
  padding: 0.5rem 1rem;
/*  border: 1px solid #e9e9e9;*/
  box-shadow: 0 0 10px #00000033;
  color: var(--brand);
}


/*HOW WE WORK PRICING*/

#pricing {
  --pricingWidth: 100%;
  --pricingHeight: 70%;
  position: fixed;
  top: 100vh;
  left: calc(50vw - (var(--pricingWidth)/2));
  background: hsla(196,50%,10%,0.8);
  width: var(--pricingWidth);
  height: var(--pricingHeight);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 450ms ease-in-out;
  z-index: -1;
}
#pricing.active {
  top: calc(50vh - (var(--pricingHeight)/2));
  --pricingHeight: 100%;
  pointer-events: all;
  opacity: 1;
  z-index: 2;
}
#pricing h1 {
  font-size: 2rem;
}
.pricing-content {
  opacity: 0;
  position: relative;
  width: 800px;
  height: auto;
  padding: 4rem;
  background: white;
}
#pricing.active .pricing-content {
  opacity: 1;
}
.pricing-button { 
  display: inline-block; 
  border: 0;
  outline: 1px solid var(--7);
  color: inherit;
  background: none;
  font-size: 1.2rem;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
.pricing-button:hover {
  
  outline: 1px solid var(--brand);
}
.pricing-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* SECTIONS */

section {
  margin-bottom: 0rem;
}

.section-wrap {
  width: 90%;
  max-width: 1160px;
  margin: 0 auto;
}

section > div {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

section > div > h1 {
  font-size: 3rem;
  text-transform: uppercase;
  font-weight: 100;
  width: 100%;
  margin-bottom: 0;
}
#useful-information, 
#case-studies {
  background-color: var(--1);
  padding: 2rem;
}
#useful-information {
  background-image: url(../img/photo/Beautifulabstractbackgroundwithskeletonleaves.jpg);
  background-size: cover;
  background-blend-mode: difference;
}
#case-studies {
  background-image: linear-gradient(hsla(186, 100%, 93%, 0.87) 0%, hsla(162, 60%, 65%, 0.69) 100%),url(../img/photo/spineyskeletonleaves.jpg);
  background-size: cover;
  background-blend-mode: difference;
}
#useful-information > div,
#case-studies > div {
  padding: 2rem;
  outline: 2px solid var(--6);
  background: var(--panel);
/*  background-image: radial-gradient(#fff, #fafafa);*/
  box-shadow: inset 0 0 40px var(--1);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  
  backdrop-filter: blur( 7.5px );
-webkit-backdrop-filter: blur( 7.5px );
}
section .card {
  flex: 1 1 45ch;
  outline: 1px solid var(--4);
  margin-bottom: 0rem;
/*  width: clamp(30em, 50% - 1rem, 100%);*/
  width: 100%;
  background: var(--4);
  border: 1px solid var(--6);
  position: relative;
}

section .card-image {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
section .card-image .cardimage {
  flex: 1 1 35ch;
/*  width: clamp(30em, 50% - 1rem, 100%);*/
  width: 100%;
  min-height: 200px;
/*  min-width: 200px;*/
  background: red;
  height: auto;
  background-image: url(../img/photo/femalebakerstandingatworkplaceonbakingmanufacture.png);
  background-position: center;
  background-size: cover;
}

section .card-image .story-forestry {
  background-image: url(../img/photo/story-forestry.jpg);
}
section .card-image .story-recruitment {
  background-image: url(../img/photo/story-recruitment.jpg);
}
section .card .title {
  font-size: 1.6rem;
  font-weight: 3300;
  padding: 1rem;
  color: var(--text);
  background: var(--4);
  box-shadow: inset 0 0 40px var(--2);
  border-bottom: 1px solid var(--6);
}
section .card .info {
  position: relative;
  padding: 3rem;
  color: var(--text);
  width: 100%;
  max-width: 400px;
  margin: auto;
}
section .card .info .fa.fa-quote-left {
  position: absolute;
  font-size: 4rem;
  top: 0.5rem;
  left: -2rem;
  opacity: 0.2;
}
section .card .info .fa.fa-quote-right {
  position: absolute;
  font-size: 4rem;
  bottom: 0.5rem;
  right: -2rem;
  opacity: 0.2;
}
section .card .action {
  padding: 0.5rem 2rem;
  background: var(--2);
  color: var(--text);
}
section .card .action a { 
  color: var(--text); 
  display: block;
  margin-left: auto;
  text-align: right;
}
section .card .action a .fa { padding-left: 0.5rem; }


/* IMAGES */
.image.img--compass-image {
  background-image: url(../img/photo/holding-compass.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.image.img--landscape-1 {
  background-image: url(../img/photo/Landscape-1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.image.img--approach {
  background-image: url(../img/photo/holding-compass.png);
}
.bg-image-right {
  background-position: center right;
}
.image {
  display: block;
  width: 100%;
  min-height: 400px;
}
.image > div {
  margin: auto;
  padding: 2rem 0;
}
.bg-image-right > div {
  display: grid;
  width: 120ch;
  max-width: 80vw;
  grid-template-columns: minmax(23ch, 100%) minmax(0px, 100px);
  
}

.bg-image-full > div {
  background: var(--2);
  width: 90%;
/*  max-width: 940px;*/
/*  padding: 2rem;*/
}
.image > div h1 {
  font-size: 2rem;
  color: var(--text);
  padding-left: 1rem;
  margin-left: -1rem;
}
.bg-image-right > div h1 {
  grid-column: 1 / 2;
  width: 50%;
  background: var(--text-bg);
}
.image > div p {
  color: var(--text);
}
.bg-image-right p {
  grid-column: 1 / 2;
  width: 50%;
  background: var(--text-bg2);
  padding: 1rem;
  margin-left: -1rem;
}
.dark .bg-image-right p {
  background: var(--text-bg);
}
.dark .image.bg-image-full h1,
.dark .image.bg-image-full p {
  color: var(--background);
}
.image button {
  color: var(--brand);
  font-weight: 700;
  padding: 10px;
  width: 16ch;
  border-radius: 4px;
  border: 3px solid var(--brand);
  box-shadow: 0 1px 3px var(--shadow);
  text-transform: capitalize;
  font-size: 1.1rem;
  background: var(--background);
  background: none;
  transition: 200ms ease;

}
.dark .image.bg-image-full button {
  
  border: 2px solid  var(--background);
  color: var(--background);
}

.bg-image-right button {
  grid-column: 1 / 2;
}
body.light .image button {
  background: white;
}
body.light .image button:hover,
body.dark .image button:hover {
  color: var(--text);
  background: var(--brand);
  box-shadow: 0 5px 7px var(--shadow);
}
body.dark .image button:hover {
  color: var(--background);
}
.replayButton button{
  padding: 0.5rem;
  background: white;
  border: 2px solid var(--background);
  color: var(--brand);
}
.replayButton button .fa-video {
  margin-right: 0.7rem;
}

/* CONTACT FORM */

#contact {
  position: fixed;
  top: 20px;
  right: -420px;
  background: var(--2);
  padding: 2rem;
  transition: 0.2s ease-out;
  border: 1px solid #8795b7;
  box-shadow: 
    inset 0 -30px 40px -25px #dce7ff,
    inset 0 30px 10px -25px #dcedff,
    0 0 70px -40px #09379f;
  background: white;
  z-index: 9999;
}
#contact.active {
  top: 85px;
  right: 20px;
}


#contact h1 {
  text-transform: uppercase;
  font-weight: 100;
  font-size: 2.2rem;
}

.close-btn {
  color: var(--7);
  padding: 3px 9px 2px;
/*  width: 2rem;*/
  text-align: center;
  border: 1px solid var(--7);
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
  transform-origin: center;
  transform: scale(1);
  transition: 0.2s linear;
  box-shadow: inset 0 0 10px -5px var(--text);
}
.close-btn:hover { 
  transform: scale(1.1); 
  cursor: pointer; 
  color: var(--9);
  border: 1px solid var(--9);
}

@media screen and (max-width: 800px){
  
  #contact.active {
    top: 0px;
    right: 0px;
  }
  
  #contact.active .contact-button {
    top: 16px;
    right: 10px;
    transform: scale(1.5);
    color: var(--text);
  }
}
.input {
  display: grid;
  margin-bottom: 4px;
}
.input label {
  color: var(--text);
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.input input,
.input textarea {
  border:  1px solid #d9d9d9;
  font-size: 1.1rem;
  padding: 4px 8px;
  margin-bottom: 0.5rem;
}
.input input:focus-within,
.input textarea:focus-within {
  outline: 1px solid #f3f3f3;
  outline-offset: 2px;
}


.input button, .input .button {
  color: var(--text);
  padding: 0.5rem 0.25rem;
  text-align: center;
  border: 1px solid var(--text);
  transition: 200ms ease-out;
  background: var(--3);
  text-transform: uppercase;
}
.input button:hover, .input .button:hover {
  background: var(--4);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.5);
}
.input p button, .input p .button {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
}
.button .fa-chevron-left {
  margin-right: 0.5rem;
}
.button .fa-chevron-right {
  margin-left: 0.5rem;
}

/* ARTICLES */

.articles {
  position: relative;
  padding-left: 2rem;
/*  border: 1px solid red;*/
  width: 100%;
  max-width: 960px;
}
.articles > div {
  opacity: 0;
  display: none;
}
.articles > div.active {
  opacity: 1;
  display: flex;
}
.articles .desc {
  width: 100%;
}
.articles h3 {
/*  display: block;s*/
  display: inline-block;
  font-size: 3rem;
/*  width: 100%;*/
  padding: 0.5rem 2rem 0.5rem 2rem;
  margin-top: 6rem;
  background: hsla(200,100%,10%,0.7);
  color: var(--0)
}
.light .articles h3 {
  background: hsla(200, 100%, 94%, 0.7);
  color: var(--0)
}
.dark h3 {
  background: hsla(200,100%,10%,0.7);
  color: var(--0)
}
.articles h3:after {
  content: "";
  background: var(--6);
  background-image: 
    linear-gradient(45deg, red 0%, navy 100%),
    url(../img/photo/Landscape-1.png);
  background-size: cover;
  width: calc(100% - 6rem);
  max-width: calc(960px - 6rem);
  padding: 2rem;
  position: absolute;
  top: 0rem; left: 0; right: 0px;
  height: 7.75rem;
  z-index: -1;
  background-blend-mode: soft-light;
}

.articles .desc-market h3:after {
  background-image: 
    linear-gradient(45deg, orange 0%, firebrick 100%), url(../img/photo/Rocket-Boy-image2.jpg);
  background-position: center;
}
.articles .desc-planning h3:after {
  background-image:  
    linear-gradient(45deg, red 0%, navy 100%),url(../img/photo/femalebakerstandingatworkplaceonbakingmanufacture.png);
  background-position: center;
}
.articles .desc-sales h3:after {
  background-image: url(../img/photo/Printingoperatorworkingwithoffsetmachineattheprintingmanufacturing.png);
  background-position: top;
}

.icon-descs2 .content {
  margin-top: 0rem;
  height: auto;
}

.articles .content {
  width: calc(100% - 2rem);
}

.articles p {
  width: 100%;
}

.articles img {
  object-fit: cover;
  height: 300px;
  width: 100%;
  max-width: 450px;
  float: right;
  
}
.articles .content p {
/*  max-width: 600px;*/
  width: 100%;
  min-width: 80ch;
}

/* HOW WE WORK + GRID ICONS */

#how-we-work-icons {
  display: block;
  object-fit: contain;
  width: calc(100% + (10vw + 2rem));
  margin-top: 1rem;
  margin-left: calc((5vw + 1rem)*-1);
  margin-right: calc((5vw + 1rem)*-1);
  transform: scale(1)
}

#how-we-work-panel h1 {
  font-size: 3rem;
}

#how-we-work .text-box {
  width: 100%;
/*  max-width: 100ch;*/
/*  margin: 0 auto;*/
/*  padding: 4rem calc(5vw + 1rem);*/
  border-radius: 4px;
  box-shadow: 2px 20px 100px -20px var(--0);
  background: var(--panel);
  backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
}
#how-we-work .text-box .logo {
  color: var(--brand);
}

#grid-icons, #how-we-work {
/*  margin-top: 4rem;*/
  padding: 4rem 0; 
  background: #ddd;
/*
  background-image: url(../img/Leaf-Tile-001.png),
    linear-gradient(15deg, red, blue);
*/
  background-image: linear-gradient(195deg, 
    rgba(155, 239, 242, 0.73) 0px,    rgba(155, 239, 242, 0.4) 90px,   rgba(155, 239, 242, 0.0) 200px, rgba(255, 255, 255, 0) 100%),url(../img/photo/Skelinkgton3.jpg)
    ;
/*    linear-gradient(15deg, pink, yellow);*/
/*  background-blend-mode: overlay;*/
/*  background-attachment: scroll;*/
  background-position: top right;
  background-size: cover;
  
}
#grid-icons  {
  padding: 2rem 2rem;
}
#grid-icons .squares {
  position: relative;
  margin: 2rem auto;
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;

}
#grid-icons .square {
  width: min(200px, 50%);
  height: 200px;
/*  background-color: pink;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  transition: 300ms ease-out;
  backdrop-filter: blur( 25px );
-webkit-backdrop-filter: blur( 25px );

  color: white;

  cursor: pointer;
}
#grid-icons .square p {
  font-family: var(--font-logo);
  font-size: 1.4rem;
  color: white;
}
#grid-icons .square p span {
  font-weight: 700;
}

#grid-icons .square:hover .img {
  border-color: var(--brand-over);
  box-shadow: 2px 10px 30px hsl(200, 62%, 58%);
}


#grid-icons .square.red {background-color: hsl(0, 62%, 41%);}
#grid-icons .square.orange {background-color: hsl(39, 49%, 33%);}
#grid-icons .square.yellow {background-color: hsl(74, 57%, 46%);}
#grid-icons .square.green {background-color: hsl(139, 64%, 33%);}
#grid-icons .square.cyan {background-color: hsl(180, 72%, 38%);}
#grid-icons .square.blue {background-color: hsl(240, 54%, 37%);}
#grid-icons .square.purple {background-color: hsl(300, 40%, 33%);}
#grid-icons .square.aqua {background-color: hsl(180, 38%, 43%);}
#grid-icons .square.firebrick {background-color: hsl(0, 41%, 37%);}
#grid-icons .square.lime {background-color: hsl(120, 32%, 45%);}
#grid-icons .square.lightcoral {background-color: hsl(0, 35%, 66%);}
#grid-icons .square.cornflowerblue {background-color: hsl(219, 32%, 52%);}
#grid-icons .square.blueviolet {background-color: hsl(271, 35%, 49%);}

#grid-icons .square .img {  
  padding: 49px 48px;
  margin: -4px 12px 0 0;
  transform-origin: center;
  transform: scale(1);
  background-image:  url(../img/Icons-for-Website-Large-Light.png);
  background-size: 1452px;
  background-repeat: no-repeat;
  box-shadow: 2px 10px 30px hsl(200, 60%, 20%);
  border-radius: 56px;
/*      background-color: hsl(200, 60%, 90%);*/
  border: 5px solid white;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
#grid-icons #overlay .img,
#grid-icons #overlay .mini-img, 
.mini-icons .mini-img {  
  grid-column: 1 / 2;
  grid-row: 1 / 1;
  width: 100px;
  height: 100px;
  padding: 49px 48px;
  margin: 72px 0px 0px 48px;
  transform-origin: center;
  transform: scale(3.2);
  background-image:  url(../img/Icons-for-Website-Large-Navy.png);
  background-size: 1452px;
  background-repeat: no-repeat;
  opacity: 0;
  animation-name: overlayContent;
  animation-duration: 1s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0.0s;
}
#grid-icons  #overlay .mini-icons .mini-img {  
  transform: scale(0.66);
  margin: 0;
  display: inline-block;
/*  background-color: aliceblue;*/
/*  border-radius: 50px;*/
/*  border: 1px solid var(--8);*/
}
#grid-icons  #overlay .maps-used {
  transform: scale(1);
  display: flex;
}
#grid-icons  #overlay .maps-used p {
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 0 0 -4rem;
  color: var(--text);
  padding: 0rem 1rem 0rem 4rem;
  z-index: -1
}
#grid-icons  #overlay .mini-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem 0 0;
  margin: -1rem 1rem -1rem -1rem;
   opacity: 0.8;
  cursor: pointer;
  transition: 100ms ease-out;
  transform: scale(1);
}
#grid-icons  #overlay .mini-icons:hover {
  opacity: 1;
  transform: scale(1.1);
}

#grid-icons #overlay {
  padding: 3rem;
  position: absolute;
  top: 2rem;
  left: calc(50% + 4rem);
  margin-left: calc(-50%);
  width: calc(100% - 8rem);
  height: auto;
  opacity: 1;
  pointer-events: all;
  background-color: hsla(180, 50%, 90%, .8);
  background-image: linear-gradient(55deg, hsla(180, 70%, 90%, .8), #ffffff);
  backdrop-filter: blur( 7.5px );
-webkit-backdrop-filter: blur( 7.5px );
  transition: 200ms ease-out;
  border-radius: 4px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.3);
  transform: translateY(0px);
}

#grid-icons #overlay > div {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 250px auto;
}
#grid-icons #overlay div.sub-header {
  grid-column: 2 / 3;
  grid-row: 1 / -1;
}

#grid-icons #overlay p.explanation {
  color: var(--text);
}

#grid-icons #overlay h1 {
  font-size: 3rem;
  opacity: 0;
  animation-name: overlayContent;
  animation-duration: 1s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
  margin-bottom: 0;
}
#grid-icons #overlay h1 + div,
#grid-icons #overlay p {
  color: var(--text);
  opacity: 0;
  font-size: 1.1rem;
  animation-name: overlayContent;
  animation-duration: 1s;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
#grid-icons #overlay .method {
  margin-top: 2rem;
  
  outline: 1px solid rgba(119, 119, 119, 0.26);
  padding: 16px 24px;;
  font-size: 0.95rem;
  margin-left: -1rem;
  margin-top: 4rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.37);
}
#grid-icons #overlay .method p {
  font-style: italic;
  font-family: serif !important;
  
}

#grid-icons #overlay.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

#grid-icons #overlay .close {
  position: absolute;
  top: 0px;
  right: 1rem;
  font-size: 2rem;
  color: var(--text);
  opacity: 0.8;
  cursor: pointer;
}
#grid-icons #overlay .close:hover {
  opacity: 1;
}
@keyframes overlayContent {
  from { opacity: 0; } to { opacity: 1; }
}

#how-we-work {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 13rem 36rem 26rem;
  margin: auto;
  padding: 2rem minmax(1rem auto);
  width: 100%;
}

#how-we-work .content-box {
  width: 100%;
  height: 100%;
/*  margin: 0 0 0 auto;*/
  grid-column: 2 / 3;
  background: none;
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 100%;
/*  margin: 0 auto;*/
/*  padding: 4rem calc(5vw + 1rem);*/
  border-radius: 0px;
/*  box-shadow: 2px 20px 100px -20px var(--0);*/
/*  background: var(--panel);*/
  backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
}
#how-we-work .content-box h1,
#how-we-work .content-box p,
#how-we-work .content-box a {
  color: #24128b;
  max-width: 400px;
  width: calc(100% - 2rem);
  margin: 2rem auto;
}
#how-we-work .content-box h1 {
  line-height: 1.2;
  font-size: 3rem;
  padding: 0;
}
#how-we-work .content-box p,
#how-we-work .content-box a {
  font-size: 1.2rem;
}
#how-we-work .content-box a {
  color: #24128b;
  outline: 2px solid #24128b;
}
#how-icons {
  grid-column: 3 / 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 8px;
}
#how-icons2 {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  height: 100%;
  margin: 0;
  padding: 0;
}
#grid-icons .square,
#how-icons .square,
#how-icons2 .square {
  flex-grow: 1;
/*  min-width: calc(134px + 2rem);*/
  width: 190px;
  padding: 1.5rem 1rem 1rem 1rem;
  background-color: rgba(255, 255, 255, 0.7);
  background-image:
    linear-gradient(135deg, rgba(117, 165, 201, 0.37), hsla(0, 0%, 100%, 0)),
    radial-gradient(rgba(255, 255, 255, 0.4), rgba(0, 107, 255, 0.03));
  background-size: 400px 400px;
  background-position: 300px;
  border-radius: 4px;
  box-shadow :
    inset 0 0 3px rgba(255, 255, 255, 0.99),
    inset 0 0 60px -20px rgba(57, 160, 185, 0.48),
    inset 0px -30px 20px 0px rgba(255, 255, 255, 0.57),
    0px 20px 20px 0px rgba(0, 42, 183, 0.17),
    0px 0px 1px 1px rgba(0, 21, 92, 0.15)
  ;
  justify-content: center;
  align-items: center;
/*  border: 0.25px solid #24128b;*/
  
  backdrop-filter: blur( 7px );
-webkit-backdrop-filter: blur( 7px );
}
#grid-icons .img,
#how-icons .img,
#how-icons2 .img {
  
  width: calc(98px);
  padding: 49px 48px;
  margin: 4px auto 0 auto;
  transform-origin: center;
  transform: scale(1.5);
  background-image:  url(../img/Icons-for-Website-Large-Navy.png);
  background-size: 1452px;
  background-repeat: no-repeat;
/*  box-shadow: 2px 10px 30px hsl(200, 60%, 20%);*/
  border-radius: 56px;
/*      background-color: hsl(200, 60%, 90%);*/
/*  border: 0.5px solid var(--text);*/
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
  transition: 150ms ease-in-out;
}
#how-icons .square:hover .img { opacity: 1; }
#how-icons2 .square:hover .img { opacity: 1; }
#grid-icons .img + p,
#how-icons .img + p,
#how-icons2 .img + p {
  color: #24128b;
  text-align: center;
  margin-top: 0.0rem;
  margin-bottom: 0rem;
  font-size: 1.3rem;
  font-family: var(--font-logo);
}



#introduction {
  margin: 4.2rem 0 0 0;
  background: #496f76;
/*  background-image: radial-gradient(#273689 0%, #19132e 100%);*/
  background-image:  url(../img/photo/Tree-Working.jpg);
  background-size: cover;
  background-position: center left;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  display: grid;
  grid-template-columns: 16rem auto;
}
#introduction .content {
  grid-column: 2 / 3;
  padding: 2rem 3rem;
  transform: scale(1.2);
  
/*
  backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
  background: hsla(186, 50%, 90%, 0.3);
  box-shadow: 3px 10px 30px hsla(186, 50%, 50%, 0.3);
*/
}
#introduction h1 {
  color: #2a5ec1;
  text-align: center;
}
#introduction h1 > .logo {
  display: inline-block;
  text-transform: lowercase;
  font-size: 1.1em;
/*  font-family: var(--font-logo);*/
/*  color: var(--brand);*/
  transform: scale(1.2);
  
}
#introduction h1 > .logo > span {
  font-weight: 700;
}

#introduction h1 > .logo img {
  display: inline-block;
  width: 50px;
  margin-bottom: -14px;
  margin-left: 0rem;
  margin-right: 0.5rem;
}

#introduction h2 {
  color: #2a5ec1;
  text-align: right;
  text-transform: lowercase;
  font-style: normal;
  font-size: 1.65rem;
  font-weight: normal;
  margin-bottom: 1rem;
}


.icons-used {
  padding: 0rem;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 2rem;
}
.icons-used-header {
  padding: 1rem 0;
}
.fm-icons {
  display: flex;
/*  margin-top: -1rem;*/
/*  margin-bottom: 2rem;*/
}
.fm-icon {
  --icon-width: 70px;
  position: relative;
  width: var(--icon-width);
  height: var(--icon-width);
  background-image: url(../img/Icons-for-Website-Large-Blue.png);
  background-size: cover;
  background-position: calc(var(--icon-width)*12) 0px;
  transform: scale(1);
  margin-right: calc(var(--icon-width)* 0.2);
  transition: 200ms ease;
}
.fm-icon p {
  position: absolute;
  left: 0; right: 0;
  bottom: calc((var(--icon-width) * -1) * 0.41);
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-size: calc(var(--icon-width) * 0.15);
  font-weight: 700;
  color: #326c9d;
}
    .fm-icon p span { font-weight: 400;}
    .fm-icon-financials { background-position: calc((var(--icon-width)* -1)*0) 0px; }
    .fm-icon-moneybag { background-position: calc((var(--icon-width)* -1)*1) 0px; }
    .fm-icon-payments { background-position: calc((var(--icon-width)* -1)*2) 0px; }
    .fm-icon-sales { background-position: calc((var(--icon-width)* -1)*3) 0px; }
    .fm-icon-market { background-position: calc((var(--icon-width)* -1)*4) 0px; }
    .fm-icon-supply { background-position: calc((var(--icon-width)* -1)*5) 0px; }
    .fm-icon-finance { background-position: calc((var(--icon-width)* -1)*6) 0px; }
    .fm-icon-system { background-position: calc((var(--icon-width)* -1)*7) 0px; }
    .fm-icon-digital { background-position: calc((var(--icon-width)* -1)*8) 0px; }
    .fm-icon-hr { background-position: calc((var(--icon-width)* -1)*9) 0px; }
    .fm-icon-insurance { background-position: calc((var(--icon-width)* -1)*11) 0px; }
    .fm-icon-planning { background-position: calc((var(--icon-width)* -1)*12) 0px; }
    .fm-icon-credit { background-position: calc((var(--icon-width)* -1)*13) 0px; }
    .fm-icon-training { background-position: calc((var(--icon-width)* -1)*15) 0px; }
    .fm-icon-logo { background-position: calc((var(--icon-width)* -1)*14) 0px; }




/*  WHATSAPP  */

.qed-whatsapp {
  border-radius: 32px;
  background: var(--whatsapp);
/*  background-image: linear-gradient(0deg, var(--whatsapp) 0%, var(--whatsapp) 50%, var(--whatsappbutton) 100%);*/
  color: white;
  margin: 1rem auto;
  width: auto;
  min-width: 58px;
  max-width: 545px;
  padding: 4px ;
  z-index: 999;
/*  border: 0;*/
  transition: 100ms ease;
}

.qed-whatsapp.active {
  width: calc(100% - 20px);
  max-width: 545px;
}

.qed-whatsapp .qed-whatsapp-button .wa-show-closed { display: flex; }
.qed-whatsapp .qed-whatsapp-button .wa-show-open .fa {
  transform: scale(1) translateX(0);
}
.qed-whatsapp .qed-whatsapp-button .wa-show-open { 
  display: none;
  font-size: 1rem;
}
.qed-whatsapp.active .qed-whatsapp-button .wa-show-closed { display: none; }
.qed-whatsapp.active .qed-whatsapp-button .wa-show-open { display: flex; }

.qed-whatsapp-l-fixed { 
  
  position: fixed;
  bottom: 10px;
  left: 10px; }
.qed-whatsapp-r-fixed { 
  position: fixed;
  bottom: 10px;
  right: 10px; }
.qed-whatsapp-c-fixed {
  position: fixed;
  bottom: 10px;
  margin: 0;
  margin-left: 50%;
  transform: translateX(-50%);
}
.qed-whatsapp.active .qed-whatsapp-l-fixed, 
.qed-whatsapp.active .qed-whatsapp-r-fixed, 
.qed-whatsapp.active .qed-whatsapp-c-fixed {
  bottom: 70px;
}
.qed-whatsapp-bottom {
  bottom: 48px;
}
#story-content .qed-whatsapp p,
#content .qed-whatsapp p,
body .qed-whatsapp p { 
  text-align: center; 
  font-size: 1.0rem;
  color: white;
}
.qed-whatsapp .qed-whatsapp-links { display: none; }
.qed-whatsapp.active .qed-whatsapp-links { 
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem 2rem 2rem;
  gap: 2rem;
}

.qed-whatsapp-button {
/*  border: 1px solid var(--whatsapp);*/
  border-radius: 16px;
  background: var(--whatsapp);
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 4px 4px;
}
.qed-whatsapp-button .fa {
  font-size: 2.5rem;
  transform: translateX(12px) translateY(-1px) scale(1.1);
  transform: translateX(0px) translateY(0px) scale(1);
}
.qed-whatsapp-button p {
  font-size: 2.5rem;
  display: none;
  margin: 0;
  font-weight: 700;
  color: white;
}
.qed-whatsapp-button button {
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 2.4rem;
  border: 2px solid var(--whatsappbutton);
  background: var(--whatsappbutton);
  width: 100%;
  max-width: 160px;
  display: none;
}

.qed-whatsapp.active .qed-whatsapp-button button {
  width: auto;
  max-width: auto;
  padding: 0.0rem 0.0rem;
  background: none;
  border: 0;
}
.qed-whatsapp.active .qed-whatsapp-button p,
.qed-whatsapp:hover .qed-whatsapp-button p {
  display: none;
}


.qed-whatsapp.active .qed-whatsapp-button button,
.qed-whatsapp:hover .qed-whatsapp-button button {
  display: none;
}

.qed-whatsapp.active .qed-whatsapp-button p {
  display: flex;
}
.qed-whatsapp.active .qed-whatsapp-button .wa-show-open {
  display: flex;
}

.qed-whatsapp-button button:hover {
  border: 2px solid white;
}

.qed-whatsapp-btn {
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  border: 2px solid var(--whatsappbutton);
  background: var(--whatsappbutton);
  font-size: 1rem;
/*  width: 400px;*/
}
.qed-whatsapp-email button.qed-whatsapp-btn {
  color: white;
  padding: 0.6rem 1.4rem;
  border-radius: 2rem;
  border: 2px solid var(--whatsappbutton);
  background: var(--whatsappbutton);
  font-size: 1rem;
/*  width: 400px;*/
}
.qed-whatsapp-btn .fa {
  transform-origin: center;
  transform: scale(1.5) translateX(-4px);
  margin-right: 0.5rem;
}

.qed-whatsapp-btn:hover {
  border: 2px solid white;
}


.qed-whatsapp-qr {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  border-radius: 8px;
  border: 1px solid white;
  padding: 1rem;
  width: 450px;
}
.qed-whatsapp-qr p {
  width: 150px;
  margin: auto;
  font-weight: 700;
}
.qed-whatsapp-qr img {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 150px;
}
.qed-whatsapp-link {
  display: flex;
  flex-direction: column;
  width: 450px;
}
body.mobile .qed-whatsapp-link {
  width: 90%;
  text-align: center;
}
.qed-whatsapp-link-buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
body.mobile .qed-whatsapp-link-buttons {
  flex-direction: column;
}
.qed-whatsapp-link p {
  display: block;
  margin-bottom: 0.5rem;
}
.qed-whatsapp-link a {
  text-decoration: none;
}

.qed-whatsapp-email {
  display: none; 
  border-radius: 8px;
  border: 1px solid white;
  padding: 1rem 2rem;
  width: 450px;
}
.qed-whatsapp-email.active { display: flex; }
.qed-whatsapp-email .input {
  display: none;
}
.qed-whatsapp-email.active .input {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.qed-whatsapp-email.active .input .qed-whatsapp-error p {
  background: #d40404;
  margin-top: -1rem;
}
.qed-whatsapp-email .input label {
  margin-bottom: 1rem;
  font-size: 1rem;
  width: 100%;
  color: white;
}
.qed-whatsapp-email .input input {
  font-size: 1rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
}


.qed-whatsapp-email-sent { display: none; }
.qed-whatsapp-email.sent .qed-whatsapp-email-sent {
  display: flex;
}