@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
* {
font-family: 'Teachers', sans-serif;
}
*:focus {
outline: 0;
}
p strong {
font-weight: 500;
}
html {
font-size: 100%;
scroll-behavior: smooth;
}
ul, ol {
margin: 0;
}
a, a:link, a:hover, a:focus, a:active {
text-decoration: none;
outline: 0;
-webkit-tap-highlight-color: transparent;
}
img {
max-width: 100%;
height: auto;
}
section {
margin: 150px 0;
}
header {
position: fixed;
top: 0;
background: #4127A3;
width: 100%;
height: 84px;
padding: 25px 0;
z-index: 10;
}
header .logo {
text-transform: uppercase;
}
header a { 
font-size: clamp(18px, 2vw, 24px);
color: #fff;   
font-weight: 400;
}
header ul {
list-style: none;
}
header ul li:not(:last-child) {
margin-right: 30px;
}
header ul li a {
position: relative;
font-family: 'Source Serif 4', serif;
font-weight: 400;
}
header ul li a:before {
content: "";
position: absolute;
left: 0;
bottom: -3px;
background: #fff;
width: 0;
height: 1px;
transition: all 0.3s;
}
header ul li a:hover::before {
width: 100%;
}
header .lang-toggle {
line-height: 1;
}
header .lang-toggle:before {
content: none;
}
header .lang ul {
display: none;
background: #4127A3;
padding: 20px;
}
header .lang.active ul {
display: block;
}
header .lang ul {
position: absolute;
top: 84px;
right: 60px;
}
header .lang ul li:not(:last-child) {
margin: 0 0 20px 0;
}
header .lang ul li {
display: block;
}
header .lang ul a {
display: flex;
justify-content: flex-end;
gap: 25px;
text-align: right;
}
header .lang ul a:before {
content: none;
}
.nav-toggle {
display: none;
position: relative;
height: 20px;
width: 26px;
cursor: pointer;
}
.nav-toggle .bar {
position: absolute;
left: 50%;
width: 100%;
height: 2px;
background: #fff;
border-radius: 10px;
transition: all 0.3s;
}
.nav-toggle .bar.bar1 {
top: 0;
transform: translateX(-50%);
}
.nav-toggle .bar.bar2 {
top: 50%;
transform: translate(-50%, -50%);
}
.nav-toggle .bar.bar3 {
bottom: 0;
transform: translateX(-50%);
}
.nav-mob-active .nav-toggle .bar1 { 
top: 50%; 
transform: translate(-50%, 0) rotate(45deg);
}
.nav-mob-active .nav-toggle .bar2 { 
opacity: 0; 
}
.nav-mob-active .nav-toggle .bar3 { 
top: 50%;
bottom: auto; 
transform: translate(-50%, 0) rotate(-45deg); 
} 
.hero {
position: relative;
margin: 84px 0 150px 0;
}
.hero-text {
margin-top: 18vw;
}
.hero p {
font-size: clamp(22px, 2vw, 32px);
color: #4127A3;
margin-bottom: 40px;
}
.hero h1 {
font-family: 'Source Serif 4', serif;
font-size: clamp(34px, 4vw, 64px);
font-weight: 400;
line-height: 1.2;
text-wrap: balance;
}
.hero .hero-img {
width: 100%;
}
.hero h1 em { 
font-family: 'Source Serif 4', serif;
font-weight: 500;
}
.hero .line1-img {
position: absolute;
top: -130px;
left: -40px;
}
.hero .line2-img {
position: absolute;
top: -130px;
left: 400px;
}
.hero .line3-img {
position: absolute;
bottom: 0;
left: 0;
}
.section-title {
font-family: 'Source Serif 4', serif;
font-size: clamp(34px, 4vw, 64px);
color: #4127A3;
line-height: 1.1;
margin-bottom: 50px;
font-weight: 400;
}
.section-title em {
font-family: 'Source Serif 4', serif;
}
.style-text p, .style-text li {
font-size: clamp(16px, 1.4vw, 24px);
line-height: 1.4;
}
.style-text p, .style-text ul, .style-text ol {
margin: clamp(16px, 1.4vw, 24px) 0 clamp(16px, 1.4vw, 24px) 0;
}
.style-text a {
color: #4127A3;
}
.style-text :first-child {
margin-top: 0!important;
}
.style-text :last-child {
margin-bottom: 0!important;
}
.button {
display: inline-block;
font-size: clamp(14px, 1.4vw, 18px);
background: #4127A3;
color: #fff;
text-transform: uppercase;
font-weight: 500;
padding: 24px 40px;
}
.relative .person { 
position: absolute;
width: 100%;
transition: .3s all ease-in-out;
}
.controls {
display: flex;
gap: 40px;
}
.controls .prev:before, .controls .next:before {
content: "";
display: inline-block;
width: clamp(32px, 3vw, 50px);
height: clamp(32px, 3vw, 50px);
cursor: pointer;
}
.controls .prev:before {
background: url(//www.myfonds.be/wp-content/themes/myfondsbe/assets/images/prev.svg) center center / contain no-repeat;
}
.controls .next:before {
background: url(//www.myfonds.be/wp-content/themes/myfondsbe/assets/images/next.svg) center center / contain no-repeat;
}
.slider.people-slider-2 .controls { justify-content: space-between; width: 100%; }
.accordions .accordion { 
border-bottom: 1px solid #fff;
}
.accordions .accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
cursor: pointer;
}
.accordions .accordion-header h3 { 
font-size: clamp(16px, 1.4vw, 24px);
font-weight: 400;
}
.accordions .accordion-header h3 {
padding-right: 30px;
}
.accordions .accordion-header span { 
font-size: clamp(30px, 3vw, 40px);
line-height: 1; 
color: #4127A3;
}
.accordions .accordion-header + .style-text { 
display: none;
padding-bottom: 20px;
}
.accordions .accordion-header span::before { 
content: "+"; 
}
.accordions .accordion-header.active span::before { 
content: "-"; 
}
.accordions .accordion-header.active + .style-text {
display: block;
}
.accordions .accordion:first-child .accordion-header { 
padding-top: 0;
}
.featured-text {
max-width: 600px;
margin: 300px 0 300px auto;
}
.featured-text h3 {
font-size: clamp(18px, 2vw, 26px);
color: #4127A3;
font-weight: 400;
text-transform: uppercase;
line-height: 1.2;
margin-bottom: 30px;
}
.featured-text p {
font-family: 'Source Serif 4', serif;
font-size: clamp(21px, 2.5vw, 36px);
line-height: 1.2;
}
.featured-text p span {
font-family: 'SourceSerif4Italic';
}
.sticky {
position: sticky;
top: 130px;
}
.sticky .sticky {
height: 80vh;
}
footer {
background: #4127A3;
color: #fff;
padding: 70px 0;
}
footer .style-text h3 {
font-size: clamp(20px, 1.4vw, 24px);
font-weight: 400;
text-transform: uppercase;
margin-bottom: 20px;
}
footer ul {
list-style: none;
}
footer .style-text ul li a {
font-size: clamp(16px, 1.4vw, 20px);
}
footer a {
color: #fff;
}
footer nav ul li a {
display: block;
font-family: 'Source Serif 4', serif;
font-size: clamp(16px, 1.4vw, 24px);
text-align: right;
}
footer nav ul li:not(:last-child) {
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.hero {
margin: 150px 0 80px 0;
}
section {
margin: 80px 0;
}
.section-title {
margin-bottom: 35px;
}
.relative .person {
width: calc(100% - 40px);
}
.sticky {
top: 84px;
}
.sticky .sticky {
height: 40vw;
padding: 40px 0;
}
.featured-text {
margin: 80px 0;
}
}
@media only screen and (max-width: 991px) {
.hero-text {
margin-top: 0;
}
.illustration {
display: none;
}
.sticky {
background: #fff;
}
.sticky img {
display: block;
top: 50%;
transform: translateY(-50%);
max-height: 21vh;
margin: 0 auto;
}
}
@media only screen and (max-width: 767px) {
header {
height: auto;
padding: 20px 0;
}
header nav {
width: 100%;
}
.nav-toggle {
display: inline-block;
}
header nav {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-mob-active nav {
display: block;
}
.nav-mob-active header {
height: 100vh;
}
header ul li:not(:last-child) {
margin: 0 0 15px 0;
}
header nav ul li a {
font-size: 26px;
}
header ul li a:before {
content: none;
}
header .lang {
position: relative;
width: 100%;
text-align: center;
margin-top: 15px;
}
header .lang ul {
position: unset;
transform: unset;
display: flex;
justify-content: center;
gap: 30px;
padding: 0;
}
header .lang ul li:not(:last-child) {
margin: 0;
}
header .lang ul a {
text-align: center;
}
section {
margin: 50px 0;
}
.hero {
margin: 100px 0 50px 0;
}
.hero p {
margin-bottom: 20px;
}
.section-title {
margin-bottom: 25px;
}
.button {
padding: 16px 30px;
}
.relative .person {
width: calc(100% - 25px);
}
.controls {
gap: 20px;
}
.featured-text {
margin: 50px 0;
}
.featured-text:last-child {
margin-bottom: 0;
}
.featured-text h3 {
margin-bottom: 20px;
}
.sticky {
top: 62px;
}
.sticky .sticky {
height: 30vh;
padding: 30px 0;
}
footer {
padding: 50px 0;
}
footer nav ul {
margin-top: 30px;
}
footer nav ul li:not(:last-child) { 
margin-bottom: 10px;
}
footer nav ul li a {
text-align: left;
}
} .container { 
width: 100%; 
padding-left: 80px; 
padding-right: 80px;
}
@media only screen and (max-width: 767px) {
.container {
padding-left: 25px; 
padding-right: 25px;
}
}
.row { 
display: flex;
flex-wrap: wrap;
margin: 0 -20px; 
}
@media only screen and (max-width: 767px) {
.row { 
margin: 0 -10px;
}
}
.row > * { 
padding: 0 20px;
}
@media only screen and (max-width: 767px) {
.row > * {
padding: 0 10px;
}
}
[class*="col-"] { width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-12 { flex: 0 0 auto; width: 100%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%;}
.col-10 { flex: 0 0 auto; width: 83.33333333%;}
.col-9 { flex: 0 0 auto; width: 75%;}
.col-8 { flex: 0 0 auto; width: 66.66666667%;}
.col-7 { flex: 0 0 auto; width: 58.33333333%;}
.col-6 { flex: 0 0 auto; width: 50%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%;}
.col-4 { flex: 0 0 auto; width: 33.33333333%;}
.col-3 { flex: 0 0 auto; width: 25%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%;}
.col-1 { flex: 0 0 auto; width: 8.33333333%;}
.col-custom-20 { flex: 0 0 auto; width: 20%; }
.offset-0 { margin-left: 0; }
.offset-1 { margin-left: 8.33333333%; }
.offset-2 { margin-left: 16.66666667%; }
.offset-3 { margin-left: 25%;}
.offset-4 { margin-left: 33.33333333%;}
.offset-5 { margin-left: 41.66666667%;}
.offset-6 { margin-left: 50%;}
.offset-7 { margin-left: 58.33333333%;}
.offset-8 { margin-left: 66.66666667%;}
.offset-9 { margin-left: 75%;}
.offset-10 { margin-left: 83.33333333%;}
.offset-11 { margin-left: 91.66666667%;}
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important ;}
.order-5 { order: 5 !important; }
@media (min-width: 768px) {
.col-md-auto { flex: 0 0 auto; width: auto; }
.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-md-3 { flex: 0 0 auto; width: 25%; }
.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-md-6 { flex: 0 0 auto; width: 50%; }
.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-md-9 { flex: 0 0 auto; width: 75%; }
.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-md-12 { flex: 0 0 auto; width: 100%; }
.col-md-custom-20 { flex: 0 0 auto; width: 20%; }
.offset-md-0 { margin-left: 0; }
.offset-md-1 { margin-left: 8.33333333%; }
.offset-md-2 { margin-left: 16.66666667%; }
.offset-md-3 { margin-left: 25%;}
.offset-md-4 { margin-left: 33.33333333%;}
.offset-md-5 { margin-left: 41.66666667%;}
.offset-md-6 { margin-left: 50%;}
.offset-md-7 { margin-left: 58.33333333%;}
.offset-md-8 { margin-left: 66.66666667%;}
.offset-md-9 { margin-left: 75%;}
.offset-md-10 { margin-left: 83.33333333%;}
.offset-md-11 { margin-left: 91.66666667%;}
.order-md-0 { order: 0 !important; }
.order-md-1 { order: 1 !important; }
.order-md-2 { order: 2 !important; }
.order-md-3 { order: 3 !important; }
.order-md-4 { order: 4 !important ;}
.order-md-5 { order: 5 !important; }
}
@media (min-width: 992px) {
.col-lg-auto { flex: 0 0 auto; width: auto; }
.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-lg-3 { flex: 0 0 auto; width: 25%; }
.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-lg-6 { flex: 0 0 auto; width: 50%; }
.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-lg-9 { flex: 0 0 auto; width: 75%; }
.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-lg-12 { flex: 0 0 auto; width: 100%; }
.col-lg-custom-20 { flex: 0 0 auto; width: 20%; }
.offset-lg- { margin-left: 0; }
.offset-lg-1 { margin-left: 8.33333333%; }
.offset-lg-2 { margin-left: 16.66666667%; }
.offset-lg-3 { margin-left: 25%;}
.offset-lg-4 { margin-left: 33.33333333%;}
.offset-lg-5 { margin-left: 41.66666667%;}
.offset-lg-6 { margin-left: 50%;}
.offset-lg-7 { margin-left: 58.33333333%;}
.offset-lg-8 { margin-left: 66.66666667%;}
.offset-lg-9 { margin-left: 75%;}
.offset-lg-10 { margin-left: 83.33333333%;}
.offset-lg-11 { margin-left: 91.66666667%;}
.order-lg-0 { order: 0 !important; }
.order-lg-1 { order: 1 !important; }
.order-lg-2 { order: 2 !important; }
.order-lg-3 { order: 3 !important; }
.order-lg-4 { order: 4 !important ;}
.order-lg-5 { order: 5 !important; }
}
@media (min-width: 1200px) {
.col-xl-auto { flex: 0 0 auto; width: auto; }
.col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xl-3 { flex: 0 0 auto; width: 25%; }
.col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xl-6 { flex: 0 0 auto; width: 50%; }
.col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xl-9 { flex: 0 0 auto; width: 75%; }
.col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xl-12 { flex: 0 0 auto; width: 100%; }
.col-xl-custom-20 { flex: 0 0 auto; width: 20%; }
.offset-xl- { margin-left: 0; }
.offset-xl-1 { margin-left: 8.33333333%; }
.offset-xl-2 { margin-left: 16.66666667%; }
.offset-xl-3 { margin-left: 25%;}
.offset-xl-4 { margin-left: 33.33333333%;}
.offset-xl-5 { margin-left: 41.66666667%;}
.offset-xl-6 { margin-left: 50%;}
.offset-xl-7 { margin-left: 58.33333333%;}
.offset-xl-8 { margin-left: 66.66666667%;}
.offset-xl-9 { margin-left: 75%;}
.offset-xl-10 { margin-left: 83.33333333%;}
.offset-xl-11 { margin-left: 91.66666667%;}
.order-xl-0 { order: 0 !important; }
.order-xl-1 { order: 1 !important; }
.order-xl-2 { order: 2 !important; }
.order-xl-3 { order: 3 !important; }
.order-xl-4 { order: 4 !important ;}
.order-xl-5 { order: 5 !important; }
}
@media (min-width: 1400px) {
.col-xxl-auto { flex: 0 0 auto; width: auto; }
.col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xxl-3 { flex: 0 0 auto; width: 25%; }
.col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xxl-6 { flex: 0 0 auto; width: 50%; }
.col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xxl-9 { flex: 0 0 auto; width: 75%; }
.col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xxl-12 { flex: 0 0 auto; width: 100%; }
.col-xxl-custom-20 { flex: 0 0 auto; width: 20%; }
.offset-xxl-0 { margin-left: 0; }
.offset-xxl-1 { margin-left: 8.33333333%; }
.offset-xxl-2 { margin-left: 16.66666667%; }
.offset-xxl-3 { margin-left: 25%;}
.offset-xxl-4 { margin-left: 33.33333333%;}
.offset-xxl-5 { margin-left: 41.66666667%;}
.offset-xxl-6 { margin-left: 50%;}
.offset-xxl-7 { margin-left: 58.33333333%;}
.offset-xxl-8 { margin-left: 66.66666667%;}
.offset-xxl-9 { margin-left: 75%;}
.offset-xxl-10 { margin-left: 83.33333333%;}
.offset-xxl-11 { margin-left: 91.66666667%;}
.order-xxl-0 { order: 0 !important; }
.order-xxl-1 { order: 1 !important; }
.order-xxl-2 { order: 2 !important; }
.order-xxl-3 { order: 3 !important; }
.order-xxl-4 { order: 4 !important ;}
.order-xxl-5 { order: 5 !important; }
} .d-none { display: none!important; }
.d-block { display: block!important; }
.d-inline-block { display: inline-block!important; }
.d-flex { display: flex!important; }
.d-inline-flex { display: inline-flex!important; }
.justify-content-center { justify-content: center!important; }
.justify-content-between { justify-content: space-between!important; }
.justify-content-end {  justify-content: flex-end!important; } 
.align-items-start { align-items: flex-start!important; }
.align-items-center { align-items: center!important; }
.align-items-end { align-items: flex-end!important; }
.align-self-start { align-self: flex-start!important; }
.align-self-center { align-self: center!important; }
.align-self-end { align-self: flex-end!important; }
.flex-row { flex-direction: row!important; }
.flex-column { flex-direction: column!important; }
.flex-nowrap { flex-wrap: nowrap!important; }
.flex-wrap { flex-wrap: wrap!important; }
.order-1 { order: 1!important; }
.order-2 { order: 2!important; }
.order-3 { order: 3!important; }
.order-4 { order: 4!important; }
.order-5 { order: 5!important; }
.text-uppercase { text-transform: uppercase!important; }
.img-fluid { max-width: 100%!important; }
.rounded { border-radius: 20px; }
.w-100 { width: 100%!important; }
.w-auto { width: auto !important; }
.h-100 { height: 100%!important; }
.underline { text-decoration: underline!important; }
.uppercase { text-transform: uppercase!important; }
.bold { font-weight: 600!important; }
.relative { position: relative!important; }
.overflow-hidden { overflow: hidden!important; }
.text-nowrap { text-wrap: nowrap; }
.text-left { text-align: left!important; }
.text-center { text-align: center!important; }
.text-right { text-align: right!important; }
.text-balance { text-wrap: balance!important; }
.gap-0 { gap: 0px!important; }
.gap-10 { gap: 10px!important; }
.gap-15 { gap: 15px!important; }
.gap-20 { gap: 20px!important; }
.gap-30 { gap: 30px!important; }
.gap-40 { gap: 40px!important; }
.gap-50 { gap: 50px!important; }
.gap-y-0 { gap: 0px!important; }
.gap-y-10 { gap: 10px 0!important; }
.gap-y-20 { gap: 20px 0!important; }
.gap-y-30 { gap: 30px 0!important; }
.gap-y-40 { gap: 40px 0!important; }
.gap-y-50 { gap: 50px 0!important; }
.pt-0 { padding-top: 0!important; }
.pb-0 { padding-bottom: 0!important; } 
.py-0 { padding-top: 0!important; padding-bottom: 0!important; }
.px-0 { padding-left: 0!important; padding-right: 0!important; }
.my-0 { margin-top: 0!important; margin-bottom: 0!important; }
.mx-0 { margin-left: 0!important; margin-right: 0!important; }
.mt-0 { margin-top: 0!important; }
.mt-10 { margin-top: 10px!important; }
.mt-15 { margin-top: 15px!important; }
.mt-20 { margin-top: 20px!important; }
.mt-25 { margin-top: 25px!important; }
.mt-30 { margin-top: 30px!important; }
.mt-35 { margin-top: 35px!important; }
.mt-40 { margin-top: 40px!important; }
.mt-50 { margin-top: 50px!important; }
.mt-60 { margin-top: 60px!important; }
.mt-70 { margin-top: 70px!important; }
.mt-80 { margin-top: 80px!important; }
.mt-90 { margin-top: 90px!important; }
.mt-100 { margin-top: 100px!important; }
.mb-0 { margin-bottom: 0!important; }
.mb-10 { margin-bottom: 10px!important; }
.mb-15 { margin-bottom: 15px!important; }
.mb-20 { margin-bottom: 20px!important; }
.mb-25 { margin-bottom: 25px!important; }
.mb-30 { margin-bottom: 30px!important; }
.mb-35 { margin-bottom: 35px!important; }
.mb-40 { margin-bottom: 40px!important; }
.mb-50 { margin-bottom: 50px!important; }
.mb-60 { margin-bottom: 60px!important; }
.mb-70 { margin-bottom: 70px!important; }
.mb-80 { margin-bottom: 80px!important; }
.mb-90 { margin-bottom: 90px!important; }
.mb-100 { margin-bottom: 100px!important; }
.ml-auto { margin-left: auto!important;; }
.mt-auto { margin-top: auto!important; }
.mb-auto { margin-bottom: auto!important; }
.mr-auto { margin-right: auto!important; }
@media (min-width: 768px) { 
.d-md-none { display: none!important; }
.d-md-block { display: block!important; }
.d-md-inline-block { display: inline-block!important; }
.d-md-flex { display: flex!important; }
.d-md-inline-flex { display: inline-flex!important; }
.justify-md-content-center { justify-content: center!important; }
.justify-md-content-between { justify-content: space-between!important; }
.align-md-items-start { align-items: flex-start!important; }
.align-md-items-center { align-items: center!important; }
.align-md-items-end { align-items: flex-end!important; }
.align-md-self-start { align-self: flex-start!important; }
.align-md-self-center { align-self: center!important; }
.align-md-self-end { align-self: flex-end!important; }
.flex-md-row { flex-direction: row!important; }
.flex-md-column { flex-direction: column!important; }
.text-md-left { text-align: left!important; }
.text-md-center { text-align: center!important;  }
.text-md-right { text-align: right!important;  }
.flex-md-nowrap { flex-wrap: nowrap!important; }
.flex-md-wrap { flex-wrap: wrap!important; }
.order-md-1 { order: 1!important; }
.order-md-2 { order: 2!important; }
.order-md-3 { order: 3!important; }
.order-md-4 { order: 4!important; }
.order-md-5 { order: 5!important; }
.gap-md-0 { gap: 0px!important; }
.gap-md-10 { gap: 10px!important; }
.gap-md-15 { gap: 15px!important; }
.gap-md-20 { gap: 20px!important; }
.gap-md-30 { gap: 30px!important; }
.gap-md-40 { gap: 40px!important; }
.gap-md-50 { gap: 50px!important; }
.gap-y-md-0 { gap: 0px!important; }
.gap-y-md-10 { gap: 10px 0!important; }
.gap-y-md-20 { gap: 20px 0!important; }
.gap-y-md-30 { gap: 30px 0!important }
.gap-y-md-40 { gap: 40px 0!important; }
.gap-y-md-50 { gap: 50px 0!important; }
.mt-md-0 { margin-top: 0px!important; }
.mt-md-10 { margin-top: 10px!important; }
.mt-md-15 { margin-top: 15px!important; }
.mt-md-20 { margin-top: 20px!important; }
.mt-md-25 { margin-top: 25px!important; }
.mt-md-30 { margin-top: 30px!important; }
.mt-md-35 { margin-top: 35px!important; }
.mt-md-40 { margin-top: 40px!important; }
.mt-md-50 { margin-top: 50px!important; }
.mt-md-60 { margin-top: 60px!important; }
.mt-md-70 { margin-top: 70px!important; }
.mt-md-80 { margin-top: 80px!important; }
.mt-md-90 { margin-top: 90px!important; }
.mt-md-100 { margin-top: 100px!important; }
.mb-md-0 { margin-bottom: 0px!important; }
.mb-md-10 { margin-bottom: 10px!important; }
.mb-md-15 { margin-bottom: 15px!important; }
.mb-md-20 { margin-bottom: 20px!important; }
.mb-md-25 { margin-bottom: 25px!important; }
.mb-md-30 { margin-bottom: 30px!important; }
.mb-md-35 { margin-bottom: 35px!important; }
.mb-md-40 { margin-bottom: 40px!important; }
.mb-md-50 { margin-bottom: 50px!important; }
.mb-md-60 { margin-bottom: 60px!important; }
.mb-md-70 { margin-bottom: 70px!important; }
.mb-md-80 { margin-bottom: 80px!important; }
.mb-md-90 { margin-bottom: 90px!important; }
.mb-md-100 { margin-bottom: 100px!important; }
.ml-md-auto { margin-left: auto!important;; }
.mt-md-auto { margin-top: auto!important; }
.mb-md-auto { margin-bottom: auto!important; }
.mr-md-auto { margin-right: auto!important; }
}
@media (min-width: 992px) {
.d-lg-none { display: none!important; }
.d-lg-block { display: block!important; }
.d-lg-inline-block { display: inline-block!important; }
.d-lg-flex { display: flex!important; }
.d-lg-inline-flex { display: inline-flex!important; }
.justify-lg-content-center { justify-content: center!important; }
.justify-lg-content-between { justify-content: space-between!important; }
.align-lg-items-start { align-items: flex-start!important; }
.align-lg-items-center { align-items: center!important; }
.align-lg-items-end { align-items: flex-end!important; }
.align-lg-self-start { align-self: flex-start!important; }
.align-lg-self-center { align-self: center!important; }
.align-lg-self-end { align-self: flex-end!important; }
.flex-lg-row { flex-direction: row!important; }
.flex-lg-column { flex-direction: column!important; }
.text-lg-left { text-align: left!important; }
.text-lg-center { text-align: center!important;  }
.text-lg-right { text-align: right!important;  }
.flex-lf-nowrap { flex-wrap: nowrap!important; }
.flex-lf-wrap { flex-wrap: wrap!important; }
.order-lg-1 { order: 1!important; }
.order-lg-2 { order: 2!important; }
.order-lg-3 { order: 3!important; }
.order-lg-4 { order: 4!important; }
.order-lg-5 { order: 5!important; }
.gap-lg-0 { gap: 0px!important; }
.gap-lg-10 { gap: 10px!important; }
.gap-lg-15 { gap: 15px!important; }
.gap-lg-20 { gap: 20px!important; }
.gap-lg-30 { gap: 30px!important; }
.gap-lg-40 { gap: 40px!important; }
.gap-lg-50 { gap: 50px!important; }
.gap-y-lg-0 { gap: 0px!important; }
.gap-y-lg-10 { gap: 10px 0!important; }
.gap-y-lg-20 { gap: 20px 0!important; }
.gap-y-lg-30 { gap: 30px 0!important; }
.gap-y-lg-40 { gap: 40px 0!important; }
.gap-y-lg-50 { gap: 50px 0!important; }
.mt-lg-0 { margin-top: 0px!important; }
.mt-lg-10 { margin-top: 10px!important; }
.mt-lg-15 { margin-top: 15px!important; }
.mt-lg-20 { margin-top: 20px!important; }
.mt-lg-25 { margin-top: 25px!important; }
.mt-lg-30 { margin-top: 30px!important; }
.mt-lg-35 { margin-top: 35px!important; }
.mt-lg-40 { margin-top: 40px!important; }
.mt-lg-50 { margin-top: 50px!important; }
.mt-lg-60 { margin-top: 60px!important; }
.mt-lg-70 { margin-top: 70px!important; }
.mt-lg-80 { margin-top: 80px!important; }
.mt-lg-90 { margin-top: 90px!important; }
.mt-lg-100 { margin-top: 100px!important; }
.mb-lg-0 { margin-bottom: 0px!important; }
.mb-lg-10 { margin-bottom: 10px!important; }
.mb-lg-15 { margin-bottom: 15px!important; }
.mb-lg-20 { margin-bottom: 20px!important; }
.mb-lg-25 { margin-bottom: 25px!important; }
.mb-lg-30 { margin-bottom: 30px!important; }
.mb-lg-35 { margin-bottom: 35px!important; }
.mb-lg-40 { margin-bottom: 40px!important; }
.mb-lg-50 { margin-bottom: 50px!important; }
.mb-lg-60 { margin-bottom: 60px!important; }
.mb-lg-70 { margin-bottom: 70px!important; }
.mb-lg-80 { margin-bottom: 80px!important; }
.mb-lg-90 { margin-bottom: 90px!important; }
.mb-lg-100 { margin-bottom: 100px!important; }
.ml-lg-auto { margin-left: auto!important;; }
.mt-lg-auto { margin-top: auto!important; }
.mb-lg-auto { margin-bottom: auto!important; }
.mr-lg-auto { margin-right: auto!important; }
}
@media (min-width: 1200px) { 
.d-xl-none { display: none!important; }
.d-xl-block { display: block!important; }
.d-xl-inline-block { display: inline-block!important; }
.d-xl-flex { display: flex!important; }
.d-xl-inline-flex { display: inline-flex!important; }
.justify-xl-content-center { justify-content: center!important; }
.justify-xl-content-between { justify-content: space-between!important; }
.align-xl-items-start { align-items: flex-start!important; }
.align-xl-items-center { align-items: center!important; }
.align-xl-items-end { align-items: flex-end!important; }
.align-xl-self-start { align-self: flex-start!important; }
.align-xl-self-center { align-self: center!important; }
.align-xl-self-end { align-self: flex-end!important; }
.flex-xl-row { flex-direction: row!important; }
.flex-xl-column { flex-direction: column!important; }
.text-xl-left { text-align: left!important; }
.text-xl-center { text-align: center!important;  }
.text-xl-right { text-align: right!important;  }
.flex-xl-nowrap { flex-wrap: nowrap!important; }
.flex-xl-wrap { flex-wrap: wrap!important; }
.order-xl-1 { order: 1!important; }
.order-xl-2 { order: 2!important; }
.order-xl-3 { order: 3!important; }
.order-xl-4 { order: 4!important; }
.order-xl-5 { order: 5!important; }
.gap-xl-0 { gap: 0px!important; }
.gap-xl-10 { gap: 10px!important; }
.gap-xl-15 { gap: 15px!important; }
.gap-xl-20 { gap: 20px!important; }
.gap-xl-30 { gap: 30px!important; }
.gap-xl-40 { gap: 40px!important; }
.gap-xl-50 { gap: 50px!important; }
.gap-y-xl-0 { gap: 0px!important; }
.gap-y-xl-10 { gap: 10px 0!important; }
.gap-y-xl-20 { gap: 20px 0!important; }
.gap-y-xl-30 { gap: 30px 0!important; }
.gap-y-xl-40 { gap: 40px 0!important; }
.gap-y-xl-50 { gap: 50px 0!important; }
.mt-xl-0 { margin-top: 0px!important; }
.mt-xl-10 { margin-top: 10px!important; }
.mt-xl-15 { margin-top: 15px!important; }
.mt-xl-20 { margin-top: 20px!important; }
.mt-xl-25 { margin-top: 25px!important; }
.mt-xl-30 { margin-top: 30px!important; }
.mt-xl-35 { margin-top: 35px!important; }
.mt-xl-40 { margin-top: 40px!important; }
.mt-xl-50 { margin-top: 50px!important; }
.mt-xl-60 { margin-top: 60px!important; }
.mt-xl-70 { margin-top: 70px!important; }
.mt-xl-80 { margin-top: 80px!important; }
.mt-xl-90 { margin-top: 90px!important; }
.mt-xl-100 { margin-top: 100px!important; }
.mb-xl-0 { margin-bottom: 0px!important; }
.mb-xl-10 { margin-bottom: 10px!important; }
.mb-xl-15 { margin-bottom: 15px!important; }
.mb-xl-20 { margin-bottom: 20px!important; }
.mb-xl-25 { margin-bottom: 25px!important; }
.mb-xl-30 { margin-bottom: 30px!important; }
.mb-xl-35 { margin-bottom: 35px!important; }
.mb-xl-40 { margin-bottom: 40px!important; }
.mb-xl-50 { margin-bottom: 50px!important; }
.mb-xl-60 { margin-bottom: 60px!important; }
.mb-xl-70 { margin-bottom: 70px!important; }
.mb-xl-80 { margin-bottom: 80px!important; }
.mb-xl-90 { margin-bottom: 90px!important; }
.mb-xl-100 { margin-bottom: 100px!important; }
.ml-xl-auto { margin-left: auto!important;; }
.mt-xl-auto { margin-top: auto!important; }
.mb-xl-auto { margin-bottom: auto!important; }
.mr-xl-auto { margin-right: auto!important; }
}
@media (min-width: 1400px) { 
.d-xxl-none { display: none!important; }
.d-xxl-block { display: block!important; }
.d-xxl-inline-block { display: inline-block!important; }
.d-xxl-flex { display: flex!important; }
.d-xxl-inline-flex { display: inline-flex!important; }
.justify-xxl-content-center { justify-content: center!important; }
.justify-xxl-content-between { justify-content: space-between!important; }
.align-xxl-items-start { align-items: flex-start!important; }
.align-xxl-items-center { align-items: center!important; }
.align-xxl-items-end { align-items: flex-end!important; }
.align-xxl-self-start { align-self: flex-start!important; }
.align-xxl-self-center { align-self: center!important; }
.align-xxl-self-end { align-self: flex-end!important; }
.flex-xxl-row { flex-direction: row!important; }
.flex-xxl-column { flex-direction: column!important; }
.text-xxl-left { text-align: left!important; }
.text-xxl-center { text-align: center!important; }
.text-xxl-right { text-align: right!important; }
.flex-xxl-nowrap { flex-wrap: nowrap!important; }
.flex-xxl-wrap { flex-wrap: wrap!important; }
.order-xxl-1 { order: 1!important; }
.order-xxl-2 { order: 2!important; }
.order-xxl-3 { order: 3!important; }
.order-xxl-4 { order: 4!important; }
.order-xxl-5 { order: 5!important; }
.gap-xxl-0 { gap: 0px!important; }
.gap-xxl-10 { gap: 10px!important; }
.gap-xxl-15 { gap: 15px!important; }
.gap-xxl-20 { gap: 20px!important; }
.gap-xxl-30 { gap: 30px!important; }
.gap-xxl-40 { gap: 40px!important; }
.gap-xxl-50 { gap: 50px!important; }
.gap-y-xxl-0 { gap: 0px!important; }
.gap-y-xxl-10 { gap: 10px 0!important; }
.gap-y-xxl-20 { gap: 20px 0!important; }
.gap-y-xxl-30 { gap: 30px 0!important; }
.gap-y-xxl-40 { gap: 40px 0!important; }
.gap-y-xxl-50 { gap: 50px 0!important; }
.mt-xxl-0 { margin-top: 0px!important; }
.mt-xxl-10 { margin-top: 10px!important; }
.mt-xxl-15 { margin-top: 15px!important; }
.mt-xxl-20 { margin-top: 20px!important; }
.mt-xxl-25 { margin-top: 25px!important; }
.mt-xxl-30 { margin-top: 30px!important; }
.mt-xxl-35 { margin-top: 35px!important; }
.mt-xxl-40 { margin-top: 40px!important; }
.mt-xxl-50 { margin-top: 50px!important; }
.mt-xxl-60 { margin-top: 60px!important; }
.mt-xxl-70 { margin-top: 70px!important; }
.mt-xxl-80 { margin-top: 80px!important; }
.mt-xxl-90 { margin-top: 90px!important; }
.mt-xxl-100 { margin-top: 100px!important; }
.mb-xxl-0 { margin-bottom: 0px!important; }
.mb-xxl-10 { margin-bottom: 10px!important; }
.mb-xxl-15 { margin-bottom: 15px!important; }
.mb-xxl-20 { margin-bottom: 20px!important; }
.mb-xxl-25 { margin-bottom: 25px!important; }
.mb-xxl-30 { margin-bottom: 30px!important; }
.mb-xxl-35 { margin-bottom: 35px!important; }
.mb-xxl-40 { margin-bottom: 40px!important; }
.mb-xxl-50 { margin-bottom: 50px!important; }
.mb-xxl-60 { margin-bottom: 60px!important; }
.mb-xxl-70 { margin-bottom: 70px!important; }
.mb-xxl-80 { margin-bottom: 80px!important; }
.mb-xxl-90 { margin-bottom: 90px!important; }
.mb-xxl-100 { margin-bottom: 100px!important; }
.ml-xxl-auto { margin-left: auto!important;; }
.mt-xxl-auto { margin-top: auto!important; }
.mb-xxl-auto { margin-bottom: auto!important; }
.mr-xxl-auto { margin-right: auto!important; }
}html { scroll-padding-top: 80px; }
body { overscroll-behavior: none; }
::selection { background-color: #4127A3; color: #fff; }
* { outline: none !important; scrollbar-color: #b3a9da #fff; scrollbar-width: thin; }
:root { 
--cw: 1.4vw;
--lw: .2vw;
}
.style-text h3 { color: #4127A3; font-size: clamp(24px, 2vw, 36px); font-weight: 500; }
footer .style-text * { color: #fff; }
section { position: relative; }
.illustration { position: absolute; width: 0; height: 0; z-index: -1; }
.illustration .line { position: absolute; display: block; background: #4127A3; }
.illustration .line-up,
.illustration .line-down { width: var(--lw); }
.illustration .line-left,
.illustration .line-right { height: var(--lw); }
.illustration .line-left { right: 0; }
.illustration .line.circle:after,
.illustration .line.circle .extension:after  { position: absolute; content: ''; display: block; width: var(--cw); height: var(--cw); border-radius: 50%; border: var(--lw) solid #4127A3; background: #fff; }
.illustration .line.circle-full .extension:after,
.illustration .line.circle-full:after { background: #4127A3; }
.illustration .line.circle:has(> .extension):after { display: none; }
.illustration .line-down.circle-end:after { bottom: calc(-1 * var(--cw)); left: calc(var(--cw) * -1 / 2 + var(--lw) / 2); }
.illustration .line-left.circle:after { left: calc(-1 * var(--cw)); top: calc(var(--cw) * -1 / 2 + var(--lw) / 2); }
.illustration .line-right.circle:after { right: calc(-1 * var(--cw)); top: calc(var(--cw) * -1 / 2 + var(--lw) / 2); }
.illustration .line.circle .extension:after { bottom: calc(var(--cw) * -1 / 2 + var(--lw) / 2); left: calc(-1 * var(--cw)); }
.illustration .line-left.circle .extension:after { top: calc(var(--cw) * -1 / 2 + var(--lw) / 2); right: calc(-1 * var(--cw)); }
.illustration .line .extension { position: absolute; height: var(--lw); background: #4127A3; }
.illustration .line-right .extension.extension-right-down { right: 0; transform-origin: calc(100% - var(--lw) / 2) 50%; transform: rotate(225deg); }
.illustration .line-right .extension.extension-right-up { right: 0; transform-origin: calc(100% - var(--lw) / 2) 50%; transform: rotate(135deg); }
.illustration .line-left .extension.extension-left-down { right: 100%; transform-origin: calc(100% - var(--lw) / 2) 50%; transform: rotate(-45deg); }
.illustration .line-left .extension.extension-left-up { right: 100%; transform-origin: calc(100% - var(--lw) / 2) 50%; transform: rotate(45deg); }
.illustration .line-end:before { position: absolute; content: ''; display: block; background: #4127A3; }
.illustration .line-end-left-down:before { width: var(--lw); height: 100vw; transform-origin: var(--lw) 0; transform: rotate(45deg); }
.illustration .line-down.line-end:before { bottom: -100vw; left: 0; }
.illustration-1 { top: 0; left: 33vw; opacity: .8; }
.illustration-1 .line-down { height: 7vh; }
.illustration-2 { top: 0; left: 60px; opacity: .6; }
.illustration-2 .line-down { height: 20vh; }
@media screen and (max-width: 991px){
:root { 
--cw: 20px;
--lw: 2px;
}
}
[data-change-image] { position: absolute; opacity: 0; transition: .3s all ease-in-out; top: 50%; transform: translateY(-50%); }
[data-change-image].active { opacity: 1; }
.controls { display: none; position: relative; z-index: 2; }
.slider .controls { display: flex; }
.relative { position: relative; }
.people-slider-1 .relative .person-1 { opacity: 1; z-index: 3; }
.people-slider-1 .relative .person-2 { opacity: 0; z-index: 1; }
.people-slider-1 .relative .rotated .person-1 { opacity: 0; z-index: 1; }
.people-slider-1 .relative .rotated .person-2 { opacity: 1; z-index: 3; }
.person img { transition: .3s all ease-in-out; }
.people-slider-2 .people-img .person img { transform: scale(1); }
.people-slider-2 .people-img .person.active img { transform: scale(1.05); }
.people-slider-2 .relative .person { opacity: 0; }
.people-slider-2 .relative .person.active { opacity: 1; }
@media (min-width: 1920px) {
.col-xxl-10 {
width: 70%;
}
}