:root {

    /* Variables: Colors
------------------------------------------------ */
    --color-yellow-rgb: 244, 237, 147;
    --color-green-rgb: 171, 217, 175;

    --color-blue: #004aad; /* rgb(0, 74, 173) */
    --color-yellow: rgb(var(--color-yellow-rgb));
    --color-green: rgb(var(--color-green-rgb));

    /*--color-blue-dark: #113163;*/

    --color-gray-light: #f8f6f4;


    /* #004aad */

    /* Variables: Font styles
 ------------------------------------------------ */

    /* font family */
    --font-family-montserrat: "Montserrat", sans-serif;
    --font-family-lato: "Lato", sans-serif;
    --font-family-quicksand: "Quicksand", sans-serif;

    /* line height */
    --line-height-100: 100%;
    --line-height-110: 110%;
    --line-height-120: 120%;
    --line-height-130: 130%;
    --line-height-140: 140%;
    --line-height-150: 150%;

    /* letter spacing */
    --letter-spacing-neg3: -0.03em;
    --letter-spacing-neg2: -0.02em;
    --letter-spacing-neg1: -0.01em;
    --letter-spacing-0: 0;
    --letter-spacing-1: 0.01em;
    --letter-spacing-2: 0.02em;
    --letter-spacing-3: 0.03em;
    --letter-spacing-4: 0.04em;
    --letter-spacing-5: 0.05em;
}

/** Titles **/
.ui-h1 {font-size: 51px; font-weight: 400; line-height: var(--line-height-110); letter-spacing: var(--letter-spacing-neg1);}
.ui-h2 {font-size: 39px; font-weight: 400; line-height: var(--line-height-110); letter-spacing: var(--letter-spacing-neg1);}
.ui-h3 {font-size: 30px; font-weight: 400; line-height: var(--line-height-110); letter-spacing: var(--letter-spacing-neg1);}
.ui-h4 {font-size: 24px; font-weight: 400; line-height: var(--line-height-120); letter-spacing: var(--letter-spacing-0);}

/** Texts **/
.ui-text-1 {font-size: 19px; font-weight: 400; line-height: var(--line-height-140); letter-spacing: var(--letter-spacing-3);}
.ui-text-2 {font-size: 17px; font-weight: 400; line-height: var(--line-height-140); letter-spacing: var(--letter-spacing-4);}
.ui-text-3 {font-size: 15px; font-weight: 400; line-height: var(--line-height-140); letter-spacing: var(--letter-spacing-1);}
.ui-text-4 {font-size: 13px; font-weight: 400; line-height: var(--line-height-140); letter-spacing: var(--letter-spacing-1);}
.ui-text-5 {font-size: 12px; font-weight: 400; line-height: var(--line-height-120); letter-spacing: var(--letter-spacing-1);}

@media (max-width: 768px) {
    .ui-h1 {font-size: 34px; font-weight: 400; line-height: var(--line-height-110); letter-spacing: var(--letter-spacing-neg1);}
    .ui-h3 {font-size: 24px; line-height: var(--line-height-120);}
}

@media (max-width: 600px) {
    .ui-h1 {font-size: 28px; font-weight: 400; line-height: var(--line-height-110); letter-spacing: var(--letter-spacing-neg1);}
    .ui-text-1 {font-size: 16px;}
    .ui-text-2 {font-size: 14px;}
    .ui-text-3 {font-size: 12px;}
    .ui-text-4 {font-size: 10px;}
    .ui-text-5 {font-size: 9px;}
}

