/*

Theme Name: MyFonds.be
Theme URI: https://drap.hr
Description: MyFonds.be web site theme
Author: Drap d.o.o.
Author URI: https://www.drap.hr
Version: 1.0

*/

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%;
    }
}