/* --------------------------------------------------------------------------- GLOBAL UI */


/* --------------------------------------------------------- HEADER BAR */
.header-wrapper {width: 100%; height: 60px; background:rgba(47, 141, 200, 0.95); box-shadow: 0px 8px 48px rgba(0, 0, 0, 0.1); position: fixed; top: 0; z-index: 2;}
header {width: 1368px; height: 60px; margin: 0 auto; padding: 0 24px; display: flex;}
header p.p16-bold {margin: 18px 0 0;}
header p.p16-bold a {color: #FFF; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);}
header a.contact-link {display: block; border-radius: 2px; height: 36px; margin-left: auto; margin-top: 12px; font-weight: 700; font-size: 14px; line-height: 36px; padding: 0 20px; color: #FFF; background: rgba(255, 255, 255, 0.10); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);}
header a.contact-link:hover {background: rgba(255, 255, 255, 0.20); text-decoration: none;}

/* Header SVGs 
header .social-icons {display: flex; margin-left: auto; padding: 18px 0 0 0;}
header svg {box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); margin: 0 0 0 12px; fill: #FFFFFF; border-radius: 5px;}*/

/* --------------------------------------------------------- HEADER BAR LEAKBOT */
.black-template .header-wrapper {background:rgba(16, 16, 16, 0.95);}
.black-template .header-wrapper p.p16-bold a:hover {color: #B480F8;}
.black-template header a.contact-link {color: #FFF; background: rgba(255, 255, 255, 0.10);}
.black-template header a.contact-link:hover {background: rgba(255, 255, 255, 0.10);}


/* --------------------------------------------------------- HEADER BAR SARASIN */
.white-template .header-wrapper {background: rgba(255, 255, 255, 0.95); box-shadow: none;}
.white-template .header-wrapper p.p16-bold a {color: #0E2A3C; text-shadow: none;}
.white-template .header-wrapper p.p16-bold a:hover {color: #0E2A3C;}
.white-template header a.contact-link {color: #0E2A3C; background: rgba(255, 255, 255, 0.10); border-radius: 0; border: 1px solid #E0EEF7; text-shadow: none;}
.white-template header a.contact-link:hover {background: rgba(255, 255, 255, 0.10);}
/*.header-white svg {margin: 0 0 0 12px; fill: #0E2A3C; border-radius: 0; box-shadow: none;}*/

/* --------------------------------------------------------- HEADER BAR GURU */
.navy-template .header-wrapper {background:rgba(43, 61, 81, 0.95);}
.navy-template header a.contact-link {color: #FFF; background: rgba(19, 29, 40, 0.40);}
.navy-template header a.contact-link:hover {background: rgba(19, 29, 40, 0.67);}

/* --------------------------------------------------------- HEADER BAR STRUCTURE */
.structure-template .header-wrapper {background: #CDCDCD; box-shadow: none;}
.structure-template header p.p16-bold a {color: #000; text-shadow: none;}
.structure-template header p.p16-bold a:hover {color: #000;}
.structure-template header svg {fill: #000; border-radius: 5; box-shadow: none;}





/* --------------------------------------------------------- FOOTER */
footer.footer-main, footer.footer-sarasin {text-align: center; padding: 96px 0;}
footer.footer-main {background: #151515;}
.navy-template footer.footer-main {background: #1A2531;}
footer.footer-sarasin {background: #FFFFFF;}
footer p.p24-bold {margin: 18px auto;}
footer p.p12 {margin: 18px auto 0;}

/* --------------------------------------------------------- FOOTER SOCIAL ICONS */
.footer-social-icons {display: flex; width: fit-content; margin: 0 auto;}
.footer-social-icons svg {box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); margin: 0 6px; fill: #CFCFCF; border-radius: 5px;}
.white-template .footer-social-icons svg {box-shadow: none; margin: 0 6px; fill: #0E2A3C; border-radius: 0;}

/* --------------------------------------------------------- FOOTER LOGO */
footer.footer-main p.p24-bold a {color: #FFF; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);}
footer.footer-main p.p24-bold a:hover {color: #B480F8;}
.navy-template footer.footer-main p.p24-bold a:hover {color: #FFFFFF;}
footer.footer-sarasin p.p24-bold a {color: #0E2A3C; text-decoration: none;}
footer.footer-sarasin p.p24-bold a:hover {color: #0E2A3C;}





/* --------------------------------------------------------------------------- HOME PAGE */





/* --------------------------------------------------------- HOME PAGE INTRO BANNER */
.home-intro-wrapper {width: 100%; height: 335px; background: url(../images/site/large-background-images/wave-colour-bg.png) center #16191F; background-size: cover; box-shadow: 0px 8px 48px rgba(0, 0, 0, 0.1); padding: 156px 0 0 0; display: flex; flex-direction: column; text-align: center;}
.bar1-wrapper {width: fit-content; margin: 0 auto; height: 96px; padding: 0 0 0 59px;}
.bar1-wrapper h1 {padding: 4px 0 0 32px; height: 92px;}
.bar1 {background: rgba(16, 16, 16, 0.8); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); width: 618px; height: 96px; margin: -96px 0 0 0;}
.bar2-wrapper {width: fit-content; margin: 4px auto 0 auto; height: 96px; padding: 0 102px 0 0;}
.bar2-wrapper h1 {padding: 4px 0 0 0; height: 92px;}
.bar2 {background: rgba(16, 16, 16, 0.8); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); width: 915px; height: 96px; margin: -96px 0 0 105px;}
.bar3-wrapper, .bar4-wrapper {display: none;}
.mobile-smallest-intro {display: none;}

/* --------------------------------------------------------- HOME PAGE INTRO OPTIONS */
.options {margin: 48px auto 0 auto; padding: 0 0 0 45px; width: fit-content; height: 42px; display: flex;}
.download-button {margin: 0 24px 0 0;}
.status {display: flex; background: rgba(16, 16, 16, 0.8); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); padding: 0 24px;}
.light {background: #01C615; width: 12px; height: 12px; border-radius: 6px; margin: 15px 12px 0 0;}
.status p {font-weight: 700; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); line-height: 42px; margin: 0;}

/* --------------------------------------------------------- HOME PAGE USP BANNER */
.usp-banner-wrapper {width: 100%;}
.usp-banner {margin: 48px auto 0; background: #151515; width: 904px; border-radius: 4px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); overflow: visible;}
.usp-banner ul {margin: 0 auto; padding: 16px 24px 16px 24px; display: flex; width: fit-content; gap: 24px;}
.usp-banner ul li {background: none; margin: 0; padding: 0; font-size: 16px; text-transform: uppercase; color: #FFF; font-weight: 700;}
.usp-banner ul li img {margin-top: 10.5px;}

/* --------------------------------------------------------- HOME PAGE USP ANIMATION */
@keyframes flash-01 {0%, 100% {color: #FFF;} 50% {color: #B480F8; text-shadow: 0px 0px 32px #B480F8;}}
@keyframes flash-end {0%, 100% {color: #FFF;} 50% {color: #B480F8; text-shadow: 0px 0px 32px #B480F8;}}
.usp-banner ul li.flash-01 {animation: flash-01 1s ease 0s 1 normal, flash-end 1.25s ease-out 2.25s 1 normal;}
.usp-banner ul li.flash-02 {animation: flash-01 1s ease 0.25s 1 normal, flash-end 1.25s ease-out 2.25s 1 normal;}
.usp-banner ul li.flash-03 {animation: flash-01 1s ease 0.5s 1 normal, flash-end 1.25s ease-out 2.25s 1 normal;}
.usp-banner ul li.flash-04 {animation: flash-01 1s ease 0.75s 1 normal, flash-end 1.25s ease-out 2.25s 1 normal;}
.usp-banner ul li.flash-05 {animation: flash-01 1s ease 1s 1 normal, flash-end 1.25s ease-out 2.25s 1 normal;}
.usp-banner ul li.flash-06 {animation: flash-01 1s ease 1.25s 1 normal, flash-end 1.25s ease-out 2.25s 1 normal;}

/* --------------------------------------------------------- HOME PAGE CLIENTS BANNER */
.clients-banner-wrapper {width: 100%; padding: 24px 0 48px 0;}
.clients-banner {margin: 0 auto; width: 928px; padding: 0 12px; display: flex;}
.client-card {width: 208px; max-height: 96px; margin: 0 12px;}

/* --------------------------------------------------------- HOME PAGE DOWN BUTTON */
@keyframes down-button-bounce {0%, 100% {top: 745px;} 75% {top: 721px;}}
.down {animation: down-button-bounce 2s ease-in-out 3.5s 3 normal;}
.down {width: 40px; height: 40px; border-radius: 20px; background: #FFF; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); display: flex; position: absolute; top: 745px; left: 50%; transform: translate(-50%);}
a.anchor {display: block; position: relative; top: -124px; visibility: hidden;}

/* --------------------------------------------------------- HOME PAGE MINI BIO */
.mini-bio { padding: 86px 0 0 0;}
.mini-bio h2 {width: 672px; margin: 0 auto; text-align: center;}
.mini-bio p.p20 {width: 672px; margin: 15px auto 90px; text-align: center;}

/* --------------------------------------------------------- HOME PAGE STATS BANNER */
.stats-banner-wrapper {width: 100%; background: #232832; padding: 48px 0;}
.stats-banner {display: flex; margin: 0 auto; width: 1160px; padding: 0 12px;}
.stat-card {width: 362.66px; margin: 0 12px; padding: 41px 0 37px 0; background: #151515; border-radius: 4px;}
.stat-card p {text-align: center; margin: 0;}
.stat-card h2 {text-align: center; margin: 7px 0 0 0;}





/* --------------------------------------------------------- SECTION TITLE */
.section-title {display: inline-block; padding: 0 32px; height: 63px; line-height: 63px; margin: 0;}

/* --------------------------------------------------------- CASE STUDY TEASER CARDS */
.case-studies-wrapper, .case-studies-wrapper-guru {width: 100%; margin: 0 auto; padding: 48px 0;}
.case-studies-wrapper-guru {background: #2B3D51;}
.case-studies {width: 1368px; margin: 0 auto;}
.case-study-teaser-card {width: 1272px; padding: 48px; margin: 48px auto 0; display: flex;}
.case-study-teaser-card img {width: 624px; height: 404px; box-shadow: 8px 8px 48px rgba(0, 0, 0, 0.5); border-radius: 4px;}
.case-study-teaser-card img.teaser-image-sarasin {border-radius: 0; box-shadow: none;}
.case-study-teaser-content {padding: 12px 0 0 48px; display: flex; flex-direction: column;}
.case-study-teaser-content h2 {margin: 26px 0 22px;}
.case-study-teaser-content h2.h32 a {color: #FFF; text-decoration: none;}
.case-study-teaser-content h2.h32 a:hover {color: #CFCFCF;}
.case-study-teaser-content h2.h32.navy-sarasin a {color: #0E2A3C; text-decoration: none;}
.case-study-teaser-content h2.h32.navy-sarasin a:hover {color: #86949D;}
.case-study-teaser-content ul {width: fit-content;}
.case-study-teaser-content p {margin: 0 0 25px;}
.case-study-teaser-content a {margin-right: auto;}
.ctw-leakbot {background: #101010;}

/* --------------------------------------------------------- RIGHT SIDE CARD */
.right-side {padding: 12px 48px 0 0;}
.right-side h2, .right-side p {text-align: right;}
.right-side a {margin: 0 0 0 auto;}
.right-side ul {margin: 0 0 25px auto; justify-content: flex-end;}
.right-side ul li {margin: 0 0 0 6px;}

/* --------------------------------------------------------- ARTICLE TEASERS */
.article-teasers-wrapper {width: fit-content; margin: 0 auto; padding: 0 12px 24px;}
.article-teasers-wrapper .section-title {margin: 0 0 0 12px;}
.article-teasers-wrapper p.p12 a {color: #FFF;}
.article-teasers-wrapper p.p12 a:hover {color: #B480F8; text-decoration: none;}
.article-teasers {display: flex; margin: 48px 0 0 0;}
.article-teaser-card {width: 440px; margin: 0 12px;}
.article-teaser-card img {border-radius: 4px 4px 0 0; width: 440px; height: 227px;}
.article-teaser-card .content p.p12 {margin: 12px 0 10px 0;}
.article-teaser-card .content {padding: 16px 32px 32px;}
.article-teaser-card .content h2 {margin: 0 0 9px 0;}
.article-teaser-card .content h2 a {color: #FFF;}
.article-teaser-card .content h2 a:hover {color: #CFCFCF; text-decoration: none;}
.article-teaser-card .content ul.tags {margin: 0 0 8px 0;}
.article-teaser-card .content p.p16 {margin: 9px 0 27px 0;}

/* --------------------------------------------------------- WEAPONS BANNER */
.weapons-wrapper {width: 100%; text-align: center; padding: 8px 0 0 0;}
.weapon-cards {display: flex; width: fit-content; margin: 27px auto 48px;}
.weapon-card {width: 96px; height: 96px; margin: 0 12px;}
.weapon svg {width: 96px; height: 96px;}





/* --------------------------------------------------------------------------- CASE STUDY TEMPLATE */





/* --------------------------------------------------------- SCROLL INDICATOR */
.progress-container {position: fixed; top: 60px; z-index: 2; width: 100%; height: 2px; background: #282828;}
.progress-bar {height: 2px; width: 0%; background: #B480F8;}
.navy-template .progress-container {background: #131D28;}
.navy-template .progress-bar {background: #FFF;}
.white-template .progress-container {background: #E0EEF7;}
.white-template .progress-bar {background: #0E2A3C;}





/* --------------------------------------------------------- CASE STUDY INTRO WRAPPER */
.case-study-intro {width: 100%; padding: 0 0 48px 0;}
.case-study-intro-guru {background: #2B3D51 /*url(../images/site/large-background-images/guru-wave.png) no-repeat*/; background-size: cover;}
.case-study-intro-sarasin {border-bottom: 1px solid #E0EEF7;}
.case-study-intro-leakbot {background: url(../images/site/large-background-images/leakbot-wave.png) no-repeat, linear-gradient(180deg, #101010 0%, #282828 100%); background-size: cover;}

/* --------------------------------------------------------- CASE STUDY INTRO TTILE */
.case-study-title {width:1368px; margin: 0 auto; padding: 116px 0 0 0;}
.case-study-title h1 {margin: -10px 0 7px 0;}

/* --------------------------------------------------------- CASE STUDY HERO IMAGE WRAPPER */
.case-study-hero-image-wrapper {width: 1368px; height: 886px; margin: 23px auto 0 auto; position: relative;}
.case-study-hero-image-wrapper-guru {background: #1A2531; border-radius: 4px;}

/* --------------------------------------------------------- CASE STUDY HERO IMAGE */
.case-study-hero-image-wrapper img {width:1368px; height: 886px;}
.case-study-hero-image-wrapper img.hero-image-leakbot {border-radius: 4px; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);}
.case-study-hero-image-wrapper img.hero-image-guru {width:1368px; height: 1088px; position: absolute; margin-top: -29px;}
.case-study-hero-image-wrapper img.hero-image-sarasin {width:1366px; height: 884px; border: 1px solid #E0EEF7;}

/* --------------------------------------------------------- CASE STUDY HERO IMAGE CAPTION */
p.case-study-hero-image-caption {display:block; padding: 12px 24px; position: absolute; bottom: 8px; right: 24px; text-align: right;}

p.case-study-hero-image-caption-structure {background: #FFF;}
p.case-study-hero-image-caption-leakbot {background: rgba(16, 16, 16, 0.80); border-radius: 4px; color: #FFF;}
p.case-study-hero-image-caption-guru {background: rgba(43, 61, 81, 0.80); border-radius: 4px; color: #FFF;}
p.case-study-hero-image-caption-sarasin {background: rgba(255, 255, 255, 0.90); color: #0E2A3C; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.10);}





/* --------------------------------------------------------- CASE STUDY OVERVIEW TITLE */
p.overview-title {display:block; width: 1304px; margin: 48px auto 24px auto; padding: 22px 32px;}
p.overview-title-structure {background: #cdcdcd;}
p.overview-title-leakbot {background: #151515; border-radius: 4px; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); color: #FFF;}
p.overview-title-guru {background: #1A2531; border-radius: 4px; color: #FFF;}
p.overview-title-sarasin {background: #FFF; color:#0E2A3C; border: 1px solid #E0EEF7; padding: 20px 30px;}

/* --------------------------------------------------------- CASE STUDY OVERVIEW CARDS */
.overview-cards-wrapper {display: flex; gap: 24px; width: 1368px; margin: 0 auto;}

.overview-card {width: 376px; padding: 21px 32px 32px 32px;}
.overview-card-structure {background: #cdcdcd;}
.overview-card-leakbot {background: #151515; border-radius: 4px; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);}
.overview-card-guru {background: #1A2531; border-radius: 4px;}
.overview-card-sarasin {background: #FFF; border: 1px solid #E0EEF7; padding: 20px 31px 31px 31px;}

.overview-card p {margin-bottom: 11px;}
.overview-card p.p20 {margin: 0;}

/* --------------------------------------------------------- CASE STUDY OVERVIEW MEGA CARD */
.mega-overview-card {width: 1304px; padding: 21px 32px 40px 32px; margin: 24px auto 0 auto; display: flex; gap: 56px;}
.mega-overview-card-structure {background: #cdcdcd;}
.mega-overview-card-leakbot {background: #151515; border-radius: 4px; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);}
.mega-overview-card-guru {background: #1A2531; border-radius: 4px;}
.mega-overview-card-sarasin {background: #FFF; border: 1px solid #E0EEF7; padding: 20px 31px 26px 31px;}

.mega-overview-card .left {width: 408px;}
.mega-overview-card .right {width: 744px; padding-bottom: 13px;}

.mega-overview-card .left p.p20-bold {margin-bottom:11px;}





/* --------------------------------------------------------- CASE STUDY SECTION */
.cs-section {width: 100%; padding: 96px 0;}
.cs-section p.p24-bold {margin-top: -9px; margin-bottom: -5px;}





/* --------------------------------------------------------- CASE STUDY ABOUT CLIENT */
.client-wrapper {width: 1136px; display: flex; gap: 140px; margin: 0 auto;}
.client-wrapper .client-text {width: 672px;}
.client-wrapper .client-logo, .client-wrapper .client-logo img {width: 324px; height: 324px;}

.client-wrapper .guru-logo {margin: -10px 0 10px 0;}
.client-wrapper .guru-logo img {transform: rotate(4deg); margin-top: -313px; margin-left: 10px;}
.client-wrapper .guru-logo .rotate-bg {transform: rotate(-4deg); width: 324px; height: 324px; border-radius: 4px; background: #131D28;}

.client-wrapper .leakbot-logo {margin: -10px 0 10px 0;}
.client-wrapper .leakbot-logo img {transform: rotate(4deg); margin-top: -313px; margin-left: 10px;}
.client-wrapper .leakbot-logo .rotate-bg {transform: rotate(-4deg); width: 324px; height: 324px; border-radius: 4px; background: #232832;}






/* --------------------------------------------------------- CASE STUDY BRIEF */
.brief-wrapper {width: 1136px; margin: 0 auto; display: flex; gap: 48px;}
.brief-wrapper .brief-text {width: 672px;}
.brief-wrapper .brief-image {width: 416px; height: 557px; overflow: visible;}
.brief-wrapper .brief-image img {width: 763px; height: 557px;}
.mobile-image-and-plan {display: none;}

body.navy-template .brief-wrapper .brief-image img {border-radius: 4px;}

.brief-wrapper .brief-image img.sarasin {width: 649px; height: 509px; padding: 23px; border: 1px solid #E0EEF7;}





/* --------------------------------------------------------- CASE STUDY SECTION MEDIA RIGHT */
.media-right-wrapper {width: 1136px; margin: 0 auto; display: flex; gap: 68px;}
.media-right-wrapper .text {width: 512px;}
.media-right-wrapper .media {width: 556px;}
.media-right-wrapper .media img {width: 556px; height: auto;}
p.caption-basic {margin: 18px 0 0 0;}

body.navy-template .media-right-wrapper .media img {box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.20);}





/* --------------------------------------------------------- CASE STUDY SECTION MEDIA LEFT */
.media-left-wrapper {width: 1136px; margin: 0 auto; display: flex; gap: 48px;}
.media-left-wrapper .media {width: 556px;}
.media-left-wrapper .media img {width: 556px; height: auto;}
.media-left-wrapper .text {width: 532px;}





/* --------------------------------------------------------- CASE STUDY SECTION FULL WIDTH */
.full-width-wrapper {width: 1136px; margin: 0 auto;}





/* --------------------------------------------------------- CASE STUDY SECTION TWO THIRDS */
.two-thirds-wrapper {width: 1136px; margin: 0 auto;}
.two-thirds-wrapper .text {width: 788px;}
.two-thirds-wrapper .media {width: 904px; margin: 52px 0 0 0;}
.two-thirds-wrapper .media .images {width: 904px; display: flex; gap: 24px;}
.two-thirds-wrapper .media .images img {width: 440px; height: auto;}





/* --------------------------------------------------------- CASE STUDY SECTION SINGLE COLUMN */
.single-column-wrapper {width: 1136px; margin: 0 auto; display: flex; flex-direction: column; gap: 35px;}
.single-column-wrapper .text {width: 556px; margin: 0;}
.single-column-wrapper .media {width: 556px; display: flex; gap: 0; flex-direction: column;}
.single-column-wrapper .media img {width: 556px; height: auto;}





/* --------------------------------------------------------- CASE STUDY RETRO */
.retro-wrapper {width: 1252px; margin: 0 auto; padding:0 0 0 116px; position: relative;}
.retro-wrapper .solved {width: 556px;}
.retro-wrapper hr {width: 1136px; margin: 24px 0 47px 0;}
/*.retro-wrapper .testimonial {width: 904px;}
.retro-wrapper .testimonial .avatar-and-text {width: 904px; display: flex; gap: 24px; margin: 9px 0 0 0;}
.retro-wrapper .testimonial .avatar-and-text img {width: 72px; height: 72px; margin: 19px 0 0 0;}*/
.retro-wrapper .takeaways {width: 904px;}
.retro-wrapper .takeaways .icon-and-text {width: 904px; display: flex; gap: 24px; margin: 9px 0 0 0;}
.retro-wrapper .takeaways .icon-and-text img {width: 72px; height: 72px; margin: 19px 0 0 0;}
.retro-wrapper img.final {position: absolute; top: -120px; right: 0; width: 714px; height: 528px;}
body.white-template .retro-wrapper img {border: none;}





/* --------------------------------------------------------- CASE STUDY DOWN BAR */
.down-bar-leakbot {border-radius: 4px; background: url(../images/site/down-arrows/leakbot.svg) #101010;}
.down-bar-sarasin {border-radius: 0; background: url(../images/site/down-arrows/sarasin.svg) #FFFFFF; border: 1px solid #E0EEF7;}
.down-bar-guru {border-radius: 4px; background: url(../images/site/down-arrows/guru.svg) #2B3D51; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.20);}
.down-bar-leakbot, .down-bar-sarasin, .down-bar-guru {width: 1368px; height: 48px; margin: 0 auto; background-repeat: no-repeat; background-position: center;}





/* --------------------------------------------------------- GURU ZOOM THUMBNAILS */
.image-thumbnails {display: flex; gap: 4px; margin-top: 44px;}
.image-thumbnails img {width: 177px; height: 111px; border-radius: 0 !important; transition: transform .2s; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.20);}
.image-thumbnails img:hover {transform: scale(2.5); border-radius: 2px !important;}





/* --------------------------------------------------------- GURU BEST PRACTICE LOGO GRID */
.best-practice-logos {width: 100%; flex-basis: 48.95%; display: flex; gap: 4px;  flex-wrap: wrap;}
.best-practice-logos img {width: 276px !important; height: auto; background: #2B3D51; border-radius: 0 !important; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.20);}
img.bp-img-01 {border-radius: 4px 0 0 0 !important;}
img.bp-img-02 {border-radius: 0 4px 0 0 !important;}
img.bp-img-03 {border-radius: 0 !important;}
img.bp-img-04 {border-radius: 0 !important;}
img.bp-img-05 {border-radius: 0 0 0 4px !important;}
img.bp-img-06 {border-radius: 0 0 4px 0 !important;}





/* --------------------------------------------------------- IMAGE GRID */
.image-grid {display: flex; flex-direction: row; gap: 32px; width: 100%; flex-wrap: wrap; margin: 52px 0 42px 0;}
.image-grid img {width: 552px; height: auto; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.20);}





/* --------------------------------------------------------- FIGMA BOX */
.figma-box {width: auto; padding: 32px 32px 26px 32px; display: flex; flex-direction: column; gap: 8px; background: #131D28; border-radius: 4px; margin: 52px 0 0 0;}
.figma-box img {width: 112px; height: 40px;}
.figma-box p {padding: 0; margin: 0;}





/* --------------------------------------------------------- POST BOX 01 */
.post-box-01 {padding: 25px 32px 26px 32px; background: #131D28; border-radius: 4px; margin: 24px 0 0 0; display: inline-block;}
.post-box-01 p {padding: 0; margin: 0;}
.post-box-01 p a {color: #029EDD; font-weight: 700;}



/* --------------------------------------------------------- HIDE MOBILE TABLE */
.mobile-table-wrapper {display: none;}





/* --------------------------------------------------------- UI DESIGN GURU */
.ui-design-guru {width: 1136px; display: flex; flex-direction: column; gap: 96px; margin: 96px auto 0 auto;}
.ui-design-guru .group {width: 1136px; display: flex; flex-direction: column; gap: 32px;}
.ui-design-guru .group img {width: 1136px; height: 711px; box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.20);}
.ui-design-guru .group .big-box-bullet-wrapper {margin: 0;}
.ui-design-guru .group .row {display: flex; flex-direction: row; gap: 24px;}
.ui-design-guru .group .row img {width: 266px; height: 167px; transition: transform .2s;}
.ui-design-guru .group .row img:hover {transform: scale(1.5);}





/* --------------------------------------------------------- SARASIN INVESTORS ROW */
.investors {display: flex; width: auto; justify-content: space-between; margin-top: 36px;}
.investors img {border: none !important; width: 64px; height: 64px;}





/* --------------------------------------------------------- SARASIN JOURNEY ROW */
.journey {display: flex; width: auto; gap: 4px; margin-top: 36px; overflow: hidden; align-items: center;}
.journey img {border: none !important; width: 64px; height: 64px;}
.journey img.arrow {width: 40px; height: 40px;}
.journey .line {width: 100%; height: 0.75px; background: #0E2A3C;}





/* --------------------------------------------------------- CALL OUT BOX SARASIN */
.call-out-box-sarasin {width: auto; padding: 31px 31px 25px 31px; display: flex; flex-direction: column; gap: 8px; margin: 47px 0 0 0; border: 1px solid #E0EEF7;}
.call-out-box-sarasin p {padding: 0; margin: 0;}




/* --------------------------------------------------------- SARASIN ARTWORK BG */
.sarasin-artwork-bg {background: url(../images/media/case-studies/sarasin/artwork-bg.png) no-repeat top right; background-size:contain;}





/* --------------------------------------------------------- UI DESIGN SARASIN */
.ui-design-sarasin {width: 1368px; margin: 0 auto;}
.ui-design-sarasin .text {width: 672px; margin: 0 auto; text-align: center;}
.ui-design-sarasin .designs {width:1368px; display: flex; flex-direction: column; gap: 90px; margin: 100px auto 0 auto;}
.ui-design-sarasin .designs .group {display: flex; flex-direction: column; gap: 0;}
.ui-design-sarasin .designs img {width: 1368px; height: 692px; border: none;}
.ui-design-sarasin .designs p {margin: 0 auto; padding:0; text-align: center; width: 1000px;}





/* --------------------------------------------------------- UI DESIGN LEAKBOT */
.ui-design-leakbot {width: 1136px; margin: 0 auto;}
.ui-design-leakbot .text {width: 1136px; margin: 0 auto;}
.ui-design-leakbot .designs {width:1136px; display: flex; flex-direction: column; gap: 96px; margin: 100px auto 0 auto;}
.ui-design-leakbot .designs .group {display: flex; flex-direction: column; gap: 24px;}
.ui-design-leakbot .designs img {width: 1136px; height: 712px;}
.ui-design-leakbot .designs p {width: auto;}





/* --------------------------------------------------------- LEAKBOT TABLET APP IFRAME */
.tablet-bg {width: 1120px; height: 784px; padding: 16px 0 0 64px; margin: 96px auto; background: url(../images/site/large-background-images/ipad.png); background-size: cover;}
.tablet-bg iframe {border: none;}





/* --------------------------------------------------------- CASE STUDY SECTION TITLE */

/* Wrapper structure */
.project-title-wrapper-structure,
.project-title-wrapper-main,
.project-title-wrapper-guru,
.project-title-wrapper-sarasin
{width: 100%;}

/* Wrapper style */
.project-title-wrapper-structure {background: #FFF;}
.project-title-wrapper-main {background: #101010;}
.project-title-wrapper-guru {background: #2B3D51;}
.project-title-wrapper-sarasin {background: #FFF; border-top:1px solid #E0EEF7; border-bottom:1px solid #E0EEF7;}

/* Content structure */
.project-title-content {width: 1136px; margin: 0 auto; padding: 116.5px 0 93.5px 0; display: flex; flex-direction: column;}

.project-title-content p.pt-tag {margin: 0; line-height: 0;}
.project-title-content p.pt-title {margin: 22.5px 0 0 0; line-height: 83px;}

.project-title-content p.pt-tag span {padding: 12px 24px; -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;}
.project-title-content p.pt-title span {padding: 12px 24px 11px 24px; -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone;}

/* Remove 1px for Sarasin text */
.project-title-wrapper-sarasin .project-title-content p.pt-tag span {padding: 11px 23px;}
.project-title-wrapper-sarasin .project-title-content p.pt-title span {padding: 11px 23px 10px 23px;}

/* Content style - structure */
.project-title-content p.pt-tag span.structure {color: #000; background: #CDCDCD;}
.project-title-content p.pt-title span.structure {color: #000; background: #CDCDCD;}

/* Content style - guru 01 */
.project-title-content p.pt-tag span.guru-01 {color: #D5D8DC; background: #1C2835; border-radius: 4px;}
.project-title-content p.pt-title span.guru-01 {color: #FFF; background: #1C2835; border-radius: 4px;}

/* Content style - guru 02 */
.project-title-content p.pt-tag span.guru-02 {color: #D5D8DC; background: #1D2936; border-radius: 4px;}
.project-title-content p.pt-title span.guru-02 {color: #FFF; background: #1D2936; border-radius: 4px;}

/* Content style - guru 03 */
.project-title-content p.pt-tag span.guru-03 {color: #D5D8DC; background: #212E3D; border-radius: 4px;}
.project-title-content p.pt-title span.guru-03 {color: #FFF; background: #212E3D; border-radius: 4px;}

/* Content style - guru 04 */
.project-title-content p.pt-tag span.guru-04 {color: #D5D8DC; background: #22303F; border-radius: 4px;}
.project-title-content p.pt-title span.guru-04 {color: #FFF; background: #22303F; border-radius: 4px;}

/* Content style - main / leakbot */
.project-title-content p.pt-tag span.main {color: #B480F8; background: #232832; border-radius: 4px;}
.project-title-content p.pt-title span.main {color: #FFF; background: #232832; border-radius: 4px;}

/* Content style - sarasin */
.project-title-content p.pt-tag span.sarasin {color: #0E2A3C; background: #FFF; border: 1px solid #E0EEF7;}
.project-title-content p.pt-title span.sarasin {color: #0E2A3C; background: #FFF; border: 1px solid #E0EEF7;}





/* --------------------------------------------------------------------------- QUICK CASE STUDY TEMPLATE */

/* Prevent header from sticking */
.scrolling-header .header-wrapper {position:relative;}

/* Hide scroll indicator until mobile */
.scrolling-header .progress-container {display: none;}

/* Scroll bar */
.structure-template .progress-container {background: #FFF;}
.structure-template .progress-bar {background: #000;}

/* Title */
.quick-case-study-title {width: 1368px; margin: 67px auto 31px auto;}
.quick-case-study-title p.p12-bold-upper {margin-bottom: 1px;}

/* Body wrapper */
.quick-case-study-body {display: flex; gap: 24px; width: 1368px; margin: 0 auto; padding-bottom: 48px;}

/* Overview cards */
.quick-case-study-body .overview-cards-wrapper {display: flex; flex-direction: column; gap: 2px; width: 440px; order: 1; overflow: hidden; border-radius: 4px;}
.quick-case-study-body .overview-cards-wrapper .overview-card {padding: 5px 25px 16px 25px; width: 390px; overflow-wrap: break-word;}
.quick-case-study-body .overview-cards-wrapper .overview-card p.p20 {margin: 1px 0 8px 0;}
.structure-template .quick-case-study-body .overview-cards-wrapper .overview-card {background: #CDCDCD;}
@media only screen and (max-width: 1415px) {.quick-case-study-body .overview-cards-wrapper .overview-card {border-radius: 4px;}}

/* Swiper width */
.swiper {width: 904px; order: 2;}

/* Swiper image */
.swiper-slide img {width: 904px; height: 566px; border-radius: 4px;}

/* Swiper text */
.swiper-slide p.h32 span {font-family: 'Open Sans', sans-serif;; font-size: 20px; line-height: 28px; margin-right: 8px; color: #000;}
.swiper-slide p.h32 {margin: 30px 0 0 0;}
.swiper-slide p.p20 {margin: 8px 0 0 0;}
@media only screen and (max-width: 767px) {.swiper-slide p.h32::before {content: url('../images/site/link-arrow/structure/link-arrow.svg'); width: 8px; height: 30px; display: block;}}

/* Pagination */
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {top: 528px; left: 20px; height: 8px; width: fit-content;}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {background: #000; opacity: 1; margin: 0 4px;}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #fff; opacity: 1; margin: 0 4px;}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet:focus, .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:focus {outline: none;}

/* Navigation */
.swiper-button-prev {left: 782px; top: 515px;}
.swiper-button-next {right: 24px; top: 515px;}
.swiper-button-prev, .swiper-button-prev.swiper-button-disabled {border-radius: 4px 0 0 4px;}
.swiper-button-next, .swiper-button-next.swiper-button-disabled {border-radius: 0 4px 4px 0;}
.swiper-button-prev, .swiper-button-next, .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {background: #fff; opacity: 1; width: 48px; height: 48px;}
.swiper-button-prev:focus, .swiper-button-next:focus, .swiper-button-prev.swiper-button-disabled:focus, .swiper-button-next.swiper-button-disabled:focus {outline: none;}

/* Navigation arrows */
.swiper-button-prev:after {background: url(../images/site/slider-arrows/structure/previous-arrow.svg) no-repeat 13px center; width: 48px; height: 48px; color: rgba(255, 255, 255, 0.00);}
.swiper-button-next:after {background: url(../images/site/slider-arrows/structure/next-arrow.svg) no-repeat 17px center; width: 48px; height: 48px; color: rgba(255, 255, 255, 0.00);}
.swiper-button-prev:hover, .swiper-button-next:hover {opacity: .75;}


/* Navigation arrows disabled */
.swiper-button-prev.swiper-button-disabled:after {background: url(../images/site/slider-arrows/structure/previous-arrow-disabled.svg) no-repeat 13px center;}
.swiper-button-next.swiper-button-disabled:after {background: url(../images/site/slider-arrows/structure/next-arrow-disabled.svg) no-repeat 17px center;}

/* QCS navigation */
.more-qcs-wrapper {width: 100%; background: #cdcdcd;}
.more-qcs {width: 1368px; margin: 0 auto; display: flex; padding: 48px 0; justify-content: space-between;}
.more-qcs-wrapper p.p24-bold {display: inline-block; margin: 0; padding: 0 24px; background: #FFF; align-self: start; line-height: 65px; border-radius: 4px;}
.qcs-nav {display: flex; gap: 2px; padding: 9px 0 0 0;}
.qcs-nav a {background: #FFF; padding: 23px 24px 24px 24px; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 20px; line-height: 0; font-weight: 700; color: #000; align-self: start;}
.qcs-nav a:hover {color: #CDCDCD; text-decoration: none;}
.qcs-nav a.prev {border-radius: 4px 0 0 4px;}
.qcs-nav a.next {border-radius: 0 4px 4px 0;}

/* Next case study */
.next-cs-wrapper {width: 100%; background: #cdcdcd;}
.next-cs {width: 1368px; margin: 0 auto; display: flex; padding: 48px 0; justify-content: right;}
.next-cs a {background: #FFF; padding: 23px 24px 24px 24px; display: inline-block; font-family: 'Open Sans', sans-serif; font-size: 20px; line-height: 0; font-weight: 700; color: #000; border-radius: 4px;}
.next-cs a:hover {color: #000; text-decoration: none;}

/* Footer min */
.footer-min-wrapper {width: 100%; background: #FFF;}
.footer-min-wrapper footer {width: 1368px; margin: 0 auto; display: flex; padding: 18px 0 17px 0;}
.footer-min-wrapper footer a {margin: 6px 0 6px auto; display: block; font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 0; font-weight: 700; color: #000; padding: 10px 22px 10px 10px; background: url(../images/site/home-icons/home-structure.svg) no-repeat; background-position: right 0;}
.footer-min-wrapper footer a:hover {text-decoration: none;}





/* --------------------------------------------------------------------------- IMAGE MODAL */
.navy-template .modal {background: rgba(26, 37, 49, 0.9);}
.navy-template .modal p.p16 {color: #FFF;}

.black-template .modal {background: rgba(0, 0, 0, 0.9);}
.black-template .modal p.p16 {color: #FFF;}

.modal {z-index: 3; display: none; padding-top: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; cursor: pointer;}
.modal p.p16 {text-align: center; margin: 19px 0 18px 0; cursor: pointer;}
.modal-content {margin: auto; position: relative; padding: 0; outline: 0; width: fit-content;}
.modal-content img {width: 1200px; height: auto;}
.magnifying-glass {cursor: pointer;}

@media only screen and (max-width: 1415px) {.modal-content img {width: 992px;}}
@media only screen and (max-width: 1023px) {.modal-content img {width: 736px;}}
@media only screen and (max-width: 1023px) {.modal-content img {width: 736px;}}
@media only screen and (max-width: 767px) {.modal-content img {width: 100%;} .modal-content{padding: 0 16px;}}
@media only screen and (max-width: 1023px) {.navy-template .modal {display: none !important;} .navy-template .magnifying-glass {cursor: default;}}