.pvo-color-white {color: #fff;}


/* Global
------------------------------------------------ */
html, body {height: 100%;}
body {font-family: var(--font-family-quicksand); background: var(--color-gray-light); overflow: hidden; background: url('/img/background-homepage.png') no-repeat center center; background-size: cover;}
a {text-decoration: none;}
/*
body {background: #fff; font-family: var(--font-family-montserrat);}
ul {margin-bottom: 0; list-style: none; padding-left: 0;}
img {width: auto;}
p {margin: 0;}
*/



/** Navigation Header **/
/*
.pvo-navigation {position: relative; background: var(--color-blue);; height: 76px; border-bottom: 1px solid #ddd;}
.pvo-navigation .nav-brand svg {height: 50px; max-width: 96px; fill: #fff;}
.pvo-navigation ul {padding: 8px 0;}
.pvo-navigation ul + ul {padding: 12px 0; margin-left: 160px;}
.pvo-navigation ul + ul li a {margin-left: 30px;}
.pvo-navigation ul li {display: inline-block;}
.pvo-navigation ul li a {text-decoration: none; color: #fff; display: block; line-height: 42px; padding: 4px 12px; border-radius: 4px;}
.pvo-navigation ul li a:hover {color: #fff; background: rgba(0,0,0,0.1);}


.pvo-navigation-container {position: absolute; top: 59px; width: 300px; padding: 20px; background: #fff; border: 1px solid #fafafa; box-shadow: 0 1px 15px rgb(0 0 0 / 5%); }


.pvo-button {text-decoration: none; padding: 12px 40px; border: 1px solid #000; color: #000; background: #fff;}
.pvo-button--blue-dark {color: #000; background: #fff; border-color: #000;}
.pvo-button:hover {color: var(--color-blue); border-color: var(--color-blue);}
.pvo-button--blue-dark:hover {background: #fff; color: var(--color-blue-dark); border-color: #000;}


.pvo-svg-filigrane svg{height: 500px; width: 100%; fill: rgba(0,0,0,0.03); margin-top: -200px;}

.pvo-title-app .pvo-h1 {font-weight: 200; color: #000; margin-right: 8px;}
.pvo-title-app .pvo-h2 {font-weight: 800; color: var(--color-blue);}

.pvo-module-homepage {padding-bottom: 160px;}
.pvo-module-homepage .pvo-title-app {padding-bottom: 40px;}
.pvo-module-homepage .content img {max-width: 50%; border: 1px solid #f5f5f5; padding: 20px; margin-right: 40px;}
.pvo-module-homepage .content .ui-text-3 {padding-bottom: 40px;}


.pvo-footer {padding: 80px 0 20px; background: #27282c; color: #999;}
.pvo-footer ul li a {text-decoration: none; color: #999;}
.pvo-footer ul li a:hover {color: #ddd;}

.pvo-footer .partner-link {border-bottom: 1px dashed;}

.pvo-footer-navs {border-bottom: 1px solid #333; padding-bottom: 40px; margin-bottom: 40px;}
.pvo-footer-nav-title {color: #ddd; padding-bottom: 8px;}


.pvo-banner {background: var(--color-blue-dark); padding: 40px 0; margin-bottom: 160px;}
.pvo-banner a {text-decoration: none; }


.pvo-module-homepage-three-columns {padding-bottom: 160px;}

.pvo-module-homepage-three-columns .pvo-h4 {text-align: center; padding-bottom: 12px;}
.pvo-module-homepage-three-columns .pvo-text-3 {color: #777;}
*/

.ui-text-bg-blue {color: #fff; background: var(--color-blue); padding: 0 12px;}


.ui-logo {width: 110px; text-align: center;}
.ui-logo a {text-decoration: none;}
.ui-logo .title {font-family: var(--font-family-montserrat); font-size: 32px; line-height: 32px; font-weight: 700; color: var(--color-blue); transition: color 2s ease-in-out;}
.ui-logo .subtitle {font-family: var(--font-family-lato); font-size: 10px; line-height: 10px; font-weight: 300; letter-spacing: 0.03em; color: var(--color-blue); transition: color 2s ease-in-out;}

.ui-logo:hover .title {color: #000;}
.ui-logo:hover .subtitle {color: #000;}


.ui-banner-solution {text-align: center; padding: 32px 0; margin-top: 60px;}
.ui-banner-solution .title {font-size: 80px; line-height: 100px; font-family: var(--font-family-quicksand); text-transform: uppercase; font-weight: 600;}
.ui-banner-solution .subtitle {font-size: 45px; font-family: var(--font-family-quicksand);}

/**
 * Module : Clients List
 */
.ui-module-clients-list {padding-top: 60px; padding-bottom: 300px;}
.ui-module-clients-list .ui-h3 {text-transform: uppercase; padding: 32px 0; text-align: center;}
.ui-module-clients-list .ui-clients-list {position: relative;}
.ui-module-clients-list .ui-clients-list .ui-clients-list-container {position: relative; z-index: 1; padding: 32px; border-radius: 20px; background: rgba(255,255,255,0.5);}
.ui-module-clients-list .ui-clients-list .ui-clients-list-container .ui-clients-item {display: flex; padding: 48px;}
.ui-module-clients-list .ui-clients-list .ui-clients-list-container .ui-clients-item img {width: 100px; max-height: 48px;}

.ui-shape:after {transform: scale(1); transition: transform 0.4s ease-in-out;}
.ui-shape:hover::after {transform: scale(1.1);}

.ui-shape-trapeze {position: absolute; right: -75px; top: -125px; height: 250px; width: 100px; z-index: 0; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 90%);}
.ui-shape-circle {position: absolute; left: -150px; bottom: -200px; height: 300px; width: 300px; z-index: 0; clip-path: circle();}
.ui-shape-circle::after {content: ''; position: absolute; left: 25%; top: 25%; height: 50%; width: 50%; clip-path: circle();}

.ui-shape-color-green {background: var(--color-green);}
.ui-shape-color-yellow {background: var(--color-yellow);}

.ui-shape-circle.ui-shape-color-green {background: rgba(var(--color-green-rgb), 0.7);}
.ui-shape-circle.ui-shape-color-green:after {background: var(--color-green);}

.ui-shape-circle.ui-shape-color-yellow {background: rgba(var(--color-yellow-rgb), 0.7);}
.ui-shape-circle.ui-shape-color-yellow:after {background: var(--color-yellow);}




/**
 */
.ui-module-homepage-hero {position: relative; height: 100%;}
.ui-module-homepage-hero img {width: 100%;}
.ui-module-homepage-hero .module-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ui-module-homepage-hero .module-content .ui-h1 {color: #fff; max-width: 300px;}


.ui-navigation {position: fixed; top: 0; left: 0; width: 100%; z-index: 10; background: #fff; height: 80px;}
.ui-navigation nav {padding: 16px 0;}
.ui-navigation nav ul {list-style: none; padding-left: 0; margin-bottom: 0;}
.ui-navigation nav ul li a {display: inline-block; padding: 12px 20px; text-decoration: none; }

.ui-navigation-sub-nav {position: absolute; top: 80px; left: 0; width: 100%; display: none;}
.ui-navigation-sub-nav .sub-nav-content {background: #fff; padding: 28px;}
.ui-navigation-sub-nav.active {display: block;}


.ui-navigation-sub-nav .sub-nav-group {}
.ui-navigation-sub-nav .sub-nav-group .sub-nav-group-title {font-size: 17px; font-weight: 600; color: #000; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid #ddd;}
.ui-navigation-sub-nav .sub-nav-group ul {list-style: none; padding-left: 0; margin-bottom: 0;}
.ui-navigation-sub-nav .sub-nav-group ul li a {display: block; padding: 8px 0;  transition: color 0.3s ease-in-out;}
.ui-navigation-sub-nav .sub-nav-group ul li a .title {color: #000; font-size: 15px; font-weight: 600;}
.ui-navigation-sub-nav .sub-nav-group ul li a .subtitle {color: #000; font-size: 13px; font-weight: 400;}

.ui-navigation-sub-nav .sub-nav-group ul li a:hover .title {color: var(--color-blue);}


.ui-link {color: #666; border-radius: 4px; font-weight: 500; background: #fff; transition: all 0.3s ease-in-out;}
.ui-link:hover {color: #000; opacity: 0.9; background: var(--color-gray-light);}
.ui-link.active {color: #000;}

.ui-link-blue {color: #fff; background: var(--color-blue); }
.ui-link-blue:hover {color: #fff; opacity: 0.9; background: var(--color-blue);}


.module-masterclass-list {padding: 80px; background: #fff;}
.module-masterclass-list a {color: #000;}
.module-masterclass-list a:hover {color: var(--color-blue); border-bottom: 1px solid var(--color-blue);}

@media (max-width: 600px) {
    .module-masterclass-list {padding: 40px;}
    .ui-navigation {height: auto;}
    .ui-navigation nav ul li a {text-align: center;}

    .ui-module-homepage-hero .module-content {top: 40%; left: 30%; transform: translate(-20%, -50%);}
}


.ui-h3 .material-symbols-outlined {margin-right: 20px;}