/*++++++++++++++++++++++++ CSS INCLUDES BELOW THIS LINE ++++++++++++++++++++++++ */ [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)}/* Slider */ .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; margin-left: auto; margin-right: auto; } .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; } :root { /*============ COLORS ============*/ --temp: #211959; --color-picker: rgb(181, 181, 181); --clr-primary: 28, 28, 29; --clr-secondary: 255, 255, 255; --clr-accent: 248, 211, 51; --clr-highlight: 241, 129, 42; --clr-neutral: 255, 252, 243; --clr-text-light: 255, 255, 255; --clr-text-dark: 28, 28, 29; /*============ FONT VARIABLES & SETTINGS ============*/ font-size: 16px; --ff-primary: elza, sans-serif; --ff-serif: Georgia, 'Times New Roman', Times, serif; --ff-sans-serif: Verdana, Geneva, Tahoma, sans-serif; --ff-monospace: 'Courier New', Courier, monospace; --ff-body: var(--ff-primary); --ff-heading: var(--ff-primary); --ff-button: var(--ff-primary); /*---------------------------------------------------*/ --fw-super-light: 200; --fw-light: 300; --fw-regular: 400; --fw-semi-bold: 500; --fw-bold: 600; --fw-super-bold: 700; /*---------------------------------------------------*/ --fs-300: 0.8rem; --fs-500: 1rem; --fs-550: 1.065rem; --fs-600: 1.1rem; --fs-700: 1.2rem; --fs-800: 1.3rem; --fs-1000:1.5rem; --fs-1200:1.7rem; --fs-1500: 2rem; --fs-2500: 3rem; --fs-3000: 3.5rem; --fs-4000: 4.5rem; --fs-body: var(--fs-500); --fs-primary-heading: clamp(var(--fs-3000), 7vw, var(--fs-4000)); --fs-secondary-heading: var(--fs-1500); --fs-summary: var(--fs-700) --fs-nav: var(--fs-500); --fs-button: var(--fs-500); /*---------------------------------------------------*/ --ls-body: 0.05rem; /*---------------------------------------------------*/ --page-margin: 5vw; --section-gap: 3rem; --navbar-height: 113px; --transition-elastic: cubic-bezier(0, -0.02, 0.27, 1.55); --transition-linear: cubic-bezier(0.22, 0.22, 0, 1.05); } /* Variables for small screen sizes */ @media only screen and (max-width: 600px) { :root { --fs-primary-heading: clamp(var(--fs-2500), 7vw, var(--fs-3000)); --fs-secondary-heading: var(--fs-800); } } @media only screen and (max-width: 400px) { :root { --navbar-height: 192px; } } /* #region ============ RESET ============*/ html { /*Setting scroll behaviour breaks jquery animate scroll*/ scroll-padding-top: 148px; /* height of header*/ scroll-behavior: smooth; } body { scroll-padding-top: 148px; /* height of header*/ scroll-behavior: smooth; } @media only screen and (max-width: 400px) { html { scroll-padding-top: 180px; /* height of header*/ } } section, article, div, header, footer { /* overflow: hidden; */ } /* https://piccalil.li/blog/a-modern-css-reset/ */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; font-family: var(--ff-body); } h1, h2, h3, h4 { /*letter-spacing: 0.05em;*/ font-family: var(--ff-heading); font-weight: var(--fw-semi-bold); } h2 { font-weight: 600; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } body { background-color: transparent !important; } h1 { font-size: var(--fs-primary-heading); } h2 { font-size: var(--fs-secondary-heading); } p { font-size: var(--fs-550); font-weight: var(--fw-regular); max-width: 800px; } p a { text-decoration: underline; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role='list'], ol[role='list'] { list-style: none; padding-inline-start: 0; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } /* A elements that don't have a class get default styles */ /* a:not([class]) { text-decoration-skip-ink: auto; } */ /* Remove text decoration from A elements */ a { text-decoration: none; color: inherit; } a:visited { color: inherit; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* #endregion */ /* #region ============ GENERAL UTILLITY CLASSES ============*/ /** * The edit link that appears when you are logged in. * It is recommended that you implement an edit button * in your templates to make it easy to switch to and * from the admin control panel when editing pages. * */ #editpage { position: fixed; bottom: 0; left: 0; padding: 5px 6px; background: #db1174; color: #fff; display: block; font-weight: bold; } #editpage:hover { background: #ffffcc; color: #000; } /** * Alignment styles that are used by the InputfieldTinyMCE for * positioning images in bodycopy. If you are using this field type, * you may want to include these or similar styles in your site. * */ .align_left, .align_right, .align_center { /*width: 100%;*/ margin: 0 0 20px; } @media only screen and (max-width: 580px) { img.align_right.hidpi, img.align_left.hidpi, img.align_center.hidpi { width: 100%; } } @media only screen and (min-width: 580px) { .align_left { float: left; margin: 0 1em 0.25em 0; } .align_right { float: right; margin: 0 0 0.25em 1em; } .align_center { display: block; margin-left: auto; margin-right: auto; } } /** * WireFatalError is a class that ProcessWire will use to output * fatal errors in the design, but only if debug mode is on, or if * you are logged in as a superuser. * */ .WireFatalError { background: #a30000; color: #fff; padding: 1em; position: relative; z-index: 9999; } #editpage { position: fixed; bottom: 0; left: 0; padding: 5px 6px; background: #db1174; color: #fff; display: block; font-weight: bold; } #editpage:hover { background: #ffffcc; color: #000; } /*--------------------------------------------------------------------*/ .placeholder{ color: red; background-color: cyan; font-family: monospace; } /*--------------------------------------------------------------------*/ .accented { color: rgb(var(--clr-highlight)); font-size: var(--fs-secondary-heading); } .accent-text { color: rgb(var(--clr-accent)); } /*--------------------------------------------------------------------*/ .blur { background-color: rgb(0, 0, 0, 0.3) !important; backdrop-filter: blur(2px); } /*--------------------------------------------------------------------*/ .tc-simple-navbar-navlink-item:nth-of-type(5), .button { min-width: 150px; min-height: 46px; padding: 0.57rem 1rem; border: 2px solid rgb(var(--clr-accent)); /* border-radius: 6px; */ color: rgb(var(--clr-text-dark))!important; font-family: var(--ff-button); font-weight: 700; text-transform: uppercase; text-decoration: none; white-space: nowrap; background: rgb(var(--clr-accent)); display: inline-flex; justify-content: center; cursor: pointer; } .tc-simple-navbar-navlink-item:nth-of-type(5):hover, .button:hover, .button:focus{ /*color: rgb(var(--clr-text-dark)) !important;*/ color: white !important; /*background: rgb(var(--clr-highlight));*/ background: black; /*border-color: rgb(var(--clr-highlight));*/ border-color: black; box-shadow: 3px 3px 6px 4px #0000001b; } .button-alt { min-width: fit-content; min-height: 48px; padding: 0.57rem 1rem; border: 2px solid black; /*color: rgb(var(--clr-text-dark))!important;*/ color: white; font-family: var(--ff-button); font-weight: var(--fw-bold); text-transform: uppercase; text-decoration: none; /*background: rgb(var(--clr-secondary));*/ background-color: black; display: inline-flex; justify-content: center; cursor: pointer; } .button-alt:hover, .button-alt:focus{ color: black !important; background: white; border-color: white; box-shadow: 3px 3px 6px 4px #0000001b; } /*--------------------------------------------------------------------*/ .disable-scrollbars { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ } .disable-scrollbars::-webkit-scrollbar { background: transparent; /* Chrome/Safari/Webkit */ width: 0px; height: 0px; } /*--------------------------------------------------------------------*/ .emphasize { font-size: var(--fs-primary-heading); } .fs-300 { font-size: var(--fs-300); } .fs-600 { font-size: var(--fs-600); } .fs-700 { font-size: var(--fs-700); } .fs-800 { font-size: var(--fs-800); } .fs-1000 { font-size: var(--fs-1000); } .fs-1200 { font-size: var(--fs-1200); } .fs-1500 { font-size: var(--fs-1500); } .fs-2500 { font-size: var(--fs-2500); } .fs-4000 { font-size: var(--fs-4000); } /*--------------------------------------------------------------------*/ .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } /*--------------------------------------------------------------------*/ .full-width{ width: 100%; } /*--------------------------------------------------------------------*/ .hide { display: none !important; } /*--------------------------------------------------------------------*/ .img-hover-zoom { } .img-hover-zoom img { transition: transform 1000ms ease; } .img-hover-zoom:hover img { transform: scale(1.1); } /*--------------------------------------------------------------------*/ .invisible { visibility: hidden !important; } /*--------------------------------------------------------------------*/ @media screen and (min-width: 768px) { .mobile-only { display: none; } } /*--------------------------------------------------------------------*/ .nowrap { white-space: nowrap; } /*--------------------------------------------------------------------*/ .line-break { margin: var(--section-gap) auto 0; width: 100%; height: 1px; background-color: #cdcdcd; display: inline-block; } /*--------------------------------------------------------------------*/ .super-fast { transition: all 0s; } /*--------------------------------------------------------------------*/ .underline { text-decoration: underline; } /*--------------------------------------------------------------------*/ /* #endregion*/ /* #region ============ SITE SEPCIFIC UTILLITY CLASSES ============*/ /* #endregion */ /* #region ============ SITE PAGE TEMPLATES ============*/ /* #region ------------ Contact Page ------------*/ .contact-content { position: relative; margin-top: var(--navbar-height); min-height: 80vh; background-position: center; background-size: cover; } .contact-content-grid { /* padding-bottom: var(--section-gap); */ display: grid; grid-template-columns: repeat(2, 1fr); } .contact-content-grid > *{ padding-bottom: var(--section-gap); height: 80vh; display: flex; } .contact-content-grid-details-container { align-items: flex-end; } .contact-content-grid-details-wrapper { padding: var(--section-gap) var(--page-margin); height: min-content; background-color: rgb(var(--clr-secondary), 0.8); display: flex; flex-direction: column; } .contact-content-grid-form-container { padding: var(--section-gap) var(--page-margin); height: min-content; background-color: rgb(var(--clr-secondary), 0.8); display: flex; flex-direction: column; align-items: center; align-self: flex-end; margin-bottom: var(--section-gap); } .contact-content-grid-form-wrapper { /* padding: var(--section-gap) var(--page-margin); */ height: min-content; /* background-color: rgb(var(--clr-secondary), 0.8); */ display: flex; flex-direction: column; } /* #endregion */ /* #region ------------ Basic Page ------------*/ .basic-page-content { min-height: 80vh; margin-top: 11rem; } .basic-page-content-body { margin: var(--section-gap) var(--page-margin); max-width: 800px; display: flex; flex-direction: column; /* align-items: center; */ } .basic-page-content-body > * { margin-bottom: 2rem; } .basic-page-content-body h1 { font-size: var(--fs-primary-heading); } @media only screen and (min-width: 1000px){ .basic-page-content-body { margin: var(--section-gap) auto; max-width: 800px; } } /*------ form-redirect basic page ------*/ .p-home-form-redirect .basic-page-content-body{ align-items: center; } /*------ 404 Error basic page ------*/ .p-home-http404 h1 { font-size: 6rem; } .p-home-http404 p:first-of-type { font-size: 3rem; } /* #endregion */ /* #region------------ Pricing ------------*/ /*pricing overides - instruction component*/ #what-we-need-from-you { margin-top: var(--section-gap) } #what-we-need-from-you .instruction-card-img-wrapper { margin-top: 0.3rem; width: auto; height: 50px; overflow: visible; } #what-we-need-from-you .instruction-card-img-wrapper svg{ overflow: visible; fill: black; } /*pricing overides - banner component*/ #banner-1056 { margin-top: 0; /* background-color: rgb(var(--clr-highlight)); */ } #banner-1056 .banner-content-container-text-container{ /* background-color: rgb(var(--clr-highlight)); */ /* color: rgb(var(--clr-text-light)); */ } /* #endregion */ /* #endregion */ /* Components */ /* .tc-simple-hero { position: relative; z-index: 900; padding: 2rem; height: 50vh; color: #fff; } .tc-simple-hero-image-wrapper { position: absolute; z-index: 920; top: 0; bottom: 0; left: 0; right: 0; background-position: right; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .tc-simple-hero-image-overlay { position: absolute; z-index: 922; top: 0; bottom: 0; left: 0; right: 0; } .tc-simple-hero-content-container { position: relative; z-index: 930; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } @media only screen and (max-width: 500px) { .tc-simple-hero-content-container p span { font-size: 1.1rem !important; /*outline: 1px solid red;*/ /* } .tc-simple-hero h1 span{ max-width: 90vw; font-size: clamp(2rem, 12vw, 3.5rem); } }*/ /*------ 123 Banner ------*/ .banner123-inner { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 1rem; justify-items: center; margin-top: 4rem; max-width: 800px; margin-left: auto; margin-right: auto; } .banner123-inner span { grid-column: span 3; width: 100%; font-size: 3rem; padding-left: 5rem; } .banner123-inner img { width: 100px; } @media only screen and (max-width: 768px) { .banner123-inner span { padding-left: 0; width: auto; } } /*Component Overrides*/ .tc-simple-hero { padding: 4rem 2rem; height: fit-content; max-height: 100vh; } @media only screen and (max-width: 400px) { .tc-simple-hero { max-height: unset; } } .content-grid-pricing-card-wrapper .fs-300{ font-weight: 500; } .content-grid-pricing-card-wrapper ul{ list-style: none; } .tc-split-hero { margin-top: 140px; } @media only screen and (max-width: 992px) { .tc-split-hero { margin-top: 131px; } } @media only screen and (max-width: 400px) { .tc-split-hero { margin-top: 131px; } } .tc-split-hero .fs-4000 { font-size: clamp(2rem, 10vw, 4.5rem); } .tc-split-hero-container-1-inner .fs-1000 { font-size: clamp(1.2rem, 5vw, 1.5rem); } .tc-split-hero #input_5 { width: 100%; } .form-buttons-wrapper{ display: flex; justify-content: center; } .tc-simple-navbar-navlink-item:nth-of-type(5){ padding: 0.37rem 1rem !important; } .slick-list { max-height: 200px; } #instructions-the-process svg { fill: rgb(var(--clr-highlight)); } #instructions-the-process h3{ color: black; } /* h1, h2, h3, h4, h5, h6, p, span { max-width: 100vw; }*/ .template-profile { margin-top: 120px; margin-bottom: var(--section-gap); padding-top: var(--section-gap); padding-bottom: var(--section-gap); display: grid; grid-template-columns: 1fr; row-gap: 2rem; } @media only screen and (max-width: 400px) { .template-profile { margin-top: 100px; } } .template-profile > * { display: flex; justify-content: center; align-items: flex-start; } .template-profile > *:nth-child(odd) { width: 100%; } .template-profile > *:nth-child(even) { justify-self: flex-start; } .template-preview-img-container { overflow: visible; /*order: 2;*/ } .template-preview-img-wrapper { border-radius: 6px; /*aspect-ratio: 9/16;*/ background-color: transparent; overflow: visible; } .template-preview-img-wrapper iframe { box-shadow: 5px 5px 8px 6px #0000001b; border-radius: 6px; border: none; width: 100%; height: 100%; } .template-preview-img-wrapper img{ box-shadow: 5px 5px 8px 6px #0000001b; border-radius: 6px; /*max-width: 80%; margin: auto;*/ } .template-details-container { position: relative; overflow: visible; margin-left: auto; margin-right: auto; padding-left: 5vw; padding-right: 5vw; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; order: 1; /*max-height: 500px;*/ /*overflow-y: scroll;*/ } .template-details-container .scroll-text{ margin-bottom: 1.5rem; /*max-height: 400px;*/ /*overflow-y: scroll;*/ } @media only screen and (min-width: 1250px) { .template-details-container .scroll-text{ margin-bottom: 1.5rem; max-height: 400px; overflow-y: scroll; } .template-details-container { margin-left: 10%; margin-right: var(--page-margin); padding-right: 1ch; padding-left: 0; } } /* .template-details-container .scroll-text h1 { background-color: white; position: sticky; top: 0; } .template-details-container .scroll-text h2 { background-color: white; position: sticky; top: 50px; }*/ .template-details-container .static-text { width: 100%; } .template-details-container-btn-wrapper { position: relative; overflow: visible; display: flex; justify-content: center; } .template-details-container-btn-wrapper > a:first-child { margin-right: 1rem; } @media only screen and (max-width: 400px) { .template-details-container-btn-wrapper { flex-wrap: wrap; gap: 1rem; } @supports not(gap:1rem){ .template-details-container-btn-wrapper>*+* { margin-top: 1rem; } } } /*Iframe source need to have scrollbars removed*/ /*iframe*/ .isEmbeded::-webkit-scrollbar { width: 0; /* Remove scrollbar space */ background: transparent; /* Optional: just make scrollbar invisible */ } @media only screen and (max-width: 618px) { .template-preview-img-wrapper { max-width: 90vw; margin: auto; } } @media only screen and (min-width: 618px) { .template-preview-img-wrapper { /*border-radius: 6px;*/ /*width: 80%;*/ max-width: 80%; /*height: calc(100vh - 250px); aspect-ratio: 3/4;*/ /*background-color: transparent;*/ /*overflow: visible;*/ } } @media only screen and (min-width: 800px) { .template-preview-img-wrapper { border-radius: 6px; width: 80%; height: auto; aspect-ratio: 16/9; background-color: transparent; overflow: visible; } } @media only screen and (min-width: 1250px) { .template-profile { margin-top: 150px; margin-bottom: var(--section-gap); padding-top: var(--section-gap); padding-bottom: var(--section-gap); display: grid; grid-template-columns: 5fr 2fr; } .template-preview-img-container { overflow: visible; order: 1; } .template-details-container { order: 2; margin-left: 0; } } .template-details-container h1, .template-details-container h2 { font-size: var(--fs-secondary-heading); margin: 0; font-weight: 700; letter-spacing: 0.05em; font-family: var(--ff-heading); text-rendering: optimizeSpeed; line-height: 1.5; } .footer * { /*outline: 1px solid red;*/ } /* Jot Form Stuff */ .jotform-form[name="form_232534673625358"] #input_2 { background-color: black!important; color: white!important; } .form-submit-button.submit-button.jf-form-buttons.jsTest-submitField:hover { background-color: black !important; color: white !important; } .news-directory-heading { margin-top: 112px; padding-top: 3rem; padding-bottom: 3rem; width: 100%; background-color: rgb(var(--clr-accent)); text-align: center; font-weight: 700; } /*------------ News Card styling ------------*/ .news-banner-card { background-color: rgb(var(--clr-accent), 0); display: flex; flex-direction: column; } .news-banner-img-wrapper { width: 100%; aspect-ratio: 1/1; background-size: cover; background-position: center; margin-bottom: 1rem; } .news-banner-card-text { padding-right: 1.5rem; } .news-banner-card-text > * { margin-bottom: 0.3rem; }/* .news-banner-card-text > p:first-of-type { width: fit-content; padding-bottom: 3px; border-bottom: 1px solid rgb(var(--clr-accent)); }*/ .news-banner-card-date { font-size: 0.9rem; color: rgb(var(--clr-text-dark)); width: fit-content; padding-bottom: 3px; border-bottom: 1px solid rgb(var(--clr-accent)); } /*------------ Directory styling ------------*/ .news-directory-main { margin-top: var(--section-gap); } .news-directory-main .button { display: none; width: 250px; } .news-directory-main-inner { margin-left: auto; margin-right: auto; margin-bottom: 2rem; max-width: 1400px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 5vw; row-gap: 3rem; } @media only screen and (max-width: 1200px) { .news-directory-main-inner { grid-template-columns: repeat(3, 1fr); } } @media only screen and (max-width: 840px) { .news-directory-main-inner { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 540px) { .news-directory-main-inner { grid-template-columns: 1fr; } } #news-directory-load-more { margin-inline: auto; }/* ------ CTA BANNER ------ */ .cta-banner { margin-top: 3rem; padding-top: 1rem; padding-bottom: 1rem; padding-left: 5vw; padding-right: 5vw; background-color: rgb(var(--clr-accent)); } .cta-banner .inner { display: flex; justify-content: center; } .cta-banner .inline-spacer { width: 2.5rem; } .cta-banner .button-alt { color: white; } /*------NEWS BANNER------*/ .news-banner { margin-block: var(--section-gap); } .news-banner h2{ margin-bottom: 1.5rem; text-align: center; } .news-banner-inner { margin-left: var(--page-margin); margin-right: var(--page-margin); display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1rem; } @media only screen and (max-width: 992px) { .news-banner-inner { grid-template-columns: repeat(2, 1fr); column-gap: var(--page-margin); row-gap: 1.5rem; } } @media only screen and (max-width: 565px) { .news-banner-inner { grid-template-columns: 1fr; } } /* ++++++++++++++++++++++++ NEWS ARTICLE V2 ++++++++++++++++++++++++ */ .article-hero .inner { position: relative; z-index: 100; min-height: 500px; background-size: cover; background-position: center; } .article-hero .inner:after { content: ""; position: absolute; display: block; /*background: repeating-linear-gradient(45deg, #859C9C, #859C9C 2px, #fff 2px, #fff 6px);*/ background: repeating-linear-gradient(45deg, #8e8e8e, #8e8e8e 2px, #fff 2px, #fff 6px); top: 500px; width: 100%; height: 2em; } .news-article .inner{ position: relative; top: -5rem; z-index: 200; border-top: 4px solid rgb(var(--clr-accent)); margin-left: auto; margin-right: auto; padding-top: 1.5rem; padding-left: min(1.5rem, 5vw); padding-right: min(1.5rem, 5vw); max-width: 1000px; background-color: white; display: flex; flex-direction: column; align-items: center; } .news-article .inner header { margin-bottom: 1rem; width: 100%; display: flex; justify-content: space-between; align-items: center; } .news-article .inner .breadcrumb { align-self: flex-start; } .news-article .inner .breadcrumb:hover { font-weight: 700; } .news-article .social-share { display: inline-block; } .news-article .inner h1{ margin-bottom: 1.5rem; text-align: center; font-size: 3rem; text-wrap: balance; } .news-article main > *, .news-article li { margin-bottom: 1rem; } /* ARTICLE BUTTONS */ .prev-next-article-btn-container { margin-top: 1.5rem; margin-left: auto; margin-right: auto; width: 100%; max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; } .prev-next-article-btn-container > * { margin-bottom: 1rem; } .prev-next-article-btn-container .button { width: 187px } .prev-next-article-btn-container .button[href=""] { visibility: hidden; } @media only screen and (max-width: 500px) { .prev-next-article-btn-container .button { max-width: 100px; min-width: 50px; white-space: break-spaces; } } /* CKEDIT STUFF*/ @media only screen and (min-width: 580px) { .news-article .align_left { float: left; margin: 5px 1.5em 1em -20%; } .news-article .align_right { float: right; margin: 5px -20% 1em 1.5em; } } .hero { position: relative; margin-top: var(--navbar-height); /* height: 75vh; */ min-height: 75vh; /* background-position: center; background-size: cover; */ /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .hero h1 { font-size: var(--fs-primary-heading); } .hero-content-container { height: 100%; min-height: 75vh; display: flex; align-items: flex-end; } .hero-content { padding-left: 5vw; padding-right: 5vw; background-color: rgb(var(--clr-secondary), 0.85); display: flex; flex-direction: column; align-items: center; } .hero-content > * { padding: 0.5rem 0; } /* .hero-content .accented { white-space: nowrap; } */ .hero-content .button { width: 156px; margin-bottom: 1rem; align-self: center; } /* .hero-content .button:not(:last-of-type) { margin-right: 1rem; } */ @media only screen and (min-width: 768px) { .hero-content-container { width: 100%; align-items: center; justify-content: flex-end; } .hero-content { padding-top: 1rem; padding-bottom: 1rem; padding-right: 10vw; max-width: 50%; align-items: flex-start; } .hero-content > * { box-sizing: content-box; /*display: flex; flex-wrap: wrap;*/ /* flex-wrap: nowrap; */ } .hero-content > *:last-child { display: flex; flex-wrap: nowrap; } .hero-content .button:not(:last-of-type) { margin-right: 1rem; } }.instructions { /* margin-top: calc(0px - var(--section-gap)); */ padding: var(--section-gap) var(--page-margin); background-color: rgb(246,246,246); } .instructions h2 { text-align: center; font-size: 2.2rem; font-weight: 700; font-style: italic; } .instructions-content-container-text-wrapper { display: flex; flex-direction: column; align-items: center; } .instructions-content-container > *:not(:last-child) { margin-bottom: 1.5rem; } .instructions-content-container-text-wrapper { margin-bottom: 1rem; } .instructions-content-container-text-wrapper > *:last-child { margin-bottom: 1.5rem; } .instructions-content-container-card-grid { display: grid; grid-template-columns: 1fr; row-gap: 1.5rem; } .instruction-card { border-bottom: 1px dashed rgb(var(--clr-text-dark)); padding-bottom: 1.5rem; display: flex; flex-direction: column; } .instruction-card > *:not(:last-child) { margin-bottom: 1rem; } .instruction-card-img-wrapper { margin: 0 auto; width: 95px; height: 100px; } .instruction-card-img-wrapper svg { width: 100%; height: 100%; fill: rgb(0,0,0); opacity: 0.6; } .instruction-card-img-wrapper * { overflow: visible; } .instruction-card h3{ color: black; font-size: 1.8rem; font-weight: 700; text-align: center; } @media only screen and (min-width: 768px) { .instruction-columns-six{ grid-template-columns: repeat(3, 1fr); } .instruction-columns-five{ grid-template-columns: repeat(3, 1fr); } .instruction-columns-four{ grid-template-columns: repeat(4, 1fr); } .instruction-columns-three{ grid-template-columns: repeat(3, 1fr); } .instruction-columns-two{ grid-template-columns: repeat(2, 1fr); } .instruction-columns-one{ grid-template-columns: repeat(1, 1fr); } .instruction-card { border-bottom: none; padding-left: 2.5vw; padding-right: 2.5vw; } .instruction-card:first-of-type { padding-left: 0; } .instruction-card:last-of-type { padding-right: 0; } .instruction-card:not(:last-child) { border-right: 1px dashed rgb(var(--clr-text-dark)); } } @media only screen and (min-width: 1024px) { .instruction-columns-six{ grid-template-columns: repeat(6, 1fr); } .instruction-columns-five{ grid-template-columns: repeat(5, 1fr); } .instruction-columns-four{ grid-template-columns: repeat(4, 1fr); } .instruction-columns-three{ grid-template-columns: repeat(3, 1fr); } .instruction-columns-two{ grid-template-columns: repeat(2, 1fr); } .instruction-columns-one{ grid-template-columns: repeat(1, 1fr); } }.content-grid { padding: var(--section-gap) var(--page-margin); } .content-grid > *:not(:last-child){ margin-bottom: 2rem; } .content-grid-content-container { /*display: flex; flex-direction: column; justify-content: center; align-items: center;*/ display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 2rem; } .content-grid-content-container > * { flex-basis: 100%; } /*============ Content-grid-card Styling============*/ /* #region */ .content-grid-card-wrapper { grid-column: span 12; height: 100%; display: flex; justify-content: center; } .content-grid-card { /*display: flex; flex-direction: column; justify-content: center;*/ margin-bottom: 2rem; max-width: 350px; height: 100%; display: grid; grid-template-rows: repeat(3, auto); row-gap: 1rem; align-items: center; } .content-grid-card-img-heading-container { width: 100%; height: 255px; /* aspect-ratio: 4/3; */ background-color: rgb(var(--clr-highlight)); border-radius: 0px; box-shadow: 20px 15px 20px 0px rgb(0 0 0 / 10%); } .content-grid-card-img-heading-container img { width: 100%; height: 200px; object-fit: cover; } .content-grid-card-heading-wrapper { height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .content-grid-card-heading-wrapper h3{ font-size: 1.3rem; } .content-grid-card .button { width: 213px !important; margin-top: 1rem; margin-left: auto; margin-right: auto; } .content-grid-card a { order: 1; } @media only screen and (min-width: 838px) { .content-grid-card-wrapper { grid-column: span 4; } .content-grid-content-container { /*display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;*/ margin-left: auto; margin-right: auto; max-width: 1200px; /*display: grid; grid-template-columns: repeat(3, 1fr);*/ column-gap: 5vw; align-items: flex-start; } .content-grid-content-container > * { flex-basis: auto; } } /* #endregion */ /*============ Content-grid-pricing-card Styling============*/ /* #region */ .content-grid-pricing-card-wrapper { justify-self: center; grid-column: span 12; border: 8px solid rgb(var(--clr-accent), 1); /* border: 1px solid rgb(var(--clr-primary), 0.5); */ /* border-radius: 12px; */ max-width: 336px; height: 100%; display: grid; grid-template-columns: 1fr; /*grid-template-rows: repeat(5, auto);*/ grid-template-rows: 88px 145px auto 356px; box-shadow: 20px 15px 20px 0px rgb(0 0 0 / 10%); } .content-grid-pricing-card-wrapper > * { padding: 0.5rem; display: flex; flex-direction: column; } .content-grid-pricing-card-wrapper h3 { font-size: var(--fs-1000); min-height: 88px; justify-content: center; } .content-grid-pricing-card-wrapper > * > ul { padding: 1rem; } .content-grid-pricing-card-wrapper > * > ul > li { margin-top: 0.3rem; } .content-grid-pricing-card-wrapper > * > ul > li a { text-decoration: underline; } .content-grid-pricing-card-wrapper > *:nth-child(1) { background-color: rgb(var(--clr-accent)); text-align: center; } .content-grid-pricing-card-wrapper > *:nth-child(2) { background-color: rgb(var(--clr-accent), 0.3); justify-content: center; align-items: center; } .content-grid-pricing-card-wrapper > *:nth-child(3) { background-color: rgb(var(--clr-secondary)); padding: 0 1rem; } .content-grid-pricing-card-wrapper > *:nth-child(4) { background-color: rgb(var(--clr-secondary)); } .content-grid-pricing-card-wrapper > *:last-child { border-top: 1px dashed rgb(var(--clr-text-dark)); margin: 0 1rem; padding: 1rem 0; justify-content: flex-end; } .content-grid .button { width: 175px; } @media only screen and (min-width: 1200px/*933px*/) { .content-grid-pricing-card-wrapper { grid-column: span 4; } } /* #endregion */ .contact-form-component { margin: var(--section-gap) 0; padding: 0 var(--page-margin); display: flex; flex-direction: column; align-items: center; } .contact-form-component-text-wrapper h2 { text-align: center; text-wrap: balance; font-size: 2.2rem; font-weight: 700; font-style: italic; } .contact-form-component-text-wrapper p { text-align: center; max-width: 600px; text-wrap: balance; } .contact-form-component-text-wrapper iframe { width: 800px !important; max-width: 90vw; } .contact-form-component-text-wrapper > *:not(iframe) { margin-bottom: 1rem; max-width: calc(800px - var(--page-margin) - var(--page-margin)); } .form-dropdown, .form-textarea, .form-textbox:not(#productSearch-input), .signature-wrapper, .form-checkbox+label:before { border-radius: 6px; border: 2px solid rgba(195, 202, 216, 0.75); } .jotform-form ul { list-style: none; padding: 0; } .jotform-form label { display: none; } .jotform-form input[type="text"], .jotform-form input[type="email"], .jotform-form input[type="tel"], .jotform-form textarea { width: 600px; max-width: 90vw; } .jotform-form textarea { height: 140px; } .jotform-form input, .jotform-form textarea, .jotform-form select { margin-bottom: 1.6rem; } .jotform-form input, .jotform-form select { height: 2.3em; max-width: 90vw; } .jotform-form *::placeholder { color: var(--clr-text-dark); } #label_input_8_0 { display: inline-block; position: relative; top: -13px; left: 6px; }.gallery { position: relative; z-index: 1010; margin: var(--section-gap) 0; overflow: visible; } .gallery h2{ margin-left: var(--page-margin); margin-bottom: var(--section-gap); } .gallery-content-grid { position: relative; z-index: 1080; margin: 0 5%; display: grid; grid-template-columns: 1fr; column-gap: 5%; row-gap: 2rem; overflow: visible; } .gallery-page-overlay{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; background-color: #000; opacity: 0; transition: all 0.3s; } .gallery-content-grid > article { position: relative; z-index: 1090; aspect-ratio: 16/9; background-position: center; background-size: contain; background-repeat: no-repeat; overflow: hidden; box-shadow: 5px 5px 8px 6px #0000001b; transition: transform .5s; display: flex; justify-content: center; align-items: center; } .gallery-tile > a:not(.gallery-tile-button) { position: absolute; background-color: transparent; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000000000; } /*.gallery-tile-hover-container { visibility: hidden; } .gallery-content-grid > article:hover .gallery-tile-hover-container { visibility: visible; } .gallery-tile-hover-container * { color: rgba(0, 0, 0, 0.8); font-size: 2rem; } .gallery-content-grid > article:hover.tile-embiggen .gallery-tile-hover-container { visibility: hidden; }*/ .gallery-tile-ribbon { opacity: 1; margin: 0; padding: 0; background: rgb(var(--clr-accent)); color:black; font-weight: 500; padding:1em 0; position: absolute; top:0; right:0; transform: translateX(30%) translateY(0%) rotate(45deg); transform-origin: top left; overflow: visible; transition: opacity 0.5s; } .gallery-tile-ribbon:before, .gallery-tile-ribbon:after { content: ''; position: absolute; top:0; margin: 0 -1px; /* tweak */ width: 100%; height: 100%; background: rgb(var(--clr-accent)); } .gallery-tile-ribbon:before { right:100%; } .gallery-content-grid > article:hover > .gallery-tile-ribbon, .gallery-content-grid > article:focus-within > .gallery-tile-ribbon{ opacity: 1; } @media only screen and (min-width: 830px) { .gallery-content-grid { grid-template-columns: repeat(2, 1fr); } /*+++ USE transform-origin property for a more linear scale effect */ /*.gallery-content-grid > article:nth-of-type(odd) { transform-origin: top left; } .gallery-content-grid > article:nth-of-type(even) { transform-origin: top right; }*/ /* .tile-embiggen:nth-child(even) { transform: scale(2) translateX(-10vw); } .tile-embiggen:nth-child(odd) { transform: scale(2) translateX(10vw); }*/ } @media only screen and (min-width: 1900px) { /* .tile-embiggen:nth-child(even) { transform: scale(1.8) translateX(-10vw); } .tile-embiggen:nth-child(odd) { transform: scale(1.8) translateX(10vw); }*/ } .gallery-tile-button { display: none; position: relative; z-index: 2; top: unset !important; left: unset !important; bottom: unset !important; right: unset !important; background-color: rgb(var(--clr-accent)) !important; } .gallery-tile:hover .gallery-tile-button { display: flex; } .gallery-tile:hover .gallery-tile-button:hover { background-color: black !important; color: white; } /* * footer.css */ .footer-banner { background-color: black; } .footer-banner .inner { margin-left: auto; margin-right: auto; padding-top: 3rem; width: fit-content; color: white; } .footer-banner .inner p { font-size: 3rem; font-weight: 700; text-align: center; text-wrap: balance; } .footer-banner .inner p .custom-underline { position: relative; } .footer-banner .inner p .custom-underline:before { content: ''; position: absolute; top: 57px; left: -10px; width: 5ch; height: 12px; background-image: url(https://dev.webdesignfortrades.co.uk/site/assets/files/1015/wdft-underline-white.svg?nc=1696330575); background-position: 0 -63%; background-size: 100% auto; display: inline-block; } .footer { background-color: black; color: rgb(var(--clr-text-light)); } .footer-grid-container { padding: var(--section-gap) var(--page-margin); display: grid; grid-template-columns: 100%; row-gap: 2rem; } .footer-grid-container > * { display: flex; flex-direction: column; align-items: center; } .footer-grid-container h2 { font-family: var(--ff-body); font-weight: 400; color: rgb(var(--clr-accent)); } .footer-nav-item, .footer-contact-item { height: 48px; } .footer-nav-item:hover, .footer-nav-item:focus-visible, .footer-contact-item:hover, .footer-contact-item:focus-visible { color: rgb(var(--clr-accent)); } .footer-contact-socials a:not(:first-child) { margin-left: 1rem; } .footer-contact-socials svg { width: 2rem; height: 2rem; } .footer-contact-socials svg:hover { fill: rgb(var(--clr-accent)); } .footer-credits { border-top: 1px solid rgb(var(--clr-text-light)); padding: 0.8rem var(--page-margin); font-size: 0.8rem; } .footer-credits a { text-decoration: underline; } @media only screen and (min-width: 768px) { .footer-grid-container { grid-template-columns: repeat(6, 1fr); row-gap: var(--section-gap); } .footer-branding { grid-column: span 6; } .footer-navigation { grid-column: span 3; } .footer-contact { grid-column: span 3; } } @media only screen and (min-width: 900px) { .footer-branding { grid-column: span 2; justify-content: center; } .footer-navigation { grid-column: span 2; } .footer-contact { grid-column: span 2; } .footer-nav-item, .footer-contact-item { height: initial; } }.spacer { position: relative; z-index: -1; width: 100%; height: var(--navbar-height); } @media only screen and (max-width: 400px) { .spacer { height: 153px; } }/*simple-accordion v1.0.1*/ .tc-simple-accordion { margin-block: var(--section-gap); margin-left: auto; margin-right: auto; width: 90vw; max-width: 1000px; } .tc-simple-accordion header{ padding: 1rem; background-color: var(--tc-simple-accordion-header-clr); } .tc-simple-accordion header * { color: var(--tc-simple-accordion-header-txt-clr); } .tc-simple-accordion-segment-btn { position: relative; font-weight: 500; background-color: var(--tc-simple-accordion-segment-btn-clr); color: var(--tc-simple-accordion-segment-btn-txt-clr); cursor: pointer; padding: 1rem; padding-right: 1.5rem; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } .tc-simple-accordion-segment-btn[data-active], .tc-simple-accordion-segment-btn:hover { background-color: var(--tc-simple-accordion-segment-btn-hover-clr); } .tc-simple-accordion-segment-panel { padding: 1.5rem 1rem; background-color: var(--tc-simple-accordion-segment-panel-clr); display: none; overflow: hidden; } .tc-simple-accordion-segment-panel * { color: var(--tc-simple-accordion-segment-panel-txt-clr); } .tc-simple-accordion-segment-btn:after { content: '+'; font-size: 1.3rem; font-weight: 600; color: var(--tc-simple-accordion-segment-btn-txt-clr); float: right; margin-left: 5px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .tc-simple-accordion-segment-btn[data-active]:after { content: "-"; }/* ------ picture-grid.css ------ */ .picture-grid h2 { font-size: 1.8rem; font-weight: 700; } .picture-grid h2 span { font-size: 2.2rem; font-style: italic; } .picture-grid .inner, .picture-grid .inner .btn-container{ display: grid; grid-template-columns: repeat(1, 1fr); justify-items: center; } .picture-grid .inner .grid-col { position: relative; width: 100%; background-color: rgb(var(--clr-accent)); display: flex; flex-direction: column; align-items: center; } .picture-grid .inner .grid-col img{ max-width: min(100vw, 300px); } .picture-grid .button-alt { margin-top: 1rem; min-width: 180px; text-align: center; font-weight: 700; color: black; } .picture-grid .inner .grid-col .button-alt{ position: absolute; bottom: 1rem; display: none; } .picture-grid .inner .grid-col:nth-of-type(even) { background-color: rgb(0,0,0); color: rgb(var(--clr-accent)); } .picture-grid .inner .grid-col:nth-of-type(1), .picture-grid .inner .grid-col:nth-of-type(3) { display: none; } .picture-grid .inner .btn-container { padding-bottom: 1rem; width: 100%; background-color: rgb(var(--clr-accent)); } .picture-grid .inner .btn-container .btn-wrapper { padding-top: 1rem; padding-bottom: 1rem; width: 100%; background-color: rgb(var(--clr-accent)); display: flex; flex-direction: column; justify-content: center; align-items: center; } .picture-grid .inner .btn-container .button-alt { color: white !important; } .picture-grid .inner .btn-container .button-alt:hover { margin-top: 1rem; background-color: black; font-weight: 700; border-color: black; color: white !important; } .picture-grid .inner .btn-container .btn-wrapper .button-alt:last-of-type { margin-top: 1rem; } @media only screen and (min-width: 501px) { .picture-grid { margin-top: 3rem; padding-top: 3rem; padding-bottom: 1.5rem; padding-left: 5vw; padding-right: 5vw; background-color: rgb(246, 246, 246); } .picture-grid .inner, .picture-grid .inner .btn-container{ display: grid; column-gap: 6px; background-color: rgb(246, 246, 246); } .picture-grid .inner .btn-container .btn-wrapper { background-color: rgb(246, 246, 246); grid-column: span 3; } .picture-grid .inner .btn-container .button-alt { color: black !important; } .picture-grid .inner .button-alt{ margin-top: 1rem; background-color: rgb(var(--clr-accent)); font-weight: 700; border-color: rgb(var(--clr-accent)); } .picture-grid .inner .grid-col:nth-of-type(even) { background-color: rgb(var(--clr-accent)); color: rgb(var(--clr-accent)); } } @media only screen and (min-width: 1000px) { .picture-grid .inner, .picture-grid .inner .btn-container{ grid-template-columns: repeat(3, 1fr); } .picture-grid .inner .grid-col:nth-of-type(1), .picture-grid .inner .grid-col:nth-of-type(3) { display: flex; } .picture-grid .inner .grid-col img{ max-width: min(29vw, 500px); } .picture-grid .inner .btn-container { grid-column: span 3; padding-top: 1.2rem; padding-bottom: 1.2rem; } .picture-grid .inner .btn-container .button-alt:first-of-type { display: none; } .picture-grid .inner .grid-col .button-alt { display: block; background-color: black!important; color: white!important; } .picture-grid .inner .grid-col .button-alt:hover { display: block; background-color: white!important; color: black!important; } .picture-grid .inner .grid-col:hover .button-alt{ display: block; } .picture-grid .inner .btn-container .btn-wrapper { flex-direction: row; } .picture-grid .inner .btn-container .btn-wrapper > *:not(:first-child) { margin-left: 1.5rem; } .picture-grid .inner .btn-container .btn-wrapper .button-alt { margin-top: 0!important; } }/* ** How-it-works.css */ .how-it-works .inner{ margin-top: 3rem; margin-left: 5vw; margin-right: 5vw; } .how-it-works h2 { /*font-size: 2rem;*/ font-weight: 700; } .how-it-works header { width: fit-content; margin-left: auto; margin-right: auto; max-width: 800px; } .how-it-works header > * { margin-bottom: 1.5rem; } .how-it-works .segment { margin-top: 3rem; } .how-it-works .segment header { display: flex; flex-wrap: wrap; align-items: center; } .how-it-works .content-wrapper { margin-bottom: 1.5rem; max-width: 410px; margin-left: auto; margin-right: auto; } .how-it-works .content-wrapper > * { margin-bottom: 1.5rem; } .how-it-works .content-wrapper img { margin-right: 1.5rem; width: 80px; height: 80px; /*display: inline-block;*/ } .how-it-works .content-wrapper h3 { margin-left: 1ch; font-size: 1.8rem; font-weight: 700; font-style: italic; /*display: inline-block;*/ } .how-it-works main { margin-top: 1.5rem; } .how-it-works main > *{ margin-bottom: 1rem; } .how-it-works main .button { font-weight: 700; } .how-it-works .segment:last-child .button { margin-left: auto; margin-right: auto; scale: 1.3; transform-origin: top left; } /*@media only screen and (min-width: 768px) {*/ @media only screen and (min-width: 950px) { .how-it-works h2 { max-width: 1240px; /*max-width: 1020px;*/ margin-left: auto; margin-right: auto; } .how-it-works .segment { max-width: 1240px; /*max-width: 1020px;*/ margin-top: 6rem; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 4fr 6fr; } .how-it-works .segment:first-of-type { margin-top: 3rem; } .how-it-works .segment:nth-of-type(even) { grid-template-columns: 6fr 4fr; } .how-it-works .segment:nth-of-type(even) .image-wrapper{ order: -1; margin-right: 3rem; } .how-it-works .segment:nth-of-type(even) .content-wrapper{ align-self: center; } } .bi-tags-fill { margin-left: 1.5rem; margin-bottom: 0!important; } /* --- Small screens line break fix --- */ .how-it-works h2 em .fs-1500 { white-space: nowrap; }/** ** Big-banner.css */ .big-banner { margin-top: 6rem; padding-top: 6rem; padding-bottom: 6rem; padding-left: 5vw; padding-right: 5vw; /*background-color: black;*/ background: linear-gradient(178deg, rgba(20,20,20,1) 10%, rgba(10,10,10,1) 45%, rgba(0,0,0,1) 75%); color: white; color: rgb(var(--clr-accent)); } .big-banner .inner .content-wrapper { max-width: 800; justify-self: center; } .big-banner .inner .content-wrapper > * { margin-bottom: 3rem; } .big-banner .inner .content-wrapper h2 { font-size: 1.8rem; font-size: clamp(1.8rem, 7vw, 2.5rem); } .big-banner .inner .content-wrapper p { max-width: 800; font-size: 1.3rem; color: white; justify-self: center; } .big-banner .inner .button-wrapper { margin-top: 1.5rem; display: flex; justify-content: center; align-items: center; } .big-banner .button { scale: 1.3; /*transform-origin: top left;*/ } @media only screen and (min-width: 600px) { .big-banner { padding-left: 6rem; padding-right: 6rem; } .big-banner .inner { display: grid; grid-template-columns: 6fr 4fr; } } /** ** Text-with-image.css */ .text-with-image { margin-top: 6rem; margin-bottom: 6rem; padding-left: 5vw; padding-right: 5vw; } .text-with-image .inner { margin-top: 6rem; } .text-with-image .content-container { margin-top: 3rem; } .text-with-image .content-container > * { margin-bottom: 1.5rem; } @media only screen and (min-width: 900px) { .text-with-image .inner { display: grid; grid-template-columns: 6fr 4fr; column-gap: 5vw; align-items: center; justify-items: center; } .text-with-image .content-container p { font-size: 1.3rem; } }/** ** Contact-section.css */ .contact-section { padding-left: 5vw; padding-right: 5vw; } .contact-section .inner{ margin-bottom: 3rem; margin-left: auto; margin-right: auto; /* max-width: 600px;*/ display: grid; grid-template-columns: 1fr; justify-items: center; } .contact-section .inner .form-wrapper{ max-width: 600px; } .contact-section .inner .form-wrapper h2 { padding: 0 min(3rem, 5vw); } .contact-section .inner .form-wrapper iframe { width: 600px!important; max-width: 90vw; } .contact-section .inner .image-wrapper { display: none; align-self: center; } @media only screen and (min-width: 1200px) { .contact-section .inner .image-wrapper { display: unset; } .contact-section .inner{ grid-template-columns: 1fr 2fr; } }/** * Hero-with-form.css * * Break Points * min 1660px - Large screen * max 1399px - Small Screen * max 1020px - Tablet * max 730px - Small Tablet * max 635 - Mobile * */ .hero-with-form { /*margin-top: 140px;*/ padding-top: 110px; background-color: rgb(var(--clr-accent)); height: 720px; } .hero-with-form .inner { height: 100%; display: grid; grid-template-columns: auto 500px; } @media only screen and (max-width: 1020px) { .hero-with-form { /*margin-top: 140px;*/ padding-top: 140px; background-color: rgb(var(--clr-accent)); height: auto; } .hero-with-form .inner { height: 100%; display: grid; grid-template-columns: 1fr; } } @media only screen and (max-width: 400px) { .hero-with-form { padding-top: 100px; } } .hero-with-form .col { overflow: hidden; /*padding-top: 1.5rem;*/ padding-bottom: 1.5rem; height: 100%; max-height: 100%; display: flex; flex-direction: column; } .hero-with-form .inner .subgrid { display: grid; grid-template-columns: 1fr 1fr; } @media only screen and (max-width: 1399px) { .hero-with-form .inner .subgrid { grid-template-columns: 390px auto; } } .hero-with-form .inner .text-col { padding-left: 5vw; justify-content: space-between; } .hero-with-form .inner .text-col .container { display: flex; flex-direction: column; } .hero-with-form .inner .text-col .easy-as { display: flex; flex-wrap: wrap; } .hero-with-form .inner .text-col .easy-as p { margin-bottom: 0.5rem; font-size: 1.8rem; width: 100%; max-width: 100%; font-style: italic; font-weight: 700; } .onetwothree { width: 83px; height: 83px; background-color: white; border: 6px solid black; display: flex; justify-content: center; align-items: center; } .onetwothree > span { font-size: 4.8rem; font-weight: 600; font-family: Arial, Helvetica, sans-serif; } .hero-with-form .inner .text-col .easy-as .onetwothree { margin-right: 1ch; } .hero-with-form .inner .text-col h1 { margin-bottom: 1.5rem; max-width: 350px; font-size: 4.5rem; line-height: 1; font-weight: 700; } .hero-with-form .inner .text-col h1 em { font-size: 2.3rem; font-weight: 700; } .hero-with-form .inner .text-col p { margin-bottom: 1.15rem; max-width: 340px; font-size: 1.2rem; font-weight: 500; text-wrap: balance; }/* .hero-with-form .inner .image-col { min-height: 500px; background-repeat: no-repeat; background-size: 150%; background-position-y: 90px; }*/ .hero-with-form .inner .image-col { position: relative; } .hero-with-form .inner .image-col img { position: absolute; bottom: 0; width: auto; max-width: unset; height: 80%; } @media only screen and (min-width: 1660px) { .hero-with-form .inner .image-col img { width: auto; height: 90%; } } @media only screen and (max-width: 1399px) { .hero-with-form .inner .image-col img { width: 150%; height: auto; } } @media only screen and (max-width: 1200px) { .hero-with-form .inner .image-col { display: none; } } @media only screen and (max-width: 1020px){ .hero-with-form .inner .image-col { display: initial; } .hero-with-form .inner .image-col img { width: auto; height: 80%; } } @media only screen and (max-width: 730px){ .hero-with-form .inner .image-col { display: initial; } .hero-with-form .inner .image-col img { width: auto; height: 60%; } } @media only screen and (max-width: 635px) { .hero-with-form .inner .image-col { display: none; } } .hero-with-form .inner .form-col { padding-top: 1.5rem; background-color: black; color: white; } .hero-with-form .inner .form-col p { margin-left: auto; margin-right: auto; width: 400px; font-size: 1.8rem; font-weight: 500; } .hero-with-form .inner .form-col .first-line { font-size: 2.05rem; } .hero-with-form .inner .form-col .accent-text { font-size: 2.15rem; } /*Form section*/ .hero-with-form .jotform-form { width: 100%; } .hero-with-form .jotform-form .form-all { width: 100%; } .hero-with-form .jotform-form .form-all .form-section { width: 100%; } .hero-with-form .jotform-form .form-all .form-section .form-line { width: 100%; } .hero-with-form .jotform-form .form-all .form-section .form-line .form-input-wide { width: 100%; } .hero-with-form .jotform-form .form-all .form-section .form-line .form-buttons-wrapper { width: 100%; } .hero-with-form .jotform-form .form-all .form-section .form-line .form-sub-label-container, .hero-with-form .jotform-form .form-all .form-section .form-line .form-input-wide { width: 100%; display: flex; } .hero-with-form .jotform-form input, .hero-with-form .jotform-form .form-dropdown, .hero-with-form .jotform-form .form-all .form-section .form-line .form-buttons-wrapper button { border-radius: 0 !important; border: none !important; margin-left: auto; margin-right: auto; padding-left: 1ch; padding-right: 1ch; width: 400px; height: 55px; font-weight: 600; color: gray; } .hero-with-form .jotform-form input::placeholder, .hero-with-form .jotform-form .form-dropdown::placeholder, .hero-with-form .jotform-form .form-all .form-section .form-line .form-buttons-wrapper button::placeholder { color: gray; } .hero-with-form .jotform-form .form-all .form-section .form-line .form-buttons-wrapper button { height: auto; background-color: rgb(var(--clr-accent)); font-size: 1.8rem; font-weight: 700; font-family: elza; color: black; } .hero-with-form .jotform-form .form-all .form-section .form-line .form-buttons-wrapper button:hover { background-color: black; color: white!important; border: 3px solid white!important; } .form-success:first-of-type { margin-top: 3rem; } .form-success:last-of-type { margin-bottom: 3rem; } @media only screen and (max-width: 500px) { .hero-with-form .inner .form-col .first-line { font-size: 1.5rem; } .hero-with-form .inner .form-col p { margin-left: auto; margin-right: auto; width: 300px; font-size: 1.2rem; font-weight: 500; } .hero-with-form .inner .form-col .accent-text { font-size: 1.8rem; } .hero-with-form .jotform-form input, .hero-with-form .jotform-form .form-dropdown, .hero-with-form .jotform-form .form-all .form-section .form-line .form-buttons-wrapper button { width: 300px; } }/** ** Carousel-section.css */ .carousel { position: relative; margin-top: var(--section-gap); margin-bottom: var(--section-gap); } .carousel h2, .carousel-inner { margin-bottom: 2rem; } .carousel h2 { text-align: center; font-size: 1.8rem; font-weight: 700; } .carousel h2 span{ font-size: 2.2rem; font-style: italic; } .carousel .button { font-size: 1.2rem; font-size: 1.2rem; font-weight: 700; } /*============ Badges Carousel ============*/ .carousel-badges { /* margin-left: var(--page-margin); margin-right: var(--page-margin); */ } .carousel-badges .carousel-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5%; row-gap: 1rem; } .carousel-badges .carousel-card { display: flex !important; justify-content: center; } .carousel-badges .carousel-card-inner { /* border: 2px solid black; border-radius: 6px; */ padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .carousel-badges .carousel-card-inner p { font-size: 1.8rem; font-weight: 700; font-style: italic; } .carousel-badges svg { fill: rgb(var(--clr-accent)); } .carousel-badges .st0 { stroke: rgb(var(--clr-accent)); } .carousel-badges .carousel-card-img-wrapper { /* margin-right: 1rem; */ /* width: 95px; */ width: 150px; } @media only screen and (max-width: 400px) { .carousel-badges .carousel-card-img-wrapper { /* margin-right: 1rem; */ /* width: 95px; */ width: 100px; } } .carousel-badges .carousel-text-wrapper { display: flex; flex-direction: column; align-items: center; } @media only screen and (max-width: 768px) { .carousel-badges { display: none; } } .carousel-badges .carousel-text-wrapper > * { font-size: 1.5rem; } @media only screen and (min-width: 768px) { .carousel-badges .carousel-card { /* justify-content: center; */ margin: 0 2rem; min-width: 150px; align-items: center; } .carousel-badges .carousel-card-inner { border-radius: 6px; width: 150px; height: 150px; /* display: flex; flex-direction: column; justify-content: center; align-items: center; */ /* background-color: rgb(var(--clr-accent)); */ font-size: 1.5rem; font-weight: var(--fw-light); } .carousel-badges .carousel-card-img-wrapper { margin: 0; } .carousel-badges .slick-arrow { position: absolute; z-index: 1010; top: 0; height: 100%; /* top: 55px; */ /* border: 2px solid black; */ border: none; background-color: rgb(var(--clr-accent)); } .carousel-badges .slick-arrow:hover, .carousel-badges .slick-arrow:focus-visible { background-color: rgb(var(--clr-highlight)); } .carousel-badges .slick-prev { left: 0; } .carousel-badges .slick-next { right: 0; } } /*============ Thumbnail Carousel ============*/ .carousel-thumbnail .carousel-inner { /*padding: 1rem 0; display: grid; justify-items: center; grid-template-columns: repeat(3, 1fr); column-gap: var(--page-margin); row-gap: 2rem;*/ overflow: visible; } .carousel-thumbnail .slick-list, .carousel-thumbnail .slick-track { overflow: visible; } .carousel-thumbnail .carousel-card{ display: flex !important; justify-content: center; overflow: visible; } .carousel-thumbnail .carousel-card > .carousel-card-inner { width: 90%; max-width: 300px; box-shadow: 5px 5px 8px 6px #0000001b; overflow: visible; } .carousel-thumbnail .carousel-card img{ transition: scale 0.3s; } .carousel-thumbnail .carousel-card:hover img{ scale: 1.2; } .carousel-thumbnail .slick-arrow { position: absolute; z-index: 1010; top: 55px; border: 2px solid black; border-radius: 6px; background-color: rgb(var(--clr-accent)); } .carousel-thumbnail .slick-arrow:hover, .carousel-thumbnail .slick-arrow:focus-visible { background-color: rgb(var(--clr-highlight)); } .carousel-thumbnail .slick-prev { left: 5px; } .carousel-thumbnail .slick-next { right: 5px; } @media only screen and (max-width: 768px) { .carousel-thumbnail{ display: none; } }.horizontal-scroll { margin-top: var(--section-gap); transition: transform 2s; display: flex; flex-direction: column; } @media only screen and (max-width: 500px) { .horizontal-scroll { display: none; } } .horizontal-scroll h2 { margin-bottom: 3rem; text-align: center; text-wrap: balance; font-size: 1.8rem; font-weight: 700; } .horizontal-scroll h2 span { font-size: 2.2rem; font-style: italic; } .horizontal-scroll .button { margin-top: 1.5rem; margin-left: auto; margin-right: auto; font-weight: 700; } .horizontal-scroll-inner { margin-inline: var(--page-margin); padding-bottom: 1.5rem; max-width: 100%; overflow-x: scroll; cursor: grab; } .horizontal-scroll-inner * { cursor: grab; } .img-container { display: flex; column-gap: 2rem; justify-content: left; align-content: center; } .img-container svg{ width: 150px; height: 150px; opacity: 0.6; } .horizontal-scroll .card { width: 320px; min-width: 250px; display: flex; flex-direction: column; align-items: center; } .horizontal-scroll .card h3 { font-size: 1.8rem; font-weight: 700; font-style: italic; } .horizontal-scroll-inner::-webkit-scrollbar { width: 4px; height: 4px; } .horizontal-scroll-inner::-webkit-scrollbar-button { width: 0px; height: 0px; } .horizontal-scroll-inner::-webkit-scrollbar-thumb { background: rgb(var(--clr-accent)); border: 0px none #ffffff; border-radius: 50px; } .horizontal-scroll-inner::-webkit-scrollbar-thumb:hover { background: rgb(var(--clr-accent)); } .horizontal-scroll-inner::-webkit-scrollbar-thumb:active { background: rgb(var(--clr-accent)); } .horizontal-scroll-inner::-webkit-scrollbar-track { background: #969696c2; border: 0px none #ffffff; border-radius: 50px; } .horizontal-scroll-inner::-webkit-scrollbar-track:hover { background: #969696c2; } .horizontal-scroll-inner::-webkit-scrollbar-track:active { background: #969696c2; } .horizontal-scroll-inner::-webkit-scrollbar-corner { background: transparent; } /*================================= Paralax +++++++++++++++++++++++*/ .banner { margin: var(--section-gap) auto; padding-top: 1.5rem; padding-bottom: 1.5rem; background-color: rgb(var(--clr-accent)); /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .banner[data-banner-image="true"] { padding-top: 0; padding-bottom: 0; } .banner-content-container { display: grid; grid-template-columns: 100%; grid-template-rows: repeat(2, auto); } .banner-content-container > * { width: 100%; } .banner h2 { font-size: 1.8rem; font-weight: 700; } .banner h2 span { font-size: 2.2rem; font-style: italic; } .banner .button { font-weight: 700; background-color: black; color: white !important; min-width: 200px; line-height: 27px; padding-top: 12px; border: none; flex-basis:content; } .banner .button:hover { border: none; background-color: white; color: black !important; box-shadow: 3px 3px 6px 4px #00000027; } .banner-content-container-img-wrapper { margin-bottom: 2rem; height: 400px; } @media only screen and (max-width: 600px) { .banner { background-image: none!important; } .banner-content-container-img-wrapper { margin-bottom: 2rem; height: 450px; display: none; } } .banner-content-container-img-wrapper img{ width: 100%; height: 100%; object-fit: cover; } .banner-content-container-text-container { padding: 1rem 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; background-color: rgb(var(--clr-accent)); } .banner-content-container-text-container > * { flex-basis: 100%; } .banner-content-container-text-container > *:not(:last-child) { margin-bottom: 1rem; } .banner-content-container-text-container > .button-alt { max-width: min-content; } @media only screen and (min-width: 768px) { /*.banner { padding-bottom: 0rem; }*/ .banner-content-container-img-wrapper { margin-bottom: 0rem; height: 400px; } .banner-content-container-text-container { padding: 1rem var(--page-margin); justify-content: center; align-items: center; text-align: center; gap: 1rem; } .banner-content-container-text-container > * { flex-basis: unset; } .banner-content-container-text-container > *:not(:last-child) { margin-right: 3rem; margin-bottom: 0rem; } } @media only screen and (min-width: 1400px) { .banner-content-container-img-wrapper { height: 400px; } }/* * Card-grid.css */ .card-grid { margin-top: 6rem; padding-left: 5vw; padding-right: 5vw; } .card-grid header{ margin-bottom: 1.5rem; display: flex; justify-content: center; } .card-grid h2 { text-wrap: balance; font-size: 1.8rem; font-weight: 700px; } .card-grid h2 em { text-wrap: balance; font-size: 2.2rem; } .card-grid .inner { margin-left: auto; margin-right: auto; max-width: calc(1200px + 2rem); /*Max width of card + column gaps*/ display: grid; grid-template-columns: repeat(1, 1fr); column-gap: 1rem; row-gap: 3rem; } @media only screen and (min-width: 900px){ .card-grid .inner { grid-template-columns: repeat(3, 1fr); } } .card-grid article { margin-left: auto; margin-right: auto; max-width: 400px; } .card-grid article img { height: 260px; width: 100%; object-fit: cover; } .card-grid article h3 { margin-bottom: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; background-color: rgb(var(--clr-accent)); text-align: center; font-size: 1.8rem; font-weight: 700; } .card-grid article .cms-text { /*height: 200px;*/ display: flex; flex-direction: column; } .card-grid article .cms-text > * { margin-bottom: 1rem; } /*.card-grid article .cms-text > p:last-child { margin-top: auto; margin-bottom: 0rem; }*/ @media only screen and (min-width: 900px){ .card-grid .inner { grid-template-columns: repeat(3, 1fr); } .card-grid article .cms-text { height: 200px; } .card-grid article .cms-text > p:last-child { margin-top: auto; margin-bottom: 0rem; } }/* * Navbar.css * * max 830px Mobile */ .site-nav { position: fixed; top: 0; z-index: 10000; padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: 5vw; padding-right: 5vw; width: 100%; background-color: black; } .site-nav .inner { display: flex; justify-content: space-between; align-items: center; } .site-nav .logo-wrapper img { width: 200px; } .site-nav .nav-container { height: 90px; color: white; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .site-nav .contact-details a { margin-left: 1.5rem; font-weight: 700; } .site-nav nav { padding-bottom: 15px; } .site-nav nav a { margin-left: 2.5rem; font-weight: 700; } .site-nav nav a:last-child { padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 3rem; padding-right: 3rem; background-color: rgb(var(--clr-accent)); color: black; font-size: 1rem; text-transform: uppercase; } .site-nav nav a:last-child:hover { padding-top: 0.6rem; padding-bottom: 0.6rem; padding-left: 3rem; padding-right: 3rem; background-color: black; color: white; border: 3px solid white; font-size: 1rem; text-transform: uppercase; margin-right: -6px; } .site-nav .nav-toggle-wrapper { display: none; } .site-nav .mobile-nav-container { display: none; } @media only screen and (max-width: 955px) { .site-nav .nav-container { display: none; } .site-nav .nav-toggle-wrapper { display: flex; justify-content: center; align-items: baseline; } .site-nav .nav-toggle-wrapper i { color: white; font-size: 2.5rem; } .site-nav .mobile-nav-container { position: fixed; top: 0; right: 0; min-height: 100vh; padding-top: 35px; padding-left: 5vw; padding-right: 5vw; background-color: black; display: none; } .site-nav .mobile-nav-container nav { color: white; display: flex; flex-direction: column; } .site-nav .mobile-nav-container nav a:not(:last-child) { font-size: 1.3rem; margin-bottom: 1.5rem; border-bottom: 3px solid white; } .site-nav .mobile-nav-container nav a:hover:not(:last-of-type) { border-bottom: 3px solid rgb(var(--clr-accent)); color: rgb(var(--clr-accent)); } .site-nav .mobile-nav-container nav i { text-align: center; font-size: 2.5rem; margin-bottom: 100px; } }/** * Comparison-table.css */ .comparison-table { margin-top: 0; padding-top: 6rem; padding-bottom: 3rem; background-color: rgb(246,246,246); } .comparison-table .inner{ margin-left: auto; margin-right: auto; width: fit-content; } .comparison-table th { vertical-align: baseline; } .comparison-table .table-heading-card{ width: 300px; /*padding-left: 1rem; padding-right: 1rem;*/ display: flex; flex-direction: column; align-items: center; } .comparison-table h2 { margin-top: 0.8rem; margin-bottom: 0.8rem; font-size: 1.2rem; font-weight: 700; line-height: 1.25; } .comparison-table .comparison-price { font-size: 3.5rem; font-weight: 700; line-height: 1; } .comparison-table .comparison-subtext { font-size: 1rem; /*font-weight: 700;*/ line-height: 1; } .comparison-table .button { margin-top: 0.8rem; min-width: 90%; margin-bottom: 0.4rem; } .comparison-table tbody th { padding-top: 14px; padding-bottom: 14px; padding-left: 1rem; padding-right: 1rem; } .comparison-table .row-heading { font-size: 1rem; line-height: 1.25; } .comparison-table .td-content { margin-left: auto; margin-right: auto; width: 100%; max-width: 200px; height: 100%; display: flex; justify-content: center; text-align: center; } .comparison-table .td-content i { font-size: 1.5rem; color: green; } .comparison-table th, .comparison-table td { /*border: 1px solid red;*/ background-color: white; } @media only screen and (max-width: 1000px) { .comparison-table .inner { max-width: 90vw; overflow-x: scroll; } .comparison-table tbody th, .comparison-table thead th:first-of-type { position: sticky; left: 0; min-width: 200px; /*Responsive*/ /*position: absolute; width: 300px; top: auto; left: 0;*/ } } @media only screen and (max-width: 570px) { .comparison-table tbody th, .comparison-table thead th:first-of-type { position: sticky; left: 0; z-index: 100; min-width: 150px; max-width: 150px; /*Responsive*/ /*position: absolute; width: 300px; top: auto; left: 0;*/ } .comparison-table td { max-width: 150px; } .comparison-table thead th:not(:first-of-type), .comparison-table td { position: relative; left: -90px; z-index: 90; } }/** * simple-hero.css */ /*.tc-simple-hero { position: relative; z-index: 900; margin-top: 115px; padding: 2rem; height: 50vh; color: #fff; } .tc-simple-hero-image-wrapper { position: absolute; z-index: 920; top: 0; bottom: 0; left: 0; right: 0; background-position: right; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .tc-simple-hero-image-overlay { position: absolute; z-index: 922; top: 0; bottom: 0; left: 0; right: 0; } .tc-simple-hero-content-container { position: relative; z-index: 930; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; }/* .tc-simple-hero-content-container p:not(:first-of-type) span { font-size: 1rem !important; outline: 1px solid red; }*/ .tc-simple-hero { position: relative; z-index: 900; margin-top: 112px; padding: 2rem; /*min-height: 50vh;*/ color: #fff; } .tc-simple-hero-image-wrapper { position: absolute; z-index: 920; top: 0; bottom: 0; left: 0; right: 0; background-position: right; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .tc-simple-hero-image-overlay { position: absolute; z-index: 922; top: 0; bottom: 0; left: 0; right: 0; } .tc-simple-hero-content-container { position: relative; z-index: 930; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; } /* @media only screen and (min-width: 1282px) { .tc-simple-hero-content-container { top: 31px; } }*/ @media only screen and (max-width: 955px) { .tc-simple-hero { margin-top: 104px; } } @media only screen and (max-width: 500px) { .tc-simple-hero-content-container p span { font-size: 1.1rem !important; /*outline: 1px solid red;*/ } .tc-simple-hero h1 span{ max-width: 90vw; font-size: clamp(2rem, 12vw, 3.5rem); } }/* * Package-cards.css */ .package-cards { margin-top: 3rem; padding-top: 3rem; padding-bottom: 3rem; background-color: rgb(246, 246, 246); } .package-cards > h2 { margin-bottom: 1.5rem; text-align: center; font-size: 2.4rem; font-weight: 700; font-style: italic; } .package-cards > h2 span { font-size: 3rem; } .package-cards .inner { margin-left: auto; margin-right: auto; max-width: fit-content; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0.8rem; } .package-cards article { width: 300px; /*padding-left: 1rem; padding-right: 1rem;*/ text-align: center; background-color: white; display: flex; flex-direction: column; align-items: center; } .package-cards article h2 { margin-top: 0.8rem; margin-bottom: 0.8rem; font-size: 1.4rem; font-weight: 700; line-height: 1.25; } .package-cards .comparison-price { font-size: 3.5rem; font-weight: 700; line-height: 1; } .package-cards .comparison-subtext { font-size: 1rem; /*font-weight: 700;*/ line-height: 1; min-height: 16px; } .package-cards .comparison-summary { margin-top: 0.8rem; max-width: 75%; } .package-cards .button { margin-top: 0.8rem; min-width: 90%; margin-bottom: 0.4rem; } .footnote { /*visibility: hidden;*/ margin: auto; width: 910px; max-width: 100%; font-size: 0.8rem; } @media only screen and (max-width:975px) { .package-cards > h2 { margin-left: auto; margin-right: auto; width: 500px; } .package-cards .inner { grid-template-columns: repeat(1, 1fr); row-gap: 1.5rem; } .package-cards article { width: 500px; } .footnote { width: 500px; } } @media only screen and (max-width:550px) { .package-cards > h2 { width: 300px; font-size: 2rem; } .package-cards .inner { grid-template-columns: repeat(1, 1fr); row-gap: 1.5rem; } .package-cards article { width: 300px; } .footnote { width: 300px; } } /*================================= Paralax +++++++++++++++++++++++*/ .testimonials { margin: var(--section-gap) auto; padding-top: 1.5rem; padding-bottom: 1.5rem; background-color: rgb(var(--clr-accent)); /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .testimonials[data-testimonials-image="true"] { padding-top: 0; padding-bottom: 0; } .testimonials-content-container { display: grid; grid-template-columns: 100%; grid-template-rows: repeat(2, auto); } .testimonials-content-container > * { width: 100%; } .testimonials h2 { font-size: 1.8rem; font-weight: 700; } .testimonials h2 span { font-size: 2.2rem; font-style: italic; } .testimonials .button { font-weight: 700; background-color: black; color: white !important; min-width: 200px; line-height: 27px; padding-top: 12px; border: none; flex-basis:content; } .testimonials .button:hover { border: none; background-color: white; color: black !important; box-shadow: 3px 3px 6px 4px #00000027; } .testimonials-content-container-img-wrapper { margin-bottom: 2rem; height: 400px; display: flex; } @media only screen and (max-width: 600px) { .testimonials { background-image: none!important; } .testimonials-content-container-img-wrapper { margin-bottom: 2rem; height: 450px; display: none; } } .testimonials-content-container-img-wrapper img{ width: 100%; height: 100%; object-fit: cover; } .testimonials-content-container-text-container { padding: 1rem 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; background-color: rgb(var(--clr-accent)); } .testimonials-content-container-text-container > * { flex-basis: 100%; } .testimonials-content-container-text-container > *:not(:last-child) { margin-bottom: 1rem; } .testimonials-content-container-text-container > .button-alt { max-width: min-content; } @media only screen and (min-width: 768px) { /*.testimonials { padding-bottom: 0rem; }*/ .testimonials-content-container-img-wrapper { margin-bottom: 0rem; height: 400px; } .testimonials-content-container-text-container { padding: 1rem var(--page-margin); justify-content: center; align-items: center; text-align: center; gap: 1rem; } .testimonials-content-container-text-container > * { flex-basis: unset; } .testimonials-content-container-text-container > *:not(:last-child) { margin-right: 3rem; margin-bottom: 0rem; } } @media only screen and (min-width: 1400px) { .testimonials-content-container-img-wrapper { height: 400px; } } /* --- Slider stuff --- */ .slider-container { margin: auto; background-color: white; width: 800px; height: auto; min-height: 300px; display: flex; align-content: center; } .testimonials .testimonial-slide { padding-left: 1.5rem; padding-right: 1.5rem; height: 100%; display: flex; align-items: center; } .testimonials .slider-container .image-wrapper { width: 250px; height: 250px; } .testimonials .slider-container .image-wrapper img { width: 250px; height: 250px; object-fit: contain; } .testimonials .slider-container .content-wrapper { padding-left: 1.5rem; padding-right: 1.5rem; } /* .testimonial-slide .testimonial-body > p:first-child::before { content: '"'; font-size: 3rem; vertical-align: bottom; }*/ .testimonial-slide .attribution { margin-top: 1.5rem; text-align: right; } /*============ development.css ============*/ .tc-simple-navbar { overflow-x: hidden; max-width: 100vw; } .content-grid-pricing-card-wrapper { position: relative; } /*Update selectors*/ .offerbadge { display: block; position: absolute; background-color: transparent !important; width: 150px; top: 77px; left: -40px; } .offerRibbon { width: calc(100% + 2rem); /*full width + padding*/ padding-block: 0.8rem; background-color: black; transform: translateX(-1rem); display: flex; justify-content: center; align-content: center; } .offerRibbon p { margin-inline: 1rem; padding-block: 0.5rem; width: 100%; text-align: center; font-family: var(--ff-button); font-weight: var(--fw-bold); font-size: 1.125rem; color: rgb(var(--clr-accent)); border: 4px dashed currentColor; }