article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
} @keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate-center {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}  [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} .choices {
position: relative;
overflow: hidden;
margin-bottom: var(--choices-guttering, 24px);
font-size: var(--choices-font-size-lg, 16px);
}
.choices:focus {
outline: none;
}
.choices:last-child {
margin-bottom: 0;
}
.choices.is-open {
overflow: visible;
}
.choices.is-disabled :is(.choices__inner, .choices__input) {
background-color: var(--choices-bg-color-disabled, #eaeaea);
cursor: not-allowed !important;
-webkit-user-select: none;
user-select: none;
}
.choices.is-disabled .choices__item {
cursor: not-allowed;
color: var(--choices-item-disabled-color, #fff);
}
.choices [hidden] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
}
.choices[data-type*=select-one] {
cursor: pointer;
}
.choices[data-type*=select-one] .choices__inner {
padding-bottom: var(--choices-inner-one-padding, 7.5px);
}
.choices[data-type*=select-one] .choices__input {
display: block;
width: var(--choices-width, 100%);
padding: var(--choices-dropdown-item-padding, 10px);
border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
background-color: var(--choices-bg-color-dropdown, #fff);
margin: 0;
}
.choices[data-type*=select-one] .choices__button {
background-image: var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
padding: 0;
background-size: 8px;
position: absolute;
top: 50%;
right: 0;
margin-top: -10px;
margin-right: 25px;
height: 20px;
width: 20px;
border-radius: 10em;
opacity: 0.25;
}
.choices[data-type*=select-one] .choices__button:is(:hover, :focus) {
opacity: var(--choices-button-opacity-hover, 1);
}
.choices[data-type*=select-one] .choices__button:focus {
box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75);
}
.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
display: none;
}
.choices[data-type*=select-one]::after {
content: "";
height: 0;
width: 0;
border-style: solid;
border-color: var(--choices-text-color, #333) transparent transparent transparent;
border-width: var(--choices-arrow-size, 5px);
position: absolute;
right: var(--choices-arrow-right, 11.5px);
top: 50%;
margin-top: var(--choices-arrow-margin-top, -2.5px);
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
border-color: transparent transparent var(--choices-text-color, #333);
margin-top: var(--choices-arrow-margin-top-open, -7.5px);
}
.choices[data-type*=select-one][dir=rtl]::after {
left: 11.5px;
right: auto;
}
.choices[data-type*=select-one][dir=rtl] .choices__button {
right: auto;
left: 0;
margin-left: 25px;
margin-right: 0;
}
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__inner {
cursor: text;
}
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button {
position: relative;
display: inline-block;
margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px);
padding-left: calc(var(--choices-button-offset, 8px) * 2);
border-left: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
background-size: var(--choices-button-dimension, 8px);
width: var(--choices-button-dimension, 8px);
line-height: var(--choices-button-line-height, 1);
border-radius: var(--choices-button-border-radius, 0);
opacity: var(--choices-button-opacity, 0.75);
}
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button:is(:hover, :focus) {
--choices-button-opacity: var(--choices-button-opacity-hover, 1);
}
.choices__inner {
display: inline-block;
vertical-align: top;
width: var(--choices-width, 100%);
background-color: var(--choices-bg-color, #f9f9f9);
padding: var(--choices-inner-padding, 7.5px 7.5px 3.75px);
border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
border-radius: var(--choices-border-radius, 2.5px);
font-size: var(--choices-font-size-md, 14px);
min-height: var(--choices-input-height, 44px);
overflow: hidden;
}
.is-focused .choices__inner,
.is-open .choices__inner {
border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
}
.is-open .choices__inner {
border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
}
.is-invalid .choices__inner {
border-color: var(--choices-invalid-color, #d33141);
}
.is-flipped.is-open .choices__inner {
border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px);
}
.choices__list {
margin: 0;
padding-left: 0;
list-style: none;
}
.choices__list--single {
display: inline-block;
padding: var(--choices-list-single-padding, 4px 16px 4px 4px);
width: var(--choices-width, 100%);
}
[dir=rtl] .choices__list--single {
padding-right: 4px;
padding-left: 16px;
}
.choices__list--single .choices__item {
width: var(--choices-width, 100%);
}
.choices__list--multiple {
display: inline;
}
.choices__list--multiple .choices__item {
display: inline-block;
vertical-align: middle;
border-radius: var(--choices-border-radius-item, 20px);
padding: var(--choices-multiple-item-padding, 4px 10px);
font-size: var(--choices-font-size-sm, 12px);
font-weight: 500;
margin-right: var(--choices-multiple-item-margin, 3.75px);
margin-bottom: var(--choices-multiple-item-margin, 3.75px);
background-color: var(--choices-primary-color, #005F75);
border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
color: var(--choices-item-color, #fff);
word-break: break-all;
box-sizing: border-box;
}
.choices__list--multiple .choices__item[data-deletable] {
padding-right: 5px;
}
[dir=rtl] .choices__list--multiple .choices__item {
margin-right: 0;
margin-left: var(--choices-multiple-item-margin, 3.75px);
}
.choices__list--multiple .choices__item.is-highlighted {
background-color: color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
}
.is-disabled .choices__list--multiple .choices__item {
background-color: color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 75%, var(--choices-darken, black));
border: 1px solid color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 65%, var(--choices-darken, black));
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
display: none;
z-index: var(--choices-z-index, 1);
position: absolute;
width: var(--choices-width, 100%);
background-color: var(--choices-bg-color-dropdown, #fff);
border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
top: 100%;
margin-top: -1px;
border-bottom-left-radius: var(--choices-border-radius, 2.5px);
border-bottom-right-radius: var(--choices-border-radius, 2.5px);
overflow: hidden;
word-break: break-all;
}
.is-active.choices__list--dropdown,
.is-active.choices__list[aria-expanded] {
display: block;
}
.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] {
border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
}
.is-flipped .choices__list--dropdown,
.is-flipped .choices__list[aria-expanded] {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: -1px;
border-radius: 0.25rem 0.25rem 0 0;
}
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
position: relative;
max-height: 300px;
overflow: auto;
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
position: relative;
padding: var(--choices-dropdown-item-padding, 10px);
font-size: var(--choices-font-size-md, 14px);
}
[dir=rtl] .choices__list--dropdown .choices__item,
[dir=rtl] .choices__list[aria-expanded] .choices__item {
text-align: right;
}
@media (min-width: 640px) {
.choices__list--dropdown .choices__item--selectable[data-select-text],
.choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
padding-right: 100px;
}
.choices__list--dropdown .choices__item--selectable[data-select-text]::after,
.choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
content: attr(data-select-text);
font-size: var(--choices-font-size-sm, 12px);
opacity: 0;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text],
[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
text-align: right;
padding-left: 100px;
padding-right: 10px;
}
[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after,
[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
right: auto;
left: 10px;
}
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: var(--choices-highlighted-color, #f2f2f2);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
opacity: 0.5;
}
.choices__item {
cursor: default;
}
.choices__item--selectable {
cursor: pointer;
}
.choices__item--disabled {
cursor: not-allowed;
-webkit-user-select: none;
user-select: none;
opacity: 0.5;
}
.choices__heading {
font-weight: 600;
font-size: 12px;
padding: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--choices-keyline-color, #ddd) 90%, var(--choices-lighten, white));
color: gray;
}
.choices__button {
text-indent: -9999px;
appearance: none;
border: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.choices__button:focus {
outline: none;
}
.choices__input {
display: inline-block;
vertical-align: baseline;
background-color: var(--choices-bg-color, #f9f9f9);
font-size: var(--choices-font-size-md, 14px);
margin-bottom: var(--choices-input-margin-bottom, 5px);
border: 0;
border-radius: 0;
max-width: var(--choices-width, 100%);
padding: var(--choices-input-padding, 4px 0 4px 2px);
}
.choices__input:focus {
outline: 0;
}
.choices__input::-webkit-search-decoration,
.choices__input::-webkit-search-cancel-button,
.choices__input::-webkit-search-results-button,
.choices__input::-webkit-search-results-decoration {
display: none;
}
.choices__input::-ms-clear,
.choices__input::-ms-reveal {
display: none;
width: 0;
height: 0;
}
[dir=rtl] .choices__input {
padding-right: 2px;
padding-left: 0;
}
.choices__placeholder {
opacity: var(--choices-placeholder-opacity, 0.5);
} @font-face {
font-family: 'lg';
src: url(//www.agadex.sk/wp-content/themes/agadex/assets/fonts/lg.woff2?io9a6k) format("woff2"), url(//www.agadex.sk/wp-content/themes/agadex/assets/fonts/lg.ttf?io9a6k) format("truetype"), url(//www.agadex.sk/wp-content/themes/agadex/assets/fonts/lg.woff?io9a6k) format("woff"), url(//www.agadex.sk/wp-content/themes/agadex/assets/fonts/lg.svg?io9a6k#lg) format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.lg-icon { font-family: 'lg' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lg-container {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
.lg-next,
.lg-prev {
background-color: rgba(0, 0, 0, 0.45);
border-radius: 2px;
color: #999;
cursor: pointer;
display: block;
font-size: 22px;
margin-top: -10px;
padding: 8px 10px 9px;
position: absolute;
top: 50%;
z-index: 1084;
outline: none;
border: none;
}
.lg-next.disabled,
.lg-prev.disabled {
opacity: 0 !important;
cursor: default;
}
.lg-next:hover:not(.disabled),
.lg-prev:hover:not(.disabled) {
color: #fff;
}
.lg-single-item .lg-next,
.lg-single-item .lg-prev {
display: none;
}
.lg-next {
right: 20px;
}
.lg-next:before {
content: '\e095';
display: block;
}
.lg-prev {
left: 20px;
}
.lg-prev:after {
content: '\e094';
display: block;
}
@-webkit-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-moz-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-ms-keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@keyframes lg-right-end {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-webkit-keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@-moz-keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@-ms-keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@keyframes lg-left-end {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
.lg-outer.lg-right-end .lg-object {
-webkit-animation: lg-right-end 0.3s;
-o-animation: lg-right-end 0.3s;
animation: lg-right-end 0.3s;
position: relative;
}
.lg-outer.lg-left-end .lg-object {
-webkit-animation: lg-left-end 0.3s;
-o-animation: lg-left-end 0.3s;
animation: lg-left-end 0.3s;
position: relative;
}
.lg-toolbar {
z-index: 1082;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.lg-media-overlap .lg-toolbar {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.lg-toolbar .lg-icon {
color: #999;
cursor: pointer;
float: right;
font-size: 24px;
height: 47px;
line-height: 27px;
padding: 10px 0;
text-align: center;
width: 50px;
text-decoration: none !important;
outline: medium none;
will-change: color;
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
background: none;
border: none;
box-shadow: none;
}
.lg-toolbar button:after {
display: block;
}
.lg-toolbar .lg-icon.lg-icon-18 {
font-size: 18px;
}
.lg-toolbar .lg-icon:hover {
color: #fff;
}
.lg-toolbar .lg-close:after {
content: '\e070';
}
.lg-toolbar .lg-maximize {
font-size: 22px;
}
.lg-toolbar .lg-maximize:after {
content: '\e90a';
}
.lg-toolbar .lg-download:after {
content: '\e0f2';
}
.lg-sub-html {
color: #eee;
font-size: 16px;
padding: 10px 40px;
text-align: center;
z-index: 1080;
opacity: 0;
-webkit-transition: opacity 0.2s ease-out 0s;
-o-transition: opacity 0.2s ease-out 0s;
transition: opacity 0.2s ease-out 0s;
}
.lg-sub-html h4 {
margin: 0;
font-size: 13px;
font-weight: bold;
}
.lg-sub-html p {
font-size: 12px;
margin: 5px 0 0;
}
.lg-sub-html a {
color: inherit;
}
.lg-sub-html a:hover {
text-decoration: underline;
}
.lg-media-overlap .lg-sub-html {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}
.lg-item .lg-sub-html {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
.lg-error-msg {
font-size: 14px;
color: #999;
}
.lg-counter {
color: #999;
display: inline-block;
font-size: 16px;
padding-left: 20px;
padding-top: 12px;
height: 47px;
vertical-align: middle;
}
.lg-closing .lg-toolbar,
.lg-closing .lg-prev,
.lg-closing .lg-next,
.lg-closing .lg-sub-html {
opacity: 0;
-webkit-transition: -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
-moz-transition: -moz-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
-o-transition: -o-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont {
opacity: 0;
-moz-transform: scale3d(0.5, 0.5, 0.5);
-o-transform: scale3d(0.5, 0.5, 0.5);
-ms-transform: scale3d(0.5, 0.5, 0.5);
-webkit-transform: scale3d(0.5, 0.5, 0.5);
transform: scale3d(0.5, 0.5, 0.5);
will-change: transform, opacity;
-webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
-moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
-o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
}
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont {
opacity: 1;
-moz-transform: scale3d(1, 1, 1);
-o-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.lg-icon:focus-visible {
color: #fff;
border-radius: 3px;
outline: 1px dashed rgba(255, 255, 255, 0.6);
}
.lg-toolbar .lg-icon:focus-visible {
border-radius: 8px;
outline-offset: -5px;
}
.lg-outer .lg-thumb-outer {
background-color: #0d0a0a;
width: 100%;
max-height: 350px;
overflow: hidden;
float: left;
}
.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}
.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}
.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
}
.lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
}
.lg-outer .lg-thumb-outer.lg-thumb-align-middle {
text-align: center;
}
.lg-outer .lg-thumb-outer.lg-thumb-align-left {
text-align: left;
}
.lg-outer .lg-thumb-outer.lg-thumb-align-right {
text-align: right;
}
.lg-outer.lg-single-item .lg-thumb-outer {
display: none;
}
.lg-outer .lg-thumb {
padding: 5px 0;
height: 100%;
margin-bottom: -5px;
display: inline-block;
vertical-align: middle;
}
@media (min-width: 768px) {
.lg-outer .lg-thumb {
padding: 10px 0;
}
}
.lg-outer .lg-thumb-item {
cursor: pointer;
float: left;
overflow: hidden;
height: 100%;
border-radius: 2px;
margin-bottom: 5px;
will-change: border-color;
}
@media (min-width: 768px) {
.lg-outer .lg-thumb-item {
border-radius: 4px;
border: 2px solid #fff;
-webkit-transition: border-color 0.25s ease;
-o-transition: border-color 0.25s ease;
transition: border-color 0.25s ease;
}
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
border-color: #a90707;
}
.lg-outer .lg-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lg-outer.lg-can-toggle .lg-item {
padding-bottom: 0;
}
.lg-outer .lg-toggle-thumb:after {
content: '\e1ff';
}
.lg-outer.lg-animate-thumb .lg-thumb {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lg-outer .lg-video-cont {
text-align: center;
display: inline-block;
vertical-align: middle;
position: relative;
}
.lg-outer .lg-video-cont .lg-object {
width: 100% !important;
height: 100% !important;
}
.lg-outer .lg-has-iframe .lg-video-cont {
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.lg-outer .lg-video-object {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
z-index: 3;
}
.lg-outer .lg-video-poster {
z-index: 1;
}
.lg-outer .lg-has-video .lg-video-object {
opacity: 0;
will-change: opacity;
-webkit-transition: opacity 0.3s ease-in;
-o-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.lg-outer .lg-has-video.lg-video-loaded .lg-video-poster,
.lg-outer .lg-has-video.lg-video-loaded .lg-video-play-button {
opacity: 0 !important;
}
.lg-outer .lg-has-video.lg-video-loaded .lg-video-object {
opacity: 1;
}
@keyframes lg-play-stroke {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes lg-play-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lg-video-play-button {
width: 18%;
max-width: 140px;
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
cursor: pointer;
transform: translate(-50%, -50%) scale(1);
will-change: opacity, transform;
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
-moz-transition: -moz-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
-o-transition: -o-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
}
.lg-video-play-button:hover .lg-video-play-icon-bg,
.lg-video-play-button:hover .lg-video-play-icon {
opacity: 1;
}
.lg-video-play-icon-bg {
fill: none;
stroke-width: 3%;
stroke: #fcfcfc;
opacity: 0.6;
will-change: opacity;
-webkit-transition: opacity 0.12s ease-in;
-o-transition: opacity 0.12s ease-in;
transition: opacity 0.12s ease-in;
}
.lg-video-play-icon-circle {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
fill: none;
stroke-width: 3%;
stroke: rgba(30, 30, 30, 0.9);
stroke-opacity: 1;
stroke-linecap: round;
stroke-dasharray: 200;
stroke-dashoffset: 200;
}
.lg-video-play-icon {
position: absolute;
width: 25%;
max-width: 120px;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
opacity: 0.6;
will-change: opacity;
-webkit-transition: opacity 0.12s ease-in;
-o-transition: opacity 0.12s ease-in;
transition: opacity 0.12s ease-in;
}
.lg-video-play-icon .lg-video-play-icon-inner {
fill: #fcfcfc;
}
.lg-video-loading .lg-video-play-icon-circle {
animation: lg-play-rotate 2s linear 0.25s infinite, lg-play-stroke 1.5s ease-in-out 0.25s infinite;
}
.lg-video-loaded .lg-video-play-button {
opacity: 0;
transform: translate(-50%, -50%) scale(0.7);
}
.lg-progress-bar {
background-color: #333;
height: 5px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1083;
opacity: 0;
will-change: opacity;
-webkit-transition: opacity 0.08s ease 0s;
-moz-transition: opacity 0.08s ease 0s;
-o-transition: opacity 0.08s ease 0s;
transition: opacity 0.08s ease 0s;
}
.lg-progress-bar .lg-progress {
background-color: #a90707;
height: 5px;
width: 0;
}
.lg-progress-bar.lg-start .lg-progress {
width: 100%;
}
.lg-show-autoplay .lg-progress-bar {
opacity: 1;
}
.lg-autoplay-button:after {
content: '\e01d';
}
.lg-show-autoplay .lg-autoplay-button:after {
content: '\e01a';
}
.lg-single-item .lg-autoplay-button {
opacity: 0.75;
pointer-events: none;
}
.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap,
.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
-webkit-transition-duration: 0ms !important;
transition-duration: 0ms !important;
}
.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
will-change: transform;
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
-moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
-o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
}
.lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
will-change: transform;
-webkit-transition: -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
-moz-transition: -moz-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
-o-transition: -o-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.no-transition,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.no-transition {
transition: none !important;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition {
transform: scale3d(1, 1, 1) translate3d(-50%, -50%, 0px) !important;
max-width: none !important;
max-height: none !important;
top: 50% !important;
left: 50% !important;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-x,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-x {
transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0px) !important;
top: 0 !important;
left: 50% !important;
max-width: none !important;
max-height: none !important;
}
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-y,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-y {
transform: scale3d(1, 1, 1) translate3d(0, -50%, 0px) !important;
top: 50% !important;
left: 0% !important;
max-width: none !important;
max-height: none !important;
}
.lg-icon.lg-zoom-in:after {
content: '\e311';
}
.lg-actual-size .lg-icon.lg-zoom-in {
opacity: 0.5;
pointer-events: none;
}
.lg-icon.lg-actual-size {
font-size: 20px;
}
.lg-icon.lg-actual-size:after {
content: '\e033';
}
.lg-icon.lg-zoom-out {
opacity: 0.5;
pointer-events: none;
}
.lg-icon.lg-zoom-out:after {
content: '\e312';
}
.lg-zoomed .lg-icon.lg-zoom-out {
opacity: 1;
pointer-events: auto;
}
.lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
.lg-outer[data-lg-slide-type='video'] .lg-actual-size,
.lg-outer[data-lg-slide-type='video'] .lg-zoom-out,
.lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
.lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
.lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out,
.lg-outer.lg-first-slide-loading .lg-zoom-in,
.lg-outer.lg-first-slide-loading .lg-actual-size,
.lg-outer.lg-first-slide-loading .lg-zoom-out {
opacity: 0.75;
pointer-events: none;
}
.lg-outer .lg-pager-outer {
text-align: center;
z-index: 1080;
height: 10px;
margin-bottom: 10px;
}
.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
overflow: visible;
}
.lg-outer.lg-single-item .lg-pager-outer {
display: none;
}
.lg-outer .lg-pager-cont {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: top;
margin: 0 5px;
}
.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
box-shadow: 0 0 0 2px white inset;
}
.lg-outer .lg-pager-thumb-cont {
background-color: #fff;
color: #fff;
bottom: 100%;
height: 83px;
left: 0;
margin-bottom: 20px;
margin-left: -60px;
opacity: 0;
padding: 5px;
position: absolute;
width: 120px;
border-radius: 3px;
will-change: transform, opacity;
-webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
-moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
.lg-outer .lg-pager-thumb-cont img {
width: 100%;
height: 100%;
}
.lg-outer .lg-pager {
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
display: block;
height: 12px;
-webkit-transition: box-shadow 0.3s ease 0s;
-o-transition: box-shadow 0.3s ease 0s;
transition: box-shadow 0.3s ease 0s;
width: 12px;
}
.lg-outer .lg-pager:hover,
.lg-outer .lg-pager:focus {
box-shadow: 0 0 0 8px white inset;
}
.lg-outer .lg-caret {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px dashed;
bottom: -10px;
display: inline-block;
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
vertical-align: middle;
width: 0;
}
.lg-fullscreen:after {
content: "\e20c";
}
.lg-fullscreen-on .lg-fullscreen:after {
content: "\e20d";
}
.lg-outer .lg-dropdown-overlay {
background-color: rgba(0, 0, 0, 0.25);
bottom: 0;
cursor: default;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1081;
opacity: 0;
visibility: hidden;
will-change: visibility, opacity;
-webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
-o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
}
.lg-outer.lg-dropdown-active .lg-dropdown,
.lg-outer.lg-dropdown-active .lg-dropdown-overlay {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transform: translate3d(0, 0px, 0);
-o-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
opacity: 1;
visibility: visible;
}
.lg-outer.lg-dropdown-active .lg-share {
color: #fff;
}
.lg-outer .lg-dropdown {
background-color: #fff;
border-radius: 2px;
font-size: 14px;
list-style-type: none;
margin: 0;
padding: 10px 0;
position: absolute;
right: 0;
text-align: left;
top: 50px;
opacity: 0;
visibility: hidden;
-moz-transform: translate3d(0, 5px, 0);
-o-transform: translate3d(0, 5px, 0);
-ms-transform: translate3d(0, 5px, 0);
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
will-change: visibility, opacity, transform;
-webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
-moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
-o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
}
.lg-outer .lg-dropdown:after {
content: '';
display: block;
height: 0;
width: 0;
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
right: 16px;
top: -16px;
}
.lg-outer .lg-dropdown>li:last-child {
margin-bottom: 0px;
}
.lg-outer .lg-dropdown>li:hover a {
color: #333;
}
.lg-outer .lg-dropdown a {
color: #333;
display: block;
white-space: pre;
padding: 4px 12px;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
}
.lg-outer .lg-dropdown a:hover {
background-color: rgba(0, 0, 0, 0.07);
}
.lg-outer .lg-dropdown .lg-dropdown-text {
display: inline-block;
line-height: 1;
margin-top: -3px;
vertical-align: middle;
}
.lg-outer .lg-dropdown .lg-icon {
color: #333;
display: inline-block;
float: none;
font-size: 20px;
height: auto;
line-height: 1;
margin-right: 8px;
padding: 0;
vertical-align: middle;
width: auto;
}
.lg-outer .lg-share {
position: relative;
}
.lg-outer .lg-share:after {
content: '\e80d';
}
.lg-outer .lg-share-facebook .lg-icon {
color: #3b5998;
}
.lg-outer .lg-share-facebook .lg-icon:after {
content: '\e904';
}
.lg-outer .lg-share-twitter .lg-icon {
color: #00aced;
}
.lg-outer .lg-share-twitter .lg-icon:after {
content: '\e907';
}
.lg-outer .lg-share-pinterest .lg-icon {
color: #cb2027;
}
.lg-outer .lg-share-pinterest .lg-icon:after {
content: '\e906';
}
.lg-comment-box {
width: 420px;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-color: #fff;
will-change: transform;
-moz-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-comment-box .lg-comment-title {
margin: 0;
color: #fff;
font-size: 18px;
}
.lg-comment-box .lg-comment-header {
background-color: #000;
padding: 12px 20px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.lg-comment-box .lg-comment-body {
height: 100% !important;
padding-top: 43px !important;
width: 100% !important;
}
.lg-comment-box .fb-comments {
height: 100%;
width: 100%;
background: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/loading.gif) no-repeat scroll center center #fff;
overflow-y: auto;
display: inline-block;
}
.lg-comment-box .fb-comments[fb-xfbml-state='rendered'] {
background-image: none;
}
.lg-comment-box .fb-comments>span {
max-width: 100%;
}
.lg-comment-box .lg-comment-close {
position: absolute;
right: 5px;
top: 12px;
cursor: pointer;
font-size: 20px;
color: #999;
will-change: color;
-webkit-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
transition: color 0.2s linear;
}
.lg-comment-box .lg-comment-close:hover {
color: #fff;
}
.lg-comment-box .lg-comment-close:after {
content: '\e070';
}
.lg-comment-box iframe {
max-width: 100% !important;
width: 100% !important;
}
.lg-comment-box #disqus_thread {
padding: 0 20px;
}
.lg-outer .lg-comment-overlay {
background-color: rgba(0, 0, 0, 0.25);
bottom: 0;
cursor: default;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1081;
opacity: 0;
visibility: hidden;
will-change: visibility, opacity;
-webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
-o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
}
.lg-outer .lg-comment-toggle:after {
content: '\e908';
}
.lg-outer.lg-comment-active .lg-comment-overlay {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transform: translate3d(0, 0px, 0);
-o-transform: translate3d(0, 0px, 0);
-ms-transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
opacity: 1;
visibility: visible;
}
.lg-outer.lg-comment-active .lg-comment-toggle {
color: #fff;
}
.lg-outer.lg-comment-active .lg-comment-box {
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.lg-outer .lg-img-rotate {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 0.4s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-outer[data-lg-slide-type='video'] .lg-rotate-left,
.lg-outer[data-lg-slide-type='video'] .lg-rotate-right,
.lg-outer[data-lg-slide-type='video'] .lg-flip-ver,
.lg-outer[data-lg-slide-type='video'] .lg-flip-hor,
.lg-outer[data-lg-slide-type='iframe'] .lg-rotate-left,
.lg-outer[data-lg-slide-type='iframe'] .lg-rotate-right,
.lg-outer[data-lg-slide-type='iframe'] .lg-flip-ver,
.lg-outer[data-lg-slide-type='iframe'] .lg-flip-hor {
opacity: 0.75;
pointer-events: none;
}
.lg-outer .lg-img-rotate:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.lg-rotate-left:after {
content: '\e900';
}
.lg-rotate-right:after {
content: '\e901';
}
.lg-icon.lg-flip-hor,
.lg-icon.lg-flip-ver {
font-size: 26px;
}
.lg-flip-ver:after {
content: '\e903';
}
.lg-flip-hor:after {
content: '\e902';
}
.lg-medium-zoom-item {
cursor: zoom-in;
}
.lg-medium-zoom .lg-outer {
cursor: zoom-out;
}
.lg-medium-zoom .lg-outer.lg-grab img.lg-object {
cursor: zoom-out;
}
.lg-medium-zoom .lg-outer.lg-grabbing img.lg-object {
cursor: zoom-out;
}
.lg-relative-caption .lg-outer .lg-sub-html {
white-space: normal;
bottom: auto;
padding: 0;
background-image: none;
}
.lg-relative-caption .lg-outer .lg-relative-caption-item {
opacity: 0;
padding: 16px 0;
transition: 0.5s opacity ease;
}
.lg-relative-caption .lg-outer .lg-show-caption .lg-relative-caption-item {
opacity: 1;
}
.lg-group:after {
content: '';
display: table;
clear: both;
}
.lg-container {
display: none;
outline: none;
}
.lg-container.lg-show {
display: block;
}
.lg-on {
scroll-behavior: unset;
}
.lg-overlay-open {
overflow: hidden;
}
.lg-toolbar,
.lg-prev,
.lg-next,
.lg-pager-outer,
.lg-hide-sub-html .lg-sub-html {
opacity: 0;
will-change: transform, opacity;
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-show-in .lg-toolbar,
.lg-show-in .lg-prev,
.lg-show-in .lg-next,
.lg-show-in .lg-pager-outer {
opacity: 1;
}
.lg-show-in.lg-hide-sub-html .lg-sub-html {
opacity: 1;
}
.lg-show-in .lg-hide-items .lg-prev {
opacity: 0;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
.lg-show-in .lg-hide-items .lg-next {
opacity: 0;
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
.lg-show-in .lg-hide-items .lg-toolbar {
opacity: 0;
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
opacity: 0;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.lg-outer {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1050;
text-align: left;
opacity: 0.001;
outline: none;
will-change: auto;
overflow: hidden;
-webkit-transition: opacity 0.15s ease 0s;
-o-transition: opacity 0.15s ease 0s;
transition: opacity 0.15s ease 0s;
}
.lg-outer * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lg-outer.lg-zoom-from-image {
opacity: 1;
}
.lg-outer.lg-visible {
opacity: 1;
}
.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide,
.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide,
.lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
-webkit-transition-duration: inherit !important;
transition-duration: inherit !important;
-webkit-transition-timing-function: inherit !important;
transition-timing-function: inherit !important;
}
.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide,
.lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide,
.lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
opacity: 1;
}
.lg-outer.lg-grab img.lg-object {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab;
}
.lg-outer.lg-grabbing img.lg-object {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -o-grabbing;
cursor: -ms-grabbing;
cursor: grabbing;
}
.lg-outer .lg-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.lg-outer .lg-inner {
width: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
-webkit-transition: opacity 0s;
-o-transition: opacity 0s;
transition: opacity 0s;
white-space: nowrap;
}
.lg-outer .lg-item {
display: none !important;
}
.lg-outer .lg-item:not(.lg-start-end-progress) {
background: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/loading.gif) no-repeat scroll center center transparent;
}
.lg-outer.lg-css3 .lg-prev-slide,
.lg-outer.lg-css3 .lg-current,
.lg-outer.lg-css3 .lg-next-slide {
display: inline-block !important;
}
.lg-outer.lg-css .lg-current {
display: inline-block !important;
}
.lg-outer .lg-item,
.lg-outer .lg-img-wrap {
display: inline-block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
}
.lg-outer .lg-item:before,
.lg-outer .lg-img-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.lg-outer .lg-img-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
white-space: nowrap;
font-size: 0;
}
.lg-outer .lg-item.lg-complete {
background-image: none;
}
.lg-outer .lg-item.lg-current {
z-index: 1060;
}
.lg-outer .lg-object {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: relative;
}
.lg-outer .lg-empty-html.lg-sub-html,
.lg-outer .lg-empty-html .lg-sub-html {
display: none;
}
.lg-outer.lg-hide-download .lg-download {
opacity: 0.75;
pointer-events: none;
}
.lg-outer .lg-first-slide .lg-dummy-img {
position: absolute;
top: 50%;
left: 50%;
}
.lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
opacity: 1;
}
.lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
opacity: 1;
transition: opacity 0.2s ease-out 0.15s;
}
.lg-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1040;
background-color: #000;
opacity: 0;
will-change: auto;
-webkit-transition: opacity 333ms ease-in 0s;
-o-transition: opacity 333ms ease-in 0s;
transition: opacity 333ms ease-in 0s;
}
.lg-backdrop.in {
opacity: 1;
}
.lg-css3.lg-no-trans .lg-prev-slide,
.lg-css3.lg-no-trans .lg-next-slide,
.lg-css3.lg-no-trans .lg-current {
-webkit-transition: none 0s ease 0s !important;
-moz-transition: none 0s ease 0s !important;
-o-transition: none 0s ease 0s !important;
transition: none 0s ease 0s !important;
}
.lg-css3.lg-use-css3 .lg-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.lg-css3.lg-fade .lg-item {
opacity: 0;
}
.lg-css3.lg-fade .lg-item.lg-current {
opacity: 1;
}
.lg-css3.lg-fade .lg-item.lg-prev-slide,
.lg-css3.lg-fade .lg-item.lg-next-slide,
.lg-css3.lg-fade .lg-item.lg-current {
-webkit-transition: opacity 0.1s ease 0s;
-moz-transition: opacity 0.1s ease 0s;
-o-transition: opacity 0.1s ease 0s;
transition: opacity 0.1s ease 0s;
}
.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}
.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item {
opacity: 0;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide,
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide,
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
-webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
-moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
-o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}
.lg-container {
display: none;
}
.lg-container.lg-show {
display: block;
}
.lg-container.lg-dragging-vertical .lg-backdrop {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
}
.lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
-webkit-transition-duration: 0s !important;
transition-duration: 0s !important;
opacity: 1;
}
.lg-inline .lg-backdrop,
.lg-inline .lg-outer {
position: absolute;
}
.lg-inline .lg-backdrop {
z-index: 1;
}
.lg-inline .lg-outer {
z-index: 2;
}
.lg-inline .lg-maximize:after {
content: '\e909';
}
.lg-components {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
will-change: transform;
-webkit-transition: -webkit-transform 0.35s ease-out 0s;
-moz-transition: -moz-transform 0.35s ease-out 0s;
-o-transition: -o-transform 0.35s ease-out 0s;
transition: transform 0.35s ease-out 0s;
z-index: 1080;
position: absolute;
bottom: 0;
right: 0;
left: 0;
}  .noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
}
.noUi-base,
.noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
} .noUi-connects {
overflow: hidden;
z-index: 0;
}
.noUi-connect,
.noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat;
}
.noUi-connect {
height: 100%;
width: 100%;
}
.noUi-origin {
height: 10%;
width: 10%;
} .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
left: 0;
right: auto;
} .noUi-vertical .noUi-origin {
width: 0;
}
.noUi-horizontal .noUi-origin {
height: 0;
}
.noUi-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}
.noUi-touch-area {
height: 100%;
width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: transform 0.3s;
transition: transform 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
} .noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
right: -17px;
top: -6px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
right: -6px;
top: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
left: -17px;
right: auto;
} .noUi-target {
background: #FAFAFA;
border-radius: 4px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
border-radius: 3px;
}
.noUi-connect {
background: #3FB8AF;
} .noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
} .noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
} [disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
} .noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
} .noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
} .noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
} .noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
} .noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
} .ps {
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto;
} .ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px; bottom: 0px; position: absolute;
}
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px; right: 0; position: absolute;
}
.ps--active-x>.ps__rail-x,
.ps--active-y>.ps__rail-y {
display: block;
background-color: transparent;
}
.ps:hover>.ps__rail-x,
.ps:hover>.ps__rail-y,
.ps--focus>.ps__rail-x,
.ps--focus>.ps__rail-y,
.ps--scrolling-x>.ps__rail-x,
.ps--scrolling-y>.ps__rail-y {
opacity: 0.6;
}
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: #eee;
opacity: 0.9;
} .ps__thumb-x {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px; bottom: 2px; position: absolute;
}
.ps__thumb-y {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px; right: 2px; position: absolute;
}
.ps__rail-x:hover>.ps__thumb-x,
.ps__rail-x:focus>.ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
background-color: #999;
height: 11px;
}
.ps__rail-y:hover>.ps__thumb-y,
.ps__rail-y:focus>.ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999;
width: 11px;
} @supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important;
}
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.ps {
overflow: auto !important;
}
} .select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline;list-style:none;padding:0}.select2-container .select2-selection--multiple .select2-selection__clear{background-color:transparent;border:none;font-size:1em}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;margin-left:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option--selectable{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px;padding-right:0px}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;padding-bottom:5px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:20px;margin-right:10px;margin-top:5px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--default .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-right:1px solid #aaa;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#999;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{background-color:#f1f1f1;color:#333;outline:none}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-left:1px solid #aaa;border-right:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear{float:left;margin-left:10px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--group{padding:0}.select2-container--default .select2-results__option--disabled{color:#999}.select2-container--default .select2-results__option--selected{background-color:#ddd}.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;height:26px;margin-right:20px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;padding-bottom:5px;padding-right:5px}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;display:inline-block;margin-left:5px;margin-top:5px;padding:0}.select2-container--classic .select2-selection--multiple .select2-selection__choice__display{cursor:default;padding-left:2px;padding-right:5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{background-color:transparent;border:none;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#888;cursor:pointer;font-size:1em;font-weight:bold;padding:0 4px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;outline:none}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display{padding-left:5px;padding-right:2px}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option--group{padding:0}.select2-container--classic .select2-results__option--disabled{color:grey}.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}  .slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}   dialog[open] {
opacity: 1;
} dialog {
opacity: 0;
transition:
opacity var(--animation-duration) ease-out,
transform var(--animation-duration) ease-out,
overlay var(--animation-duration) ease-out allow-discrete,
display var(--animation-duration) ease-out allow-discrete;
}  @starting-style {
dialog[open] {
opacity: 0;
}
} dialog::backdrop {
background-color: var(--dialog-backdrop-bg-color);
transition:
display var(--animation-duration) allow-discrete,
overlay var(--animation-duration) allow-discrete,
background-color var(--animation-duration);
}
dialog[open]::backdrop {
background-color: var(--dialog-backdrop-bg-color-opened);
} @starting-style {
dialog[open]::backdrop {
background-color: var(--dialog-backdrop-bg-color);
}
}
dialog,
::backdrop {
overscroll-behavior: contain;
}
dialog {
margin: auto;
padding: 0;
position: fixed;
color: var(--dialog-color);
background: none;
background-color: transparent;
border: none;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
[data-trigger="dialog-close"]:not(.default-button) {
margin: 0;
padding: 0;
position: absolute;
z-index: 10;
inset-block-start: var(--dialog-close-button-inset);
inset-inline-end: var(--dialog-close-button-inset);
display: grid;
place-items: center;
min-block-size: var(--dialog-close-button-block-size);
inline-size: var(--dialog-close-button-inline-size);
block-size: var(--dialog-close-button-block-size);
text-decoration: none;
cursor: pointer;
color: var(--dialog-close-button-color);
background: none;
background-color: var(--dialog-close-button-bg-color);
border: none;
border-radius: var(--dialog-close-button-border-radius);
box-shadow: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
>* {
pointer-events: none;
}
&::before,
&::after {
display: none;
}
svg {
display: block;
inline-size: var(--dialog-close-button-icon-size);
block-size: var(--dialog-close-button-icon-size);
}
&:hover {
color: var(--dialog-close-button-color-hover);
background-color: var(--dialog-close-button-bg-color-hover);
box-shadow: none;
}
}
}
dialog:modal {
margin: auto;
position: fixed;
display: grid;
align-items: center;
inline-size: 100dvw;
block-size: 100dvh;
max-inline-size: var(--dialog-max-inline-size);
max-block-size: var(--dialog-max-block-size);
overflow: hidden;
}  .slick-slider {
.slick-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--slider-dot-gap, var(--grid-gap));
li {
margin: 0;
padding: 0;
inline-size: var(--slider-dot-inline-size);
block-size: var(--slider-dot-block-size);
line-height: 0;
display: block;
transition: inline-size var(--animation-duration);
&::before,
&::after {
display: none;
}
button {
margin: 0;
padding: 0;
position: relative;
inline-size: 100%;
block-size: 100%;
min-block-size: unset;
display: grid;
place-items: center;
color: inherit;
text-align: left;
text-indent: -9999em;
background: none;
border: none;
box-shadow: none;
outline: none;
cursor: pointer;
&::before {
display: none !important;
}
&::after {
margin: 0;
position: absolute;
inset: auto;
inline-size: var(--slider-dot-inner-inline-size);
block-size: var(--slider-dot-inner-block-size);
display: block;
content: '';
opacity: 1;
background: none;
background-color: var(--slider-dot-bg-color);
border: var(--slider-dot-border-width) solid var(--slider-dot-border-color);
border-radius: var(--slider-dot-border-radius);
transition: background-color var(--animation-duration), border-color var(--animation-duration), block-size var(--animation-duration), inline-size var(--animation-duration);
}
&:hover {
border: none;
background: none;
&::after {
background-color: var(--slider-dot-bg-color-hover);
border-color: var(--slider-dot-border-color-hover);
}
}
}
&.slick-active {
button {
&::after {
background-color: var(--slider-dot-bg-color-active);
border-color: var(--slider-dot-border-color-active);
}
&:hover {
&::after {
background-color: var(--slider-dot-bg-color-hover);
border-color: var(--slider-dot-border-color-hover);
}
}
}
}
}
}
.slick-arrow {
--_control-icon-circle-size: calc(var(--slider-icon-inline-size) + 2px);
margin: 0;
padding: 0;
position: relative;
inline-size: var(--slider-icon-inline-size);
block-size: var(--slider-icon-block-size);
min-block-size: unset;
display: grid;
place-content: center;
color: var(--slider-icon-color);
background-color: var(--slider-icon-bg-color);
border: var(--slider-icon-border-width) solid var(--slider-icon-border-color);
border-radius: var(--slider-icon-border-radius);
box-shadow: none;
cursor: pointer;
opacity: 1;
overflow: visible;
&::before,
&::after {
display: none;
}
&:has(svg) {
svg {
margin: auto;
position: relative;
z-index: 1;
display: grid;
place-content: center;
inline-size: var(--slider-icon-inline-size);
block-size: var(--slider-icon-block-size);
color: inherit;
border-radius: var(--slider-icon-border-radius);
box-shadow: none;
transform: none;
transition: transform var(--animation-duration), color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), box-shadow var(--animation-duration);
use {
transform: scale(.25);
transition: fill var(--animation-duration);
}
}
}
&:hover,
&:focus {
margin: 0;
padding: 0;
color: var(--slider-icon-color-hover);
background-color: var(--slider-icon-bg-color-hover);
border-color: var(--slider-icon-border-color-hover);
box-shadow: none;
transform: none;
&:has(svg) {
svg {
transform: none;
}
}
}
&.prev {
&:has(svg) {
svg {
justify-content: start;
}
}
}
&.next {
&:has(svg) {
svg {
justify-content: end;
}
}
}
&.slick-disabled {
color: hsl(from currentColor h s l / .4) !important;
background-color: transparent !important;
border-color: transparent !important;
pointer-events: none;
cursor: default;
&:has(svg) {
svg {
color: hsl(from var(--slider-icon-color) h s l / .4) !important;
background-color: transparent !important;
border-color: transparent !important;
}
}
}
}
}  blockquote {
margin-block: 2.25rem;
margin-inline: 0;
padding: 0;
font-family: var(--font-family-heading);
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
p {
margin-block: var(--font-line-height-2);
font-size: inherit;
line-height: inherit;
&:first-of-type {
margin-block-start: 0;
}
&:last-of-type {
margin-block-end: 0;
}
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--font-line-height-2);
text-wrap: balance;
color: var(--color-text-heading);
&.align-center {
text-align: center;
}
}
h1,
.h1 {
margin: 0;
margin-block-end: 1em;
font-size: var(--font-size-heading-1);
}
h2,
.h2 {
margin-block-start: 1.5em;
margin-block-end: 1em;
font-size: var(--font-size-heading-2);
}
h3,
.h3 {
margin-block-start: 2em;
margin-block-end: 1em;
font-size: var(--font-size-heading-3);
}
h4,
.h4 {
margin-block-start: 2em;
margin-block-end: 1em;
font-size: var(--font-size-heading-4);
}
h5,
.h5 {
margin-block-start: 2em;
margin-block-end: 1em;
font-size: var(--font-size-heading-5);
}
h6,
.h6 {
margin-block-start: 2em;
margin-block-end: 1em;
font-size: var(--font-size-heading-6);
}
header {
&.align-center {
text-align: center;
}
}
:where(a):not(.button) {
color: var(--color-link);
text-decoration: underline;
outline: none;
border: none;
transition: color var(--animation-duration);
&:hover {
color: var(--color-link-hover);
text-decoration: none;
}
&:focus {
color: var(--color-link-hover);
text-decoration: none;
outline: underline;
}
img {
border: 0;
}
}
:where(.link) {
padding: 0;
position: relative;
font-size: inherit;
font-weight: 400;
line-height: normal;
display: inline-flex;
align-items: center;
gap: 0 .75em;
color: currentColor;
text-decoration: none !important;
background: none;
border: none;
&::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: -3px;
block-size: 1px;
display: none;
background-color: currentColor;
transform-origin: bottom left;
transition: background-color var(--animation-duration);
}
&:hover {
text-decoration: none;
}
&:has(svg) {
svg {
inline-size: .875em;
transition: transform var(--animation-duration);
}
&:hover {
svg {
transform: translateX(.25em);
}
}
}
}
:where(img) {
max-width: 100%;
height: auto;
}
:where(figure) {
margin: 0;
img {
display: block;
}
}
:where(figcaption) {
text-wrap: pretty;
}
:where(ul, ol, menu) {
margin: 0;
padding: 0;
list-style-type: none;
li {
margin: 0;
padding: 0;
font-size: var(--font-size-body);
line-height: var(--font-line-height-3);
&::before {
display: none;
}
}
}
:where(p) {
margin-block: var(--font-line-height-3);
font-size: var(--font-size-body);
line-height: var(--font-line-height-3);
color: inherit;
text-wrap: pretty;
}
:where(.button, .wp-block-button .wp-block-button__link, button, input[type="button"], input[type="submit"], input[type="reset"]) {
margin: 0;
padding-block-start: calc(var(--button-padding-block) + var(--button-line-height-correction));
padding-block-end: calc(var(--button-padding-block) - var(--button-line-height-correction));
padding-inline: var(--button-padding-inline);
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
font: inherit;
font-family: var(--button-font-family);
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
line-height: var(--button-line-height);
min-block-size: calc(max(var(--button-block-size), calc(var(--button-padding-block) * 2 + var(--button-font-size) * 1)));
text-align: center;
justify-content: center;
color: var(--button-color, inherit);
letter-spacing: 0;
text-transform: none;
text-decoration: none;
background: none;
background-color: var(--button-background-color);
border: var(--button-border-width) solid var(--button-border-color);
border-radius: 0 var(--button-radius) var(--button-radius) 0;
box-shadow: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), box-shadow var(--animation-duration), padding var(--animation-duration);
transition-delay: 0s;
overflow: hidden;
&::before,
&::after {
display: none;
}
&:hover {
--button-color: var(--button-color-hover);
--button-background-color: var(--button-background-color-hover);
--button-border-color: var(--button-border-color-hover);
box-shadow: none;
text-decoration: none;
}
&:focus {
outline: none;
}
&.disabled,
&[disabled],
&:disabled,
&:disabled[disabled] {
--button-color: var(--button-color-disabled);
--button-background-color: var(--button-background-color-disabled);
--button-border-color: var(--button-border-color-disabled);
padding: var(--button-padding);
&,
&:hover,
&:focus,
&:active,
&.active {
--button-color: var(--button-color-disabled);
--button-background-color: var(--button-background-color-disabled);
--button-border-color: var(--button-border-color-disabled);
opacity: .4;
cursor: not-allowed;
pointer-events: none;
}
}
&:has(svg) {
position: relative;
display: inline-flex;
align-items: center;
gap: 0 var(--button-icon-gap);
&::before {
display: none;
}
&::after {
display: none;
}
svg {
margin-block: calc(var(--button-padding-block) * -1 + var(--button-icon-offset));
margin-block-start: calc(var(--button-padding-block) * -1 + var(--button-icon-offset) - var(--button-line-height-correction));
margin-block-end: calc(var(--button-padding-block) * -1 + var(--button-icon-offset) + var(--button-line-height-correction));
inline-size: var(--button-icon-size);
position: relative;
z-index: 1;
flex-shrink: 0;
display: grid;
place-content: center;
font-size: var(--button-icon-size);
color: inherit;
background: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), transform var(--animation-duration);
use {
transform-origin: center;
}
}
&.button-icon-left-side {
&::before {
inset-inline-end: auto;
inset-inline-start: calc(var(--button-icon-offset) - 1px);
}
svg {
margin-inline-start: calc(var(--button-padding-inline) * -1 + var(--button-icon-offset));
margin-inline-end: auto;
}
}
&:hover {
svg:has(use[href*="arrow-right"]) {
transform: translateX(5px);
}
}
}
&.button-simple {
&::before,
&::after {
display: none;
}
}
&.button-inverse {
--button-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
--button-background-color: light-dark(transparent, transparent);
--button-border-color: currentColor;
background-image: none;
&:hover {
--button-color: light-dark(var(--color-white), var(--color-white));
--button-background-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
--button-border-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
}
}
&.button-color-light {
--button-color: light-dark(var(--color-dark-950), var(--color-dark-950));
--button-background-color: light-dark(var(--color-white), var(--color-white));
--button-border-color: light-dark(var(--color-white), var(--color-white));
&:hover {
--button-color: light-dark(var(--color-white), var(--color-white));
--button-background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--button-border-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
&.button-inverse {
--button-color: light-dark(var(--color-white), var(--color-white));
--button-background-color: light-dark(transparent, transparent);
--button-border-color: light-dark(var(--color-white), var(--color-white));
&:hover {
--button-color: light-dark(var(--color-dark-950), var(--color-dark-950));
--button-background-color: light-dark(var(--color-white), var(--color-white));
--button-border-color: light-dark(var(--color-white), var(--color-white));
}
}
}
&.button-color-dark {
--button-color: light-dark(var(--color-white), var(--color-white));
--button-background-color: light-dark(var(--color-black), var(--color-black));
--button-border-color: light-dark(var(--color-black), var(--color-black));
&:hover {
--button-color: light-dark(var(--color-white), var(--color-white));
--button-background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--button-border-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
&.button-inverse {
--button-color: light-dark(var(--color-black), var(--color-black));
--button-background-color: light-dark(transparent, transparent);
--button-border-color: light-dark(var(--color-black), var(--color-black));
&:hover {
--button-color: light-dark(var(--color-white), var(--color-white));
--button-background-color: light-dark(var(--color-black), var(--color-black));
--button-border-color: light-dark(var(--color-black), var(--color-black));
}
}
}
&.button-as-link {
--button-color: var(--color-text-base);
--button-background-color: light-dark(transparent, transparent);
--button-border-color: light-dark(transparent, transparent);
--button-radius: 0;
padding: 0 !important;
position: relative;
min-block-size: unset;
font-size: var(--font-size-body-sm);
background-image: none;
&:hover {
--button-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--button-background-color: light-dark(transparent, transparent);
--button-border-color: light-dark(transparent, transparent);
}
}
&.button-xs {
--button-padding-block: 8px;
--button-padding-inline: 12px;
--button-font-size: 12px;
--button-line-height: calc(16em / 12);
--button-block-size: 32px;
--button-icon-size: 1em;
--button-radius: 4px;
}
&.button-sm {
--button-padding-block: 10px;
--button-padding-inline: 16px;
--button-font-size: 14px;
--button-line-height: calc(20em / 14);
--button-block-size: 40px;
--button-icon-size: 1em;
--button-radius: 5px;
}
&.button-lg {
--button-padding-block: 16px;
--button-padding-inline: 32px;
--button-font-size: 18px;
--button-line-height: calc(24em / 18);
--button-block-size: 56px;
--button-radius: 8px;
}
&.button-xl {
--button-padding-block: 20px;
--button-padding-inline: 40px;
--button-font-size: 20px;
--button-line-height: calc(28em / 20);
--button-block-size: 68px;
--button-radius: 10px;
}
&.button-no-pad {
padding: 0;
}
&.full-width {
inline-size: 100%;
}
}
.buttons-container {
display: flex;
flex-wrap: wrap;
&.align-center {
justify-content: center;
}
&.align-right {
justify-content: flex-end;
}
}
.logo {
img,
svg {
display: block;
block-size: auto;
inline-size: 100%;
aspect-ratio: 177 / 27;
max-inline-size: 177px;
max-block-size: 27px;
}
a {
display: flex;
}
svg {
path {
fill: currentColor;
transition: fill var(--animation-duration);
}
}
}
#header {
.logo {
body.header-opened &,
body.header-opening & {
fill: var(--header-color-opened);
}
}
}
#footer {
.logo {
svg {
path {
fill: auto;
}
}
}
} button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
line-height: var(--input-line-height);
cursor: pointer;
appearance: none;
}
.input-checkbox-wrapper {
position: relative;
display: inline-grid;
grid-template-columns: minmax(var(--input-checkbox-size), max-content) auto;
gap: var(--input-checkbox-block-gap) var(--input-checkbox-inline-gap);
align-items: center;
input[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
align-self: start;
display: grid;
place-content: center;
width: var(--input-checkbox-size);
height: var(--input-checkbox-size);
color: var(--input-checkbox-font-color, var(--input-font-color));
background-color: var(--input-checkbox-background-color, var(--input-background-color));
border: var(--input-checkbox-border-size, var(--input-border-size)) solid var(--input-checkbox-border-color, var(--input-border-color));
border-radius: var(--input-checkbox-border-radius, var(--input-border-radius));
cursor: pointer;
outline: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&:hover,
&:focus-visible {
color: var(--input-checkbox-font-color-hover, var(--input-font-color-hover));
background-color: var(--input-checkbox-background-color-hover, var(--input-background-color-hover));
border-color: var(--input-checkbox-border-color-hover, var(--input-border-color-hover));
}
&:focus,
&:focus-visible {
outline: var(--input-outline);
}
&:checked {
color: var(--input-checkbox-font-color-checked, var(--input-font-color-hover));
background-color: var(--input-checkbox-background-color-checked, var(--input-background-color-checked));
border-color: var(--input-checkbox-border-color-checked, var(--input-border-color-checked));
&~.input-checkbox-icon {
opacity: 1;
}
}
}
.input-checkbox-icon {
position: absolute;
inset-block-start: calc(var(--input-checkbox-size) / 2);
inset-inline-start: calc(var(--input-checkbox-size) / 2);
inline-size: calc(var(--input-checkbox-size) / 2.5);
block-size: calc(var(--input-checkbox-size) / 2.5);
color: var(--input-checkbox-font-color, var(--input-font-color));
fill: currentColor;
opacity: 0;
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity var(--animation-duration);
}
label {
display: inline-block;
line-height: normal;
font-size: var(--input-font-size-2);
color: var(--input-font-color);
cursor: pointer;
a {
color: inherit;
}
}
&:has(input[type="checkbox"]:valid:checked) {
input[type="checkbox"] {
color: var(--input-checkbox-font-color-checked);
background-color: var(--input-checkbox-background-color-checked);
border-color: var(--input-checkbox-border-color-checked);
}
label {
color: var(--input-font-color-success);
}
}
&:has(input[type="checkbox"]:user-invalid) {
input[type="checkbox"] {
color: var(--input-font-color);
background-color: var(--input-background-color-error);
border-color: var(--input-border-color-error);
}
label {
color: var(--input-font-color-error);
}
&+.form-control-error {
display: block;
}
}
}
.choices {
--input-placeholder-font-color: var(--color-text-base);
margin: 0;
>.choices__inner {
padding: var(--input-padding);
padding-inline-end: calc(var(--input-padding-inline) + 20px);
block-size: auto;
min-block-size: 0;
font-size: var(--input-font-size);
line-height: var(--input-line-height);
color: var(--input-font-color);
background: var(--input-background-color);
border: none;
border-block-end: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
box-shadow: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), box-shadow var(--animation-duration);
}
.choices__item {
color: var(--input-font-color);
&:hover {
color: var(--input-font-color-hover);
}
}
.choices__list--single {
.choices__item {
line-height: var(--input-line-height-2);
&:hover {
color: var(--input-font-color);
background-color: var(--input-background-color-hover);
border-color: var(--input-border-color-hover);
}
&.choices__placeholder {
font-size: inherit;
color: var(--input-placeholder-font-color);
transition: color var(--animation-duration);
&:hover {
color: var(--input-font-color-hover);
background-color: transparent;
}
}
}
}
.choices__list--dropdown {
margin-block-start: 0;
background-color: var(--input-select-dropdown-background-color, var(--input-background-color));
border: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
.choices__list {
padding: 0;
}
.choices__item {
padding: 10px 18px;
color: var(--input-font-color);
font-size: .8125rem;
line-height: var(--input-line-height);
transition: color var(--animation-duration), background-color var(--animation-duration);
&.is-highlighted {
color: var(--input-select-dropdown-font-color-hover, var(--input-font-color-hover));
background-color: var(--input-select-dropdown-background-color-hover, var(--input-background-color-hover));
}
&.is-selected {
color: var(--input-select-dropdown-font-color-selected, var(--input-font-color-selected));
background-color: var(--input-select-dropdown-background-color-selected, var(--input-background-color-selected));
}
}
}
&.is-focused {
z-index: 2;
>.choices__inner {
border-color: var(--input-border-color-hover);
}
}
&.is-open {
z-index: 2;
&::after {
margin: 0;
opacity: 1;
border: none;
transform: translateY(-50%) rotateX(180deg);
}
&:not(.is-flipped) {
>.choices__inner {
border-block-end-color: transparent;
border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
}
.choices__list--dropdown {
border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
}
}
&.is-flipped {
>.choices__inner {
border-block-start-color: transparent;
border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
}
.choices__list--dropdown {
border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
}
}
}
&:hover {
>.choices__inner {
border-color: var(--input-border-color-hover);
}
}
&[data-type*="select-one"] {
&:hover {
&::before {
background-color: var(--input-border-color-hover);
}
}
&::before {
position: absolute;
inset-block: 1px;
inset-inline-end: 1px;
inline-size: 50px;
display: none;
content: '';
background-color: var(--input-border-color-2);
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
transition: background-color var(--animation-duration);
}
&::after {
margin: 0;
position: absolute;
font-family: var(--font-family-icon);
content: '\e901';
inset-block-start: 50%;
inset-inline-end: calc((var(--input-padding-inline) + 10px) / 2);
font-size: var(--input-select-arrow-size);
pointer-events: none;
color: var(--input-select-arrow-color, var(--input-font-color));
inline-size: auto;
block-size: auto;
border: none;
transform: translateY(-50%);
transition: transform var(--animation-duration);
}
.choices__input {
background-color: transparent;
border: none;
}
.choices__list--single {
padding: 0;
display: block;
inline-size: 100%;
block-size: auto;
.choices__item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.choices__placeholder {
opacity: 1;
font-size: var(--input-font-size-2);
line-height: var(--input-line-height);
min-height: var(--input-line-height);
}
&.is-open {
&::before {
border-radius: 0 var(--input-border-radius) 0 0;
}
&::after {
margin: 0;
transform: translateY(-50%) rotateX(180deg);
}
&.is-flipped {
&::before {
border-radius: 0 0 var(--input-border-radius) 0;
}
}
}
}
&[data-type*="select-multiple"] {
.choices__list--multiple {
padding: var(--input-padding);
min-height: var(--input-line-height);
display: inline-block;
&+.choices__input {
margin: 0;
padding-inline: 0;
inline-size: 100px !important;
display: inline-block;
vertical-align: top;
border: none;
}
.choices__item {
margin: 2px;
padding: 4px 8px;
color: #fff;
display: inline-flex;
align-items: center;
border: 1px solid var(--color-black);
border-radius: var(--input-border-radius);
background-color: var(--color-black);
.choices__button {
margin: 0;
margin-inline-start: 5px;
padding: 0;
position: relative;
inline-size: 10px;
block-size: 10px;
text-align: left;
text-indent: -9999em;
background: none;
border: none;
box-shadow: none;
&::after {
font-family: var(--font-family-icon);
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: block;
font-size: 10px;
inline-size: 10px;
block-size: 10px;
color: #fff;
content: '\e90c';
text-indent: 0;
}
}
}
}
}
}
.form-control-group {
&.has-success {
.choices {
>.choices__inner {
color: var(--input-font-color-success);
background-color: var(--input-background-color-success);
border-color: var(--input-border-color-success);
}
.choices__list--single .choices__item.choices__placeholder {
color: var(--input-placeholder-font-color-success);
}
}
}
&.has-warning {
.choices {
>.choices__inner {
color: var(--input-font-color-warning);
background-color: var(--input-background-color-warning);
border-color: var(--input-border-color-warning);
.choices__list--single .choices__item.choices__placeholder {
color: var(--input-placeholder-font-color-warning);
}
}
}
}
&.has-error {
.choices {
>.choices__inner {
color: var(--input-font-color-error);
background-color: var(--input-background-color-error);
border-color: var(--input-border-color-error);
.choices__list--single .choices__item.choices__placeholder {
color: var(--input-placeholder-font-color-error);
}
}
}
}
&.has-effect {
.choices {
&[data-type*="select-one"] {
.choices__list--single {
padding-block-start: 32px;
}
}
}
&.filled {
.choices {
>.choices__inner {
border-color: var(--input-border-color-focus);
}
}
}
}
}  .file-input-wrapper {
padding-block: 24px;
padding-inline: clamp(20px, 4vw, 25px);
position: relative;
display: block;
color: var(--input-font-color);
block-size: 100%;
background-color: hsl(from var(--color-neutral-500) h s l / .8);
border-block: 1px solid var(--input-border-color);
border-inline: 1px solid var(--input-border-color);
border-radius: var(--input-border-radius);
transition: background-color var(--animation-duration), border-color var(--animation-duration);
&.highlight,
&:hover,
&:focus-within {
background-color: hsl(from var(--color-neutral-500) h s l / .8);
border-color: var(--input-border-color-hover);
.file-input-inner-html {
.buttons-container {
.button {
color: var(--color-black);
background-color: transparent;
border-color: var(--color-black);
}
}
}
}
.file-input-outer-html {
display: none;
}
&.attached {
.file-input-outer-html {
display: block;
}
}
}
.file-input-element {
position: relative;
cursor: pointer;
background-color: transparent;
border: none;
}
input[type="file"] {
margin-block: 0;
margin-inline: auto;
padding-block: 0;
padding-inline: 0;
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: block;
z-index: 2;
opacity: 0;
inline-size: 100%;
block-size: 100%;
cursor: pointer;
}
.file-input-inner-html {
margin-block: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
position: relative;
align-items: center;
@media screen and (max-width: 419px) {
grid-template-columns: auto;
}
&::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
display: none;
inline-size: 63px;
block-size: 50px;
transform: translateY(-50%);
background-color: hsl(from var(--color-black) h s l / .8);
mask: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/icons/upload.svg) center / contain no-repeat;
}
img {
margin: auto;
display: block;
}
.text {
padding-block: 0;
padding-inline: 0;
position: relative;
display: block;
flex-direction: row;
justify-content: center;
align-items: center;
color: hsl(from var(--color-black) h s l / .8);
font-size: var(--body-font-size-sm);
line-height: var(--font-line-height-2);
text-wrap: balance;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
>span,
.small {
margin-block-start: 0;
font-size: var(--font-size-body-xs);
display: block;
line-height: 1.25;
color: hsl(from var(--color-black) h s l / .6);
text-wrap: balance;
}
[class^="icon-"],
[class*=" icon-"] {
margin-inline-end: .875em;
display: none;
font-size: 1.25em;
}
}
.buttons-container {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-shrink: 0;
align-items: center;
.button {
padding-block: 14px;
padding-inline: 24px;
inline-size: auto;
min-inline-size: 145px;
block-size: auto;
min-block-size: 48px;
font-size: .83125rem;
font-weight: 700;
line-height: 1.32;
text-align: center;
justify-content: center;
letter-spacing: 0;
color: var(--color-black);
background-color: transparent;
border-block: 1px solid var(--color-neutral-500);
border-inline: 1px solid var(--color-neutral-500);
border-radius: var(--border-radius-md);
box-shadow: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&::before,
&::after {
display: none;
}
[class^="icon-"],
[class*=" icon-"] {
inline-size: 48px;
aspect-ratio: 1 / 1;
font-size: 48px;
display: grid;
place-content: center;
}
}
}
}
.file-input-outer-html {
margin-block-start: 15px;
color: var(--input-font-color);
>.title {
font-size: var(--font-size-body-sm);
color: var(--input-font-color);
}
.text {
&:not(:empty) {
margin-block-start: 0;
}
ul {
margin-block: 0;
margin-inline: 0;
display: flex;
flex-direction: column;
gap: 8px;
li {
margin-block: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
position: relative;
font-size: .875em;
display: flex;
flex-wrap: wrap;
&+li {
border-block-start: 1px solid hsl(from currentColor h s l / .2);
}
&::before {
display: none;
}
img {
position: absolute;
inset-block-start: 1px;
inset-inline-start: 0;
display: block;
inline-size: auto;
block-size: 18px;
}
.name {
margin-inline-end: 10px;
display: inline-block;
word-break: break-all;
max-inline-size: calc(100% - 40px);
&:last-child {
margin-inline-end: 0;
}
}
.small {
display: inline;
opacity: .6;
font-size: .75em;
}
.remove {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 0;
display: block;
inline-size: 24px;
block-size: 24px;
cursor: pointer;
background-color: transparent;
border-radius: 50%;
border-block: 1px solid currentColor;
border-inline: 1px solid currentColor;
transform: translateY(-50%);
transition: border-color var(--animation-duration);
&::before,
&::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
display: block;
content: '';
inline-size: 10px;
block-size: 1px;
background-color: var(--input-font-color);
transition: background-color var(--animation-duration);
}
&::before {
transform: translate(-50%, -50%) rotate(45deg);
}
&::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
&:hover {
border-color: var(--color-state-error);
&::before,
&::after {
background-color: var(--color-state-error);
}
}
}
}
}
}
}
.form-control-group {
&.has-error {
.file-input-element {
.file-input-inner-html {
>.buttons-container {
.button {
color: var(--color-state-error);
}
}
}
}
}
}
form {
position: relative;
&.form-theme-dark {
color-scheme: dark;
}
fieldset {
margin: 0;
padding: 0;
display: block;
border: none;
legend,
.legend {
margin: 0;
margin-bottom: 15px;
padding: 0;
font-family: var(--font-family-base);
font-style: normal;
display: block;
width: 100%;
font-size: 1.25rem;
font-weight: 500;
color: var(--input-font-color);
}
}
.columns-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: var(--form-block-gap) var(--form-inline-gap);
>.column {
inline-size: 100%;
}
}
.overlay {
padding: 20px;
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
background: transparent;
transition: opacity var(--animation-duration);
.content {
text-align: center;
color: var(--input-font-color);
p {
margin: 0;
font-size: .975rem;
font-weight: normal;
}
.loader {
margin: 30px auto 0;
width: 60px;
height: 60px;
animation: rotate 2s infinite linear;
}
}
}
&.processing {
.overlay {
opacity: 1;
pointer-events: auto;
}
}
}
.form-control-label {
margin-block-end: 12px;
display: block;
font-family: var(--font-family-base);
font-size: var(--input-label-font-size);
line-height: var(--input-line-height);
font-weight: var(--input-label-font-weight);
color: var(--input-label-font-color);
.required {
margin-left: 0;
position: relative;
top: 0;
display: inline-block;
font-size: 1em;
color: inherit;
text-decoration: none;
}
}
.form-control-error {
font-weight: 400;
font-size: var(--input-error-font-size);
color: var(--input-error-font-color);
display: none;
}
.form-control-group {
margin-block-end: 20px;
&.has-effect {
position: relative;
label {
margin-block-end: 0;
position: absolute;
z-index: 3;
inset-block-start: calc(var(--input-padding-block) + 0px);
inset-inline-start: var(--input-padding-inline);
pointer-events: none;
opacity: 1;
transform-origin: 0 0;
transform: scale(1);
transition: all var(--animation-duration);
.required {
transition: all var(--animation-duration);
}
}
&.focus,
&.filled {
label {
inset-block-start: calc(var(--input-padding-block) + 0px);
opacity: 1;
.required {
opacity: 0;
}
}
}
}
&:has(input:user-invalid, textarea:user-invalid, select:user-invalid) {
position: relative;
.form-control-error {
margin-block-start: 5px;
margin-block-end: 0;
display: block;
}
}
}
.grecaptcha-badge {
display: none !important;
}
.cf-turnstile {
line-height: 0;
} .input-radio-wrapper {
display: inline-grid;
grid-template-columns: minmax(var(--input-radio-size), max-content) auto;
gap: var(--input-radio-block-gap) var(--input-radio-inline-gap);
align-items: center;
input[type="radio"] {
margin: 0;
padding: 0;
appearance: none;
align-self: start;
display: grid;
place-content: center;
width: var(--input-radio-size);
height: var(--input-radio-size);
color: var(--input-radio-font-color, var(--input-font-color));
background-color: var(--input-radio-background-color, var(--input-background-color));
border: var(--input-radio-border-size, var(--input-border-size)) solid var(--input-radio-border-color, var(--input-border-color));
border-radius: var(--input-radio-border-radius, 50%);
cursor: pointer;
outline: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&::before {
font-family: var(--font-family-icon);
content: '\e914';
font-size: var(--input-font-size-2);
opacity: 0;
transition: opacity var(--animation-duration);
}
&:hover,
&:focus-visible {
color: var(--input-radio-font-color-hover, var(--input-font-color-hover));
background-color: var(--input-radio-background-color-hover, var(--input-background-color-hover));
border-color: var(--input-radio-border-color-hover, var(--input-border-color-hover));
}
&:focus,
&:focus-visible {
outline: var(--input-outline);
}
&:checked {
color: var(--input-radio-font-color-checked, var(--input-font-color-hover));
background-color: var(--input-radio-background-color-checked, var(--input-background-color-checked));
border-color: var(--input-radio-border-color-checked, var(--input-border-color-checked));
&::before {
opacity: 1;
}
}
}
label {
display: inline-block;
line-height: normal;
font-size: var(--input-font-size-2);
color: var(--input-font-color);
cursor: pointer;
a {
color: inherit;
}
}
&:has(input[type="radio"]:valid:checked) {
input[type="radio"] {
color: var(--input-radio-font-color-checked);
background-color: var(--input-radio-background-color-checked);
border-color: var(--input-radio-border-color-checked);
}
label {
color: var(--input-font-color-success);
}
}
&:has(input[type="radio"]:user-invalid) {
input[type="radio"] {
color: var(--input-font-color);
background-color: var(--input-background-color-error);
border-color: var(--input-border-color-error);
}
label {
color: var(--input-font-color-error);
}
&+.form-control-error {
display: block;
}
}
}      .form-control,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"] {
padding: var(--input-padding);
display: block;
inline-size: 100%;
block-size: auto;
font: inherit;
font-size: var(--input-font-size);
font-weight: var(--input-font-weight);
line-height: var(--input-line-height);
color: var(--input-font-color, inherit);
letter-spacing: 0;
caret-color: var(--input-font-color, inherit);
caret-shape: auto;
background-color: var(--input-background-color);
border: var(--input-border-size) solid var(--input-border-color);
border-radius: var(--input-border-radius);
box-shadow: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), box-shadow var(--animation-duration);
&:hover {
border-color: var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
}
&:focus {
border-color: var(--input-border-color-focus);
background-color: var(--input-background-color-focus);
outline: var(--input-outline);
}
&::selection {
color: #fff;
background-color: #000;
}
&::-moz-placeholder {
color: var(--input-placeholder-font-color);
}
&::-ms-input-placeholder {
color: var(--input-placeholder-font-color);
}
&:-ms-input-placeholder {
color: var(--input-placeholder-font-color);
}
&::-webkit-input-placeholder {
color: var(--input-placeholder-font-color);
}
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
opacity: .4;
background-color: transparent;
&:hover,
&:focus {
border-color: var(--input-border-color);
}
}
fieldset[disabled] & {
opacity: 1;
}
}
input[type="search"] {
appearance: none;
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
.form-control-group {
&:has(input:user-valid) {
.form-control,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"] {
color: var(--input-font-color-success);
background-color: var(--input-background-color-success);
border-color: var(--input-border-color-success);
}
}
&:has(textarea:user-valid) {
textarea {
color: var(--input-font-color-success);
background-color: var(--input-background-color-success);
border-color: var(--input-border-color-success);
}
}
&:has(input:user-invalid) {
.form-control,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"] {
color: var(--input-font-color-error);
background-color: var(--input-background-color-error);
border-color: var(--input-border-color-error);
}
}
&:has(textarea:user-invalid) {
textarea {
color: var(--input-font-color-error);
background-color: var(--input-background-color-error);
border-color: var(--input-border-color-error);
}
}
&.has-effect {
.form-control,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"] {
padding-block-start: calc(var(--input-padding-block) + 18px);
}
&.filled {
&.has-error {
.form-control,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"] {
border-color: var(--input-border-color-error);
}
}
}
}
} input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
background-color: rgba(0, 0, 0, 0) !important;
transition: background-color 84600s ease-in-out 0s;
-webkit-text-fill-color: var(--input-font-color) !important;
}
textarea {
margin: 0;
overflow: auto;
resize: vertical;
&.auto-size {
width: 100%;
resize: none;
field-sizing: content;
}
} table {
inline-size: 100%;
border: none;
border-collapse: collapse;
border-spacing: 0;
empty-cells: hide;
>thead {
>tr {
>th {
padding: 15px;
font-size: var(--font-size-body);
text-align: left;
&:last-child {
border-right: none;
}
&.align-center {
text-align: center;
}
&.align-right {
text-align: right;
}
}
}
}
>tbody,
>tfoot {
>tr {
>td,
>th {
padding: 15px;
font-size: var(--font-size-body);
background-color: transparent;
&:last-child {
border-right: none;
}
&.align-center {
text-align: center;
}
&.align-right {
text-align: right;
}
}
&:nth-child(even) {
>td {
background-color: transparent;
}
}
}
}
}
.table-wrapper {
overflow-x: auto;
}     nav {
ul,
menu {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
font-size: 1em;
font-style: normal;
font-weight: normal;
background: none;
&::before {
display: none;
content: '';
background: none;
}
a {
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: none;
outline: none;
}
}
}
}
}
nav.category {
display: flex;
flex-direction: column;
align-items: center;
gap: 0 30px;
>.header {
padding-block: 30px;
display: none;
align-items: center;
justify-content: space-between;
gap: 20px;
background-color: transparent;
border: 1px solid hsl(from currentColor h s l / .15);
.title {
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
font-weight: 400;
}
svg {
inline-size: 12px;
}
}
>menu,
>ul {
margin: 0;
padding: 4px;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 12px;
inline-size: auto;
background-color: light-dark(hsl(from var(--color-neutral-100) h s l / .22), hsl(from var(--color-cyan-500) h s l / .22));
border-radius: var(--border-radius-full);
border-block-end: 1px solid var(--tab-header-border-color);
li {
margin: 0;
display: inline-flex;
font-family: var(--font-family-heading);
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
font-weight: 500;
gap: 0;
border-radius: var(--border-radius-full);
>a {
padding: 12px 24px;
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0 .5em;
inline-size: 100%;
text-decoration: none;
white-space: nowrap;
color: inherit;
background-color: light-dark(transparent, transparent);
border: 1px solid hsl(from currentColor h s l / .15);
border-radius: var(--border-radius-full);
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
.count {
display: none;
}
&:hover {
color: light-dark(var(--color-white), var(--color-white));
background-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
border-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
}
}
&.active {
>a {
color: light-dark(var(--color-white), var(--color-white));
background-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
border-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
}
}
}
}
@media (max-width: 991px) {
>.header {
padding: 16px clamp(20px, 3vw, 28px);
display: flex;
inline-size: 100%;
background-color: light-dark(hsl(from var(--color-neutral-100) h s l / .22), hsl(from var(--color-cyan-500) h s l / .22));
border-radius: 28px;
cursor: pointer;
}
>menu,
>ul {
padding: 0;
position: absolute;
z-index: 3;
inset-block-start: calc(100% - 1px);
inline-size: 100%;
display: none;
flex-direction: column;
gap: 0;
background-color: light-dark(hsl(from var(--color-neutral-100) h s l / .6), hsl(from var(--color-dark-950) h s l / .6));
border-radius: 0;
>li {
inline-size: 100%;
flex: 1 1 auto;
border-radius: 0;
>a {
padding-block: 15px;
white-space: normal;
border: 0;
border-radius: 0;
&:hover {
color: light-dark(var(--color-white), var(--color-white));
background-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
}
}
&.active {
>a {
color: light-dark(var(--color-white), var(--color-white));
background-color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
}
}
}
}
&.opened {
>.header {
background-color: light-dark(var(--color-white), var(--color-white));
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
>menu,
>ul {
display: flex;
background-color: light-dark(var(--color-white), var(--color-white));
}
}
}
}
.category-nav-component {
margin-block: clamp(40px, 5vw, 60px);
position: relative;
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
body:has(.category-nav-component nav.opened) {
&::before {
opacity: 1;
}
.category-nav-component {
position: relative;
z-index: 21;
}
}
nav.footer {
position: relative;
display: inline-flex;
align-items: center;
ul,
menu {
display: flex;
flex-direction: column;
gap: 0 calc(var(--grid-gap) / 2);
@media screen and (min-width: 992px) {
flex-direction: row;
}
li {
margin: 0;
padding: 0;
font-size: var(--footer-font-size-small);
line-height: var(--font-line-height-2);
color: var(--footer-color-text-light);
a {
font-size: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&.active {
a {
text-decoration: underline;
}
}
}
}
}
nav.footer-links {
ul,
menu {
display: flex;
flex-direction: column;
gap: var(--footer-items-block-gap);
li {
margin: 0;
padding: 0;
font-size: 1.125rem;
line-height: var(--font-line-height-2);
a {
font-size: inherit;
line-height: inherit;
color: inherit;
text-decoration: none;
text-decoration-skip-ink: auto;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
&:hover {
text-decoration: underline;
}
}
&.active {
a {
text-decoration: underline;
}
}
}
}
}
:root {
--primary-nav-alpha: .6;
--primary-nav-item-color: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-item-color-hover: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-item-color-active: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-item-color-highlight: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--primary-nav-item-color-opened: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-item-color-opened-hover: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-item-color-opened-active: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-sub-item-color: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-sub-item-color-hover: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--primary-nav-sub-item-color-active: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--primary-nav-sub-item-color-opened: light-dark(var(--color-dark-950), var(--color-white));
--primary-nav-sub-item-color-opened-hover: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--primary-nav-sub-item-color-opened-active: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--primary-nav-sub-bg-color: light-dark(var(--color-neutral-100), var(--color-dark-950));
--primary-nav-item-font-weight: 500;
--primary-nav-item-font-size: var(--font-size-body-sm);
--primary-nav-item-font-size-opened: clamp(var(--font-size-body), 2.25vw, var(--font-size-body-xl));
--primary-nav-sub-item-font-weight: 500;
--primary-nav-sub-item-font-size: var(--font-size-body-sm);
--primary-nav-sub-item-font-size-opened: clamp(var(--font-size-body), 2.25vw, var(--font-size-body-xl));
} #primary-nav-desktop-container {
margin-block: 0;
display: none;
@media screen and (min-width: 1200px) {
display: block;
}
}
#primary-nav-mobile-container {
display: block;
@media screen and (min-width: 1200px) {
display: none;
}
}
nav.primary {
display: flex;
flex-direction: column;
>.header {
margin-block-end: 20px;
display: none;
.title {
margin-block-end: 0;
font-size: var(--font-size-body-sm);
line-height: 16px;
font-weight: 400;
text-transform: uppercase;
color: hsl(from var(--header-color) h s l / var(--header-alpha));
}
}
ul,
menu {
li {
line-height: 1em;
a {
line-height: 1.25em;
display: block;
}
}
}
>ul,
>menu {
display: flex;
flex-direction: column;
gap: 10px 0;
@media screen and (min-width: 1200px) {
flex-direction: row;
align-items: center;
gap: 0 clamp(25px, 3vw, 50px);
}
>li {
position: relative;
line-height: 1;
>a {
padding: 5px 0;
position: relative;
z-index: 2;
font-family: var(--font-family-base);
font-size: var(--primary-nav-item-font-size-opened);
font-weight: var(--primary-nav-item-font-weight);
color: var(--primary-nav-item-color);
display: inline-block;
text-decoration: none;
transition: color var(--animation-duration), padding var(--animation-duration);
@media screen and (min-width: 1200px) {
padding: 8px 0;
font-size: var(--primary-nav-item-font-size);
line-height: 20px;
white-space: nowrap;
}
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-item-color-opened);
}
&::before {
position: absolute;
inset-block-end: 4px;
inset-inline: 0;
block-size: 1px;
display: none;
content: '';
background-color: currentColor;
opacity: 0;
transition: opacity var(--animation-duration);
@media screen and (min-width: 1200px) {
display: block;
}
}
&::after {
position: absolute;
inset-block-end: 12px;
inset-inline-start: 0;
inline-size: 0;
block-size: 1px;
display: none;
content: '';
background-color: currentColor;
transition: inline-size var(--animation-duration);
@media screen and (min-width: 1200px) {
display: none;
}
}
&:hover {
color: var(--primary-nav-item-color-hover);
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-item-color-opened-hover);
}
&::before {
@media screen and (min-width: 1200px) {
opacity: 1;
}
}
&::after {
@media screen and (min-width: 1200px) {
inline-size: 100%;
}
}
}
}
&.active {
>a {
color: var(--primary-nav-item-color-active);
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-item-color-opened-active);
}
&::before {
@media screen and (min-width: 1200px) {
opacity: 1;
}
}
&::after {
@media screen and (min-width: 1200px) {
inline-size: 100%;
}
}
&:hover {
color: var(--primary-nav-item-color-hover);
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-item-color-opened-hover);
}
}
}
}
&.parent {
position: relative;
&.full-width {
position: static;
>.sub,
>ul {
@media screen and (min-width: 1200px) {
margin-inline: auto;
inline-size: 100dvw;
max-inline-size: var(--container-max-width);
}
}
}
>a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0 .5em;
&:hover {
color: var(--primary-nav-item-color-hover);
}
&:has(svg) {
svg {
fill: currentColor;
inline-size: .5em;
transition: transform var(--animation-duration);
}
}
}
>ul,
>.sub {
color-scheme: dark !important;
padding-block: 0;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--animation-duration), padding var(--animation-duration);
overflow: hidden;
@media screen and (min-width: 1200px) {
margin-inline: auto;
padding: 0;
padding-block-start: 40px;
position: absolute;
inset-block-end: 0;
inset-inline-start: -20px;
opacity: 0;
pointer-events: none;
display: block !important;
inline-size: calc(100vw - calc(var(--page-gap) * 2));
max-inline-size: 320px;
overflow: visible;
transform: translate(0, calc(100% - 40px));
transition: opacity var(--animation-duration), transform var(--animation-duration);
html.is-safari & {
pointer-events: auto;
display: none !important;
}
}
&::before {
display: none;
@media screen and (min-width: 1200px) {
position: absolute;
inset-block-start: 1px;
inset-inline-start: 50%;
display: none;
content: '';
inline-size: 0;
block-size: 0;
opacity: 1;
transform: translate(-50%, -100%);
border-style: solid;
border-width: 0 10px 8px 10px;
border-color: transparent transparent var(--primary-nav-sub-bg-color) transparent;
transition: opacity var(--animation-duration), transform var(--animation-duration);
}
}
}
>.sub {
>* {
min-block-size: 0;
}
&::before {
@media screen and (min-width: 1200px) {
position: absolute;
content: '';
display: none;
inset-block-start: calc(30px + 1px);
inset-inline-start: 50%;
inline-size: 0;
block-size: 0;
border-style: solid;
border-width: 0px 15px 15px 15px;
border-color: transparent transparent var(--primary-nav-sub-bg-color) transparent;
transform: translate(-50%, -100%);
pointer-events: none;
}
}
>.inner {
position: relative;
@media screen and (min-width: 1200px) {
padding: 20px; display: flex;
flex-direction: column;
gap: 0;
justify-content: space-between;
background-color: var(--primary-nav-sub-bg-color);
border: none;
}
&::before {
display: none;
@media screen and (min-width: 1200px) {
position: absolute;
z-index: -1;
inset-block: 0;
inset-block-start: calc(var(--header-height) * -1);
inset-inline-start: 50%;
display: none;
content: '';
inline-size: 100dvw;
opacity: 1;
background-color: var(--header-opened-background-color);
transform: translate(-50%, 0);
transition: opacity var(--animation-duration), transform var(--animation-duration);
}
}
&::after {
display: none;
@media screen and (min-width: 1200px) {
position: absolute;
z-index: 0;
inset-block-start: 0;
inset-inline-start: 50%;
display: none;
content: '';
inline-size: 100dvw;
block-size: 1px;
background-color: hsl(from currentColor h s l / .3);
transform: translate(-50%, 0);
}
}
>ul {
margin-block-start: 10px;
padding-inline: 0;
@media screen and (min-width: 1200px) {
margin-block: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0 20px;
}
>li {
color: var(--primary-nav-sub-item-color);
&+li {
border-block-start: 1px solid hsl(from currentColor h s l / .15);
}
>a {
padding-block: .875em;
padding-inline: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0 20px;
color: var(--primary-nav-sub-item-color);
font-size: var(--primary-nav-sub-item-font-size-opened);
font-weight: var(--primary-nav-sub-item-font-weight);
line-height: normal;
@media screen and (min-width: 1200px) {
position: relative;
padding-block: .875em;
padding-inline: 0;
font-size: var(--primary-nav-sub-item-font-size);
}
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-sub-item-color-opened);
}
&:hover {
color: var(--primary-nav-sub-item-color-hover);
border-color: currentColor;
@media screen and (min-width: 1200px) {
color: var(--primary-nav-sub-item-color-hover);
background-color: light-dark(transparent, transparent);
}
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-sub-item-color-opened-hover);
}
}
&:has(svg) {
svg {
fill: currentColor;
flex-shrink: 0;
inline-size: .875em;
@media screen and (min-width: 1200px) {
inline-size: .5em;
}
}
}
}
&.active {
>a {
color: var(--primary-nav-sub-item-color-active);
@media screen and (min-width: 1200px) {
color: var(--primary-nav-sub-item-color-active);
}
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-sub-item-color-opened-active);
}
&:hover {
@media screen and (min-width: 1200px) {
color: var(--primary-nav-sub-item-color-hover);
}
body.header-opened &,
body.header-opening & {
color: var(--primary-nav-sub-item-color-opened-hover);
}
}
}
}
}
}
}
}
ul {
>li {
&+li {
margin-block-start: 0;
@media screen and (min-width: 1200px) {
margin-block-start: 0;
}
}
>a {
margin: 0;
padding: 6px 0;
position: relative;
display: block;
font-size: clamp(var(--font-size-body), 1.5vw, 1.125rem);
line-height: var(--font-line-height-3);
color: var(--primary-nav-item-color-opened);
text-decoration: none;
transition: color var(--animation-duration), background-color var(--animation-duration);
@media screen and (min-width: 1200px) {
padding: 0;
display: block;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
color: var(--primary-nav-sub-item-color);
}
&:hover {
color: var(--primary-nav-item-color-opened-hover);
@media screen and (min-width: 1200px) {
color: var(--primary-nav-sub-item-color-hover);
}
}
}
>.sub {
@media screen and (min-width: 1200px) {
margin-block-start: 20px;
}
>.inner {
ul {
li {
a {
font-family: var(--font-family-heading);
font-size: 1.125rem;
font-weight: 600;
display: block;
@media screen and (min-width: 1200px) {
padding-block: 7px;
}
}
}
}
}
}
&.active {
>a {
color: var(--primary-nav-item-color-opened-active);
@media screen and (min-width: 1200px) {
color: var(--primary-nav-sub-item-color-active);
}
}
}
}
}
&:hover {
>a {
@media screen and (min-width: 1200px) {
color: var(--primary-nav-item-color-hover);
}
&::before {
@media screen and (min-width: 1200px) {
opacity: 1;
}
}
&::after {
@media screen and (min-width: 1200px) {
inline-size: 100%;
}
}
&:has(svg) {
svg {
transform: rotateX(180deg);
}
}
}
>ul,
>.sub {
@media screen and (min-width: 1200px) {
opacity: 1;
pointer-events: auto;
transform: translate(0, calc(100% - 25px));
}
}
}
&.opened {
>a {
&::after {
@media screen and (min-width: 1200px) {
inline-size: 100%;
}
}
&:has(svg) {
svg {
transform: rotateX(180deg);
}
}
}
>ul,
>.sub {
padding-block: 0;
grid-template-rows: 1fr;
@media screen and (min-width: 1200px) {
padding-block: 0;
}
}
}
}
}
}
} :root {
--top-nav-item-color: light-dark(var(--color-dark-950), var(--color-neutral-100));
--top-nav-item-color-hover: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--top-nav-item-color-active: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--top-nav-item-color-opened: light-dark(var(--color-neutral-100), var(--color-neutral-100));
--top-nav-item-color-opened-hover: light-dark(var(--color-brand-primary), var(--color-brand-primary));
--top-nav-item-color-opened-active: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
#top-nav-mobile-container {
margin-block-start: 0;
}
#top-nav-desktop-container {
display: none;
}
nav.top {
display: flex;
flex-direction: column;
>.header {
margin-block-end: 30px;
.title {
margin-block-end: 0;
font-family: var(--font-family-heading);
color: var(--top-nav-item-color);
font-size: var(--font-size-body-xl);
font-weight: 400;
line-height: var(--font-line-height-3);
text-transform: none;
text-wrap: balance;
}
}
ul,
menu {
li {
line-height: var(--font-line-height-1);
a {
line-height: var(--font-line-height-2);
display: block;
}
}
}
>ul,
>menu {
display: flex;
flex-direction: column;
gap: calc(var(--page-gap) / 2) 0;
@media only screen and (min-width: 1200px) {
flex-direction: column;
gap: 0;
}
>li {
position: relative;
line-height: var(--font-line-height-1);
border-block-end: 1px solid hsl(from var(--top-nav-item-color) h s l / .55);
&:last-child {
border-block-end: none;
}
>a {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
gap: 0 25px;
padding-block: calc(var(--page-gap) / 2);
padding-inline-end: 50px;
color: var(--top-nav-item-color);
font-family: var(--font-family-heading);
font-size: var(--font-size-heading-2);
font-weight: 400;
line-height: var(--font-line-height-3);
text-decoration: none;
text-transform: uppercase;
transition: color var(--animation-duration), padding var(--animation-duration);
>figure {
margin: 0;
inline-size: 100%;
block-size: 100%;
overflow: hidden;
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
}
>.body {
display: flex;
flex-direction: column;
grid-column: 2;
>.text {
margin-block-end: 0;
display: block;
line-height: var(--font-line-height-3);
text-wrap: pretty;
}
>.description {
margin-block-start: calc(var(--page-gap) / 4);
display: block;
color: hsl(from var(--top-nav-item-color) h s l / .7);
font-family: var(--font-family-base);
font-size: var(--font-size-body);
font-weight: 300;
line-height: var(--font-line-height-3);
text-transform: none;
}
}
>svg {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 16px;
inline-size: 16px;
transform: translateY(-50%);
transition: transform var(--animation-duration);
}
>figure,
>.body {
grid-row: 1;
}
@media (hover: hover) {
&:hover {
color: var(--top-nav-item-color-hover);
>svg {
transform: translate(calc(var(--page-gap) / 5), -50%);
}
}
}
}
&.active {
>a {
color: var(--top-nav-item-color-active);
@media (hover: hover) {
&:hover {
color: var(--top-nav-item-color-hover);
}
}
}
}
@media screen and (min-width: 992px) {
>a {
white-space: normal;
}
}
@media screen and (max-width: 991px) {
>a {
grid-template-columns: minmax(0, 1fr);
gap: calc(var(--page-gap) / 2) calc((var(--grid-gap) * 3) / 4);
>figure {
display: none;
}
>.body {
grid-column: 1;
}
}
}
}
}
}  .content-gallery-component {
container-type: inline-size;
container-name: content-gallery-component;
.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: var(--grid-gap);
@container content-gallery-component (max-width: 480px) {
grid-template-columns: 1fr;
}
@container content-gallery-component (min-width: 768px) {
grid-template-columns: repeat(4, 1fr);
}
>.item {
&:first-child {
@container content-gallery-component (min-width: 768px) {
grid-column: span 2;
grid-row: span 2;
}
}
figure {
position: relative;
overflow: hidden;
height: 100%;
border-radius: 0;
a {
display: block;
text-decoration: none;
outline: none;
height: 100%;
border-radius: 0;
&:hover {
img {
transform: scale(1.03);
}
}
}
img {
min-width: 100%;
min-height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform var(--animation-duration);
}
}
}
}
}
.lg-outer .lg-thumb-item {
border-width: 1px;
&.active,
&:hover {
border-color: var(--color-brand-primary);
}
}
.lg-next,
.lg-prev {
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&:hover {
&:not(.disabled) {
color: var(--color-brand-primary);
background-color: transparent;
}
}
} @keyframes loader-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.entity-list-component {
.list-container {
position: relative;
&::before {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
content: '';
pointer-events: none;
}
>.buttons-container {
margin-block-start: 30px;
display: flex;
transition: opacity var(--animation-duration);
&.align-center {
justify-content: center;
}
}
.loader {
position: absolute;
z-index: 3;
opacity: 0;
bottom: 0;
left: 50%;
display: flex;
align-items: center;
gap: 0 20px;
color: currentColor; transform: translateX(-50%);
transition: opacity var(--animation-duration);
pointer-events: none;
.icon {
margin-inline: auto;
width: 40px;
height: 40px;
display: block;
svg {
width: 100%;
.dots {
fill: currentColor;
}
.back {
fill: currentColor;
fill-opacity: .05;
}
.front {
fill: var(--color-brand-primary);
transform-origin: 50% 50%;
animation: loader-rotate 3s linear infinite;
}
}
}
.text {
font-size: var(--font-size-body);
line-height: var(--font-line-height-1);
color: currentColor;
}
}
.list {
opacity: 1;
transition: opacity var(--animation-duration);
&[data-masonry] {
opacity: 0;
&.images-loaded {
opacity: 1;
}
}
}
}
&[data-lazy-load="true"] {
.list-container {
padding-block-end: 0;
>.buttons-container {
margin-block-start: 0;
pointer-events: none;
overflow: hidden;
height: 0;
}
}
}
&.loading {
.list-container {
&::before {
display: block;
}
.loader {
opacity: 1;
}
.list {
opacity: .5;
&[data-masonry] {
opacity: 0;
&.images-loaded {
opacity: .5;
}
}
}
>.buttons-container {
opacity: 0;
}
}
}
&.loaded {
.list-container {
>.buttons-container {
margin-block-start: 0;
display: none;
}
}
}
}
.entity-navigation-component {
container-type: inline-size;
container-name: entity-navigation-component;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
ul {
li {
line-height: 1em;
&.prev,
&.next {
@container entity-navigation-component (max-width: 479px) {
display: none;
}
a {
--_control-icon-circle-size: calc(var(--control-number-inline-size) + 2px);
padding: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0 1em;
min-inline-size: var(--control-number-inline-size);
block-size: var(--control-number-block-size);
font-size: var(--control-icon-font-size);
line-height: var(--button-line-height);
font-weight: 400;
color: var(--control-color);
text-decoration: none;
background: none;
background-color: var(--control-color-bg);
border: var(--control-icon-border-width) solid var(--control-icon-border-color);
border-radius: var(--control-icon-border-radius);
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&::before,
&::after {
display: none;
}
&:hover {
color: var(--control-color-hover);
background-color: var(--control-color-bg-hover);
border-color: var(--control-color-border-hover);
text-decoration: none;
}
}
svg {
margin: 0;
position: relative;
z-index: 1;
flex-shrink: 0;
display: grid;
place-content: center;
inline-size: var(--control-number-inline-size);
block-size: var(--control-number-block-size);
font-size: var(--control-number-font-size);
color: inherit;
background: none;
border: none;
border-radius: 50%;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), transform var(--animation-duration);
use {
transform-origin: center;
transform: scale(.25);
}
}
.text {
display: none;
font-size: var(--control-icon-font-size);
@container entity-navigation-component (min-width: 768px) {
display: none;
}
}
&.disabled {
a {
cursor: default !important;
pointer-events: none;
opacity: .3;
}
}
}
&.prev {
a {
flex-direction: row-reverse;
&::before {
inset-inline-end: auto;
inset-inline-start: calc((var(--control-number-inline-size) - var(--_control-icon-circle-size)) / 2);
}
}
}
&.number {
margin: 0 !important;
line-height: 1;
a {
margin: 0;
padding-inline: 0;
position: relative;
z-index: 2;
display: grid;
place-content: center;
min-inline-size: var(--control-number-inline-size);
block-size: var(--control-number-block-size);
font-family: var(--font-family-base);
font-size: var(--control-number-font-size);
text-align: center;
text-decoration: none;
font-weight: 400;
color: var(--control-color);
background-color: var(--control-color-bg);
border: var(--control-number-border-width) solid var(--control-number-border-color);
border-radius: var(--control-number-border-radius);
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&::before,
&::after {
display: none;
}
&:hover {
color: var(--control-color-hover);
background-color: var(--control-color-bg-hover);
border-color: var(--control-color-border-hover);
}
}
&.disabled {
a {
pointer-events: none;
opacity: .3;
text-decoration: none;
}
}
&.active {
a {
color: var(--control-color-active);
background-color: var(--control-color-bg-active);
border-color: var(--control-color-border-active);
}
}
}
&.separator {
margin-inline: 0 !important;
line-height: 1;
a {
margin: 0;
padding-inline: 0;
position: relative;
z-index: 2;
display: grid;
place-content: center;
min-inline-size: var(--control-number-inline-size);
block-size: var(--control-number-block-size);
font-size: var(--control-number-font-size);
font-weight: 400;
letter-spacing: .08em;
text-align: center;
color: var(--control-color);
background-color: var(--control-color-bg);
border: var(--control-number-border-width) solid var(--control-number-border-color);
border-radius: var(--control-number-border-radius);
text-decoration: none;
pointer-events: none;
&::before,
&::after {
display: none;
}
}
}
}
}
ul.paging {
margin-inline: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
inline-size: auto;
@container entity-navigation-component (min-width: 768px) {
flex-wrap: nowrap;
}
li {
&.prev {
margin-inline-start: auto;
margin-inline-end: 40px;
}
&.next {
margin-inline-start: 40px;
margin-inline-end: auto;
}
}
&.first-last-only {
li {
display: none;
&:first-child,
&:last-child {
display: block;
}
}
}
}
}
.entity-list-component {
.entity-navigation-component {
margin-inline: auto;
max-inline-size: none;
&:first-child {
margin-block-end: clamp(30px, 5vw, 40px);
}
&:last-child {
margin-block-start: clamp(30px, 5vw, 40px);
}
}
}
#footer {
--_border-color: light-dark(hsl(from var(--color-cyan-500) h s l / .46), hsl(from var(--color-cyan-500) h s l / .46));
position: relative;
z-index: 1;
color-scheme: dark;
color: var(--footer-color-text);
background-color: var(--color-bg-footer);
overflow: clip;
>.footer-row {
&:nth-child(1) {
.footer-inner {
padding-block: 60px;
padding-block-end: 40px;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
}
@media screen and (min-width: 992px) {
padding-block-end: 0;
}
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 60px var(--grid-gap);
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 1fr 1fr 1.125fr;
}
>.cell {
&:nth-child(1) {
@media screen and (min-width: 768px) {
grid-column: span 2;
}
}
&:nth-child(2) {
@media screen and (min-width: 768px) {
grid-column: span 2;
}
@media screen and (min-width: 992px) {
grid-column: span 1;
}
}
&:nth-child(3) {
@media screen and (min-width: 768px) {
grid-column: span 4;
}
@media screen and (min-width: 992px) {
grid-column: span 1;
}
}
}
}
}
&:nth-child(2) {
.footer-inner {
padding-block: 0;
}
.footer-grid {
display: grid;
place-items: center;
@media screen and (min-width: 768px) {
place-items: end;
}
}
}
&:nth-child(3) {
.footer-inner {
padding-block: 30px;
padding-block-start: 25px;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
}
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0 var(--grid-gap);
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 1fr 1fr 1.125fr;
align-items: end;
}
>.cell {
@media screen and (min-width: 768px) {
grid-column: span 2;
}
&:nth-child(2) {
@media screen and (min-width: 768px) {
text-align: right;
}
@media screen and (min-width: 992px) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: end;
gap: 0 calc(var(--grid-gap) / 2);
text-align: left;
}
>.left-side,
>.right-side {
@media screen and (min-width: 992px) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: end;
gap: 0 calc(var(--grid-gap) / 2);
text-align: left;
}
}
}
}
}
}
}
.footer-section {
>.header {
margin-block-end: calc(var(--footer-items-block-gap) * 2);
.title {
margin: 0;
font-family: var(--font-family-heading);
font-size: var(--footer-font-size-heading);
line-height: var(--font-line-height-2);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .15em;
color: transparent;
background-image: linear-gradient(90deg, var(--color-cyan-500), var(--color-cyan-500));
background-clip: text;
a {
text-decoration: none;
color: inherit;
&:hover {
text-decoration: underline;
}
}
}
}
&.collapse {
>.header {
position: relative;
&::before {
font-family: var(--font-family-icon);
position: absolute;
inset-block-start: 50%;
inset-inline-end: 0;
content: '\e901';
display: block;
font-size: 12px;
color: inherit;
transform: translate(0, -50%);
transition: transform var(--animation-duration);
@media screen and (min-width: 768px) {
display: none;
}
}
.title {
padding-inline-start: 0;
padding-inline-end: 30px;
cursor: pointer;
@media screen and (min-width: 768px) {
padding: 0;
cursor: default;
}
}
}
>.body {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows var(--animation-duration), padding var(--animation-duration);
@media screen and (min-width: 768px) {
grid-template-rows: 1fr;
}
>.inner {
position: relative;
min-block-size: 0;
visibility: hidden;
transition: visibility var(--animation-duration);
@media screen and (min-width: 768px) {
visibility: visible;
}
}
}
&.opened {
>.header {
&::before {
transform: translate(0, -50%) rotateX(180deg);
}
}
>.body {
padding-block: 0;
grid-template-rows: 1fr;
@media screen and (min-width: 768px) {
padding-block: 0;
grid-template-rows: 1fr;
}
>.inner {
visibility: visible;
}
}
}
}
}
.logo {
margin-block-end: 20px;
@media screen and (min-width: 768px) {
margin-block-end: 0;
}
svg {
margin-inline: auto;
@media screen and (min-width: 768px) {
margin-inline: 0;
}
}
}
.cta-container {
color: light-dark(var(--color-black), var(--color-white));
.title {
margin-inline: auto;
max-inline-size: 300px;
font-size: var(--font-size-body-xl);
line-height: var(--font-line-height-2);
text-wrap: balance;
@media screen and (min-width: 768px) {
margin-inline: 0;
}
.nowrap {
white-space: nowrap;
}
}
.buttons-container {
margin-block-start: 30px;
display: flex;
justify-content: center;
@media screen and (min-width: 768px) {
justify-content: flex-start;
}
}
}
.address-container {
p {
&:first-child {
margin-block-end: 0;
}
&:last-child {
margin-block-start: 0;
}
}
}
.quick-contact-component {
>.title {
display: none;
}
ul {
gap: .5em 0;
align-items: center;
@media screen and (min-width: 768px) {
align-items: flex-start;
}
li {
a {
font-size: clamp(1.25rem, 2vw, 1.4375rem);
color: inherit;
}
.label,
.icon {
display: none;
}
}
}
}
.social-media-component {
margin-block-start: 24px;
>.title {
display: none;
}
ul {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
@media screen and (min-width: 768px) {
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
li {
font-size: var(--footer-font-size-sm);
a {
min-inline-size: 120px;
color: var(--footer-color-text);
justify-content: center;
border-color: light-dark(hsl(from var(--color-black) h s l / .24), hsl(from var(--color-white) h s l / .24));
@media screen and (min-width: 1200px) {
min-inline-size: 0;
}
.icon {
display: none;
}
&:hover {
color: var(--footer-color-text-light);
background-color: light-dark(var(--color-black), var(--color-white));
border-color: light-dark(var(--color-black), var(--color-white));
}
}
}
}
}
.copyright,
.designed {
font-size: var(--footer-font-size-small);
line-height: var(--font-line-height-2);
color: var(--footer-color-text-light);
@media screen and (min-width: 768px) {
white-space: nowrap;
}
a {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.theme-switch {
position: absolute;
inset-block-start: 20px;
inset-inline-end: 0;
display: flex;
justify-content: center;
.theme-switch-label {
--switch-track-inline-size: 44px;
--switch-track-block-size: 24px;
--switch-thumb-size: 18px;
--switch-track-color: light-dark(var(--color-black), var(--color-black));
--switch-thumb-color: var(--color-white);
display: inline-flex;
align-items: center;
cursor: pointer;
}
.theme-switch-input:checked~.track {
background-color: var(--color-brand-primary);
}
.theme-switch-input:checked~.track .thumb {
inset-inline-start: calc(var(--switch-track-inline-size) - var(--switch-thumb-size) - 3px);
}
.track {
position: relative;
display: inline-block;
inline-size: var(--switch-track-inline-size);
block-size: var(--switch-track-block-size);
background-color: var(--switch-track-color);
border-radius: var(--border-radius-full);
transition: background-color var(--animation-duration);
}
.thumb {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 3px;
inline-size: var(--switch-thumb-size);
block-size: var(--switch-thumb-size);
background-color: var(--switch-thumb-color);
border-radius: 50%;
transform: translateY(-50%);
transition: inset-inline-start var(--animation-duration);
}
.theme-switch-input:checked~.track {
background-color: var(--color-brand-primary);
}
.theme-switch-input:checked~.track .thumb {
inset-inline-start: calc(var(--switch-track-inline-size) - var(--switch-thumb-size) - 3px);
}
}
}
#header {
color-scheme: dark;
margin: 0;
position: absolute;
z-index: 23;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
min-block-size: var(--header-height);
background-color: transparent;
transition: transform var(--animation-duration),
background-color var(--animation-duration),
box-shadow var(--animation-duration);
body.header-opened &,
body.header-opening & {
color-scheme: dark !important;
position: fixed;
z-index: 23;
transform: translate(0, 0) !important;
} .header-row {
margin-inline: auto;
position: relative;
color: var(--header-color);
background-color: var(--color-bg-header);
transition: background-color var(--animation-duration); .header-inner {
padding-block: 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-block-size: var(--header-height);
gap: 0 clamp(20px, 2vw, 25px);
body.header-opened &,
body.header-opening & {
&::before {
opacity: 1;
}
}
>.left-side,
>.right-side {
display: flex;
align-items: center;
}
}
&:nth-child(1) {
position: relative;
.header-inner {
padding-block: 20px;
position: relative;
align-items: center;
justify-content: space-between;
gap: 0 var(--grid-gap);
>.left-side,
>.right-side {
display: flex;
align-items: center;
gap: 0 clamp(20px, 4vw, 50px);
}
>.right-side {
gap: 0 clamp(30px, 5vw, 100px);
}
}
}
}
.logo {
position: relative;
z-index: 23;
svg {
path {
fill: var(--header-color);
transition: fill var(--animation-duration);
&.highlight {
fill: var(--color-neutral-100);
}
&.text {
fill: var(--color-dark-850);
}
}
}
}
#header-actions-desktop-container {
position: relative;
z-index: 23;
display: none;
@media screen and (min-width: 768px) {
display: block;
}
}
#header-actions-mobile-container {
@media screen and (min-width: 768px) {
display: none;
}
}
#header-compact-nav-button-container {
margin-inline: 0;
position: relative;
z-index: 23;
@media screen and (min-width: 1200px) {
display: none;
}
}
.actions-container {
.button {
--button-color: var(--header-color);
--button-background-color: transparent;
--button-border-color: var(--header-color);
--button-font-size: var(--font-size-body-md);
&:hover {
--button-color: var(--header-color);
--button-background-color: var(--header-color-hover);
--button-border-color: var(--header-color-hover);
}
}
}
} #header-compact-nav-button {
margin: 0;
padding: 0;
position: relative;
z-index: 21;
display: flex;
flex-direction: row-reverse;
gap: 10px;
align-items: center;
color: var(--header-color);
cursor: pointer;
text-decoration: none;
width: auto;
height: auto;
transition: color var(--animation-duration), transform var(--animation-duration);
.text {
margin-inline-start: 0;
display: none;
grid-template-areas: "both";
font-size: var(--font-size-body);
font-weight: 400;
text-transform: uppercase;
letter-spacing: .05em;
@media screen and (max-width: 379px) {
display: none !important;
}
>span {
text-align: right;
grid-area: both;
transition: opacity var(--animation-duration);
}
.open {
opacity: 1;
body.header-opened &,
body.header-opening & {
opacity: 0;
}
}
.close {
opacity: 0;
body.header-opened &,
body.header-opening & {
opacity: 1;
}
}
}
.patty {
--icon-size: 36px;
--line-inline-size: 36px;
--line-block-size: 1px;
position: relative;
inline-size: var(--icon-size);
block-size: var(--icon-size);
display: block;
background-color: transparent;
border: none;
border-radius: 50vw;
transition: border-color var(--animation-duration);
.line {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: var(--line-inline-size);
block-size: var(--line-block-size);
background-color: currentColor;
border-radius: 50vw;
transform-origin: 50% 50%;
transform: translate(-50%, -50%);
transition: background-color var(--animation-duration), opacity var(--animation-duration), transform var(--animation-duration), inline-size var(--animation-duration), inset-block-start var(--animation-duration), inset-inline-start var(--animation-duration);
&:nth-child(1) {
inset-block-start: calc(50% - 6px);
}
&:nth-child(2) {
inset-block-start: 50%;
opacity: 1;
}
&:nth-child(3) {
inset-block-start: calc(50% + 6px);
}
}
}
.dots {
--icon-size: 40px;
--dot-size: 3px;
position: relative;
inline-size: var(--icon-size);
block-size: var(--icon-size);
border: 1px solid currentColor;
border-radius: 5px;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
.dot {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
display: block;
inline-size: var(--dot-size);
block-size: var(--dot-size);
background-color: currentColor;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: transform var(--animation-duration), opacity var(--animation-duration);
&:nth-child(1) {
inset-block-start: calc(50% - 7px);
inset-inline-start: calc(50% - 7px);
}
&:nth-child(2) {
inset-block-start: calc(50% - 7px);
inset-inline-start: calc(50% + 7px);
}
&:nth-child(3) {
opacity: 0;
}
&:nth-child(4) {
inset-block-start: calc(50% + 7px);
inset-inline-start: calc(50% - 7px);
}
&:nth-child(5) {
inset-block-start: calc(50% + 7px);
inset-inline-start: calc(50% + 7px);
}
}
}
&:hover {
text-decoration: none;
outline: none;
color: var(--header-color-hover);
.patty {
border-color: currentColor;
.line {
background-color: currentColor;
}
}
.dots {
background-color: var(--header-color-hover);
border-color: var(--header-color-hover);
}
}
body.header-opened &,
body.header-opening & {
color: var(--header-color-opened);
.patty {
border-color: currentColor;
.line {
background-color: currentColor;
&:nth-child(1) {
inset-block-start: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
inset-block-start: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
}
}
.dots {
border-color: var(--header-color-opened);
.dot {
background-color: var(--header-color-opened);
&:nth-child(3) {
opacity: 1;
}
}
}
&:hover {
color: var(--header-color-hover);
.patty {
border-color: currentColor;
.line {
background-color: currentColor;
}
}
.dots {
background-color: var(--header-color-hover);
border-color: var(--header-color-hover);
}
}
}
} #header-compact-nav-container {
position: fixed;
z-index: 20;
inset-block: 0;
inset-inline-start: 0;
inline-size: 100%;
display: block;
opacity: 1;
pointer-events: none;
visibility: hidden;
body.header-opened &,
body.header-opening & {
visibility: visible;
pointer-events: auto;
}
body.header-closing & {
visibility: visible;
}
#header.closed & {
pointer-events: none;
}
>.outer {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 100vh;
opacity: 0;
overflow: hidden;
transform: translateY(-100%);
background-color: var(--header-opened-overlay-color);
transition: background-color var(--animation-duration) linear 0s, opacity var(--animation-duration) linear 0s, transform 0s linear var(--animation-duration);
body.header-opened &,
body.header-opening & {
opacity: 1;
transform: translateY(0);
transition: background-color var(--animation-duration) linear 0s, opacity var(--animation-duration) linear 0s, transform 0s linear 0s;
}
>.inner {
margin-inline-start: auto;
position: relative;
inset-block-start: 0;
inline-size: 100%;
max-block-size: 100dvh;
color: var(--header-color-opened);
background-color: var(--header-opened-background-color);
transition: background-color var(--animation-duration), transform var(--animation-duration);
transform: translateY(40px);
body.header-opened &,
body.header-opening & {
transform: translateY(0);
}
>.top-overlay {
position: absolute;
z-index: 3;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: var(--header-height);
display: block;
content: '';
background-color: var(--header-opened-background-color);
pointer-events: none;
&::after {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
block-size: 1px;
display: none;
content: '';
background-color: hsl(from var(--color-black) h s l / .15);
}
}
}
}
.content-outer {
padding-block-start: var(--header-height);
position: relative;
z-index: 1;
inline-size: 100%;
max-block-size: 100dvh;
overflow: auto;
scrollbar-width: none;
>.container {
block-size: 100%;
>.two-side-wrapper {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto min-content;
gap: 0;
align-items: start;
block-size: 100%;
@media screen and (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 100%;
}
>.left-side,
>.right-side {
inline-size: 100%;
}
>.left-side {
display: none;
@media screen and (min-width: 768px) {
display: block;
}
}
>.right-side {
position: relative;
block-size: 100%;
@media screen and (min-width: 768px) {
display: flex;
flex-direction: column;
flex: 1;
}
}
}
}
}
.content-inner {
margin: 0;
padding: 0;
position: relative;
inline-size: 100%;
block-size: 100%; display: flex;
flex-direction: column;
gap: var(--grid-gap);
background-color: transparent;
.content-top {
margin-block: 0;
height: 0;
overflow: hidden;
&:empty {
display: none;
}
}
.content-middle {
margin-block: 0;
padding-block: 30px;
position: relative;
flex: 1 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 40px 0;
>.two-side-wrapper {
display: flex;
flex-direction: column;
gap: var(--grid-gap);
@media screen and (min-width: 768px) {
flex-direction: row;
align-items: center;
}
}
}
.content-bottom {
margin-block-start: auto;
padding-block: 20px;
display: flex;
flex-direction: column;
gap: 10px 0; @media screen and (min-width: 559px) {
flex-direction: row;
flex-wrap: wrap;
gap: 10px 20px;
>* {
flex: 1;
}
}
&:empty {
display: none;
}
}
}
}
.meta-component {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: var(--grid-gap);
>.title {
margin-block-end: 0;
font-size: var(--font-size-body-sm);
line-height: var(--font-line-height-2);
}
ul {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
li {
padding: 4px 14px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 .5em;
font-size: var(--font-size-body);
font-weight: 400;
line-height: normal;
text-decoration: none;
color: currentColor;
background-color: hsl(from currentColor h s l / .15);
border-radius: 6px;
&::before {
content: '·';
display: none;
}
&:first-child::before {
display: none;
}
a {
padding: inherit;
display: inline-flex;
align-items: center;
gap: 0 10px;
color: inherit;
text-decoration: none;
background-color: inherit;
border: none;
border-radius: inherit;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&:hover {
text-decoration: none;
}
}
.label {
color: inherit;
}
&.simple {
padding: 0;
background: none;
border: none;
border-radius: 0;
}
&:has(a) {
padding: 0;
background-color: transparent;
border: none;
backdrop-filter: none;
a {
border: none;
}
}
&:has(img, svg) {
img,
svg {
inline-size: 1em;
block-size: auto;
max-block-size: 1em;
}
}
}
}
&.simple {
ul {
li {
padding: 0;
background-color: transparent;
border: none;
&:first-child {
border-block-start: none;
}
}
}
}
}
.page-component {
.page-content {
h1,
h2,
h3,
h4,
h5,
h6 {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
ul,
ol,
p {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
figure {
figcaption {
margin-block-start: 20px;
}
}
.align-center {
text-align: center;
}
}
.page-excerpt {
margin-block-start: calc(var(--content-section-padding) * -1);
margin-block-end: calc(min(60px, max(30px, 5vw)));
p {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
}
}  .quick-contact-component {
--_icon-size: 1.5em;
>.title {
margin: 0;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
font-weight: 400;
}
ul {
display: flex;
flex-direction: column;
li {
display: inline-flex;
align-items: center;
font-family: var(--font-family-heading);
font-size: var(--font-size-body-xl);
line-height: var(--font-line-height-2);
font-weight: 400;
gap: 0 20px;
a {
display: inline-flex;
align-items: center;
gap: 0 .625em;
font-size: inherit;
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.label {
display: block;
font-size: inherit;
font-family: var(--font-family-base);
line-height: var(--font-line-height-2);
}
.text {
display: block;
font-size: inherit;
line-height: inherit;
}
.icon {
inline-size: var(--_icon-size);
block-size: var(--_icon-size);
display: grid;
place-items: center;
svg {
inline-size: 1em;
block-size: 1em;
}
}
}
}
} .module {
color: var(--module-color);
background-color: var(--module-bg-color);
border: var(--module-border-width) solid var(--module-border-color);
border-radius: var(--module-border-radius);
.module-header {
margin-block-end: var(--module-header-gap);
padding: var(--module-padding-block) var(--module-padding-inline);
.two-side-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--grid-gap);
}
.module-title {
margin: 0;
position: relative;
font-size: var(--module-font-size-heading);
line-height: var(--font-line-height-2);
font-weight: 600;
color: var(--color-text-heading);
}
&+.module-body {
padding-block-start: var(--module-padding-block);
position: relative;
}
}
.module-body {
padding: var(--module-padding-block) var(--module-padding-inline);
.two-side-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--grid-gap);
}
&+.module-footer {
margin-block-start: var(--module-padding-block);
padding-block-start: var(--module-padding-block);
position: relative;
}
}
.module-footer {
padding: var(--module-padding-block) var(--module-padding-inline);
}
}
.layout-three-columns-wrapper,
.layout-two-columns-wrapper {
>.left-column,
>.right-column {
display: flex;
flex-direction: column;
gap: var(--module-gap) 0;
.floating-sidebar-container {
>.inner {
display: flex;
flex-direction: column;
gap: var(--module-gap) 0;
}
}
}
} .panel-overflow-hidden {
overflow: hidden;
}
.panel-agenda {
container-type: inline-size;
container-name: panel-agenda;
overflow-x: clip;
&.content-section {
padding-block-end: 0;
}
.content-section-header {
margin-inline: auto;
max-inline-size: 680px;
}
article {
--agenda-item-gap: clamp(64px, 10vw, 108px);
display: flex;
flex-direction: column;
gap: clamp(40px, 6vw, 70px);
@container panel-agenda (min-width: 992px) {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: repeat(2, auto);
align-content: center;
column-gap: clamp(40px, 6vw, 90px);
row-gap: var(--agenda-item-gap);
}
.agenda-list-component {
@container panel-agenda (min-width: 992px) {
display: contents;
}
}
.list {
display: grid;
grid-template-columns: 1fr;
column-gap: var(--grid-gap);
row-gap: var(--agenda-item-gap);
@container panel-agenda (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
@container panel-agenda (min-width: 992px) {
display: contents;
}
.item {
position: relative;
&:not(:first-child)::before {
position: absolute;
inset-block-start: calc(var(--agenda-item-gap) / -2);
inset-inline: 0;
block-size: 1px;
content: '';
background-color: light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
}
@container panel-agenda (min-width: 768px) {
&:nth-child(2)::before {
display: none;
}
}
@container panel-agenda (min-width: 992px) {
&:nth-child(1) {
grid-column: 1;
grid-row: 1;
place-content: end;
}
&:nth-child(2) {
grid-column: 3;
grid-row: 1;
place-content: end;
}
&:nth-child(3) {
grid-column: 1;
grid-row: 2;
}
&:nth-child(4) {
grid-column: 3;
grid-row: 2;
}
}
}
.title {
font-size: var(--font-size-body-xxl);
line-height: var(--font-line-height-2);
text-wrap: balance;
}
.description {
margin-block-start: 8px;
max-inline-size: 32ch;
color: var(--color-text-muted);
line-height: var(--font-line-height-2);
text-wrap: balance;
}
}
figure.main {
margin-inline: auto;
max-inline-size: 480px;
@container panel-agenda (min-width: 992px) {
grid-column: 2;
grid-row: 1 / 3;
inline-size: clamp(320px, 34vw, 480px);
max-inline-size: none;
}
img {
inline-size: 100%;
display: block;
}
}
}
}
.panel-cta {
container-type: inline-size;
container-name: panel-cta;
color-scheme: dark only;
color: var(--color-text-base);
background-color: var(--color-bg-panel);
background-image: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/panels/cta/bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
&.content-section {
padding-block: var(--content-section-padding-xl);
}
.content-section-header {
margin-block-end: 30px;
}
.content-section-title {
margin-inline: auto;
max-inline-size: 30ch;
text-wrap: balance;
}
article {
.buttons-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
}
}
.panel-intro {
container-type: inline-size;
container-name: panel-intro;
background-color: light-dark(var(--color-neutral-100), var(--color-dark-900));
overflow: clip;
.content-section-header {
margin-block-end: clamp(80px, 15vw, 150px);
.two-side-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 20px var(--grid-gap);
@container panel-intro (min-width: 768px) {
flex-wrap: nowrap;
}
}
}
.content-section-sub-title {
max-inline-size: 32ch;
}
.progress-component {
--progress-dot-size: 14px;
--progress-bar-size: 24px;
--progress-gap: 56px;
--progress-anchor: calc(var(--progress-dot-size) / 2);
position: relative;
@container panel-intro (min-width: 992px) {
--progress-gap: 0px;
--progress-anchor: calc(var(--progress-bar-size) / 2);
}
.list {
position: relative;
display: flex;
flex-direction: column;
gap: var(--progress-gap);
margin: 0;
padding: 0;
list-style: none;
@container panel-intro (min-width: 992px) {
flex-direction: row;
align-items: flex-start;
&::before {
content: "";
position: absolute;
z-index: 0;
inset-inline-start: calc((100% - 2 * var(--grid-gap)) / 3);
inset-inline-end: 0;
inset-block-start: -84px;
block-size: 15px;
background-image: repeating-linear-gradient(to right, var(--color-neutral-650) 0 1px, transparent 1px 20px);
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
}
}
.item {
position: relative;
display: grid;
grid-template-columns: var(--progress-dot-size) 1fr;
column-gap: 20px;
@container panel-intro (min-width: 992px) {
display: flex;
flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3);
flex-direction: column;
gap: var(--grid-gap);
padding-inline-end: var(--grid-gap);
}
&:nth-child(2),
&:nth-child(3) {
@container panel-intro (min-width: 992px) {
flex-basis: calc((100% + var(--grid-gap)) / 3);
}
} &:not(:last-child)::before {
content: "";
position: absolute;
z-index: 0;
inset-inline-start: calc(var(--progress-anchor) - var(--progress-bar-size) / 2);
inset-block-start: 0;
inline-size: var(--progress-bar-size);
block-size: calc(100% + var(--progress-gap));
background-color: var(--color-neutral-600);
@container panel-intro (min-width: 992px) {
inset-inline-start: 0;
inset-block-start: calc(var(--progress-anchor) - var(--progress-bar-size) / 2);
inline-size: calc(100% + var(--progress-gap));
block-size: var(--progress-bar-size);
}
}
&:nth-child(2)::before {
background: linear-gradient(to bottom, var(--color-cyan-500), var(--color-blue-400));
@container panel-intro (min-width: 992px) {
background: linear-gradient(to right, var(--color-cyan-500), var(--color-blue-400));
}
} &:last-child::before,
&:last-child::after {
content: "";
position: absolute;
}
&:last-child::before {
z-index: 0;
inset-inline-start: calc(var(--progress-anchor) - var(--progress-bar-size) / 2);
inset-block-start: 0;
inline-size: var(--progress-bar-size);
block-size: 100%;
background: linear-gradient(to bottom, var(--color-blue-400), var(--color-cyan-200));
@container panel-intro (min-width: 992px) {
inset-inline-start: 0;
inset-block-start: calc(var(--progress-anchor) - var(--progress-bar-size) / 2);
inline-size: 100%;
block-size: var(--progress-bar-size);
background: linear-gradient(to right, var(--color-blue-400), var(--color-cyan-200));
}
}
&:last-child::after {
border-style: solid;
border-color: transparent;
border-width: 0;
inset-inline-start: var(--progress-anchor);
inset-block-start: 100%;
translate: -50% 0;
inline-size: 0;
block-size: 0;
border-inline-width: calc(var(--progress-bar-size) / 2);
border-block-start-width: 16px;
border-block-start-color: var(--color-cyan-200);
@container panel-intro (min-width: 992px) {
inset-inline-start: 100%;
inset-block-start: var(--progress-anchor);
translate: 0 -50%;
border-inline-width: 0;
border-block-width: calc(var(--progress-bar-size) / 2);
border-block-start-color: transparent;
border-inline-start-width: 26px;
border-inline-start-color: var(--color-cyan-200);
}
}
&:nth-child(2) .dot {
background-color: var(--color-cyan-500);
}
&:nth-child(3) .dot {
background-color: var(--color-blue-400);
&::before {
content: "";
position: absolute;
z-index: -1;
inset-inline-start: 50%;
inset-block-start: 50%;
translate: -50% -50%;
inline-size: 608px;
block-size: 608px;
border-radius: var(--border-radius-full);
background-image:
radial-gradient(circle, rgba(194, 194, 194, .14) 0 35px, rgba(169, 169, 169, .3) 35px 37px, transparent 37px 100%),
radial-gradient(circle, rgba(198, 200, 203, .26) 0 94px, rgba(154, 156, 159, .26) 94px 96px, transparent 96px 100%),
radial-gradient(circle, rgba(198, 200, 203, .18) 0 174px, rgba(155, 155, 155, .18) 174px 176px, transparent 176px 100%),
radial-gradient(circle, rgba(198, 200, 203, .0612) 0 304px, rgba(155, 155, 155, .0432) 304px 306px, transparent 306px 100%);
}
}
}
.line {
display: contents;
@container panel-intro (min-width: 992px) {
display: block;
inline-size: 100%;
block-size: var(--progress-bar-size);
}
}
.dot {
position: absolute;
z-index: 1;
inset-inline-start: var(--progress-anchor);
inset-block-start: 0;
translate: -50% -50%;
inline-size: var(--progress-dot-size);
block-size: var(--progress-dot-size);
border-radius: var(--border-radius-full);
border: 2px solid var(--color-neutral-50);
background-color: var(--color-neutral-600);
@container panel-intro (min-width: 992px) {
inset-inline-start: 0;
inset-block-start: var(--progress-anchor);
}
}
.label {
grid-column: 2;
font-size: var(--content-section-pre-title-font-size);
color: var(--color-neutral-600);
white-space: nowrap;
margin-block-end: 15px;
@container panel-intro (max-width: 991px) {
margin-block-start: -10px;
}
@container panel-intro (min-width: 992px) {
position: absolute;
z-index: 1;
grid-column: auto;
inset-inline-start: var(--grid-gap);
inset-block-start: calc(var(--grid-gap) * -1);
margin-block-end: 0;
&::after {
content: "";
position: absolute;
inset-inline-start: -40px;
inset-block-start: 0;
inline-size: 2px;
block-size: var(--grid-gap);
background-color: var(--color-neutral-250);
}
}
}
.body {
position: relative;
z-index: 2;
grid-column: 2;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
@container panel-intro (max-width: 991px) {
margin-block-start: -10px;
}
}
.item:not(:first-child) .body {
@container panel-intro (min-width: 992px) {
position: relative;
padding-inline-start: var(--grid-gap);
&::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: calc(var(--grid-gap) * -1);
inset-block-end: 0;
inline-size: 0;
border-inline-start: 2px dashed var(--color-neutral-250);
}
}
}
.title {
min-block-size: 2lh;
max-inline-size: 26ch;
font-family: var(--font-family-base);
font-size: var(--font-size-heading-3);
line-height: var(--font-line-height-4);
font-weight: 400;
color: var(--color-dark-900);
}
.description {
max-inline-size: 30ch;
font-size: var(--font-size-body-md);
line-height: var(--font-line-height-3);
color: var(--color-neutral-700);
}
}
}
.panel-portfolio {
container-type: inline-size;
container-name: panel-portfolio;
&.content-section {
padding-block-end: 0;
}
.content-section-header {
.two-side-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px var(--grid-gap);
@container panel-portfolio (min-width: 768px) {
flex-wrap: nowrap;
align-items: flex-end;
}
}
}
.content-section-sub-title {
max-inline-size: 32ch;
}
article {
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
@container panel-portfolio (min-width: 992px) {
grid-template-columns: repeat(2, 1fr);
align-items: stretch;
}
>.cell {
&:nth-child(1) {
position: relative;
z-index: 1;
display: none;
@container panel-portfolio (min-width: 992px) {
padding: clamp(40px, 5vw, 100px);
padding-inline-start: calc(clamp(40px, 5vw, 100px) - var(--page-gap));
display: block;
block-size: 0px;
min-block-size: 100%;
max-block-size: 100%;
}
@container panel-portfolio (min-width: 1500px) {
padding-inline-start: 0;
}
&::before {
content: '';
position: absolute;
z-index: -1;
inset: 0;
inset-inline-start: calc(var(--page-gap) * -1);
background-image: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/panels/portfolio/bg.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@media screen and (min-width: 1400px) {
inset-inline-start: calc(var(--container-max-width-offset) * -1);
}
}
}
}
}
figure.main {
position: relative;
display: grid;
grid-template-areas: "both";
block-size: 100%;
overflow: hidden;
border-radius: var(--border-radius-md);
img {
grid-area: both;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity var(--animation-duration);
&.active {
opacity: 1;
}
}
}
.accordion-component {
margin-inline: calc(var(--page-gap) * -1);
@container panel-portfolio (min-width: 992px) {
margin-inline-start: 0;
}
>.item {
>.header {
@container panel-portfolio (min-width: 992px) {
padding-inline: calc(var(--accordion-body-inline-padding) * 2);
}
}
>.body {
color: light-dark(var(--color-neutral-700), var(--color-neutral-100));
@container panel-portfolio (min-width: 992px) {
padding-inline: calc(var(--accordion-body-inline-padding) * 2);
}
figure {
margin-block-end: 30px;
border-radius: var(--border-radius-md);
overflow: hidden;
@container panel-portfolio (min-width: 992px) {
display: none;
}
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
border-radius: var(--border-radius-md);
}
}
p {
max-inline-size: 48ch;
text-wrap: balance;
}
.buttons-container {
margin-block-start: clamp(30px, 5vw, 60px);
}
}
}
}
}
} .dialog {
padding: 0;
position: relative;
color: var(--dialog-color);
background-color: var(--dialog-bg-color);
border: var(--dialog-border-width) solid var(--dialog-border-color);
border-radius: var(--dialog-border-radius);
box-shadow: var(--dialog-shadow);
max-inline-size: var(--dialog-max-inline-size);
max-block-size: var(--dialog-max-block-size);
.dialog-header {
padding: var(--dialog-header-padding);
background-color: var(--dialog-header-bg-color);
border-block-end: var(--dialog-header-border-width) solid var(--dialog-header-border-color);
.title {
margin: 0;
font-size: var(--dialog-header-title-font-size);
line-height: var(--font-line-height-4);
font-weight: 600;
color: var(--dialog-header-title-color);
text-wrap: balance;
}
.sub-title {
max-inline-size: 860px;
font-size: var(--dialog-header-sub-title-font-size);
line-height: var(--font-line-height-2);
font-weight: 600;
color: var(--dialog-header-sub-title-color);
text-wrap: balance;
&:not(:first-child) {
margin-block-start: 20px;
}
}
&+.dialog-body {
padding-block-start: 0;
}
}
.dialog-body {
padding: var(--dialog-body-padding);
background-color: var(--dialog-body-bg-color);
}
.dialog-footer {
padding: var(--dialog-footer-padding);
padding-block-start: 0;
background-color: var(--dialog-footer-bg-color);
border-block-start: var(--dialog-footer-border-width) solid var(--dialog-footer-border-color);
}
.dialog-close-button {
margin: 0;
padding: 0;
position: absolute;
inset-block-start: var(--dialog-close-button-inset);
inset-inline-end: var(--dialog-close-button-inset);
inline-size: var(--dialog-close-button-inline-size);
block-size: var(--dialog-close-button-block-size);
text-align: center;
color: var(--dialog-close-button-color);
background-color: var(--dialog-close-button-bg-color);
border-radius: var(--dialog-close-button-border-radius);
border: none;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&::before,
&::after {
display: none;
}
&:hover {
[class^="icon-"],
[class*=" icon-"] {
font-size: var(--dialog-close-button-icon-size);
display: block;
color: var(--dialog-close-button-color);
transition: color var(--animation-duration);
}
&:hover {
background-color: var(--dialog-close-button-bg-color-hover);
box-shadow: none;
[class^="icon-"],
[class*=" icon-"] {
color: var(--dialog-close-button-color-hover);
}
}
}
}
} .content-section {
padding-block-start: var(--content-section-padding);
padding-block-end: var(--content-section-padding);
&.small-top-pad {
padding-block-start: var(--content-section-padding-sm);
}
&.small-bottom-pad {
padding-block-end: var(--content-section-padding-sm);
}
&.small-pad {
padding-block-start: var(--content-section-padding-sm);
padding-block-end: var(--content-section-padding-sm);
}
&.big-top-pad {
padding-block-start: var(--content-section-padding-xl);
}
&.big-bottom-pad {
padding-block-end: var(--content-section-padding-xl);
}
&.big-pad {
padding-block-start: var(--content-section-padding-xl);
padding-block-end: var(--content-section-padding-xl);
}
&.no-top-pad {
padding-block-start: 0;
}
&.no-bottom-pad {
padding-block-end: 0;
}
&.no-pad {
padding-block-start: 0;
padding-block-end: 0;
}
header {
&.align-center {
text-align: center;
}
}
&.overflow-hidden {
overflow: hidden;
}
&.light-bg {
color-scheme: light;
color: var(--color-text-base);
background-color: var(--color-bg-body);
}
&.dark-bg {
color-scheme: dark;
color: var(--color-text-base);
background-color: var(--color-bg-body);
}
}
.content-section-header,
header {
margin-block-end: var(--content-section-header-gap);
position: relative;
&.align-center {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
.content-section-pre-title,
.content-section-sub-title {
display: inline-flex;
align-self: center;
}
.buttons-container {
justify-content: center;
}
}
&.two-side-wrapper,
.two-side-wrapper {
display: flex;
flex-direction: column;
gap: 20px var(--grid-gap);
@media screen and (min-width: 768px) {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
&.auto-wrap {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
}
.buttons-container {
margin-block-start: 25px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 40px;
}
}
.content-section-title {
margin: 0;
position: relative;
font-family: var(--font-family-heading);
font-size: var(--content-section-title-md);
line-height: var(--font-line-height-1);
font-weight: var(--content-section-title-font-weight);
text-wrap: balance;
letter-spacing: 0;
color: var(--content-section-title-color);
&.xs {
font-size: var(--content-section-title-xs);
line-height: normal;
}
&.sm {
font-size: var(--content-section-title-sm);
line-height: normal;
}
&.lg {
font-size: var(--content-section-title-lg);
}
&.xl {
font-size: var(--content-section-title-xl);
}
&.xxl {
font-size: var(--content-section-title-xxl);
}
.highlight,
&.highlight {
color: var(--color-text-highlight);
}
.underline,
&.underline {
text-decoration: underline;
text-decoration-thickness: .05em;
text-underline-offset: .1em;
}
}
.content-section-pre-title {
max-inline-size: 320px;
font-family: var(--font-family-base);
font-size: var(--content-section-pre-title-font-size);
font-weight: var(--content-section-pre-title-font-weight);
text-wrap: balance;
color: var(--content-section-pre-title-color);
&:not(:last-child) {
margin-block-end: 20px;
}
&:has(img, svg) {
display: inline-flex;
align-items: center;
gap: 0 .5em;
img {
font-size: 1.25em;
}
svg {
inline-size: 1.25em;
block-size: auto;
max-block-size: 1.25em;
* {
fill: currentColor !important;
}
}
}
}
.content-section-sub-title {
max-inline-size: 860px;
font-size: var(--content-section-sub-title-font-size);
font-weight: var(--content-section-sub-title-font-weight);
line-height: var(--font-line-height-3);
text-wrap: balance;
color: var(--content-section-sub-title-color);
&:not(:first-child) {
margin-block-start: 35px;
}
}
.content-section-title,
.content-section-pre-title,
.content-section-sub-title {
&.text-reveal {
@keyframes text-reveal {
to {
background-position-x: 0, 0, 0;
}
}
--underline-width: 1lh;
--underline-block-width: 200vmax;
--underline-color: var(--color-text-base);
--fill-color: var(--color-white);
background-image: linear-gradient(90deg, transparent calc(100% - 8ch), var(--fill-color) calc(100% - 8ch)),
linear-gradient(90deg, var(--fill-color), var(--fill-color)),
linear-gradient(90deg, var(--underline-color), var(--underline-color));
background-size: var(--underline-block-width) var(--underline-width),
var(--underline-block-width) var(--underline-width),
100% var(--underline-width);
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: 100%;
background-clip: text;
@supports (animation-timeline: view()) {
display: inline !important;
background-position-x:
calc(var(--underline-block-width) * -1),
calc(var(--underline-block-width) * -1),
0;
color: transparent;
animation-name: text-reveal;
animation-fill-mode: both;
animation-timing-function: linear;
animation-duration: 1ms;
animation-timeline: view();
animation-range: contain;
}
}
}
.layout-two-columns-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: var(--column-block-gap) var(--column-inline-gap);
@media screen and (min-width: 992px) {
grid-template-columns: 1fr var(--column-inline-size);
}
&:has(.left-column + .main-column) {
@media screen and (min-width: 992px) {
grid-template-columns: var(--column-inline-size) 1fr;
}
&.swap {
@media screen and (max-width: 991px) {
.main-column {
order: -1;
}
}
}
}
}
.floating-sidebar-wrapper {
.floating-sidebar-container {
@media screen and (min-width: 992px) {
position: sticky;
top: 20px;
transition: top var(--animation-duration);
body.header-down & {
top: 20px;
}
}
}
}
* {
box-sizing: border-box;
}
*:after,
*:before {
box-sizing: border-box;
}
html {
--document-font-size: 16px;
margin: 0;
min-height: 100%;
font-size: var(--document-font-size); }
body {
margin: 0;
padding-top: var(--header-height) !important;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: var(--font-family-base);
line-height: var(--font-line-height-2);
font-weight: 400;
color: var(--color-text-base);
background-color: var(--color-bg-body);
overflow-x: hidden;
transition: color var(--animation-duration), background-color var(--animation-duration);
&::before {
position: fixed;
z-index: 20;
inset: 0;
opacity: 0;
display: block;
content: '';
pointer-events: none;
background-color: var(--header-opened-overlay-color);
transition: opacity var(--animation-duration);
}
&.has-overlay {
&::before {
opacity: 1;
pointer-events: auto;
}
}
}
::selection {
color: #fff;
background-color: #000;
} .container {
margin-inline: auto;
width: calc(min(var(--container-max-width), 100% - var(--page-gap) * 2));
&.width-max-2 {
width: calc(min(var(--container-max-width-wide), 100% - var(--page-gap) * 2));
}
} body.page-article-detail {
.layout-two-columns-wrapper {
--column-inline-size: 320px;
@media (min-width: 992px) {
--column-inline-size: clamp(320px, 40vw, 610px);
}
.floating-sidebar-container {
>.inner {
padding: 40px clamp(20px, 3vw, 40px);
border-radius: var(--border-radius-lg);
background-color: light-dark(var(--color-neutral-100), var(--color-dark-900));
}
}
}
} body.page-article-landing {
--color-bg-body: light-dark(var(--color-neutral-100), var(--color-dark-900));
} body.page-reference-landing {
--color-bg-body: light-dark(var(--color-neutral-100), var(--color-dark-900));
}  .accordion-component {
display: flex;
flex-direction: column;
gap: var(--accordion-item-gap) 0;
>.item {
position: relative;
color: inherit;
background-color: var(--accordion-item-bg-color);
border-block-end: var(--accordion-border-width) solid var(--accordion-border-color);
border-radius: var(--accordion-border-radius);
box-shadow: var(--accordion-shadow);
transition: background-color var(--animation-duration), border-color var(--animation-duration), box-shadow var(--animation-duration);
&:first-child {
border-block-start: var(--accordion-border-width) solid light-dark(var(--color-black), var(--color-white));
}
>.header {
padding: var(--accordion-header-padding); padding-inline: var(--accordion-body-inline-padding);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
background-color: var(--accordion-header-bg-color);
border-radius: var(--accordion-border-radius);
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), border-radius var(--animation-duration), padding var(--animation-duration);
.toggle-button {
position: absolute;
inset-block-start: 50%;
inset-inline-end: var(--accordion-icon-offset);
display: none;
place-items: center;
inline-size: var(--accordion-icon-size);
block-size: var(--accordion-icon-size);
color: var(--accordion-icon-color);
font-size: 1em;
border: none;
border-radius: 0;
transform: translate(0, -50%);
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration), transform var(--animation-duration);
&::before,
&::after {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: var(--accordion-icon-size);
block-size: 2px;
display: none;
content: '';
background-color: currentColor;
border-radius: 100vw;
transform: translate(-50%, -50%);
transition: inline-size var(--animation-duration), background-color var(--animation-duration), transform var(--animation-duration);
}
&::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.text {
display: none !important;
&.open {
display: block;
}
&.close {
display: none;
}
}
svg {
display: block;
inline-size: var(--accordion-icon-size);
block-size: auto;
}
}
.number {
font-family: var(--font-family-heading);
font-size: var(--font-size-body);
color: light-dark(hsl(from var(--color-dark-925) h s l / .4), hsl(from var(--color-neutral-200) h s l / .4));
}
.title {
display: flex;
align-items: center;
font-family: var(--font-family-base);
font-size: var(--accordion-title-font-size);
line-height: var(--font-line-height-2);
font-weight: var(--accordion-title-font-weight);
color: var(--accordion-title-color);
transition: color var(--animation-duration);
}
&:hover {
background-color: var(--accordion-header-bg-color-hover);
.title {
color: var(--accordion-title-color-hover);
}
.toggle-button {
color: var(--accordion-icon-color-hover);
}
}
}
>.body {
padding-inline: var(--accordion-body-inline-padding);
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
background-color: var(--accordion-body-bg-color);
border-radius: var(--accordion-border-radius);
border-top-left-radius: 0;
border-top-right-radius: 0;
transition: grid-template-rows var(--animation-duration), padding var(--animation-duration), background-color var(--animation-duration), border-radius var(--animation-duration);
.content {
padding-inline: 0;
position: relative;
min-block-size: 0;
visibility: hidden;
transition: visibility var(--animation-duration);
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
}
}
&:hover {
background-color: var(--accordion-item-bg-color-hover);
border-color: var(--accordion-border-color-hover);
box-shadow: var(--accordion-shadow-hover);
}
&.opened {
background-color: var(--accordion-item-bg-color-active);
border-color: var(--accordion-border-color-active);
box-shadow: var(--accordion-shadow-active);
>.header {
background-color: var(--accordion-header-bg-color-active);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.title {
color: var(--accordion-title-color-active);
}
.toggle-button {
color: var(--accordion-icon-color-active);
transform: translate(0, -50%) rotateX(180deg);
.text {
&.open {
display: none;
}
&.close {
display: block;
}
}
}
&:hover {
background-color: var(--accordion-header-bg-color-hover);
.title {
color: var(--accordion-title-color-hover);
}
.toggle-button {
color: var(--accordion-icon-color-hover);
}
}
}
>.body {
padding-block-end: var(--accordion-body-block-padding);
grid-template-rows: 1fr;
background-color: var(--accordion-body-bg-color-active);
.content {
visibility: visible;
}
}
}
}
}
.accordion-container {
&+.accordion-container {
margin-block-start: 40px;
}
.accordion-title {
margin-block-end: 15px;
font-family: var(--font-family-heading);
font-size: var(--font-size-body);
line-height: var(--font-line-height-1);
font-weight: inherit;
letter-spacing: 0;
text-wrap: balance;
}
}
details {
interpolate-size: allow-keywords;
overflow: hidden;
* {
margin: 0;
}
&::details-content {
block-size: 0;
transition: block-size var(--animation-duration), content-visibility var(--animation-duration);
transition-behavior: allow-discrete;
}
summary {
list-style-position: outside;
&::marker {
display: block;
}
}
&[open] {
&::details-content {
block-size: auto;
}
}
}        .article-list-item-container {
container-type: inline-size;
container-name: article-list-item-container;
position: relative;
display: flex;
flex-direction: column;
a {
padding: 0;
position: relative;
color: inherit;
outline: none;
text-decoration: none;
display: flex;
flex-direction: row;
gap: 0;
block-size: 100%;
background-color: light-dark(var(--color-white), var(--color-black));
border-radius: var(--border-radius-lg);
transition: background-color var(--animation-duration), border-color var(--animation-duration);
>figure.main {
inline-size: 45%;
}
>.body {
inline-size: 55%;
}
@container article-list-item-container (max-width: 479px) {
flex-direction: column;
>figure.main {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
}
>.body {
inline-size: 100%;
}
}
@media (hover: hover) {
&:hover {
figure.main {
img {
transform: scale(1.05);
}
}
.body {
.actions-container {
.link {
svg {
transform: translateX(4px);
}
}
}
}
}
}
}
figure {
&.main {
position: relative;
z-index: 1;
block-size: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl);
@container article-list-item-container (max-width: 479px) {
border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
img {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform var(--animation-duration);
}
}
}
.body {
padding: 30px clamp(20px, 3vw, 40px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px 0;
flex: 1 1 auto;
>.top {
display: flex;
flex-direction: column;
gap: 15px 0;
.meta-component {
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
ul {
gap: 8px;
li {
font-size: var(--font-size-body-xs);
text-transform: uppercase;
}
}
}
}
>.bottom { padding-block-start: 16px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
border-block-start: 1px solid hsl(from currentColor h s l / .2);
}
.meta-component {
ul {
gap: 8px;
li {
font-size: var(--font-size-body);
}
}
}
.title {
max-inline-size: 40ch;
font-size: 1.1875rem;
line-height: var(--font-line-height-2);
text-wrap: balance;
}
.description {
max-inline-size: 50ch;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
text-wrap: balance;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-height: 3lh;
overflow: hidden;
text-overflow: ellipsis;
p {
margin-block: 0;
font-size: inherit;
line-height: inherit;
}
}
.actions-container {
.link {
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
}
}
} .article-slider-item-container {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--color-white);
border-radius: var(--border-radius-sm);
a {
color: inherit;
outline: none;
text-decoration: none;
display: flex;
flex-direction: column;
height: 100%;
&:hover {
figure {
img {
transform: scale(1.05);
}
}
}
}
figure {
position: relative;
z-index: 1;
width: 100%;
height: auto;
aspect-ratio: 414/300;
overflow: hidden;
border-top-left-radius: var(--border-radius-sm);
border-top-right-radius: var(--border-radius-sm);
img {
min-width: 100%;
min-height: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform var(--animation-duration);
}
}
.body {
padding: 30px clamp(20px, 5vw, 45px);
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
.title {
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: var(--font-line-height-2);
font-weight: 700;
}
.description {
margin-block-start: 8px;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
p {
margin: 0;
font-size: inherit;
line-height: inherit;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 2lh;
overflow: hidden;
text-overflow: ellipsis;
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
}
.meta-component {
margin-block-end: 10px;
ul {
display: flex;
flex-wrap: wrap;
gap: 4px;
li {
color: var(--color-text-base);
background-color: hsl(from currentColor h s l / .2);
border: none;
&.highlight {
color: var(--color-white);
background-color: var(--color-brand-primary);
font-weight: 700;
}
}
}
}
}
}  .article-detail-component {
container-type: inline-size;
container-name: article-detail-component;
.article-excerpt {
margin-block-end: clamp(35px, 5vw, 50px);
position: relative;
font-family: var(--font-family-heading);
font-size: clamp(var(--font-size-body-lg), 3vw, 1.75rem);
line-height: var(--font-line-height-3);
font-weight: 500;
p {
font-size: inherit;
line-height: inherit;
&:first-of-type {
margin-block-start: 0;
}
&:last-of-type {
margin-block-end: 0;
}
}
}
.article-content {
position: relative;
margin-inline: auto;
max-inline-size: 1200px;
color: light-dark(var(--color-dark-950), var(--color-neutral-500));
>* {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
p {
&:last-of-type {
margin-block-end: 0;
}
}
>ul {
margin: var(--font-line-height-2) 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
&:last-of-type {
margin-block-end: 0;
}
li {
position: relative;
margin: 0;
padding-inline-start: calc(12px + .25em);
min-block-size: 24px;
color: light-dark(var(--color-dark-950), var(--color-neutral-100));
font-size: var(--font-size-body);
line-height: calc(24em / 16);
&::before {
position: absolute;
inset-block-start: 9px;
inset-inline-start: 0;
inline-size: .25em;
block-size: .25em;
display: block;
content: '';
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
border-radius: 50%;
}
}
}
>ol {
padding-inline-start: 1.25em;
list-style: decimal;
&:last-of-type {
margin-block-end: 0;
}
li {
margin-block: 4px;
padding-inline-start: .35em;
}
li::marker {
color: hsl(from currentColor h s l / .8);
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: var(--font-line-height-3);
&+* {
margin-block-start: 0;
}
}
h1 {
font-size: var(--font-size-heading-1);
}
h2 {
font-size: var(--font-size-heading-2);
}
h3 {
font-size: var(--font-size-heading-3);
}
h4 {
font-size: var(--font-size-heading-4);
}
h5 {
font-size: var(--font-size-heading-5);
}
h6 {
font-size: var(--font-size-heading-6);
}
hr {
margin-block: clamp(30px, 5vw, 50px);
inline-size: 100% !important;
border: none;
border-block-start: 1px solid hsl(from currentColor h s l / .15);
}
.in-view-transition {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block-start: 0;
}
}
figure {
margin-block: calc(min(40px, max(30px, 3vw)));
img {
display: block;
inline-size: 100%;
block-size: auto;
}
figcaption {
margin-block-start: 15px;
line-height: var(--font-line-height-2);
font-size: var(--font-size-body-sm);
text-align: center;
text-wrap: balance;
}
}
}
blockquote {
margin-block: clamp(30px, 4vw, 50px);
margin-inline: 0;
padding: 24px;
padding-inline-start: 32px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: var(--font-size-body);
line-height: var(--font-line-height-3);
font-weight: 400;
background-color: light-dark(hsl(from var(--color-cyan-500) h s l / .04), hsl(from var(--color-cyan-500) h s l / .04));
border: none;
border-inline-start: 4px solid light-dark(var(--color-cyan-500), var(--color-cyan-500));
&::before {
content: none;
}
p {
margin: 0;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: inherit;
&:first-of-type {
margin-block-start: 0;
}
&:last-of-type {
margin-block-end: 0;
}
}
>p:first-of-type {
&::before {
content: '"';
}
&::after {
content: '"';
}
}
.author {
font-family: var(--font-family-heading);
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
font-weight: 700;
color: light-dark(var(--color-neutral-500), var(--color-neutral-500));
}
}
.article-content footer {
margin-block-start: clamp(30px, 5vw, 50px);
padding-block-start: clamp(30px, 5vw, 50px);
display: flex;
flex-direction: column;
gap: 30px var(--grid-gap);
border-block-start: 1px solid hsl(from currentColor h s l / .1);
&:empty {
display: none;
}
}
.layout-two-columns-wrapper {
&:has(.left-column + .main-column) {
--column-block-gap: 50px;
--column-inline-gap: clamp(var(--grid-gap), 6vw, 100px);
--column-inline-size: clamp(360px, 30vw, 550px);
@media screen and (min-width: 1600px) {
--column-inline-size: 550px;
}
>.left-column {
position: relative;
display: flex;
flex-direction: column;
gap: 40px 0; } }
}
} .hero-component {
&.article-landing {
&.landing {
.content {
.content-inner {
padding-block: clamp(30px, 10vw, 85px);
padding-block-start: calc(clamp(30px, 10vw, 85px) - 20px);
text-align: center;
}
.hero-pre-title {
margin-inline: auto;
}
}
}
}
&.article-detail {
&.landing {
--hero-title-font-size: clamp(1.875rem, 3.25vw, 3rem);
--hero-pre-title-font-size: .8125rem;
position: relative;
.content {
.content-inner {
>.two-side-wrapper {
align-items: stretch;
@container hero-component (min-width: 768px) {
grid-template-columns: 1.25fr 1fr;
column-gap: clamp(var(--grid-gap), 6vw, 140px);
}
@container hero-component (min-width: 992px) {
column-gap: clamp(var(--grid-gap), 10vw, 140px);
}
>.left-side {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
>.top {
padding-block: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border-block-end: 1px solid hsl(from currentColor h s l / .3);
}
}
>.right-side {
padding: 0;
align-self: center;
border: none;
figure.main {
margin-block-end: 0;
}
}
}
}
.hero-pre-title {
margin: 0;
}
.link-back {
position: relative;
display: inline-flex;
align-items: center;
gap: .75em;
font-size: var(--font-size-body-md);
line-height: var(--font-line-height-2);
text-decoration: none;
svg {
transition: transform var(--animation-duration);
}
&:hover {
svg {
transform: translateX(-.25em);
}
}
}
.meta-component {
margin-block-end: 10px;
ul {
li {
color: light-dark(var(--color-cyan-300), var(--color-cyan-300));
}
}
}
}
}
}
}
.latest-article-list-component {
container-type: inline-size;
container-name: latest-article-list-component;
.list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: var(--grid-gap);
@media (max-width: 579px) {
grid-template-columns: 1fr;
}
}
}
.article-list-component {
container-type: inline-size;
container-name: article-list-component;
.list-container {
>.buttons-container {
margin-block-start: clamp(30px, 5vw, 50px);
display: flex;
justify-content: center;
border-block: 1px solid hsl(from var(--color-black) h s l / .15);
.button {
padding-block: 15px !important;
inline-size: 100%;
}
}
>.actions-container {
margin-block-start: clamp(30px, 5vw, 50px);
display: flex;
justify-content: center;
}
}
.list {
--horizontal-gap: 24px;
--vertical-gap: 24px;
margin: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: var(--vertical-gap) var(--horizontal-gap);
@container article-list-component (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
>.item {
position: relative;
padding: 0;
display: flex;
flex-direction: column;
inline-size: 100%;
.article-list-item-container {
display: flex;
flex-direction: column;
flex: 1;
}
}
}
}
.article-nav-component {
position: relative;
z-index: 2;
}
.article-slider-component {
container-type: inline-size;
container-name: article-slider-component;
.slider {
--slider-item-gap: 24px;
padding-block-start: calc(var(--slider-icon-block-size) + 16px);
position: relative;
@container article-slider-component (max-width: 479px) {
padding-block-start: 0;
padding-block-end: calc(var(--slider-icon-block-size) + 16px);
}
@container article-slider-component (min-width: 768px) {
padding-block-start: calc(var(--slider-icon-block-size) + 32px);
}
.slick-list {
margin-inline: calc(var(--slider-item-gap) / -2);
margin-inline-end: calc(var(--page-gap) * -1);
padding-inline-end: calc(var(--page-gap) - var(--slider-item-gap) / 2);
position: relative;
@media (min-width: 1400px) {
margin-inline-end: calc(var(--container-max-width-offset) * -1);
padding-inline-end: calc(var(--container-max-width-offset) - var(--slider-item-gap) / 2);
}
}
.slick-track {
display: flex;
}
.slider-item {
padding-inline: calc(var(--slider-item-gap) / 2);
block-size: auto;
display: flex;
flex-direction: column;
outline: none;
&:not(:nth-child(1)) {
display: none;
}
.article-list-item-container,
.article-slider-item-container {
display: flex;
flex-direction: column;
flex: 1;
}
}
&.slick-initialized {
.slider-item {
&:not(:nth-child(1)) {
display: flex;
}
}
}
.navigation-container {
.arrows {
position: absolute;
z-index: 3;
inset-block-start: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
gap: 24px;
@container article-slider-component (max-width: 479px) {
inset-block-start: auto;
inset-block-end: 0;
inset-inline-start: 50%;
inset-inline-end: auto;
transform: translateX(-50%);
}
}
.dots {
position: absolute;
z-index: 3;
inset-block-start: calc((var(--slider-icon-block-size) - var(--slider-dot-block-size)) / 2);
inset-inline-end: calc(var(--slider-icon-inline-size) * 2 + 22px + 40px);
display: none;
@container article-slider-component (min-width: 768px) {
display: block;
}
}
.slides-number-container {
position: absolute;
z-index: 3;
top: 9px;
right: 235px;
display: none;
align-items: center;
gap: 5px;
font-size: var(--font-size-body);
}
.tabs {
display: none;
}
}
}
}         .panel-news {
container-type: inline-size;
container-name: panel-news;
border-block-start: 1px solid light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
}
.panel-related-articles {
container-type: inline-size;
container-name: panel-related-articles;
background-color: light-dark(var(--color-neutral-100), var(--color-dark-900));
.content-section-header {
margin-block-end: clamp(30px, 5vw, 50px);
@container panel-related-articles (min-width: 768px) {
padding-inline-end: calc(var(--slider-icon-inline-size) * 2 + 22px + 240px);
}
}
.content-section-title {
font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}
.article-slider-component {
margin-block-start: calc((var(--slider-icon-block-size) + 16px) * -1);
@container panel-related-articles (max-width: 479px) {
margin-block-start: 0;
}
@container panel-related-articles (min-width: 768px) {
margin-block-start: calc((var(--slider-icon-block-size) + 32px) * -1);
}
}
}   .author-info-component {
container-type: inline-size;
container-name: author-info-component;
--avatar-size: 90px;
>.header {
margin-block-end: 15px;
padding-block-end: 15px;
border-block-end: 1px solid hsl(from var(--color-black) h s l / .3);
.title {
font-size: var(--font-size-body-sm);
line-height: var(--font-line-height-2);
}
}
>.body {
>.two-side-wrapper {
display: grid;
grid-template-columns: var(--avatar-size) 1fr;
gap: 30px clamp(10px, 2vw, 30px);
align-items: center;
@container author-info-component (max-width: 319px) {
grid-template-columns: 1fr;
}
>.left-side {
align-self: start;
}
>.right-side {
display: flex;
flex-direction: column;
gap: clamp(10px, 2vw, 30px);
justify-content: space-between;
>.bottom {
.two-side-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
>.right-side {
flex-shrink: 0;
flex-grow: 0;
}
}
}
}
}
}
figure {
inline-size: var(--avatar-size);
position: relative;
img {
margin: 0;
inline-size: 100%;
max-inline-size: none;
block-size: auto;
display: block;
}
}
.name,
.position {
font-size: inherit;
line-height: inherit;
}
.name {
font-size: 1.1875rem;
}
.position {
font-size: var(--font-size-body-sm);
}
.social-share-component {
ul {
gap: 10px;
li {
a {
padding: 0;
background-color: transparent !important;
border: none !important;
border-radius: 0;
.icon {
display: grid;
}
.text {
display: none;
}
}
}
}
}
}           @keyframes pin-float {
0%,
100% {
transform: translate(-50%, -100%);
}
50% {
transform: translate(-50%, calc(-100% - 10px));
}
}
.contact-detail-component {
container-type: inline-size;
container-name: contact-detail-component;
.map-container {
margin-inline: calc(var(--page-gap) * -1);
position: relative;
display: grid;
grid-template-areas: "both";
@media (min-width: 1660px) {
margin-inline: calc(var(--container-max-width-offset) * -1);
}
figure {
grid-area: both;
margin: 0;
display: none;
position: relative;
img {
margin-inline: auto;
inline-size: 100%;
block-size: auto;
display: block;
}
.pins {
position: absolute;
inset: 0;
}
.pin {
--top: 50%;
--left: 50%;
--pin-bg-color: var(--color-white);
--pin-fg-color: var(--color-black);
margin: 0;
position: absolute;
inset-block-start: var(--top);
inset-inline-start: var(--left);
display: inline-flex;
justify-content: center;
align-items: center;
inline-size: 60px;
block-size: 60px;
background-color: var(--pin-bg-color);
color: var(--pin-fg-color);
border: 1px solid light-dark(hsl(from var(--color-black) h s l / .12), hsl(from var(--color-white) h s l / .18));
border-radius: 4px;
box-shadow: 0 14px 24px light-dark(hsl(from var(--color-black) h s l / .16), hsl(from var(--color-black) h s l / .5));
transform: translate(-50%, -100%);
&.active {
--pin-bg-color: var(--color-brand-primary);
--pin-fg-color: var(--color-white);
}
&::after {
position: absolute;
content: '';
inset-block-start: calc(100% - 1px);
inset-inline-start: 50%;
inline-size: 0;
block-size: 0;
border-inline-start: 10px solid transparent;
border-inline-end: 10px solid transparent;
border-block-start: 10px solid var(--pin-bg-color);
transform: translateX(-50%);
}
svg {
inline-size: 22px;
block-size: 22px;
color: currentColor;
fill: currentColor;
}
@media (hover: hover) {
&:hover {
animation: pin-float 1s ease-in-out infinite;
}
}
}
}
figure.small {
display: block;
.pin {
--pin-bg-color: var(--color-brand-primary);
--pin-fg-color: var(--color-white);
}
}
figure.small-2 {
display: none;
}
figure.medium,
figure.large {
.pin[data-tab] {
--pin-bg-color: var(--color-white);
--pin-fg-color: var(--color-black);
cursor: pointer;
}
.pin[aria-disabled='true'] {
cursor: default;
}
}
@media (min-width: 660px) {
figure.small {
display: none;
}
figure.medium {
display: block;
}
}
@media (min-width: 992px) {
figure.medium {
display: none;
}
figure.large {
display: block;
}
}
}
&:has(.tab-component.map-tabs .tab-content[data-tab='1'].active) {
.map-container {
figure.medium,
figure.large {
.pin[data-tab='1'] {
--pin-bg-color: var(--color-brand-primary);
--pin-fg-color: var(--color-white);
}
}
}
}
&:has(.tab-component.map-tabs .tab-content[data-tab='2'].active) {
.map-container {
figure.small-1 {
display: none;
}
figure.small-2 {
display: block;
}
figure.medium,
figure.large {
.pin[data-tab='2'] {
--pin-bg-color: var(--color-brand-primary);
--pin-fg-color: var(--color-white);
}
}
@media (min-width: 660px) {
figure.small {
display: none;
}
}
}
}
@media (hover: hover) {
&:has(.tab-component.map-tabs .tab-header li[data-tab='1']:hover) {
.map-container {
figure.medium,
figure.large {
.pin[data-tab='1'] {
animation: pin-float 1s ease-in-out infinite;
}
}
}
}
&:has(.tab-component.map-tabs .tab-header li[data-tab='2']:hover) {
.map-container {
figure.medium,
figure.large {
.pin[data-tab='2'] {
animation: pin-float 1s ease-in-out infinite;
}
}
}
}
}
.tab-component.map-tabs {
.tab-header {
menu,
ul {
border-block-start: none;
li {
a {
&::after {
inset-inline: 0;
inline-size: auto;
}
}
&:first-child {
a {
&::after {
inset-inline-start: calc(var(--page-gap) * -1);
@media (min-width: 1660px) {
inset-inline-start: calc(var(--container-max-width-offset) * -1);
}
}
}
}
&:last-child {
a {
&::after {
inset-inline-end: calc(var(--page-gap) * -1);
@media (min-width: 1660px) {
inset-inline-end: calc(var(--container-max-width-offset) * -1);
}
}
}
}
a {
justify-content: center;
text-align: center;
}
}
}
}
}
.contact-content {
>.two-side-wrapper {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 0 clamp(60px, 10vw, 100px);
border-block-start: 1px solid light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
@media (min-width: 992px) {
grid-template-columns: 1fr 1fr;
&::before {
position: absolute;
content: '';
inset-block-start: 0;
inset-inline-start: 50%;
inline-size: 1px;
block-size: 100%;
background-color: light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
transform: translateX(-50%);
}
}
>.left-side,
>.right-side {
padding-block-start: 50px;
}
}
h1 {
margin: 0;
position: relative;
font-family: var(--font-family-base);
font-size: var(--content-section-title-md);
line-height: var(--font-line-height-4);
font-weight: var(--content-section-title-font-weight);
text-wrap: balance;
color: var(--color-text-heading);
&::first-line {
color: var(--color-text-highlight);
}
}
.contact-location {
.location-title {
margin-block-end: 34px;
display: flex;
align-items: center;
gap: 10px;
.icon {
inline-size: 20px;
block-size: 20px;
flex: 0 0 20px;
display: grid;
place-items: center;
svg {
inline-size: 20px;
block-size: 20px;
}
}
h2 {
margin: 0;
font-family: var(--font-family-base);
font-size: var(--font-size-body-xxl);
line-height: var(--font-line-height-3);
font-weight: 600;
color: var(--color-text-heading);
}
}
.location-address,
.location-hours,
.location-terms {
margin: 0;
p {
margin: 0;
font-size: var(--font-size-body-lg);
line-height: var(--font-line-height-3);
font-weight: 400;
}
}
.location-address {
p {
strong {
font-weight: 600;
}
}
}
.location-hours {
margin-block-start: 26px;
p+p {
margin-block-start: 22px;
}
strong {
font-weight: 600;
}
}
.location-terms {
margin-block-start: 28px;
a {
color: var(--color-text-heading);
text-decoration: none;
&:hover {
text-decoration: underline;
}
span {
margin-inline-start: 4px;
}
}
}
}
.quick-contact-component {
margin-block: clamp(30px, 5vw, 50px);
padding-block: clamp(30px, 5vw, 50px);
position: relative;
&::before,
&::after {
position: absolute;
content: '';
inset-inline: 0;
block-size: 1px;
background-color: light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
@media (min-width: 992px) {
inset-inline-start: calc(var(--page-gap) * -1);
inset-inline-end: calc(var(--page-gap) * -1);
}
@media (min-width: 1660px) {
inset-inline-start: calc(clamp(60px, 10vw, 100px) / -2);
inset-inline-end: calc(var(--container-max-width-offset) * -1);
}
}
&::before {
inset-block-start: 0;
}
&::after {
inset-block-end: 0;
}
ul {
gap: 6px 0;
li {
font-size: var(--font-size-body-lg);
line-height: var(--font-line-height-3);
font-weight: 600;
a {
color: var(--color-brand-primary);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.icon {
inline-size: 20px;
block-size: 20px;
flex: 0 0 20px;
svg {
inline-size: 20px;
block-size: 20px;
}
}
}
}
}
}
}
.contact-person-cards-component {
margin-block-start: 20px;
@media (min-width: 992px) {
margin-block-start: calc(clamp(50px, 10vw, 150px) - 30px);
}
.tab-component {
.tab-header {
menu,
ul {
overflow-x: auto;
border-block-start: none;
border-block-end: 1px solid light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
li {
a {
padding-inline-end: clamp(20px, 5vw, 40px);
&::after {
inset-block-start: auto;
inset-block-end: 0;
block-size: 2px;
}
}
}
}
}
}
}
.contact-person-card-list-component {
margin-block-start: 50px;
.list {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
@media (min-width: 660px) {
grid-template-columns: repeat(2, 1fr);
;
}
@media (min-width: 992px) {
grid-template-columns: repeat(3, 1fr);
}
}
}
.contact-person-card {
padding: clamp(30px, 5vw, 50px) clamp(20px, 3vw, 50px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(40px, 8vw, 90px);
background-color: light-dark(var(--color-neutral-100), var(--color-neutral-100));
border-inline-start: 3px solid light-dark(hsl(from var(--color-black) h s l / .15), hsl(from var(--color-white) h s l / .15));
.name {
margin: 0;
font-size: var(--font-size-heading-3);
line-height: var(--font-line-height-2);
font-weight: 600;
}
.position {
margin-block-start: 2px;
font-size: var(--font-size-body-lg);
line-height: var(--font-line-height-2);
text-wrap: pretty;
}
.bottom {
p {
margin: 0;
margin-block: 4px;
font-size: var(--font-size-body-lg);
line-height: var(--font-line-height-2);
font-weight: 400;
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
a {
text-decoration: none;
@media (hover: hover) {
&:hover {
text-decoration: underline;
}
}
&[href^="mailto:"] {
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
}
strong {
font-weight: 600;
}
}
}
.hero-component {
&.contact-landing {
&.landing {}
}
}     .panel-contact-cta {
container-type: inline-size;
container-name: panel-contact-cta;
&.content-section {
padding-block: 0;
}
article {
>.list {
display: flex;
flex-wrap: wrap;
border-block-start: 1px solid hsl(from var(--color-black) h s l / .15);
@container panel-contact-cta (max-width: 991px) {
padding-block: 0;
flex-direction: column;
border-block-start: none;
}
>.item {
position: relative;
display: flex;
flex: 1;
@container panel-contact-cta (max-width: 991px) {
flex: auto;
}
&+.item {
@container panel-contact-cta (min-width: 992px) {
&::before {
inset-inline-start: 0;
inset-inline-end: auto;
inset-block: clamp(20px, 5vw, 40px);
inline-size: 1px;
block-size: auto;
display: block;
}
}
}
&::before {
position: absolute;
inset-block-start: 0;
inset-inline: calc(var(--page-gap) * -1);
block-size: 1px;
content: '';
display: none;
background-color: hsl(from var(--color-black) h s l / .15);
@container panel-contact-cta (max-width: 991px) {
display: block;
}
}
>a {
padding-block: clamp(30px, 5vw, 50px);
padding-inline: clamp(20px, 3vw, 30px);
display: flex;
justify-content: center;
justify-items: center;
gap: 20px;
inline-size: 100%;
text-decoration: none;
@container panel-contact-cta (max-width: 991px) {
padding-block: 30px;
padding-inline: 0;
justify-content: space-between;
flex-wrap: wrap;
}
&:hover {
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
&::before {
opacity: 1;
}
>.right-side {
opacity: 1;
}
}
&::before {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 2px;
content: '';
display: block;
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
opacity: 0;
transition: opacity var(--animation-duration);
}
>.left-side {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px 10px;
@container panel-contact-cta (max-width: 991px) {
flex-direction: column;
align-items: flex-start;
}
}
>.right-side {
display: none;
@container panel-contact-cta (max-width: 991px) {
display: block;
}
@container panel-contact-cta (min-width: 1400px) {
position: absolute;
inset-block-start: 50%;
inset-inline-end: clamp(20px, 3vw, 30px);
display: block;
opacity: 0;
transform: translateY(-50%);
transition: opacity var(--animation-duration), transform var(--animation-duration);
}
}
svg {
inline-size: 1em;
flex-shrink: 0;
@container panel-contact-cta (max-width: 991px) {
display: none;
}
}
.title {
font-size: var(--font-size-body-lg);
font-weight: 600;
line-height: var(--line-height-2);
}
.location {
font-size: var(--font-size-body-lg);
line-height: var(--line-height-2);
}
.button {
--button-padding-block: 10px;
--button-padding-inline: 20px;
--button-block-size: auto;
--button-color: light-dark(var(--color-dark-950), var(--color-white));
--button-background-color: light-dark(var(--color-neutral-100), var(--color-dark-950));
--button-border-color: light-dark(var(--color-neutral-100), var(--color-dark-950));
&:hover {
--button-color: light-dark(var(--color-white), var(--color-dark-950));
--button-background-color: light-dark(var(--color-dark-950), var(--color-white));
--button-border-color: light-dark(var(--color-dark-950), var(--color-white));
}
}
}
}
}
}
}
.panel-contact-form {
container-type: inline-size;
container-name: panel-cta;
position: relative;
color-scheme: dark;
color: var(--color-text-base);
background-color: light-dark(var(--color-white), var(--color-dark-950));
background-image: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/panels/contact/bg.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
overflow-x: clip;
.content-section-header {
margin-block-end: 40px;
margin-inline: auto;
max-inline-size: 680px;
text-align: center;
}
.content-section-title {
margin-inline: auto;
text-wrap: balance;
}
.contact-form-container {
margin-inline: auto;
max-inline-size: 1080px;
color-scheme: light only;
color: var(--color-text-base);
}
}  form.contact {
--form-block-gap: 16px;
--form-inline-gap: 16px;
container-type: inline-size;
container-name: form-contact;
position: relative;
>.inner {
transition: opacity var(--animation-duration);
}
&.processing {
>.inner {
opacity: .7;
}
}
.overlay {
background: transparent;
}
.columns-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: var(--form-block-gap) var(--form-inline-gap);
@container form-contact (min-width: 460px) {
grid-template-columns: repeat(2, 1fr);
}
>.column {
&.full-width {
@container form-contact (min-width: 460px) {
grid-column: span 2;
}
}
@container form-contact (min-width: 460px) {
&:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
&:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
&:nth-child(3) {
grid-column: 1;
grid-row: 3;
}
&:nth-child(4) {
grid-column: 2;
grid-row: 1 / span 3;
display: flex;
}
}
}
}
.form-control-label {
margin-block-end: 10px;
}
.form-control-error {
margin-block-start: 5px;
}
.form-control-group {
margin-block-end: 0;
block-size: 100%;
&.checkbox {
label {
text-wrap: balance;
color: var(--input-label-font-color-2);
a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
}
}
.buttons-container {
margin-block-start: 0;
display: block;
>.two-side-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}
}
.choices {
position: relative;
z-index: 2;
.choices__list--dropdown {
word-break: normal;
}
}
textarea {
inline-size: 100%;
min-block-size: 100%;
block-size: auto;
field-sizing: content;
overflow-y: clip;
resize: none;
}
.form-control-group.textarea {
block-size: 100%;
inline-size: 100%;
display: flex;
flex-direction: column;
.input-wrapper {
display: flex;
flex-direction: column;
flex: 1;
min-block-size: 100%;
inline-size: 100%;
}
}
}
.contact-form-container {
container-type: inline-size;
container-name: contact-form-container;
padding: 35px clamp(20px, 3vw, 40px);
position: relative;
display: flex;
flex-direction: column;
background-color: light-dark(var(--color-white), var(--color-dark-950));
border: none;
border-radius: var(--border-radius-xl);
.form-header {
max-inline-size: 970px;
margin-block-end: 30px;
margin-inline: auto;
}
.form-title {
margin-block: 0;
font-family: var(--font-family-heading);
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: var(--font-line-height-3);
text-wrap: balance;
color: light-dark(var(--color-dark-925), var(--color-white));
}
form {
margin-inline: auto;
max-inline-size: 970px;
text-align: left;
}
}  .contact-dialog {
margin: auto;
padding: 50px;
padding-block-end: 0;
position: relative;
z-index: 1;
max-inline-size: 840px;
border: none;
overflow: auto;
.dialog-header {
padding: 0;
.simple-logo {
margin-block-end: 40px;
svg {
inline-size: 28px;
}
}
.title {
max-inline-size: 660px;
}
.sub-title {
margin-block-start: 40px;
}
&+.dialog-body {
padding-block-start: clamp(40px, 5vw, 180px);
}
}
.dialog-body {
padding: 0;
}
.dialog-footer {
padding: 0;
.contact-info-list-component {
.list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
@media screen and (min-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
>.item {
padding: 40px 0;
position: relative;
text-align: center;
&+.item {
&::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 1px;
background-color: hsl(from var(--color-black) h s l / .15);
@media screen and (min-width: 768px) {
inset-block-start: 50%;
inline-size: 1px;
block-size: calc(100% - 80px);
transform: translateY(-50%);
}
}
}
.text {
font-size: var(--font-size-heading-4);
font-weight: 600;
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
a {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.label {
margin-block-start: 5px;
display: block;
font-size: var(--font-size-body-sm);
line-height: var(--font-line-height-2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
}
}
}
}
}
}            .hero-component {
container-type: inline-size;
container-name: hero-component;
color-scheme: dark only;
color: var(--color-text-base);
background-color: var(--color-bg-hero);
&.home {
--_border-color: light-dark(hsl(from currentColor h s l / .5), hsl(from currentColor h s l / .5));
--hero-title-font-size: clamp(1.875rem, 3.5vw, 3rem);
--hero-pre-title-font-size: var(--font-size-body);
--hero-sub-title-font-size: clamp(1.25rem, 2.5vw, 1.5rem);
color-scheme: dark;
margin-block-start: calc(var(--header-height) * -1);
position: relative;
display: grid;
grid-template-areas: "both";
color: var(--color-text-base);
overflow-x: clip;
>.video-container {
position: absolute;
z-index: 1;
inset: 0;
grid-area: both;
overflow: hidden;
@media screen and (min-width: 768px) {
max-inline-size: calc(25% + var(--page-gap));
}
@media screen and (min-width: 1400px) {
max-inline-size: calc((var(--container-max-width) * .25) + var(--container-max-width-offset));
}
video {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: center;
}
&::after {
position: absolute;
z-index: 1;
inset: 0;
content: '';
display: block;
background-color: hsl(from var(--color-dark-950) h s l / .6);
}
}
figure {
&.bg {
position: absolute;
z-index: 1;
inset: 0;
grid-area: both;
overflow: hidden;
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
}
}
.content {
padding-block-start: var(--header-height);
padding-block-end: 0;
position: relative;
grid-area: both;
align-self: end;
z-index: 3;
.content-outer {
position: relative;
}
.content-inner {
padding-block-start: clamp(30px, 10vw, 160px);
padding-block-end: clamp(35px, 5vw, 60px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(30px, 10vw, 160px);
@media screen and (min-width: 768px) {
padding-inline-start: calc(25% + clamp(40px, 7vw, 100px));
}
}
.hero-pre-title {
margin-inline: auto;
font-size: var(--hero-pre-title-font-size);
font-weight: var(--hero-pre-title-font-weight);
color: var(--hero-pre-title-color);
text-wrap: balance;
}
.hero-title {
margin: 0;
font-family: var(--font-family-heading);
font-size: var(--hero-title-font-size);
font-weight: var(--hero-title-font-weight);
line-height: var(--font-line-height-2);
text-wrap: balance;
color: var(--color-text-base);
a {
text-decoration: none;
color: inherit;
}
.highlight {
color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
}
}
.hero-sub-title {
max-inline-size: 360px;
font-size: var(--hero-sub-title-font-size);
font-weight: var(--hero-sub-title-font-weight);
line-height: var(--font-line-height-2);
color: var(--hero-sub-title-color);
text-wrap: balance;
.nowrap {
white-space: nowrap;
}
}
.meta-component {
margin-block-start: 30px;
ul {
display: flex;
flex-wrap: wrap;
gap: 12px 40px;
li {
padding: 0;
display: inline-flex;
gap: 12px;
font-size: var(--font-size-body-sm);
background: none;
border: none;
border-radius: 0;
&::before {
display: inline-block;
content: '';
inline-size: 6px;
block-size: 6px;
color: transparent;
border-radius: 50%;
background-color: light-dark(var(--color-blue-300), var(--color-blue-300));
}
}
}
}
.buttons-container {
margin-block-start: 20px;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
}
figure.delimiter {
position: absolute;
z-index: 2;
inset-block-end: 0;
inset-inline: 0;
block-size: auto;
transform: translateY(40%);
pointer-events: none;
img {
inline-size: 100%;
max-inline-size: none;
block-size: auto;
}
}
}
&.landing {
--_border-color: light-dark(hsl(from var(--color-dark-950) h s l / .5), hsl(from var(--color-neutral-100) h s l / .5));
margin-block-start: calc(var(--header-height) * -1);
position: relative;
display: grid;
grid-template-areas: "both";
color-scheme: dark;
color: var(--color-text-base);
background-color: var(--color-bg-hero);
overflow-x: clip;
figure {
&.bg {
position: absolute;
z-index: 1;
inset: 0;
overflow: hidden;
img {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: center;
}
}
&.main {
position: relative;
z-index: 1;
inset: 0;
grid-area: both;
overflow: hidden;
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
}
}
.video-container {
position: relative;
z-index: 1;
inset: 0;
grid-area: both;
overflow: hidden;
video {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: center;
}
}
.content {
padding-block-start: var(--header-height);
padding-block-end: 0;
position: relative;
grid-area: both;
z-index: 2;
>figure.bg {
position: absolute;
z-index: -1;
inset: 0;
overflow: hidden;
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
}
.content-outer {
position: relative;
}
.content-inner {
padding-block: clamp(30px, 5vw, 60px);
display: flex;
flex-direction: column;
justify-content: flex-end;
>.two-side-wrapper {
display: grid;
grid-template-columns: 1fr;
align-items: end;
gap: var(--grid-gap);
@container hero-component (min-width: 768px) {
grid-template-columns: 1fr 280px;
}
>.right-side {
padding-block-start: 30px;
border-block-start: 1px solid var(--_border-color);
@media screen and (min-width: 768px) {
padding-block-start: 0;
padding-inline-start: 20px;
border-block-start: none;
border-inline-start: 1px solid var(--_border-color);
}
}
}
}
.hero-pre-title {
margin-block-end: 15px;
max-inline-size: 360px;
font-size: var(--hero-pre-title-font-size);
font-weight: var(--hero-pre-title-font-weight);
color: var(--hero-pre-title-color);
text-wrap: balance;
}
.hero-title {
margin: 0;
font-family: var(--font-family-heading);
font-size: var(--hero-title-font-size);
font-weight: var(--hero-title-font-weight);
line-height: var(--font-line-height-2);
text-wrap: balance;
color: var(--hero-title-color);
.highlight {
color: var(--color-text-highlight);
}
}
.hero-sub-title {
margin-block-start: 5px;
max-inline-size: 620px;
font-size: var(--hero-sub-title-font-size);
font-weight: var(--hero-sub-title-font-weight);
line-height: var(--font-line-height-3);
color: var(--hero-sub-title-color);
text-wrap: balance;
&:first-child {
margin-block-start: 0;
}
}
.hero-sub-text {
margin-block-end: 10px;
max-inline-size: 620px;
font-size: clamp(1.375rem, 2.5vw, 1.625rem);
font-weight: var(--hero-sub-title-font-weight);
line-height: var(--font-line-height-3);
color: var(--hero-sub-title-color);
text-wrap: balance;
&:first-child {
margin-block-start: 0;
}
}
.buttons-container {
margin-inline: auto;
margin-block-start: 30px;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.actions-container {
margin-inline: auto;
margin-block-start: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.read-more {
inline-size: 48px;
block-size: 48px;
display: grid;
place-items: center;
color: light-dark(var(--color-cyan-500), var(--color-cyan-500));
border: 1px solid var(--_border-color);
border-radius: 0;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&:hover {
color: light-dark(var(--color-white), var(--color-black));
background-color: light-dark(var(--color-dark-950), var(--color-neutral-100));
border-color: light-dark(var(--color-dark-950), var(--color-neutral-100));
}
svg {
inline-size: 16px;
block-size: 16px;
display: block;
fill: currentColor;
}
}
}
figure.delimiter {
position: absolute;
z-index: 2;
inset-block-end: 0;
inset-inline: 0;
block-size: auto;
transform: translateY(40%);
pointer-events: none;
img {
inline-size: 100%;
max-inline-size: none;
block-size: auto;
}
}
&.simple {
display: flex;
flex-direction: column;
.content {
.content-inner {
>.top {
padding-block: clamp(40px, 10vw, 100px);
}
}
}
}
}
&.page-404 {
.content {
.content-inner {
background-color: transparent;
}
}
}
}
.hero-slider-component {
container-type: inline-size;
container-name: hero-slider-component;
position: relative;
z-index: 1;
grid-area: both;
block-size: 100%;
.slider {
position: relative;
block-size: 100%;
.slick-list {
block-size: 100%;
}
.slick-track {
display: flex;
block-size: 100%;
}
.slider-item {
padding-inline: 0;
position: relative;
block-size: auto;
display: flex;
flex-direction: column;
outline: none;
&:not(:nth-child(1)) {
display: none;
}
>.inner {
inline-size: 100%;
block-size: 100%;
}
.video-container {
position: relative;
z-index: 1;
inset: 0;
aspect-ratio: 16 / 9;
block-size: 100%;
overflow: hidden;
video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
}
}
}
&.slick-initialized {
.slider-item {
&:not(:nth-child(1)) {
display: flex;
}
}
}
.navigation-container {
.arrows {
position: absolute;
inset-block-start: 50px;
inset-inline-start: var(--page-gap);
z-index: 3;
display: flex;
align-items: center;
gap: var(--slider-icon-gap);
@media (min-width: 1660px) {
inset-inline-start: var(--container-max-width-offset);
}
}
.dots {
position: relative;
z-index: 3;
display: none;
}
.slides-number-container {
display: none;
}
.tabs {
display: none;
}
}
}
} .hero-modal {
position: relative;
margin-block-start: 36px;
color-scheme: dark;
color: var(--color-white);
background-color: rgba(1, 67, 160, 0.9);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
&[hidden] {
display: none;
}
.modal-close {
--_size: 36px;
position: absolute;
inset-block-start: calc(var(--_size) * -1);
inset-inline-end: 0;
display: flex;
align-items: center;
justify-content: center;
inline-size: var(--_size);
block-size: var(--_size);
min-block-size: auto;
padding: 0;
color: var(--color-white);
background-color: rgba(0, 59, 142, 0.9);
backdrop-filter: blur(50px);
border-radius: 0;
border: none;
cursor: pointer;
transition: background-color var(--animation-duration);
svg {
inline-size: 16px;
block-size: 16px;
display: block;
flex-shrink: 0;
}
@media (hover: hover) {
&:hover {
background-color: rgba(0, 40, 110, 0.95);
}
}
}
.body {
padding: 30px 30px;
.pre-title {
display: flex;
align-items: center;
gap: 10px;
opacity: 0.7;
font-size: 14px;
line-height: 1;
margin-block-end: 10px;
svg {
inline-size: 12px;
block-size: 12px;
flex-shrink: 0;
}
}
h3 {
margin: 0;
font-size: 25px;
font-weight: 600;
line-height: calc(34 / 25);
}
}
.footer {
padding: 0 30px 30px;
.button {
inline-size: 100%;
--button-color: var(--color-dark-950);
--button-background-color: var(--color-white);
--button-border-color: var(--color-white);
--button-color-hover: var(--color-white);
--button-background-color-hover: var(--color-brand-primary);
--button-border-color-hover: var(--color-brand-primary);
--button-padding-inline: 30px;
--button-block-size: 46px;
@media (hover: hover) {
&:hover {
--button-color: var(--color-white);
--button-background-color: var(--color-brand-primary);
--button-border-color: var(--color-brand-primary);
text-decoration: none;
}
}
}
}
}        .notification-dialog {
--dialog-max-inline-size: min(560px, calc(100dvw - (var(--page-gap) * 2)));
--dialog-close-button-inline-size: 34px;
--dialog-close-button-block-size: 34px;
margin: auto;
padding: 0;
position: fixed;
inline-size: var(--dialog-max-inline-size);
max-inline-size: var(--dialog-max-inline-size);
color: var(--dialog-color);
background: none;
border: none;
box-shadow: none;
overflow: visible;
opacity: 0;
transform: translateY(16px) scale(.98);
transition:
opacity var(--animation-duration) ease,
transform var(--animation-duration) ease,
overlay var(--animation-duration) ease allow-discrete,
display var(--animation-duration) ease allow-discrete;
&::backdrop {
background-color: hsl(from var(--color-black) h s l / 0);
transition:
display var(--animation-duration) allow-discrete,
overlay var(--animation-duration) allow-discrete,
background-color var(--animation-duration) ease;
}
&[open] {
opacity: 1;
transform: translateY(0) scale(1);
&::backdrop {
background-color: hsl(from var(--color-black) h s l / .32);
}
}
&.is-closing {
opacity: 0;
transform: translateY(12px) scale(.985);
&::backdrop {
background-color: hsl(from var(--color-black) h s l / 0);
}
}
.notification-dialog-component {
margin: 0;
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 16px;
padding: clamp(20px, 3.2vw, 28px);
background-color: light-dark(var(--color-white), var(--color-dark-950));
border: 1px solid hsl(from var(--color-brand-primary) h s l / .2);
border-radius: var(--border-radius-lg);
box-shadow: 0 28px 56px hsl(from var(--color-black) h s l / .22);
}
.icon {
margin-block-start: 2px;
inline-size: 42px;
block-size: 42px;
flex-shrink: 0;
display: grid;
place-items: center;
color: var(--color-brand-primary);
background-color: hsl(from var(--color-brand-primary) h s l / .12);
border-radius: var(--border-radius-full);
svg {
inline-size: 20px;
block-size: 20px;
fill: currentColor;
}
}
.content {
margin: 0;
display: grid;
gap: 8px;
inline-size: 100%;
min-inline-size: 0;
}
.title {
margin: 0;
color: var(--color-text-heading);
font-family: var(--font-family-heading);
font-size: clamp(1.125rem, 1.5vw, 1.375rem);
line-height: var(--font-line-height-1);
text-wrap: balance;
}
.message,
.custom-content {
margin: 0;
color: var(--color-text-base);
font-size: var(--font-size-body);
line-height: var(--font-line-height-3);
>:first-child {
margin-block-start: 0;
}
>:last-child {
margin-block-end: 0;
}
}
.close-button {
margin: 0;
padding: 0;
position: absolute;
z-index: 3;
inset-block-start: 12px;
inset-inline-end: 12px;
display: grid;
place-items: center;
inline-size: var(--dialog-close-button-inline-size);
block-size: var(--dialog-close-button-block-size);
min-inline-size: auto;
min-block-size: auto;
color: var(--color-text-base);
background-color: hsl(from var(--color-black) h s l / .04);
border: none;
border-radius: var(--border-radius-full);
cursor: pointer;
transition: color var(--animation-duration), background-color var(--animation-duration);
svg {
margin: 0;
padding: 0;
inline-size: 100%;
block-size: 100%;
fill: currentColor;
border: none;
}
&::before,
&::after {
display: none;
}
&[hidden] {
display: none;
}
@media (hover: hover) {
&:hover {
color: var(--color-state-error);
background-color: hsl(from var(--color-state-error) h s l / .13);
}
}
&:focus-visible {
outline: 2px solid hsl(from var(--color-brand-primary) h s l / .5);
outline-offset: 2px;
}
}
&.is-success {
.icon {
color: var(--color-state-success);
background-color: hsl(from var(--color-state-success) h s l / .14);
}
}
&.is-warning {
.icon {
color: var(--color-state-warning);
background-color: hsl(from var(--color-state-warning) h s l / .16);
}
}
&.is-error {
.icon {
color: var(--color-state-error);
background-color: hsl(from var(--color-state-error) h s l / .16);
}
}
&.is-info {
.icon {
color: var(--color-brand-primary);
background-color: hsl(from var(--color-brand-primary) h s l / .12);
}
}
&.is-neutral {
.icon {
color: var(--color-dark-950);
background-color: hsl(from var(--color-dark-950) h s l / .12);
}
}
}
.notification-dialog:modal {
inline-size: var(--dialog-max-inline-size);
max-inline-size: var(--dialog-max-inline-size);
block-size: auto;
max-block-size: none;
overflow: visible;
}
@starting-style {
.notification-dialog[open] {
opacity: 0;
transform: translateY(16px) scale(.98);
&::backdrop {
background-color: hsl(from var(--color-black) h s l / 0);
}
}
}
.notification-component {
padding: 20px clamp(20px, 3vw, 25px);
position: relative;
background-color: var(--color-white);
border-radius: var(--border-radius-sm);
.title {
margin: 0;
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: var(--font-line-height-2);
&+* {
margin-block-start: 0;
}
&:has(.icon) {
display: flex;
align-items: center;
gap: 20px clamp(20px, 3vw, 30px);
.icon {
width: 75px;
aspect-ratio: 1;
flex-shrink: 0;
display: grid;
place-items: center;
font-size: 36px;
color: var(--color-white);
background-color: var(--color-white);
border-radius: 50%;
box-shadow: 0 0 35px 0 var(--color-white);
}
}
}
.buttons-container {
margin-block-start: 20px;
}
p,
ul,
ol {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
&.no-pad {
margin: 0;
}
}
&.notice {
background-color: hsl(from var(--color-white) h s l / .1);
}
&.warning {
background-color: hsl(from var(--color-state-warning) h s l / .1);
.title {
&:has(.icon) {
.icon {
background-color: var(--color-state-warning);
box-shadow: 0 0 35px 0 var(--color-state-warning);
}
}
}
}
&.align-center {
text-align: center;
}
&.no-style {
padding: 0;
background: none;
border: none;
border-radius: 0;
}
.close-button {
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
display: block;
font-size: 14px;
text-decoration: none;
&:hover {
color: var(--color-state-error);
}
}
}   .page-list-item-container {
a {
display: flex;
flex-direction: column;
flex: 1;
text-decoration: none;
color: inherit;
outline: none;
block-size: 100%;
background-color: var(--color-neutral-100);
border: 1px solid transparent;
border-radius: var(--border-radius-xs);
overflow: hidden;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&:hover {
background-color: var(--color-white);
border-color: var(--color-neutral-500);
figure {
&.main {
img {
filter: grayscale(0%);
}
}
}
.video-container {
video {
filter: grayscale(0%);
}
}
.body {
&::before {
block-size: 10px;
background-color: var(--color-white);
}
>.inner {
transform: translateY(-10px);
gap: calc(clamp(30px, 10vw, 80px) - 30px) 0;
>.bottom {
margin-block-end: 0;
}
}
.category {
color: var(--color-brand-primary);
}
.read-more {
transform: translateY(0);
}
}
}
}
figure {
&.main {
position: relative;
overflow: hidden;
aspect-ratio: 17 / 5;
img {
min-inline-size: 100%;
min-block-size: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: filter var(--animation-duration);
filter: grayscale(100%);
}
}
}
.video-container {
position: relative;
overflow: hidden;
aspect-ratio: 17 / 5;
video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: filter var(--animation-duration);
filter: grayscale(100%);
}
}
.body {
padding: clamp(30px, 5vw, 40px) clamp(20px, 3vw, 40px);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex: 1 0 auto;
border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
&::before {
content: '';
position: absolute;
z-index: 2;
inset-inline: 0;
inset-block-end: 100%;
block-size: 0;
background-color: var(--color-neutral-100);
transition: background-color var(--animation-duration), block-size var(--animation-duration);
}
>.inner {
display: flex;
flex-direction: column;
flex: 1 0 auto;
gap: clamp(30px, 10vw, 80px) 0;
overflow: hidden;
transition: transform var(--animation-duration), gap var(--animation-duration);
>.bottom {
margin-block-start: auto;
margin-block-end: -30px;
transition: margin-block-end var(--animation-duration);
}
}
.category {
margin-block-end: 10px;
font-size: var(--font-size-body-xs);
line-height: var(--font-line-height-2);
font-weight: 600;
text-transform: uppercase;
color: hsl(from currentColor h s l / .7);
letter-spacing: .1em;
transition: color var(--animation-duration);
}
.title {
font-family: var(--font-family-heading);
font-size: var(--font-size-heading-2);
line-height: var(--font-line-height-2);
font-weight: 600;
text-wrap: balance;
}
.description {
max-inline-size: 460px;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
text-wrap: balance;
p {
margin: 0;
font-size: inherit;
line-height: inherit;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 2lh;
overflow: hidden;
text-overflow: ellipsis;
}
}
.read-more {
margin-block-start: 20px;
display: inline-flex;
align-items: center;
gap: 1em;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
font-weight: 600;
transform: translateY(calc(100% + 10px));
transition: transform var(--animation-duration);
svg {
display: grid;
place-items: center;
inline-size: .75em;
}
}
}
}  .timeline-slider-component {
border-block-start: 1px solid hsl(from var(--color-black) h s l / .15);
.slider {
position: relative;
.slick-list {
margin-inline-end: calc(var(--page-gap) * -1);
padding-inline-end: calc(var(--page-gap) + 20%);
@media (max-width: 359px) {
padding-inline-end: var(--page-gap);
}
@media (min-width: 1660px) {
margin-inline-end: calc(var(--container-max-width-offset) * -1);
}
}
.slick-track {
display: flex;
}
.slider-item {
block-size: auto;
display: flex;
flex-direction: column;
outline: none;
&:not(:nth-child(1)) {
display: none;
}
.timeline-slider-item-container {
display: flex;
flex-direction: column;
flex: 1;
border-inline-start: 1px solid hsl(from var(--color-black) h s l / .15);
}
&.slick-current {
.timeline-slider-item-container {
color: hsl(from currentColor h s l / 1);
.date,
.title {
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
}
}
}
&.slick-initialized {
.slider-item {
&:not(:nth-child(1)) {
display: flex;
}
}
}
.navigation-container {
display: none;
}
}
}
.timeline-slider-item-container {
padding-block: clamp(30px, 5vw, 50px);
padding-inline: clamp(20px, 3vw, 50px);
display: flex;
flex-direction: column;
color: hsl(from currentColor h s l / .4);
transition: color var(--animation-duration);
&:hover {
color: hsl(from currentColor h s l / 1);
.date,
.title {
color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
}
.date {
font-size: var(--font-size-heading-1);
line-height: var(--font-line-height-2);
font-weight: 600;
transition: color var(--animation-duration);
}
.title {
margin-block-start: 10px;
font-size: var(--font-size-heading-4);
line-height: var(--font-line-height-2);
font-weight: 600;
transition: color var(--animation-duration);
}
.description {
margin-block-start: clamp(30px, 5vw, 40px);
font-size: var(--font-size-body-lg);
line-height: var(--font-line-height-3);
}
}
.hero-component {
&.page-landing {}
}
.page-list-component {
container-type: inline-size;
container-name: page-list-component;
.list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 15px;
@container page-list-component (min-width: 992px) {
grid-template-columns: repeat(3, 1fr);
}
>.item {
.page-list-item-container {
block-size: 100%;
}
}
}
}  .panel-pages {
container-type: inline-size;
container-name: panel-pages;
.content-section-header {
margin-block-end: clamp(50px, 12vw, 150px);
@container panel-pages (max-width: 767px) {
margin-block-end: 50px;
}
}
}               .reference-list-item-container {
container-type: inline-size;
container-name: reference-list-item-container;
>a {
padding: 0;
position: relative;
color: inherit;
outline: none;
text-decoration: none;
display: flex;
flex-direction: row-reverse;
gap: 0;
block-size: 100%;
background-color: light-dark(var(--color-white), var(--color-black));
border-radius: var(--border-radius-lg);
transition: background-color var(--animation-duration), border-color var(--animation-duration);
>figure.main {
inline-size: 40%;
}
>.body {
inline-size: 60%;
}
@container reference-list-item-container (max-width: 479px) {
flex-direction: column;
>figure.main {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
}
>.body {
inline-size: 100%;
}
}
@media (hover: hover) {
&:hover {
figure.main {
img {
transform: scale(1.05);
}
}
.body {
.actions-container {
svg {
color: light-dark(var(--color-white), var(--color-white));
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
border-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
}
}
}
}
}
figure.main {
position: relative;
z-index: 1;
block-size: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0;
@container reference-list-item-container (max-width: 479px) {
border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
img {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform var(--animation-duration);
}
}
.body {
padding: 30px clamp(20px, 3vw, 40px);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(40px, 5vw, 80px) 0;
flex: 1 1 auto;
>.top {
display: flex;
flex-direction: column;
gap: 16px 0;
}
>.bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.title {
max-inline-size: 40ch;
font-size: clamp(1.1875rem, 2.5vw, 1.625rem);
line-height: var(--font-line-height-2);
text-wrap: balance;
}
.sub-title {
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
}
.meta-component {
ul {
li {
padding: 0 0 0 14px;
flex-direction: column;
align-items: flex-start;
gap: 2px;
color: var(--color-text-tertiary);
background-color: transparent;
border-inline-start: 2px solid light-dark(var(--color-brand-primary), var(--color-brand-primary));
border-radius: 0;
font-size: var(--font-size-body);
font-weight: 400;
line-height: var(--font-line-height-2);
strong {
color: var(--color-text-secondary);
font-size: var(--font-size-heading-3);
line-height: var(--font-line-height-2);
font-weight: 400;
}
}
}
}
.actions-container {
svg {
display: grid;
place-items: center;
inline-size: 66px;
block-size: 66px;
border: 1px solid hsl(from currentColor h s l / .2);
border-radius: 50%;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
use {
transform-origin: center;
transform: scale(.2);
}
}
}
}
} .reference-slider-item-container {
container-type: inline-size;
container-name: reference-slider-item-container;
>.inner {
display: flex;
flex-direction: column;
gap: 0;
block-size: 100%;
@container panel-references (min-width: 768px) {
flex-direction: row;
>.body {
inline-size: 40%;
}
>figure.main {
inline-size: 60%;
}
}
}
figure.main {
margin-inline: calc(var(--page-gap) * -1);
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
@container panel-references (min-width: 768px) {
margin-inline-start: 0;
block-size: 100%;
}
&::before {
position: absolute;
z-index: 1;
inset: 0;
content: '';
background: linear-gradient(to bottom, hsl(from var(--color-black) h s l / 0) 50%, hsl(from var(--color-black) h s l / .59) 100%);
@container panel-references (max-width: 767px) {
display: none;
}
}
a {
&:hover {
img {
transform: scale(1.05);
}
}
}
picture {
aspect-ratio: 16 / 9;
border-radius: var(--border-radius-lg);
}
img {
inline-size: 100%;
block-size: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform var(--animation-duration);
}
.meta-component {
position: absolute;
z-index: 2;
inset-block-end: 35px;
inset-inline-start: clamp(20px, 5vw, 100px);
@container panel-references (max-width: 767px) {
display: none;
}
ul {
gap: 16px clamp(20px, 5vw, 80px);
flex-wrap: wrap;
li {
padding: 0 0 0 14px;
flex-direction: column;
align-items: flex-start;
gap: 2px;
color: inherit;
background-color: transparent;
border-inline-start: 1px solid hsl(from currentColor h s l / .3);
border-radius: 0;
font-size: var(--font-size-body-sm);
font-weight: 400;
line-height: var(--font-line-height-2);
strong {
font-size: var(--font-size-heading-3);
line-height: var(--font-line-height-2);
font-weight: 400;
}
}
}
}
}
.body {
padding: 20px 0;
flex: 1 0 auto;
display: flex;
flex-direction: column;
gap: 30px 0;
@container panel-references (min-width: 768px) {
padding-block-start: 200px;
padding-block-end: calc(45px + var(--slider-icon-block-size) + clamp(40px, 5vw, 100px));
padding-inline-end: clamp(20px, 3vw, 50px);
}
>.top {
display: flex;
flex-direction: column;
gap: 20px;
}
>.bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.title {
font-family: var(--font-family-heading);
font-size: var(--font-size-heading-1);
line-height: var(--font-line-height-2);
font-weight: 400;
text-wrap: balance;
max-inline-size: 32ch;
}
.sub-title {
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
}
.buttons-container {
.button {
white-space: nowrap;
}
}
.actions-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 20px;
.link {
margin-inline-end: 10px;
font-size: var(--font-size-body-md);
font-weight: 700;
}
}
}
}  .reference-detail-component {
container-type: inline-size;
container-name: reference-detail-component;
.reference-content {
margin-inline: auto;
padding-block: var(--content-section-padding);
>* {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
p {
&:last-of-type {
margin-block-end: 0;
}
}
}
}  .hero-component {
&.reference-landing {
&.landing {
.content {
.content-inner {
padding-block: clamp(30px, 10vw, 85px);
padding-block-start: calc(clamp(30px, 10vw, 85px) - 20px);
text-align: center;
}
.hero-pre-title {
margin-inline: auto;
}
}
}
}
&.reference-detail {
&.landing {}
}
}
.reference-intro-component {
container-type: inline-size;
container-name: reference-intro-component;
margin-block-start: calc(var(--header-height) * -1);
padding-block-start: var(--header-height);
color-scheme: dark only;
color: var(--color-text-base);
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
article {
>.two-side-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 0;
@container reference-intro-component (min-width: 992px) {
grid-template-columns: repeat(2, 1fr);
}
>.left-side {
padding-block-end: 40px;
display: flex;
flex-direction: column;
gap: clamp(30px, 5vw, 50px);
@container reference-intro-component (min-width: 992px) {
padding-block-end: clamp(40px, 4vw, 60px);
padding-inline-end: clamp(40px, 4vw, 60px);
}
>.top {
padding-block: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border-block-end: 1px solid hsl(from currentColor h s l / .3);
}
>.bottom {
margin-block-start: auto;
}
}
}
}
figure.main {
padding: 0;
position: relative;
@container reference-intro-component (min-width: 992px) {
padding: clamp(30px, 7vw, 120px);
background-image: url(//www.agadex.sk/wp-content/themes/agadex/assets/img/hero/reference-detail-bg.webp);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
img {
margin-inline: auto;
display: block;
inline-size: 100%;
max-inline-size: none;
block-size: auto;
}
}
.link-back {
position: relative;
display: inline-flex;
align-items: center;
gap: .75em;
font-size: var(--font-size-body-md);
line-height: var(--font-line-height-2);
text-decoration: none;
svg {
transition: transform var(--animation-duration);
}
&:hover {
svg {
transform: translateX(-.25em);
}
}
}
.hero-title {
margin-block: 0;
font-size: var(--font-size-heading-1);
line-height: var(--font-line-height-2);
font-weight: 400;
}
.description {
margin-block-start: 12px;
max-inline-size: 40ch;
font-size: var(--font-size-body);
line-height: var(--font-line-height-3);
text-wrap: balance;
p {
margin: 0;
font-size: inherit;
line-height: inherit;
}
}
.meta-component {
ul {
gap: 20px clamp(20px, 5vw, 40px);
li {
padding: 0 0 0 14px;
flex-direction: column;
align-items: flex-start;
gap: 2px;
color: var(--color-text-tertiary);
background-color: transparent;
border-inline-start: 1px solid hsl(from currentColor h s l / .26);
border-radius: 0;
font-size: var(--font-size-body);
font-weight: 400;
line-height: var(--font-line-height-2);
strong {
color: var(--color-text-secondary);
font-size: var(--font-size-heading-3);
line-height: var(--font-line-height-2);
font-weight: 400;
}
}
}
}
}
.reference-list-component {
container-type: inline-size;
container-name: reference-list-component;
.list-container {
>.buttons-container {
margin-block-start: clamp(35px, 5vw, 45px);
display: flex;
justify-content: flex-end;
}
>.actions-container {
margin-block-start: clamp(35px, 5vw, 45px);
display: flex;
justify-content: flex-end;
}
}
.list {
--horizontal-gap: clamp(18px, 5vw, 28px);
--vertical-gap: clamp(18px, 5vw, 28px);
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 35vw, 600px), 1fr));
grid-template-rows: auto;
gap: var(--vertical-gap) var(--horizontal-gap);
>.item {
.reference-list-item-container {
block-size: 100%;
}
}
}
}  .reference-slider-component {
container-type: inline-size;
container-name: reference-slider-component;
.slider {
--slider-icon-bg-color-hover: light-dark(var(--color-brand-primary), var(--color-dark-950));
--slider-icon-border-color-hover: light-dark(var(--color-brand-primary), var(--color-dark-950));
--slider-item-gap: 0;
margin-block-start: calc((var(--slider-icon-block-size) + 32px) * -1);
padding-block-start: calc(var(--slider-icon-block-size) + 32px);
position: relative;
@container panel-references (min-width: 768px) {
margin-block-start: 0;
padding-block-start: 0;
}
.slick-list {
position: relative;
margin-inline: calc(var(--page-gap) * -1);
}
.slick-track {
display: flex;
}
.slider-item {
padding-inline: var(--page-gap);
block-size: auto;
display: flex;
flex-direction: column;
outline: none;
&:not(:nth-child(1)) {
display: none;
}
.reference-list-item-container,
.reference-slider-item-container {
display: flex;
flex-direction: column;
flex: 1;
}
}
&.slick-initialized {
.slider-item {
&:not(:nth-child(1)) {
display: flex;
}
}
}
.navigation-container {
.arrows {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 24px;
inset-block-start: 0;
inset-inline-end: 0;
@container panel-references (min-width: 768px) {
inset-block-start: auto;
inset-block-end: 45px;
inset-inline-end: auto;
inset-inline-start: calc(40% - 45px);
transform: translateX(-100%);
}
}
.dots {
display: none;
@container panel-references (min-width: 768px) {
display: flex;
position: absolute;
z-index: 3;
inset-block-end: calc((var(--slider-icon-block-size) - var(--slider-dot-block-size)) / 2 + 45px);
inset-inline-start: 0;
}
}
}
}
}   .panel-references {
container-type: inline-size;
container-name: panel-references;
color-scheme: dark only;
color: var(--color-text-base);
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
&.content-section {
padding-block: 0;
}
>.container {
position: relative;
}
.content-section-header {
margin-block-end: 0;
padding-block: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 20px;
border-block-end: 1px solid hsl(from currentColor h s l / .3);
@container panel-references (max-width: 767px) {
padding-inline-end: calc(var(--slider-icon-inline-size) * 2 + 80px);
}
@container panel-references (min-width: 768px) {
position: absolute;
z-index: 2;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: calc(40% - clamp(0px, 1.5vw, 30px));
}
}
.content-section-sub-title {
--content-section-sub-title-font-size: var(--font-size-sm);
margin-block: 0;
}
}
.panel-related-references {
container-type: inline-size;
container-name: panel-references;
color-scheme: dark only;
color: var(--color-text-base);
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
&.content-section {
padding-block: 0;
}
>.container {
position: relative;
}
.content-section-header {
margin-block-end: 0;
padding-block: 50px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 20px;
border-block-end: 1px solid hsl(from currentColor h s l / .3);
@container panel-references (max-width: 767px) {
padding-inline-end: calc(var(--slider-icon-inline-size) * 2 + 80px);
}
@container panel-references (min-width: 768px) {
position: absolute;
z-index: 2;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: calc(40% - clamp(0px, 1.5vw, 30px));
}
}
.content-section-sub-title {
--content-section-sub-title-font-size: var(--font-size-sm);
margin-block: 0;
}
}          .social-media-component {
--_icon-size: 1em;
display: flex;
flex-direction: column;
gap: 15px 0;
>.title {
margin: 0;
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
color: inherit;
text-transform: uppercase;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
li {
position: relative;
font-family: var(--font-family-base);
font-size: var(--font-size-body);
line-height: var(--font-line-height-2);
a {
padding: 4px 15px;
font-size: inherit;
line-height: var(--font-line-height-2);
color: inherit;
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
gap: .75em;
border: 1px solid hsl(from currentColor h s l / .24);
border-radius: 0 50vw 50vw 0;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
.icon {
inline-size: var(--_icon-size);
block-size: var(--_icon-size);
display: grid;
place-items: center;
color: inherit;
background-color: transparent;
border: none;
border-radius: 0;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
svg {
inline-size: 1em;
}
}
.text {
position: relative;
display: block;
place-items: center;
color: inherit;
background-color: transparent;
}
}
}
}
&.vertical {
>.title {
margin-inline-end: 0;
margin-block-end: 15px;
}
ul {
flex-direction: column;
gap: var(--footer-items-block-gap) 0;
li {
display: inline-flex;
}
}
}
} .panel-instagram {
container-type: inline-size;
container-name: panel-instagram;
overflow: hidden;
.content-section-header {
margin-block-end: 0;
}
.content-section-title {
font-size: clamp(1.375rem, 2vw, 1.625rem);
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
gap: 20px;
@container panel-instagram (max-width: 480px) {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 359px) {
grid-template-columns: 1fr;
}
@container panel-instagram (min-width: 992px) {
grid-template-columns: repeat(6, 1fr);
}
>.cell {
&:nth-child(1) {
grid-row: span 2;
grid-column: span 2;
@container panel-instagram (max-width: 480px) {
figure {
&::before {
padding-top: 50%;
}
}
}
@media (max-width: 359px) {
grid-row: span 1;
grid-column: span 1;
figure {
&::before {
padding-top: 100%;
}
}
}
@container panel-instagram (min-width: 992px) {
grid-column: span 1;
}
}
&:nth-child(2) {
padding-inline: 10px;
align-content: center;
}
&:nth-child(3) {
@container panel-instagram (min-width: 992px) {
order: 6;
}
}
&:nth-child(4) {
@container panel-instagram (max-width: 480px) {
grid-column: span 2;
}
@media (max-width: 359px) {
grid-column: span 1;
}
@container panel-instagram (min-width: 992px) {
grid-row: span 2;
grid-column: span 2;
}
}
figure {
position: relative;
height: 100%;
overflow: hidden;
&::before {
padding-top: 100%;
content: '';
display: block;
}
a {
display: block;
text-decoration: none;
&:hover {
img {
transform: translate(-50%, -50%) scale(1.05);
}
}
}
img {
position: absolute;
top: 50%;
left: 50%;
display: block;
object-fit: cover;
min-inline-size: 100%;
min-block-size: 100%;
transform: translate(-50%, -50%);
transition: transform var(--animation-duration);
}
}
}
}
article {
.social-media-component {
margin-block-start: 20px;
justify-content: center;
}
}
} .social-share-component {
--_icon-size: 50px;
container-type: normal;
container-name: social-share-component;
display: flex;
flex-direction: column;
gap: 15px;
>.header {
.title {
font-size: var(--font-size-body-sm);
line-height: var(--font-line-height-2);
svg {
display: none;
}
}
}
ul {
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
list-style: none;
li {
position: relative;
font-size: var(--font-size-body);
line-height: normal;
a {
padding: 4px 15px;
font-size: inherit;
line-height: var(--font-line-height-2);
color: inherit;
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
gap: .75em;
border: 1px solid hsl(from currentColor h s l / .24);
border-radius: 0 50vw 50vw 0;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration); &:hover {
color: light-dark(var(--color-white), var(--color-white)) !important;
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
border-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
.icon {
color: light-dark(var(--color-white), var(--color-white)) !important;
background-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
border-color: light-dark(var(--color-brand-primary), var(--color-brand-primary));
}
}
.icon {
inline-size: var(--_icon-size);
block-size: var(--_icon-size);
display: none;
place-items: center;
color: inherit;
background-color: transparent;
border: 1px solid hsl(from currentColor h s l / .5);
border-radius: 50%;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
svg {
inline-size: 40%;
display: block;
fill: currentColor;
}
}
.text {
position: relative;
display: block;
place-items: center;
color: inherit;
background-color: transparent;
}
}
}
}
&.vertical {
ul {
flex-direction: column;
}
}
&.toggle {
>.header {
.title {
padding: 10px 20px;
background-color: hsl(from currentColor h s l / .05);
border: 1px solid hsl(from currentColor h s l / .1);
border-radius: var(--border-radius-md);
cursor: pointer;
transition: color var(--animation-duration), background-color var(--animation-duration), border-color var(--animation-duration);
&:hover {
color: var(--color-text-heading);
background-color: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
}
}
ul {
position: absolute;
z-index: 2;
top: calc(100% + 10px);
right: 0;
display: none;
padding: 10px;
background-color: hsl(from currentColor h s l / .05);
border: 1px solid hsl(from currentColor h s l / .1);
border-radius: 50vw;
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
display: none;
content: '';
inline-size: 0;
block-size: 0;
border-style: solid;
transform: translate(0, -100%);
}
&::before {
right: calc(10px + var(--_icon-size) / 2 - 8px);
border-width: 0 8px 8px 8px;
border-color: transparent transparent hsl(from currentColor h s l / .1) transparent;
}
&::after {
right: calc(10px + var(--_icon-size) / 2 - 8px + 2px);
border-width: 0 6px 6px 6px;
border-color: transparent transparent hsl(from currentColor h s l / .05) transparent;
}
}
&.opened {
ul {
display: flex;
}
}
}
}