:root {
    --green: #096868;
    --yellow: #e0a400;
    --yellow_flat: #d7a540;
    --dark: #201b4d;
}
*, ::after, ::before {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 20px; overflow-y: scroll; scroll-behavior: smooth;}
body {
    font-family: 'Roboto';
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 300;
    color: var(--dark);
}
.container {max-width: 52rem; margin: 0 auto; position: relative; padding: 0 2rem;}
.container.wider {max-width: 45.35rem;}
.container.wider svg {margin: 0 -1rem; width: calc(100% + 2rem)!important;}
.container.wider + .container {padding-top: 2rem;}
h1, h2, h3 {font-family: 'Roboto Condensed'; font-size: 2rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.5rem;}
h1 {margin-bottom: 1.25rem; line-height: 1;}
h3 {font-size: 1rem; font-family: 'Roboto'; font-weight: 500; margin-bottom: 0.25rem;}
p {margin-bottom: 1.4rem;}
a {color: var(--yellow); font-weight: normal; text-decoration: none;}
img {display: block; max-width: 100%;}

p a.back {position: relative; top: 1.5rem;}
p a.back::before,
.footercontent > div:nth-child(2) a::after,
p:last-child a:not(.back):first-child:last-child::after {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 0.7em;
    background: url(/img/right-arrow.svg) center center / contain no-repeat;
    vertical-align: middle;
    position: relative;
    bottom: 0.05em;
    transition: transform 0.15s ease-in-out;
}
p a.back::before {transform: scaleX(-1);}
.footercontent > div:nth-child(2) a:hover::after,
.hover p a::after,
p a:hover::after {transform: translateX(0.2rem);}
p a.back:hover::before {transform: scaleX(-1) translateX(0.2rem);}
.greenlinks a {color: var(--green); font-weight: 300;}
.greenlinks a.socialicon {margin-top: 0.75rem; display: inline-block;}
.greenlinks a.socialicon img {width: 2rem; height: auto;}

.custombackground {background: white; padding: 1rem 2rem 2rem; margin: 2.5rem -2rem;}
.custombackground h2 {color: var(--yellow); font-size: 2rem!important; line-height: 1.2; margin-bottom: 1.5rem; padding-top: 1.5rem!important;}
header .container {max-width: 47em; position: initial;}

@keyframes span1 {
    0% {transform: translateY(-0.75rem);}
    50% {transform: translateY(0rem);}
    100% {transform: rotate(-45deg);}
}
@keyframes span2 {
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes span3 {
    0% {transform: translateY(0.75rem);}
    50% {transform: translateY(0rem);}
    100% {transform: rotate(45deg);}
}

@keyframes appearfrombottom {
    0% {transform: translateY(1rem); opacity: 0;}
    100% {transform: translateY(0rem); opacity: 1;}
}

header {position: relative;}
header button {border: 0; background: none; width: 2.4rem; height: 2.4rem; position: absolute; right: 0; top: 1.25rem; display: none; margin-right: 2rem; cursor: pointer;}
header button span {height: 0.2rem; width: 100%; background: var(--yellow); position: absolute; top: calc(50% - 0.1rem); left: 0; transition: all 0.3s ease-in-out;}
header button span:nth-child(1) {transform: translateY(-0.75rem);}
header button span:nth-child(3) {transform: translateY(0.75rem) rotate(-0deg);}
.menuopen header button span:nth-child(1) {
    animation-name: span1;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.menuopen header button span:nth-child(2) {
    animation-name: span2;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.menuopen header button span:nth-child(3) {
    animation-name: span3;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@media (max-width: 650px) {
    header button {display: block;}
}

nav {display: block; background: white; font-family: 'Roboto Condensed'; font-weight: 400; padding: 1.2rem 0;}
nav > ul:nth-child(1) {display: flex; justify-content: center;}
nav > ul:first-child {align-items: center; gap: 4rem;}
nav > ul.language {display: flex; position: absolute; right: 2rem; gap: 0.5rem; top: 50%; transform: translateY(-50%);}
nav > ul.language li {list-style: none;}
nav > ul.language li a {margin: -0.25rem -0.25rem; padding: 0.25rem 0.25rem; display: block;}
nav > ul.language img {width: 0.9rem; height: auto;}
@media (max-width: 650px) {
    nav > ul.language {gap: 0.9rem;}
    nav > ul.language img {width: 1.5rem;}
    nav > ul.language li a {margin: -1rem -0.45rem; padding: 1rem 0.45rem;}
}
@media (min-width: 650px) {
    nav > ul.language li a:hover {background: #d7dee2;}
}

nav > ul:nth-child(1) li {list-style: none; position: relative; flex: 0 1 100%; text-align: center;}
nav > ul:nth-child(1) li span {display: inline-block; position: relative;}
nav > ul:nth-child(1) li.logo {padding: 0 1rem;}
nav > ul:nth-child(1) li.logo a {display: block;}
nav > ul:nth-child(1) li.logo img {width: 6.75rem; min-width: 6.75rem; height: auto;}
nav > ul:first-child > li:not(:last-child)::after {
    content: "";
    background: var(--yellow);
    width: 0.1rem;
    height: 0.9rem;
    position: absolute;
    top: 50%;
    margin-right: -2rem;
    right: 0;
    transform: translateY(-50%);
}
nav > ul:nth-child(1) li a {color: var(--green); text-decoration: none;}
nav > ul:nth-child(1) li a:hover,
nav > ul:nth-child(1) li.active > a,
nav > ul:nth-child(1) li.active > span > a {color: black;}
nav > ul:nth-child(1) ul {
    display: block; 
    position: absolute; 
    opacity: 0; 
    pointer-events: none; 
    background: white; 
    padding: 0.5rem 0 0.5rem;
    left: 0;
    margin-left: -1rem;
    transition: transform 0.25s ease-out, opacity 0.1s linear;
    transform: scaleY(0.85) translateY(-0.5rem);
    transform-origin: center top;
}
nav > ul:nth-child(1) ul li {white-space: nowrap; text-align: left;}
nav > ul:nth-child(1) ul li a {padding: 0.3rem 2rem 0.3rem 1rem; font-size: 0.8rem;}
nav > ul:nth-child(1) li:hover ul {opacity: 1; pointer-events: all; transform: translateY(0rem);}

nav > ul:nth-child(2) {
    display: none; 
    background: var(--green); 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: 99; 
    transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out; 
    padding-top: 8rem;
}
nav > ul:nth-child(2) li {list-style: none;}
nav > ul:nth-child(2) li.logo {position: absolute; top: 0; left: 1rem; margin: 1.2rem 0;}
nav > ul:nth-child(2) li.logo a {position: relative; padding-top: 0; padding-bottom: 0;}
nav > ul:nth-child(2) li.logo a::before {
    content: ""; 
    margin: 0 1rem; 
    width: 6.75rem; 
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background: url(/img/logo_inverted.png) center center / contain no-repeat;
}
nav > ul:nth-child(2) li.logo img {height: auto; width: 6.75rem; min-width: 6.75rem; display: block; opacity: 0;}
nav > ul:nth-child(2) li a {padding: 0.35rem 2rem; line-height: 1.3; display: block; color: white;}
nav > ul:nth-child(2) li.active > span > a,
nav > ul:nth-child(2) li.active > a,
nav > ul:nth-child(2) li a:hover {color: var(--yellow);}
nav > ul:nth-child(2) ul {padding-bottom: 0.75rem;}
nav > ul:nth-child(2) ul li a {padding-left: 4rem;}
body.menuopen nav > ul:nth-child(2) {transform: translateX(0%);}
body.menuopen header button {position: fixed; z-index: 99;}
body.menuopen header button span {background: white;}

@media (max-width: 1100px) {
    nav {margin-top: 6.5rem;}
    nav > ul:nth-child(1) li.logo {position: absolute; margin-top: -9.25rem;}
    nav > ul:nth-child(1) li.logo::after {content: none!important;}
    nav > ul.language {margin-top: -6.5rem;}
}
@media (max-width: 650px) {
    nav {margin: 0;}
    nav > ul:nth-child(1) {justify-content: flex-start;}
    nav > ul:first-child li {display: none;}
    nav > ul:nth-child(1) li.logo {left: 0; padding: 0; display: block; position: relative; margin: 0;}
    nav > ul.language {margin-top: 2rem; margin-right: 0rem;}
    nav > ul.language li {display: block;}
    nav > ul:nth-child(2) {display: block;}
}
  

main {display: block; font-size: 0.9rem;}
main section.content > div:not(.footercontent):last-child {padding-bottom: 6rem;}
main .container {max-width: 40rem;}
main section {display: block;}
main .container {padding: 3.75rem 2rem;}
main section.image {padding: 3rem 0; background: #d2e3e6; text-align: center;}
main section.image h1 {
    color: var(--green); 
    margin-bottom: 0;
}
main section.image .container {max-width: 40rem; padding-top: 0; padding-bottom: 0;}
main section.hasimage .container {max-width: 50rem;}
main section.hasimage {padding: 10rem 0;}
main section.image.hasimage h1 {
    font-weight: 700; 
    color: white; 
    font-size: 3.25rem; 
    text-shadow: 0rem 0rem 1rem rgba(0,0,0,0.5);
    opacity: 0;
    animation-delay: 0.5s;
    animation-name: appearfrombottom;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
main section.description {
    background: var(--yellow_flat); 
    font-size: 2rem; 
    color: white; 
    font-family: 'Roboto Condensed'; 
    padding: 0 0 0.75rem; 
    text-align: center; 
    line-height: 1.2;
}
main section.description .container {max-width: 38rem}
main section.content {padding-bottom: 0;}
main section.content p:first-child {font-weight: 400; font-size: 1rem; margin-bottom: 2rem;}
main section.content h2 {font-size: 1.4rem; padding-top: 1rem;}
main section.content h3 {padding-top: 0.5rem;}
main section.content ul {margin-left: 1rem; margin-bottom: 1.4rem;}
main section.content ol {margin-left: 1.5rem; margin-bottom: 1.4rem;}

body main section.content {background: #f3f6f8;}
body.transactions.single main section.content {background: linear-gradient(to bottom, #d2e3e6 15rem, #f3f6f8 15rem);}
@media (max-width: 900px) {
    body.transactions.single main section.content {background: linear-gradient(to bottom, #d2e3e6 calc(3.5rem + 25.5vw), #f3f6f8 calc(3.5rem + 25.5vw));}
}
@media (max-width: 500px) {
    body.transactions.single main section.content {background: linear-gradient(to bottom, #d2e3e6 calc(2.5rem + 25.5vw), #f3f6f8 calc(2.5rem + 25.5vw));}
}

body.transactions main section.content ul {
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1.5rem 3.5rem;
}
body.transactions main section.content ul li {list-style: none; position: relative;}
body.transactions main section.content ul li a > img {position: absolute; width: 10rem; top: 0; right: 0;}

.whitebg {background: white; overflow: auto;}

.solutionlist {
    margin: 1rem 0 0!important;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}
.solutionlist li {
    list-style: none; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-gap: 1rem 0;
    direction: rtl;
}
.solutionlist li > * {direction: ltr;}
.solutionlist li > div:nth-child(2) {padding-right: 2rem; display: flex; flex-direction: column; justify-content: center;}
.solutionlist li h2 {padding-top: 0!important;}
.solutionlist li p {margin-bottom: 1rem!important;}
.solutionlist li img {height: auto;}

div.transactionlist h2 {padding-bottom: 1rem; padding-top: 0!important; font-size: 1.8rem!important;}
ul.transactionlist {
    margin: 0 0 1rem!important;
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    grid-gap: 1.25rem;
}
ul.transactionlist li {list-style: none; background: white; transition: box-shadow 0.3s ease-in-out;}
ul.transactionlist li.hover {box-shadow: 0rem 0rem 0.75rem rgba(0,0,0,0.15);} 
ul.transactionlist li a {color: var(--dark); display: block; padding: 1.5rem 1.35rem;}
ul.transactionlist li p {font-weight: 300!important; font-size: 0.8rem!important; margin-bottom: 1rem!important;}
ul.transactionlist li p img {width: calc(100% - 1rem); aspect-ratio: 2.2; object-fit: contain; margin: 0 0.5rem; height: auto;}
ul.transactionlist li p:last-child {margin-bottom: 0!important;}

ul.peoplelist {margin: 3.5rem 0 3.5rem!important;}
ul.peoplelist > li {display: flex; font-size: 0.85rem;}
ul.peoplelist > li h2 {color: var(--green);}
ul.peoplelist > li h2 + h3 {
    color: var(--green); 
    position: relative; 
    bottom: 0.7rem; 
    font-weight: 300; 
    padding-bottom: 0.35rem;
    font-size: 0.9rem;
}
ul.peoplelist > li > div {width: 50%;}
ul.peoplelist > li > div:nth-child(2) {padding: 0 0 0 2rem; display: flex; flex-direction: column; justify-content: center;}
ul.peoplelist > li:nth-child(even) {flex-direction: row-reverse;}
ul.peoplelist > li:nth-child(even) > div:nth-child(2) {padding: 0 2rem 0 0;}

ul.peoplelist.single {margin: 0!important;}
ul.peoplelist.single > li h2 {padding-top: 0;}
ul.peoplelist li li {list-style: disc;}

@media (max-width: 700px) {
    ul.peoplelist > li:nth-child(even),
    ul.peoplelist > li {flex-direction: column; font-size: 0.9rem;}
    ul.peoplelist > li > div {width: 100%;}
    ul.peoplelist > li:nth-child(even) > div:nth-child(2),
    ul.peoplelist > li > div:nth-child(2) {padding: 1.75rem 0 2.5rem;}
    ul.peoplelist > li h2 {padding-top: 0;}
}

div.reviews {margin: -4rem -1rem 1rem; position: relative;}
div.reviews ul {
    display: flex!important; 
    overflow: auto; 
    flex-wrap: nowrap; 
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; 
    -ms-overflow-style: none; 
    scrollbar-width: none;
    margin: 0!important; 
    padding: 0!important;
    gap: 1rem!important;
}
div.reviews ul li {display: flex; width: 100%; min-width: 100%; position: relative;}
div.reviews ul li > div {width: 50%;}
div.reviews ul li > div:nth-child(1) {
    padding: 2.2rem 1.85rem; 
    background: var(--yellow_flat);
}
div.reviews ul li > div:nth-child(1) p {color: white; font-size: 0.9rem; font-weight: 300;}
div.reviews ul li > div:nth-child(1) .author {font-family: 'Roboto Condensed'; font-size: 1.5rem; line-height: 1.5;}
div.reviews ul li > div:nth-child(1) .function {font-family: 'Roboto Condensed'; font-size: 0.8rem; line-height: 1.5;}
div.reviews ul li > div:nth-child(2) {position: relative;}
div.reviews ul li > div:nth-child(2) img {width: 100%; height: 100%; object-fit: cover;}
div.reviews ol {display: none;}
div.reviews .prev, div.reviews .next {
    display: none; 
    user-select:none; 
    cursor: pointer; 
    font-size: 50px; 
    color: white; 
    position: absolute; 
    left: 0; 
    padding: 2.5rem 0 0 2.5rem; 
    top: 50%; 
    transform: translateY(-50%) rotate(-180deg) ; 
    z-index: 9; 
    line-height: 0;
    border-radius: 2.5rem;
    width: 0;
    overflow: hidden;
    margin-left: -1.25rem;
    background: #f3f6f8 url(/img/right-arrow.svg) center center / 0.85rem auto no-repeat;    
}
div.reviews .next {
    left: auto; 
    right: 0;
    margin-right: -1.25rem;
    transform: translateY(-50%) rotate(0);
}
@media (min-width: 1000px) {
    div.reviews .prev, div.reviews .next {margin-left: -2.5rem;}
    div.reviews .next {margin-right: -2.5rem;}
}
@media (max-width: 700px) {
    div.reviews ul li > div:nth-child(1) {width: 100%;}
    div.reviews ul li > div:nth-child(2) {display: none;}
}
@media (max-width: 500px) {
    div.reviews {margin-left: 0; margin-right: 0;}
}

.date {font-size: 0.8rem; padding-bottom: 0.15rem; margin-top: -1rem; color: var(--green); font-family: 'Roboto Condensed'; font-weight: 400;}
.date + h1 {color: var(--green);}

.footercontent {background: #d2e3e6; overflow: auto; display: flex;}
.footercontent > div {width: 50%; position: relative;}
.footercontent > div:nth-child(1) img {width: 100%; height: 100%; object-fit: cover;}
.footercontent > div:nth-child(1) img.mobile {display: none;}
.footercontent > div:nth-child(2) ul:nth-child(2) {margin-top: 0.5rem; margin-left: 0;}
.footercontent > div:nth-child(2) ul:nth-child(2) li {list-style: none!important;}
.footercontent > div:nth-child(2) {display: flex; flex-direction: column; justify-content: center; padding: 2rem 5.5vw 5vw; align-items: flex-start;}
.footercontent > div:nth-child(2) > * {max-width: 25rem; width: 100%;}
.footercontent > div:nth-child(2) h2 {color: var(--green);}

.footercontent.yellow {background: var(--yellow_flat); flex-direction: row-reverse; color: white;}
.footercontent.yellow a {color: white;}
.footercontent.yellow a::after {background-image: url(/img/right-arrow-white.svg)!important;}
.footercontent.yellow > div:nth-child(2) {align-items: flex-end;}


body.home section.content p:nth-child(2) a {float: right; width:10rem; position: relative; margin: 0 0 1rem 1rem;}
@media (max-width: 500px) {
    body.home section.content p:nth-child(2) a {float: none; margin: 0 0 1rem; display: block;}
}


@media (max-width: 700px) {
    .footercontent.yellow,
    .footercontent {flex-direction: column;}
    .footercontent > div {width: 100%;}
    .footercontent > div:nth-child(2) {padding: 2rem 2rem 3rem;}
    .footercontent > div:nth-child(1) img.mobile {display: block;}
    .footercontent > div:nth-child(1) img.desktop {display: none;}
}
@media (max-width: 500px) {
    .footercontent > div:nth-child(2) {padding: 2rem 1rem 3rem;}
}

footer {display: block; background: var(--green); color: white; padding: 3rem 0; font-size: 0.75rem; font-weight: 400; line-height: 1.9;}
footer .container {display: flex; max-width: 50rem; justify-content: space-between;}
footer > div.container > div:first-child img {width: 6.75rem; min-width: 6.75rem; height: auto;}
footer a {color: var(--yellow);}
footer ul li {list-style: none;}
footer ul li a {color: white; text-decoration: none;}
footer a.socialicon img {width: 2rem; height: auto}
footer h3 {color: white; font-size: 1.4rem; margin-bottom: 0.5rem;}

@media (max-width: 1100px) {
    footer .container {display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 2.5rem 2rem;}
}
@media (max-width: 500px) {
    nav ul.language {right: 1rem;}
    header button {margin-right: 1rem;}
    nav > ul:nth-child(2) li a,
    nav > ul:nth-child(2) ul li a,
    main .container, .container {padding-left: 1rem; padding-right: 1rem;}
    nav > ul:nth-child(2) li.logo {left: 0;}
    nav > ul:nth-child(2) ul li a {padding-left: 3rem;}
    .custombackground {padding-left: 1rem; padding-right: 1rem; margin-left: -1rem; margin-right: -1rem;}
    .container.wider svg {margin: 0 -0.5rem; width: calc(100% + 1rem)!important;}
    main .container {padding-top: 2.75rem; padding-bottom: 2.75rem;}
    main section.hasimage {padding: 8rem 0;}
}