/* ==========================================================================
   Sizes
   ========================================================================== */
/* ==========================================================================
   Colours
   ========================================================================== */
/* ==========================================================================
   Fonts
   ========================================================================== */
/* ==========================================================================
   Global Mixins
   ========================================================================== */
/* ==========================================================================
   Flexbox Mixins
   ========================================================================== */
/* ==========================================================================
   FP Grid Mixins
   ========================================================================== */
[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(0.25, 0.25, 0.75, 0.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(0.6, -0.28, 0.735, 0.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(0.175, 0.885, 0.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(0.68, -0.55, 0.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(0.47, 0, 0.745, 0.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(0.39, 0.575, 0.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(0.445, 0.05, 0.55, 0.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(0.55, 0.085, 0.68, 0.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(0.25, 0.46, 0.45, 0.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(0.455, 0.03, 0.515, 0.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(0.55, 0.085, 0.68, 0.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(0.25, 0.46, 0.45, 0.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(0.455, 0.03, 0.515, 0.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(0.55, 0.085, 0.68, 0.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(0.25, 0.46, 0.45, 0.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(0.455, 0.03, 0.515, 0.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(0.6); }

[data-aos=zoom-in-up] {
  transform: translate3d(0, 100px, 0) scale(0.6); }

[data-aos=zoom-in-down] {
  transform: translate3d(0, -100px, 0) scale(0.6); }

[data-aos=zoom-in-right] {
  transform: translate3d(-100px, 0, 0) scale(0.6); }

[data-aos=zoom-in-left] {
  transform: translate3d(100px, 0, 0) scale(0.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); }

/************* CSS Reset *************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

sup {
  line-height: 1;
  font-size: 0.5em; }

/* ==========================================================================
   Debugging
   ========================================================================== */
/* ==========================================================================
   Preload / Stop Resize Animations
   ========================================================================== */
.resize-animation-stopper * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important; }

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }

/* ==========================================================================
   HTML / Body Styles
   ========================================================================== */
::-moz-selection {
  background: #000000;
  color: #ffffff; }

::selection {
  background: #010364;
  color: #ffffff; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

html, body {
  width: 100%;
  height: auto;
  position: relative;
  overscroll-behavior-y: none; }

body {
  background: #0050A4;
  overflow-x: hidden; }
  body.site-no-scroll {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0; }
  body.site-no-scroll-desk {
    overflow: hidden;
    height: 100vh; }

/* ==========================================================================
   Site Container Styles
   ========================================================================== */
*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.site-container {
  clear: both;
  margin: 0 auto;
  position: relative;
  width: 90%;
  max-width: 1200px; }

/* ==========================================================================
   Global Styles
   ========================================================================== */
a {
  color: #010364;
  text-decoration: underline; }

a:hover {
  color: #0050A4; }

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0; }

.noSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }

img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  display: block; }

video {
  width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: baseline;
  margin: auto; }

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0; }
  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* ==========================================================================
   Mobile Show/Hide
   ========================================================================== */
.visible-m {
  display: block; }

.hidden-m {
  display: none; }

@media only screen and (min-width: 1024px) {
  .visible-m {
    display: none; }
  .hidden-m {
    display: block; } }

@font-face {
  font-family: 'Kapra';
  font-display: block;
  src: url("../fonts/kapra/kapra_regular-webfont.eot");
  src: url("../fonts/kapra/kapra_regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/kapra/kapra_regular-webfont.woff") format("woff"), url("../fonts/kapra/kapra_regular-webfont.woff2") format("woff2"), url("../fonts/kapra/kapra_regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Darwin';
  font-display: block;
  src: url("../fonts/darwin/webfonts/2ECA6C_13_0.eot");
  src: url("../fonts/darwin/webfonts/2ECA6C_13_0.eot?#iefix") format("embedded-opentype"), url("../fonts/darwin/webfonts/2ECA6C_13_0.woff2") format("woff2"), url("../fonts/darwin/webfonts/2ECA6C_13_0.woff") format("woff"), url("../fonts/darwin/webfonts/2ECA6C_13_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Darwin-Bold';
  font-display: block;
  src: url("../fonts/darwin/webfonts/2ECA6C_D_0.eot");
  src: url("../fonts/darwin/webfonts/2ECA6C_D_0.eot?#iefix") format("embedded-opentype"), url("../fonts/darwin/webfonts/2ECA6C_D_0.woff2") format("woff2"), url("../fonts/darwin/webfonts/2ECA6C_D_0.woff") format("woff"), url("../fonts/darwin/webfonts/2ECA6C_D_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

#html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  color: #000000;
  font-family: "Darwin", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6em; }
  @media (min-width: 48em) {
    body {
      font-size: 18px; } }
  @media (min-width: 80em) {
    body {
      font-size: 20px; } }
h1 {
  font-size: 3em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.7em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

h6 {
  font-size: 1em; }

p {
  font-size: 0.7em; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Kapra", sans-serif;
  font-style: normal;
  line-height: 1.1em; }

h1 {
  color: #010364; }

h2, h3, h4, h5, h6, p {
  color: #ffffff; }

p {
  font-family: "Darwin", sans-serif;
  font-style: normal;
  line-height: 1.5em; }

em {
  font-style: italic; }

strong {
  font-weight: 700; }

.small {
  font-size: 0.883em; }

.smaller {
  font-size: 0.694em; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

/* Raster grid subsystem (rsms.me/raster) */
if-grid {
  display: grid;
  --grid-tc: repeat(12, minmax(0, 1fr));
  grid-template-columns: var(--grid-tc);
  --grid-cs: 1;
  /* column start */
  --grid-ce: -1 /* column end */
; }

/* ==========================================================================
   if-cell -- cell or column
   ========================================================================== */
if-grid > if-cell {
  display: block;
  appearance: none;
  -webkit-appearance: none; }

if-grid[columns="1"] {
  --grid-tc: repeat(1, minmax(0, 1fr)) ; }

if-grid[columns="2"] {
  --grid-tc: repeat(2, minmax(0, 1fr)) ; }

if-grid[columns="3"] {
  --grid-tc: repeat(3, minmax(0, 1fr)) ; }

if-grid[columns="4"] {
  --grid-tc: repeat(4, minmax(0, 1fr)) ; }

if-grid[columns="5"] {
  --grid-tc: repeat(5, minmax(0, 1fr)) ; }

if-grid[columns="6"] {
  --grid-tc: repeat(6, minmax(0, 1fr)) ; }

if-grid[columns="7"] {
  --grid-tc: repeat(7, minmax(0, 1fr)) ; }

if-grid[columns="8"] {
  --grid-tc: repeat(8, minmax(0, 1fr)) ; }

if-grid[columns="9"] {
  --grid-tc: repeat(9, minmax(0, 1fr)) ; }

if-grid[columns="10"] {
  --grid-tc: repeat(10, minmax(0, 1fr)) ; }

if-grid[columns="11"] {
  --grid-tc: repeat(11, minmax(0, 1fr)) ; }

if-grid[columns="12"] {
  --grid-tc: repeat(12, minmax(0, 1fr)) ; }

if-grid[columns="13"] {
  --grid-tc: repeat(13, minmax(0, 1fr)) ; }

if-grid[columns="14"] {
  --grid-tc: repeat(14, minmax(0, 1fr)) ; }

if-grid[columns="15"] {
  --grid-tc: repeat(15, minmax(0, 1fr)) ; }

if-grid[columns="16"] {
  --grid-tc: repeat(16, minmax(0, 1fr)) ; }

if-grid[columns="17"] {
  --grid-tc: repeat(17, minmax(0, 1fr)) ; }

if-grid[columns="18"] {
  --grid-tc: repeat(18, minmax(0, 1fr)) ; }

if-grid[columns="19"] {
  --grid-tc: repeat(19, minmax(0, 1fr)) ; }

if-grid[columns="20"] {
  --grid-tc: repeat(20, minmax(0, 1fr)) ; }

if-grid[columns="21"] {
  --grid-tc: repeat(21, minmax(0, 1fr)) ; }

if-grid[columns="22"] {
  --grid-tc: repeat(22, minmax(0, 1fr)) ; }

if-grid[columns="23"] {
  --grid-tc: repeat(23, minmax(0, 1fr)) ; }

if-grid[columns="24"] {
  --grid-tc: repeat(24, minmax(0, 1fr)) ; }

/* span=start... */
if-grid > if-cell[span^="1"] {
  --grid-cs: 1 ; }

if-grid > if-cell[span^="2"] {
  --grid-cs: 2 ; }

if-grid > if-cell[span^="3"] {
  --grid-cs: 3 ; }

if-grid > if-cell[span^="4"] {
  --grid-cs: 4 ; }

if-grid > if-cell[span^="5"] {
  --grid-cs: 5 ; }

if-grid > if-cell[span^="6"] {
  --grid-cs: 6 ; }

if-grid > if-cell[span^="7"] {
  --grid-cs: 7 ; }

if-grid > if-cell[span^="8"] {
  --grid-cs: 8 ; }

if-grid > if-cell[span^="9"] {
  --grid-cs: 9 ; }

if-grid > if-cell[span^="10"] {
  --grid-cs: 10 ; }

if-grid > if-cell[span^="11"] {
  --grid-cs: 11 ; }

if-grid > if-cell[span^="12"] {
  --grid-cs: 12 ; }

if-grid > if-cell[span^="13"] {
  --grid-cs: 13 ; }

if-grid > if-cell[span^="14"] {
  --grid-cs: 14 ; }

if-grid > if-cell[span^="15"] {
  --grid-cs: 15 ; }

if-grid > if-cell[span^="16"] {
  --grid-cs: 16 ; }

if-grid > if-cell[span^="17"] {
  --grid-cs: 17 ; }

if-grid > if-cell[span^="18"] {
  --grid-cs: 18 ; }

if-grid > if-cell[span^="19"] {
  --grid-cs: 19 ; }

if-grid > if-cell[span^="20"] {
  --grid-cs: 20 ; }

if-grid > if-cell[span^="21"] {
  --grid-cs: 21 ; }

if-grid > if-cell[span^="22"] {
  --grid-cs: 22 ; }

if-grid > if-cell[span^="23"] {
  --grid-cs: 23 ; }

if-grid > if-cell[span^="24"] {
  --grid-cs: 24 ; }

/* span=...+width, span=...-end */
if-grid > if-cell[span$="+1"], if-grid > if-cell[span="1"] {
  --grid-ce: 1 ; }

if-grid > if-cell[span$="+2"], if-grid > if-cell[span$="-1"], if-grid > if-cell[span="2"] {
  --grid-ce: 2 ; }

if-grid > if-cell[span$="+3"], if-grid > if-cell[span$="-2"], if-grid > if-cell[span="3"] {
  --grid-ce: 3 ; }

if-grid > if-cell[span$="+4"], if-grid > if-cell[span$="-3"], if-grid > if-cell[span="4"] {
  --grid-ce: 4 ; }

if-grid > if-cell[span$="+5"], if-grid > if-cell[span$="-4"], if-grid > if-cell[span="5"] {
  --grid-ce: 5 ; }

if-grid > if-cell[span$="+6"], if-grid > if-cell[span$="-5"], if-grid > if-cell[span="6"] {
  --grid-ce: 6 ; }

if-grid > if-cell[span$="+7"], if-grid > if-cell[span$="-6"], if-grid > if-cell[span="7"] {
  --grid-ce: 7 ; }

if-grid > if-cell[span$="+8"], if-grid > if-cell[span$="-7"], if-grid > if-cell[span="8"] {
  --grid-ce: 8 ; }

if-grid > if-cell[span$="+9"], if-grid > if-cell[span$="-8"], if-grid > if-cell[span="9"] {
  --grid-ce: 9 ; }

if-grid > if-cell[span$="+10"], if-grid > if-cell[span$="-9"], if-grid > if-cell[span="10"] {
  --grid-ce: 10 ; }

if-grid > if-cell[span$="+11"], if-grid > if-cell[span$="-10"], if-grid > if-cell[span="11"] {
  --grid-ce: 11 ; }

if-grid > if-cell[span$="+12"], if-grid > if-cell[span$="-11"], if-grid > if-cell[span="12"] {
  --grid-ce: 12 ; }

if-grid > if-cell[span$="+13"], if-grid > if-cell[span$="-12"], if-grid > if-cell[span="13"] {
  --grid-ce: 13 ; }

if-grid > if-cell[span$="+14"], if-grid > if-cell[span$="-13"], if-grid > if-cell[span="14"] {
  --grid-ce: 14 ; }

if-grid > if-cell[span$="+15"], if-grid > if-cell[span$="-14"], if-grid > if-cell[span="15"] {
  --grid-ce: 15 ; }

if-grid > if-cell[span$="+16"], if-grid > if-cell[span$="-15"], if-grid > if-cell[span="16"] {
  --grid-ce: 16 ; }

if-grid > if-cell[span$="+17"], if-grid > if-cell[span$="-16"], if-grid > if-cell[span="17"] {
  --grid-ce: 17 ; }

if-grid > if-cell[span$="+18"], if-grid > if-cell[span$="-17"], if-grid > if-cell[span="18"] {
  --grid-ce: 18 ; }

if-grid > if-cell[span$="+19"], if-grid > if-cell[span$="-18"], if-grid > if-cell[span="19"] {
  --grid-ce: 19 ; }

if-grid > if-cell[span$="+20"], if-grid > if-cell[span$="-19"], if-grid > if-cell[span="20"] {
  --grid-ce: 20 ; }

if-grid > if-cell[span$="+21"], if-grid > if-cell[span$="-20"], if-grid > if-cell[span="21"] {
  --grid-ce: 21 ; }

if-grid > if-cell[span$="+22"], if-grid > if-cell[span$="-21"], if-grid > if-cell[span="22"] {
  --grid-ce: 22 ; }

if-grid > if-cell[span$="+23"], if-grid > if-cell[span$="-22"], if-grid > if-cell[span="23"] {
  --grid-ce: 23 ; }

if-grid > if-cell[span$="+24"], if-grid > if-cell[span$="-23"], if-grid > if-cell[span="24"] {
  --grid-ce: 24 ; }

if-grid > if-cell[span$="-24"] {
  --grid-ce: 25 ; }

/* connect vars */
if-grid > if-cell[span] {
  grid-column-end: span var(--grid-ce); }

if-grid > if-cell[span*="+"], if-grid > if-cell[span*="-"], if-grid > if-cell[span*=".."] {
  grid-column-start: var(--grid-cs); }

if-grid > if-cell[span*="-"], if-grid > if-cell[span*=".."] {
  grid-column-end: var(--grid-ce); }

if-grid > if-cell[span="row"] {
  grid-column: 1 / -1; }

/* ==========================================================================
   for window width => 576
   ========================================================================== */
@media only screen and (min-width: 576px) {
  if-grid[columns-s="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-s="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-s="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-s="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-s="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-s="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-s="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-s="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-s="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-s="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-s="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-s="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-s="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-s="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-s="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-s="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-s="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-s="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-s="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-s="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-s="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-s="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-s="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-s="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-s=start... */
  if-grid > if-cell[span-s^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-s^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-s^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-s^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-s^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-s^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-s^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-s^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-s^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-s^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-s^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-s^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-s^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-s^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-s^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-s^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-s^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-s^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-s^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-s^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-s^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-s^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-s^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-s^="24"] {
    --grid-cs: 24 ; }
  /* span-s=...+width, span-s=...-end */
  if-grid > if-cell[span-s$="+1"], if-grid > if-cell[span-s="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-s$="+2"], if-grid > if-cell[span-s$="-1"], if-grid > if-cell[span-s="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-s$="+3"], if-grid > if-cell[span-s$="-2"], if-grid > if-cell[span-s="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-s$="+4"], if-grid > if-cell[span-s$="-3"], if-grid > if-cell[span-s="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-s$="+5"], if-grid > if-cell[span-s$="-4"], if-grid > if-cell[span-s="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-s$="+6"], if-grid > if-cell[span-s$="-5"], if-grid > if-cell[span-s="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-s$="+7"], if-grid > if-cell[span-s$="-6"], if-grid > if-cell[span-s="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-s$="+8"], if-grid > if-cell[span-s$="-7"], if-grid > if-cell[span-s="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-s$="+9"], if-grid > if-cell[span-s$="-8"], if-grid > if-cell[span-s="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-s$="+10"], if-grid > if-cell[span-s$="-9"], if-grid > if-cell[span-s="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-s$="+11"], if-grid > if-cell[span-s$="-10"], if-grid > if-cell[span-s="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-s$="+12"], if-grid > if-cell[span-s$="-11"], if-grid > if-cell[span-s="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-s$="+13"], if-grid > if-cell[span-s$="-12"], if-grid > if-cell[span-s="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-s$="+14"], if-grid > if-cell[span-s$="-13"], if-grid > if-cell[span-s="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-s$="+15"], if-grid > if-cell[span-s$="-14"], if-grid > if-cell[span-s="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-s$="+16"], if-grid > if-cell[span-s$="-15"], if-grid > if-cell[span-s="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-s$="+17"], if-grid > if-cell[span-s$="-16"], if-grid > if-cell[span-s="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-s$="+18"], if-grid > if-cell[span-s$="-17"], if-grid > if-cell[span-s="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-s$="+19"], if-grid > if-cell[span-s$="-18"], if-grid > if-cell[span-s="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-s$="+20"], if-grid > if-cell[span-s$="-19"], if-grid > if-cell[span-s="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-s$="+21"], if-grid > if-cell[span-s$="-20"], if-grid > if-cell[span-s="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-s$="+22"], if-grid > if-cell[span-s$="-21"], if-grid > if-cell[span-s="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-s$="+23"], if-grid > if-cell[span-s$="-22"], if-grid > if-cell[span-s="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-s$="+24"], if-grid > if-cell[span-s$="-23"], if-grid > if-cell[span-s="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-s$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-s] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-s*="+"], if-grid > if-cell[span-s*="-"], if-grid > if-cell[span-s*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-s*="-"], if-grid > if-cell[span-s*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-s="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 768
   ========================================================================== */
@media only screen and (min-width: 768px) {
  if-grid[columns-m="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-m="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-m="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-m="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-m="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-m="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-m="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-m="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-m="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-m="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-m="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-m="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-m="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-m="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-m="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-m="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-m="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-m="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-m="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-m="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-m="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-m="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-m="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-m="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-s=start... */
  if-grid > if-cell[span-m^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-m^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-m^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-m^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-m^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-m^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-m^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-m^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-m^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-m^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-m^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-m^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-m^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-m^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-m^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-m^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-m^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-m^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-m^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-m^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-m^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-m^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-m^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-m^="24"] {
    --grid-cs: 24 ; }
  /* span-s=...+width, span-s=...-end */
  if-grid > if-cell[span-m$="+1"], if-grid > if-cell[span-m="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-m$="+2"], if-grid > if-cell[span-m$="-1"], if-grid > if-cell[span-m="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-m$="+3"], if-grid > if-cell[span-m$="-2"], if-grid > if-cell[span-m="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-m$="+4"], if-grid > if-cell[span-m$="-3"], if-grid > if-cell[span-m="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-m$="+5"], if-grid > if-cell[span-m$="-4"], if-grid > if-cell[span-m="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-m$="+6"], if-grid > if-cell[span-m$="-5"], if-grid > if-cell[span-m="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-m$="+7"], if-grid > if-cell[span-m$="-6"], if-grid > if-cell[span-m="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-m$="+8"], if-grid > if-cell[span-m$="-7"], if-grid > if-cell[span-m="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-m$="+9"], if-grid > if-cell[span-m$="-8"], if-grid > if-cell[span-m="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-m$="+10"], if-grid > if-cell[span-m$="-9"], if-grid > if-cell[span-m="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-m$="+11"], if-grid > if-cell[span-m$="-10"], if-grid > if-cell[span-m="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-m$="+12"], if-grid > if-cell[span-m$="-11"], if-grid > if-cell[span-m="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-m$="+13"], if-grid > if-cell[span-m$="-12"], if-grid > if-cell[span-m="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-m$="+14"], if-grid > if-cell[span-m$="-13"], if-grid > if-cell[span-m="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-m$="+15"], if-grid > if-cell[span-m$="-14"], if-grid > if-cell[span-m="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-m$="+16"], if-grid > if-cell[span-m$="-15"], if-grid > if-cell[span-m="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-m$="+17"], if-grid > if-cell[span-m$="-16"], if-grid > if-cell[span-m="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-m$="+18"], if-grid > if-cell[span-m$="-17"], if-grid > if-cell[span-m="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-m$="+19"], if-grid > if-cell[span-m$="-18"], if-grid > if-cell[span-m="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-m$="+20"], if-grid > if-cell[span-m$="-19"], if-grid > if-cell[span-m="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-m$="+21"], if-grid > if-cell[span-m$="-20"], if-grid > if-cell[span-m="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-m$="+22"], if-grid > if-cell[span-m$="-21"], if-grid > if-cell[span-m="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-m$="+23"], if-grid > if-cell[span-m$="-22"], if-grid > if-cell[span-m="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-m$="+24"], if-grid > if-cell[span-m$="-23"], if-grid > if-cell[span-m="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-m$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-m] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-m*="+"], if-grid > if-cell[span-m*="-"], if-grid > if-cell[span-m*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-m*="-"], if-grid > if-cell[span-m*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-m="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 992
   ========================================================================== */
@media only screen and (min-width: 992px) {
  if-grid[columns-l="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-l="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-l="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-l="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-l="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-l="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-l="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-l="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-l="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-l="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-l="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-l="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-l="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-l="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-l="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-l="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-l="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-l="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-l="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-l="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-l="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-l="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-l="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-l="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-l=start... */
  if-grid > if-cell[span-l^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-l^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-l^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-l^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-l^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-l^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-l^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-l^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-l^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-l^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-l^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-l^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-l^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-l^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-l^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-l^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-l^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-l^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-l^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-l^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-l^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-l^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-l^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-l^="24"] {
    --grid-cs: 24 ; }
  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-l$="+1"], if-grid > if-cell[span-l="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-l$="+2"], if-grid > if-cell[span-l$="-1"], if-grid > if-cell[span-l="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-l$="+3"], if-grid > if-cell[span-l$="-2"], if-grid > if-cell[span-l="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-l$="+4"], if-grid > if-cell[span-l$="-3"], if-grid > if-cell[span-l="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-l$="+5"], if-grid > if-cell[span-l$="-4"], if-grid > if-cell[span-l="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-l$="+6"], if-grid > if-cell[span-l$="-5"], if-grid > if-cell[span-l="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-l$="+7"], if-grid > if-cell[span-l$="-6"], if-grid > if-cell[span-l="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-l$="+8"], if-grid > if-cell[span-l$="-7"], if-grid > if-cell[span-l="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-l$="+9"], if-grid > if-cell[span-l$="-8"], if-grid > if-cell[span-l="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-l$="+10"], if-grid > if-cell[span-l$="-9"], if-grid > if-cell[span-l="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-l$="+11"], if-grid > if-cell[span-l$="-10"], if-grid > if-cell[span-l="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-l$="+12"], if-grid > if-cell[span-l$="-11"], if-grid > if-cell[span-l="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-l$="+13"], if-grid > if-cell[span-l$="-12"], if-grid > if-cell[span-l="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-l$="+14"], if-grid > if-cell[span-l$="-13"], if-grid > if-cell[span-l="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-l$="+15"], if-grid > if-cell[span-l$="-14"], if-grid > if-cell[span-l="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-l$="+16"], if-grid > if-cell[span-l$="-15"], if-grid > if-cell[span-l="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-l$="+17"], if-grid > if-cell[span-l$="-16"], if-grid > if-cell[span-l="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-l$="+18"], if-grid > if-cell[span-l$="-17"], if-grid > if-cell[span-l="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-l$="+19"], if-grid > if-cell[span-l$="-18"], if-grid > if-cell[span-l="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-l$="+20"], if-grid > if-cell[span-l$="-19"], if-grid > if-cell[span-l="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-l$="+21"], if-grid > if-cell[span-l$="-20"], if-grid > if-cell[span-l="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-l$="+22"], if-grid > if-cell[span-l$="-21"], if-grid > if-cell[span-l="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-l$="+23"], if-grid > if-cell[span-l$="-22"], if-grid > if-cell[span-l="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-l$="+24"], if-grid > if-cell[span-l$="-23"], if-grid > if-cell[span-l="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-l$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-l] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-l*="+"], if-grid > if-cell[span-l*="-"], if-grid > if-cell[span-l*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-l*="-"], if-grid > if-cell[span-l*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-l="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 1200
   ========================================================================== */
@media only screen and (min-width: 1200px) {
  if-grid[columns-xl="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-xl="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-xl="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-xl="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-xl="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-xl="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-xl="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-xl="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-xl="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-xl="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-xl="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-xl="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-xl="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-xl="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-xl="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-xl="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-xl="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-xl="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-xl="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-xl="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-xl="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-xl="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-xl="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-xl="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-l=start... */
  if-grid > if-cell[span-xl^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-xl^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-xl^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-xl^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-xl^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-xl^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-xl^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-xl^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-xl^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-xl^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-xl^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-xl^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-xl^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-xl^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-xl^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-xl^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-xl^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-xl^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-xl^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-xl^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-xl^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-xl^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-xl^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-xl^="24"] {
    --grid-cs: 24 ; }
  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-xl$="+1"], if-grid > if-cell[span-xl="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-xl$="+2"], if-grid > if-cell[span-xl$="-1"], if-grid > if-cell[span-xl="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-xl$="+3"], if-grid > if-cell[span-xl$="-2"], if-grid > if-cell[span-xl="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-xl$="+4"], if-grid > if-cell[span-xl$="-3"], if-grid > if-cell[span-xl="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-xl$="+5"], if-grid > if-cell[span-xl$="-4"], if-grid > if-cell[span-xl="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-xl$="+6"], if-grid > if-cell[span-xl$="-5"], if-grid > if-cell[span-xl="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-xl$="+7"], if-grid > if-cell[span-xl$="-6"], if-grid > if-cell[span-xl="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-xl$="+8"], if-grid > if-cell[span-xl$="-7"], if-grid > if-cell[span-xl="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-xl$="+9"], if-grid > if-cell[span-xl$="-8"], if-grid > if-cell[span-xl="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-xl$="+10"], if-grid > if-cell[span-xl$="-9"], if-grid > if-cell[span-xl="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-xl$="+11"], if-grid > if-cell[span-xl$="-10"], if-grid > if-cell[span-xl="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-xl$="+12"], if-grid > if-cell[span-xl$="-11"], if-grid > if-cell[span-xl="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-xl$="+13"], if-grid > if-cell[span-xl$="-12"], if-grid > if-cell[span-xl="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-xl$="+14"], if-grid > if-cell[span-xl$="-13"], if-grid > if-cell[span-xl="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-xl$="+15"], if-grid > if-cell[span-xl$="-14"], if-grid > if-cell[span-xl="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-xl$="+16"], if-grid > if-cell[span-xl$="-15"], if-grid > if-cell[span-xl="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-xl$="+17"], if-grid > if-cell[span-xl$="-16"], if-grid > if-cell[span-xl="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-xl$="+18"], if-grid > if-cell[span-xl$="-17"], if-grid > if-cell[span-xl="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-xl$="+19"], if-grid > if-cell[span-xl$="-18"], if-grid > if-cell[span-xl="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-xl$="+20"], if-grid > if-cell[span-xl$="-19"], if-grid > if-cell[span-xl="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-xl$="+21"], if-grid > if-cell[span-xl$="-20"], if-grid > if-cell[span-xl="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-xl$="+22"], if-grid > if-cell[span-xl$="-21"], if-grid > if-cell[span-xl="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-xl$="+23"], if-grid > if-cell[span-xl$="-22"], if-grid > if-cell[span-xl="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-xl$="+24"], if-grid > if-cell[span-xl$="-23"], if-grid > if-cell[span-xl="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-xl$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-xl] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-xl*="+"], if-grid > if-cell[span-xl*="-"], if-grid > if-cell[span-xl*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-xl*="-"], if-grid > if-cell[span-xl*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-xl="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   for window width => 1600
   ========================================================================== */
@media only screen and (min-width: 1600px) {
  if-grid[columns-xxl="1"] {
    --grid-tc: repeat(1, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="2"] {
    --grid-tc: repeat(2, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="3"] {
    --grid-tc: repeat(3, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="4"] {
    --grid-tc: repeat(4, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="5"] {
    --grid-tc: repeat(5, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="6"] {
    --grid-tc: repeat(6, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="7"] {
    --grid-tc: repeat(7, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="8"] {
    --grid-tc: repeat(8, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="9"] {
    --grid-tc: repeat(9, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="10"] {
    --grid-tc: repeat(10, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="11"] {
    --grid-tc: repeat(11, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="12"] {
    --grid-tc: repeat(12, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="13"] {
    --grid-tc: repeat(13, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="14"] {
    --grid-tc: repeat(14, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="15"] {
    --grid-tc: repeat(15, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="16"] {
    --grid-tc: repeat(16, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="17"] {
    --grid-tc: repeat(17, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="18"] {
    --grid-tc: repeat(18, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="19"] {
    --grid-tc: repeat(19, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="20"] {
    --grid-tc: repeat(20, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="21"] {
    --grid-tc: repeat(21, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="22"] {
    --grid-tc: repeat(22, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="23"] {
    --grid-tc: repeat(23, minmax(0, 1fr)) ; }
  if-grid[columns-xxl="24"] {
    --grid-tc: repeat(24, minmax(0, 1fr)) ; }
  /* span-l=start... */
  if-grid > if-cell[span-xxl^="1"] {
    --grid-cs: 1 ; }
  if-grid > if-cell[span-xxl^="2"] {
    --grid-cs: 2 ; }
  if-grid > if-cell[span-xxl^="3"] {
    --grid-cs: 3 ; }
  if-grid > if-cell[span-xxl^="4"] {
    --grid-cs: 4 ; }
  if-grid > if-cell[span-xxl^="5"] {
    --grid-cs: 5 ; }
  if-grid > if-cell[span-xxl^="6"] {
    --grid-cs: 6 ; }
  if-grid > if-cell[span-xxl^="7"] {
    --grid-cs: 7 ; }
  if-grid > if-cell[span-xxl^="8"] {
    --grid-cs: 8 ; }
  if-grid > if-cell[span-xxl^="9"] {
    --grid-cs: 9 ; }
  if-grid > if-cell[span-xxl^="10"] {
    --grid-cs: 10 ; }
  if-grid > if-cell[span-xxl^="11"] {
    --grid-cs: 11 ; }
  if-grid > if-cell[span-xxl^="12"] {
    --grid-cs: 12 ; }
  if-grid > if-cell[span-xxl^="13"] {
    --grid-cs: 13 ; }
  if-grid > if-cell[span-xxl^="14"] {
    --grid-cs: 14 ; }
  if-grid > if-cell[span-xxl^="15"] {
    --grid-cs: 15 ; }
  if-grid > if-cell[span-xxl^="16"] {
    --grid-cs: 16 ; }
  if-grid > if-cell[span-xxl^="17"] {
    --grid-cs: 17 ; }
  if-grid > if-cell[span-xxl^="18"] {
    --grid-cs: 18 ; }
  if-grid > if-cell[span-xxl^="19"] {
    --grid-cs: 19 ; }
  if-grid > if-cell[span-xxl^="20"] {
    --grid-cs: 20 ; }
  if-grid > if-cell[span-xxl^="21"] {
    --grid-cs: 21 ; }
  if-grid > if-cell[span-xxl^="22"] {
    --grid-cs: 22 ; }
  if-grid > if-cell[span-xxl^="23"] {
    --grid-cs: 23 ; }
  if-grid > if-cell[span-xxl^="24"] {
    --grid-cs: 24 ; }
  /* span-l=...+width, span-l=...-end */
  if-grid > if-cell[span-xxl$="+1"], if-grid > if-cell[span-xxl="1"] {
    --grid-ce: 1 ; }
  if-grid > if-cell[span-xxl$="+2"], if-grid > if-cell[span-xxl$="-1"], if-grid > if-cell[span-xxl="2"] {
    --grid-ce: 2 ; }
  if-grid > if-cell[span-xxl$="+3"], if-grid > if-cell[span-xxl$="-2"], if-grid > if-cell[span-xxl="3"] {
    --grid-ce: 3 ; }
  if-grid > if-cell[span-xxl$="+4"], if-grid > if-cell[span-xxl$="-3"], if-grid > if-cell[span-xxl="4"] {
    --grid-ce: 4 ; }
  if-grid > if-cell[span-xxl$="+5"], if-grid > if-cell[span-xxl$="-4"], if-grid > if-cell[span-xxl="5"] {
    --grid-ce: 5 ; }
  if-grid > if-cell[span-xxl$="+6"], if-grid > if-cell[span-xxl$="-5"], if-grid > if-cell[span-xxl="6"] {
    --grid-ce: 6 ; }
  if-grid > if-cell[span-xxl$="+7"], if-grid > if-cell[span-xxl$="-6"], if-grid > if-cell[span-xxl="7"] {
    --grid-ce: 7 ; }
  if-grid > if-cell[span-xxl$="+8"], if-grid > if-cell[span-xxl$="-7"], if-grid > if-cell[span-xxl="8"] {
    --grid-ce: 8 ; }
  if-grid > if-cell[span-xxl$="+9"], if-grid > if-cell[span-xxl$="-8"], if-grid > if-cell[span-xxl="9"] {
    --grid-ce: 9 ; }
  if-grid > if-cell[span-xxl$="+10"], if-grid > if-cell[span-xxl$="-9"], if-grid > if-cell[span-xxl="10"] {
    --grid-ce: 10 ; }
  if-grid > if-cell[span-xxl$="+11"], if-grid > if-cell[span-xxl$="-10"], if-grid > if-cell[span-xxl="11"] {
    --grid-ce: 11 ; }
  if-grid > if-cell[span-xxl$="+12"], if-grid > if-cell[span-xxl$="-11"], if-grid > if-cell[span-xxl="12"] {
    --grid-ce: 12 ; }
  if-grid > if-cell[span-xxl$="+13"], if-grid > if-cell[span-xxl$="-12"], if-grid > if-cell[span-xxl="13"] {
    --grid-ce: 13 ; }
  if-grid > if-cell[span-xxl$="+14"], if-grid > if-cell[span-xxl$="-13"], if-grid > if-cell[span-xxl="14"] {
    --grid-ce: 14 ; }
  if-grid > if-cell[span-xxl$="+15"], if-grid > if-cell[span-xxl$="-14"], if-grid > if-cell[span-xxl="15"] {
    --grid-ce: 15 ; }
  if-grid > if-cell[span-xxl$="+16"], if-grid > if-cell[span-xxl$="-15"], if-grid > if-cell[span-xxl="16"] {
    --grid-ce: 16 ; }
  if-grid > if-cell[span-xxl$="+17"], if-grid > if-cell[span-xxl$="-16"], if-grid > if-cell[span-xxl="17"] {
    --grid-ce: 17 ; }
  if-grid > if-cell[span-xxl$="+18"], if-grid > if-cell[span-xxl$="-17"], if-grid > if-cell[span-xxl="18"] {
    --grid-ce: 18 ; }
  if-grid > if-cell[span-xxl$="+19"], if-grid > if-cell[span-xxl$="-18"], if-grid > if-cell[span-xxl="19"] {
    --grid-ce: 19 ; }
  if-grid > if-cell[span-xxl$="+20"], if-grid > if-cell[span-xxl$="-19"], if-grid > if-cell[span-xxl="20"] {
    --grid-ce: 20 ; }
  if-grid > if-cell[span-xxl$="+21"], if-grid > if-cell[span-xxl$="-20"], if-grid > if-cell[span-xxl="21"] {
    --grid-ce: 21 ; }
  if-grid > if-cell[span-xxl$="+22"], if-grid > if-cell[span-xxl$="-21"], if-grid > if-cell[span-xxl="22"] {
    --grid-ce: 22 ; }
  if-grid > if-cell[span-xxl$="+23"], if-grid > if-cell[span-xxl$="-22"], if-grid > if-cell[span-xxl="23"] {
    --grid-ce: 23 ; }
  if-grid > if-cell[span-xxl$="+24"], if-grid > if-cell[span-xxl$="-23"], if-grid > if-cell[span-xxl="24"] {
    --grid-ce: 24 ; }
  if-grid > if-cell[span-xxl$="-24"] {
    --grid-ce: 25 ; }
  /* connect vars */
  if-grid > if-cell[span-xxl] {
    grid-column-end: span var(--grid-ce); }
  if-grid > if-cell[span-xxl*="+"], if-grid > if-cell[span-xxl*="-"], if-grid > if-cell[span-xxl*=".."] {
    grid-column-start: var(--grid-cs); }
  if-grid > if-cell[span-xxl*="-"], if-grid > if-cell[span-xxl*=".."] {
    grid-column-end: var(--grid-ce); }
  if-grid > if-cell[span-xxl="row"] {
    grid-column: 1 / -1; } }

/* ==========================================================================
   Additional Styles
   ========================================================================== */
/* .debug can be added to a if-grid to visualize its effective cells */
if-grid.debug > * {
  --color: rgba(248,110,91 ,0.3);
  background-image: linear-gradient(to bottom, var(--color) 0%, var(--color) 100%); }

if-grid.debug > :nth-child(6n+2) {
  --color: rgba(103,126,208,0.3) ; }

if-grid.debug > :nth-child(6n+3) {
  --color: rgba(224,174,72 ,0.3) ; }

if-grid.debug > :nth-child(6n+4) {
  --color: rgba(77, 214,115,0.3) ; }

if-grid.debug > :nth-child(6n+5) {
  --color: rgba(217,103,219,0.3) ; }

if-grid.debug > :nth-child(6n+6) {
  --color: rgba(94, 204,211,0.3) ; }

if-grid.debug > :nth-child(6n+7) {
  --color: rgba(248,110,91 ,0.3) ; }

/* Alignment */
if-grid.cell-center > if-cell {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

if-grid.cell-top > if-cell {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start; }

if-grid.cell-bottom > if-cell {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end; }

.cell-center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

.cell-top {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
  -ms-grid-row-align: start;
  align-self: start; }

.cell-bottom {
  -webkit-align-self: end;
  -ms-flex-item-align: end;
  -ms-grid-row-align: end;
  align-self: end; }

/* Cell Alignment */
.cell-justify-start {
  -ms-grid-column-align: start;
  justify-self: start; }

.cell-justify-end {
  -ms-grid-column-align: end;
  justify-self: end; }

.cell-justify-center {
  -ms-grid-column-align: center;
  justify-self: center; }

@media only screen and (min-width: 768px) {
  .cell-end-m {
    -ms-grid-column-align: end;
    justify-self: end; } }

/* Gutters */
if-grid {
  grid-column-gap: 1em;
  grid-row-gap: 1em; }
  @media only screen and (min-width: 992px) {
    if-grid {
      grid-column-gap: 1em;
      grid-row-gap: 1em; } }
if-grid.medium {
  grid-column-gap: 1em;
  grid-row-gap: 2em; }
  @media only screen and (min-width: 992px) {
    if-grid.medium {
      grid-column-gap: 2em;
      grid-row-gap: 2em; } }
if-grid.large {
  grid-column-gap: 1em;
  grid-row-gap: 3em; }
  @media only screen and (min-width: 992px) {
    if-grid.large {
      grid-column-gap: 3em;
      grid-row-gap: 3em; } }
/* Mobile Reverse Rows */
@media only screen and (max-width: 767px) {
  .span-m-rev if-cell:nth-child(1) {
    grid-row: 2; }
  .span-m-rev if-cell:nth-child(2) {
    grid-row: 1; } }

/* Tablet Reverse Rows */
@media only screen and (max-width: 992px) {
  .span-l-rev if-cell:nth-child(1) {
    grid-row: 2; }
  .span-l-rev if-cell:nth-child(2) {
    grid-row: 1; } }

/* ==========================================================================
   Flexbox Grid
   ========================================================================== */
.Grid {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0; }

.Grid-cell {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.Grid-cell--autoSize {
  -webkit-box-flex: 0;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none; }

/* ==========================================================================
   Nested Grid
   ========================================================================== */
.Grid--flexCells > .Grid-cell {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.Grid--flexCell > .Grid-cell:last-of-type {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

/* ==========================================================================
   Grid Alignment
   ========================================================================== */
.Grid--top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }

.Grid--bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end; }

.Grid--center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.Grid--justifyCenter {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

/* ==========================================================================
   Grid Cell Alignment
   ========================================================================== */
.Grid-cell--top {
  -ms-flex-item-align: start;
  align-self: flex-start; }

.Grid-cell--bottom {
  -ms-flex-item-align: end;
  align-self: flex-end; }

.Grid-cell--center {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center; }

/* ==========================================================================
   Grid Cell Columns
   ========================================================================== */
.Grid--fit > .Grid-cell {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.Grid--full > .Grid-cell {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.Grid--1of2 > .Grid-cell {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.Grid--1of3 > .Grid-cell {
  -ms-flex: 0 0 33.33%;
  flex: 0 0 33.33%;
  max-width: 33.33%; }

.Grid--1of4 > .Grid-cell {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

/* ==========================================================================
   Grid Gutters
   ========================================================================== */
.Grid--gutters {
  margin: 0 0 0 -1em; }

.Grid--gutters > .Grid-cell {
  padding: 0 0 0 1em; }

/* Grid Gutters Large */
.Grid--guttersLg {
  margin: 0 0 0 -2em; }

.Grid--guttersLg > .Grid-cell {
  padding: 0 0 0 2em; }

/* Grid Gutters XLarge */
.Grid--guttersXl {
  margin: 0 0 0 -3em; }

.Grid--guttersXl > .Grid-cell {
  padding: 0 0 0 3em; }

/* ==========================================================================
   Custom Grids
   ========================================================================== */
header {
  background-color: #ffffff; }

.header-container {
  clear: both;
  margin: 0 auto;
  position: relative; }

.header-container .rci-logo {
  padding: 15px 0 0 0;
  max-width: 170px; }

.logo-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6em 15px 6em; }

.spark-logo {
  max-width: 140px; }

.nav {
  margin-top: 15px; }

.nav a {
  font-family: "Kapra", sans-serif;
  text-transform: uppercase;
  color: #706E6A;
  text-decoration: none;
  font-size: 22px;
  margin-left: 1em;
  border-bottom: 4px solid transparent; }

.nav .hamburger-container {
  display: none;
  width: 42px;
  height: 42px;
  position: relative; }

.hamburger {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block;
  position: absolute;
  top: 23%;
  left: 5px;
  cursor: pointer;
  width: 32px;
  height: 23px;
  border-top: 4px solid #706E6A;
  border-bottom: 4px solid #706E6A; }

.hamburger::before {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #706E6A;
  margin-top: -1px; }

.hamburger::after {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #706E6A;
  margin-top: -1px; }

.hamburger.active {
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  border-color: transparent; }

.hamburger.active:before {
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  zoom: 1;
  left: -2px;
  right: -2px;
  background: #706E6A; }

.hamburger.active:after {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  zoom: 1;
  left: -2px;
  right: -2px;
  background: #706E6A; }

.nav a:hover {
  border-bottom: 4px solid #FF6600; }

.nav a.active {
  color: #FF6600;
  border-bottom: 4px solid #FF6600; }

.mobile-nav {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: #ffffff;
  z-index: 10;
  opacity: 0;
  display: flex;
  flex-flow: column;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

.mobile-nav.active {
  opacity: 1;
  height: 100%; }

.mobile-nav a {
  font-family: "Kapra", sans-serif;
  text-transform: uppercase;
  color: #706E6A;
  text-decoration: none;
  font-size: 22px;
  margin-left: 1em;
  border-bottom: 4px solid transparent;
  width: fit-content;
  margin-top: 25px; }

.mobile-nav a.active {
  color: #FF6600;
  border-bottom: 4px solid #FF6600; }

@media screen and (max-width: 992px) {
  .spark-logo {
    max-width: 100px; }
  .logo-container {
    padding: 5px 1.5em 15px 1.5em; }
  .nav a {
    display: none; }
  .nav .hamburger-container {
    display: flex;
    cursor: pointer; } }

footer {
  background-color: #0050A4; }

.footer-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
  margin: 4em 6em; }

.footer-container a {
  text-decoration: underline;
  color: #ffffff; }

.footer-container a:hover {
  text-decoration: underline;
  color: #37C1EE; }

.footer-left {
  width: 60%; }

.footer-right {
  width: 40%; }

p {
  padding-bottom: 10px; }

.rci-logo {
  padding-bottom: 10px;
  max-width: 205px; }

@media screen and (max-width: 992px) {
  .footer-left {
    width: 100%;
    padding-bottom: 2em;
    text-align: left; }
  .footer-right {
    width: 100%;
    text-align: left; }
  .footer-container {
    margin: 2em;
    text-align: center; }
  .rci-logo {
    padding: 30px 0 10px 0;
    max-width: 200px; } }

.login-hero {
  background-image: url("../images/login-hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 14em;
  background-color: #37C1EE; }

.admin-login-hero {
  background-image: url("../images/admin-login-hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 14em;
  background-color: #37C1EE; }

.login-page {
  background-color: #37C1EE; }

.login-container {
  background-color: #37C1EE;
  padding: 2em 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px; }

.login-title {
  margin: 2em 0 0 6em; }

.login-arrow {
  max-width: 130px;
  rotate: -90deg;
  margin: 16em 0 1em 0; }

.login-cell-1 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 50%; }

.login-cell-2 {
  padding: 2em 6em 2em 2em;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  width: 50%; }

.login-button {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 15vh; }

.login-error p {
  color: #010364; }

@media screen and (max-width: 992px) {
  .login-cell-1 {
    width: 100%; }
  .login-cell-2 {
    width: 100%;
    padding: 2em 2em 2em 2em; }
  .login-arrow {
    max-width: 110px;
    margin: 3em 3em 1em 0;
    rotate: 0deg;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1); }
  .login-title {
    margin: 2em; }
  .login-button {
    padding-top: 2em; }
  .login-hero {
    height: 20em; } }

[data-aos="arrow-ltr"] {
  transform: rotate(-30deg) translate3d(0, -100px, 0);
  opacity: 0;
  transition-property: transform, opacity; }
  [data-aos="arrow-ltr"].aos-animate {
    transform: rotate(0);
    opacity: 1; }

[data-aos="arrow-rtl"] {
  transform: rotate(30deg) translate3d(0, -100px, 0);
  opacity: 0;
  transition-property: transform, opacity; }
  [data-aos="arrow-rtl"].aos-animate {
    transform: rotate(0);
    opacity: 1; }

.home-hero {
  background-image: url("../images/home-hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 30em;
  background-color: #37C1EE; }

.latest-course {
  background-color: #880579; }

#newsTicker {
  width: 100%;
  background-color: #880579;
  color: #FFB8DA;
  white-space: nowrap;
  overflow: hidden;
  padding-top: 1.1em;
  padding-bottom: 1.1em;
  display: flex;
  justify-content: flex-end;
  text-transform: uppercase; }

.latestupdate {
  margin-left: 100%; }

#newsTicker h3 {
  margin: 0;
  display: inline-block;
  color: #FFB8DA;
  font-size: 1.5em;
  padding-left: 0;
  animation: tickerTape 20s linear infinite; }

@keyframes tickerTape {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(calc(-100vw + -100%), 0); } }

.first-visit-img {
  background-image: url("../images/home-hero-blur.jpg");
  height: 38em; }

.first-visit-container {
  width: 100%;
  height: 100%;
  margin: 0 auto 0 auto;
  display: none;
  justify-content: center;
  align-items: center; }

.first-visit-container-show {
  display: flex; }

.first-visit-background {
  width: 65%;
  margin: 0 auto 0 auto;
  max-width: 1100px; }

.first-visit-intro {
  position: absolute;
  margin: 0 auto 0 auto;
  text-align: center;
  max-width: 900px;
  padding: 0 1em; }

.first-visit-intro h3 {
  text-transform: uppercase;
  font-size: 2.5em;
  padding: 0.5em; }

.first-visit-intro p {
  font-size: 0.8em;
  padding: 0 5em; }

.first-visit-video {
  width: 65%;
  max-width: 600px;
  margin: 0 auto 0 auto;
  padding: 1em; }

.first-visit-arrow {
  position: absolute;
  width: 15%;
  top: 24vh;
  left: 0;
  rotate: -50deg;
  max-width: 125px; }

.course-filter-container {
  max-width: 640px;
  display: flex;
  flex-flow: column;
  margin-bottom: 2em; }

.course-filter-container p {
  color: #706E6A;
  font-size: 16px;
  line-height: 24px;
  padding-top: 0.5em;
  padding: 0.5em 1em; }

.course-filter-container p span {
  font-size: 20px;
  line-height: 26px; }

.course-filter-container h1 {
  color: #F60;
  text-align: center;
  font-family: "Darwin", sans-serif;
  font-size: 56px;
  margin-bottom: 40px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  padding: 0 1em; }

.filter-selectors {
  display: flex;
  flex-flow: wrap;
  gap: 1.5em; }

.filter-selectors h3 {
  color: #706E6A;
  text-transform: uppercase;
  font-size: 1.3em; }

.selector-option {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.8em;
  cursor: pointer; }

.selector-img {
  max-width: 50px; }

.courses-container {
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 3em;
  text-align: center; }

.course-grid {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center; }

.course-block {
  width: 300px;
  margin: 0.8em 0.5em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: left;
  position: relative; }

.course-block h3 {
  text-transform: uppercase;
  font-size: 2em;
  line-height: 1em;
  padding: 1em 0 0.5em 0;
  width: 100%; }

.course-block h5 {
  text-transform: uppercase;
  width: 100%;
  text-decoration: underline;
  text-decoration-color: #ffffff; }

.course-block a {
  text-decoration: none;
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  height: 100%; }

/* COMING SOON FLASH */
.course-block.coming-soon {
  pointer-events: none; }

.course-block.coming-soon::after {
  content: 'Coming soon';
  position: absolute;
  top: 0;
  left: 1em;
  color: #ffffff;
  padding: 2px 10px 0px 10px;
  text-transform: uppercase;
  font-family: 'Kapra';
  font-size: 18px;
  letter-spacing: 0.72px; }

.course-block.orange-bg.coming-soon::after {
  background: #BF3600; }

.course-block.blue-bg.coming-soon::after {
  background: #020268; }

.course-block.pink-bg.coming-soon::after {
  background: #880579; }

.course-block.purple-bg.coming-soon::after {
  background: #3D0073; }

/* UPDATED FLASH */
.course-block.updated::after {
  content: 'Updated course';
  position: absolute;
  top: 0;
  left: 1em;
  color: #ffffff;
  padding: 2px 10px 0px 10px;
  text-transform: uppercase;
  font-family: 'Kapra';
  font-size: 18px;
  letter-spacing: 0.72px; }

.course-block.orange-bg.updated::after {
  background: #BF3600; }

.orange-bg:hover.updated::after {
  background-color: #FF6600; }

.course-block.blue-bg.updated::after {
  background: #020268; }

.blue-bg:hover.updated::after {
  background-color: #0050A4; }

.course-block.pink-bg.updated::after {
  background: #880579; }

.pink-bg:hover.updated::after {
  background-color: #E51483; }

.course-block.purple-bg.updated::after {
  background: #3D0073; }

.purple-bg:hover.updated::after {
  background-color: #6B35B5; }

/* NEW FLASH */
.course-block.new::after {
  content: 'New';
  position: absolute;
  top: 0;
  left: 1em;
  color: #ffffff;
  padding: 2px 10px 0px 10px;
  text-transform: uppercase;
  font-family: 'Kapra';
  font-size: 18px;
  letter-spacing: 0.72px; }

.course-block.orange-bg.new::after {
  background: #BF3600; }

.orange-bg:hover.new::after {
  background-color: #FF6600; }

.course-block.blue-bg.new::after {
  background: #020268; }

.blue-bg:hover.new::after {
  background-color: #0050A4; }

.course-block.pink-bg.new::after {
  background: #880579; }

.pink-bg:hover.new::after {
  background-color: #E51483; }

.course-block.purple-bg.new::after {
  background: #3D0073; }

.purple-bg:hover.new::after {
  background-color: #6B35B5; }

.orange-bg:hover {
  background-color: #BF3600; }

.blue-bg:hover {
  background-color: #020268; }

.pink-bg:hover {
  background-color: #880579; }

.purple-bg:hover {
  background-color: #3D0073; }

.course-block-img {
  max-width: 300px; }

.course-info {
  padding: 1em;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between; }

.block-footer {
  width: 100%;
  display: flex;
  flex-flow: row wrap; }

.block-footer-line-full {
  height: 10px;
  width: 100%; }

.block-footer-line-half {
  height: 10px;
  width: 50%; }

.tracker-container {
  background-color: #37C1EE; }

.tracker-block {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 0 auto;
  padding: 4em 1em;
  gap: 4em; }

.tracker-button {
  text-align: center;
  display: flex;
  justify-content: center; }

.tracker-button button {
  width: auto;
  padding: 0em 2em;
  border-radius: 100px;
  background-color: #020268;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center; }

.tracker-button button svg {
  margin-left: 24px; }

.tracker-button button:hover {
  background-color: #0050A4; }

.tracker-description {
  text-align: center; }

.tracker-description p {
  text-align: left;
  color: #020268;
  max-width: 500px;
  font-size: 0.8em;
  padding: 0; }

.tracker-arrow {
  max-width: 5vw;
  position: relative;
  left: 90%;
  top: -18em;
  height: 0; }

.description-container {
  background-color: #A4DDF1; }

.description-text {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  text-align: center;
  max-width: 750px;
  padding: 4em 3em;
  margin: 0 auto 0 auto; }

.description-container h5 {
  text-transform: uppercase;
  color: #020268;
  font-size: 2em;
  padding: 0 0 0.5em 0; }

.description-container p {
  color: #020268;
  font-size: 0.8em; }

.additional-courses-container {
  background-color: #020268; }

.additional-courses-intro {
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto 0 auto;
  padding: 6em 3em 3em 3em;
  gap: 6em; }

.additional-courses-title {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  gap: 1em;
  padding-bottom: 0.5em; }

.additional-courses-logo {
  max-width: 280px; }

.additional-courses-text {
  max-width: 550px;
  display: flex;
  flex-flow: column nowrap; }

.additional-courses-text h5 {
  text-transform: uppercase;
  font-size: 2em; }

.additional-courses-text p {
  font-size: 0.8em; }

.additional-courses-text img {
  max-width: 50px; }

.additional-courses-grid-container {
  background-color: #020268;
  padding-bottom: 6em; }

.additional-courses-grid {
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto 0 auto;
  gap: 1em;
  padding: 0 1em; }

.additional-courses-block {
  width: 250px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer; }

.additional1:hover {
  background-color: #3D0073; }
  .additional1:hover h5 {
    color: #B58BFF; }

.additional2:hover {
  background-color: #BF3600; }
  .additional2:hover h5 {
    color: #FF8B39; }

.additional3:hover {
  background-color: #006630; }
  .additional3:hover h5 {
    color: #68BC46; }

.additional4:hover {
  background-color: #880579; }
  .additional4:hover h5 {
    color: #FF6699; }

.additional-courses-block-title {
  height: 160px;
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em; }

.additional-courses-block h4 {
  text-transform: uppercase;
  text-align: center; }

.additional-courses-cta {
  background-color: #020268;
  width: 100%; }

.additional-courses-cta h5 {
  text-transform: uppercase;
  font-size: 0.7em;
  line-height: 1.2em;
  color: #ffffff;
  font-family: 'Darwin';
  font-weight: bold;
  text-align: left;
  padding: 1em 0; }

.additional-courses-cta a {
  text-decoration: none; }

.CPD-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  background-color: rgba(2, 2, 104, 0.8);
  display: none; }

.CPD-video {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

.CPD-video video {
  width: 50%; }

.CPD-video-close {
  position: fixed;
  right: 2em;
  top: 2em;
  cursor: pointer; }

.CPD-show {
  display: block; }

.orange-bg {
  background-color: #FF6600; }

.blue-bg {
  background-color: #0050A4; }

.green-bg {
  background-color: #0BA446; }

.pink-bg {
  background-color: #E51483; }

.purple-bg {
  background-color: #6B35B5; }

.orange-line1 {
  background-color: #FFB685; }

.orange-line2 {
  background-color: #FF8B39; }

.orange-line3 {
  background-color: #BF3600; }

.blue-line1 {
  background-color: #A4DDF1; }

.blue-line2 {
  background-color: #37C1EE; }

.blue-line3 {
  background-color: #020268; }

.green-line1 {
  background-color: #ADDBA5; }

.green-line2 {
  background-color: #68BC46; }

.green-line3 {
  background-color: #006630; }

.pink-line1 {
  background-color: #FFB8DA; }

.pink-line2 {
  background-color: #FF6699; }

.pink-line3 {
  background-color: #880579; }

.purple-line1 {
  background-color: #E1D1FF; }

.purple-line2 {
  background-color: #B58BFF; }

.purple-line3 {
  background-color: #3D0073; }

.spanish-training {
  display: none; }

.resource-training {
  display: none; }

.block-show {
  display: flex;
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out; }

.default-hide {
  display: none; }

.hide-selector {
  display: none;
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out; }

@media screen and (min-width: 1100px) and (max-width: 1500px) {
  .first-visit-background {
    width: 77%; }
  .first-visit-intro {
    max-width: 60%; } }

@media screen and (min-width: 992px) and (max-width: 1100px) {
  .first-visit-background {
    width: 90%; }
  .first-visit-intro {
    max-width: 60%; }
  .CPD-video video {
    width: 75%; } }

@media screen and (max-width: 992px) {
  .tracker-button {
    width: 100%; }
  .tracker-description p {
    text-align: center;
    max-width: 600px; }
  .tracker-block {
    gap: 2em; }
  .tracker-arrow {
    max-width: 8vw;
    left: 87%;
    top: -19em; }
  .additional-courses-text {
    align-items: center;
    text-align: center; }
  .additional-courses-intro {
    gap: 2em; }
  .additional-courses-title {
    padding-bottom: 1.5em; }
  .courses-container {
    flex-flow: wrap;
    padding: 3em 0; }
  .course-block {
    width: 45%; }
  .course-block-img {
    width: 300px; }
  .course-filter-container {
    text-align: center;
    justify-content: center;
    max-width: 600px;
    padding-bottom: 0em; }
  .course-filter-container p {
    width: 100%; }
  .filter-selectors {
    justify-content: center;
    flex-flow: row;
    align-items: flex-end;
    padding: 0 1em; }
  .selector-option {
    flex-flow: wrap;
    justify-content: center;
    width: 33%; }
  .mobile-logo {
    max-width: 150px; }
  .selector-img {
    order: 2; }
  .first-visit-container {
    background-color: #020268; }
  .first-visit-background {
    display: none; }
  .first-visit-intro {
    max-width: 90%; }
  .first-visit-video {
    width: 95%;
    padding: 2em 1em; }
  .CPD-video video {
    width: 95%; } }

/* Hide scrollbar for Chrome, Safari and Opera */
.course-grid::-webkit-scrollbar {
  display: none; }

/* Hide scrollbar for IE, Edge and Firefox */
.course-grid {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */ }

.cookies-container {
  position: fixed;
  bottom: 3em;
  left: 3em;
  background-color: #ffffff;
  width: 400px;
  height: 150px;
  z-index: 10;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.25);
  display: none;
  align-items: center; }

.cookies-container p {
  color: #706E6A;
  font-size: 0.8em;
  line-height: 1.2em; }

.cookies-container a {
  font-family: 'kapra';
  text-transform: uppercase;
  padding-right: 1em;
  padding-top: 0.2em;
  color: #706E6A;
  font-size: 1.1em;
  cursor: pointer; }

.cookie-content {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1em 2em; }

.show-cookies {
  display: flex; }

@media screen and (max-width: 992px) {
  .cookies-container {
    left: 1em; } }

.playlist-hero {
  background-image: url("../images/playlist-hero.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 24em;
  background-color: #37C1EE; }

.playlist-intro {
  background-color: #0050A4;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 4em; }

.playlist-intro.podcast .playlist-description {
  padding: 1em; }

.playlist-intro.podcast {
  background-color: #6B35B5; }

.playlist-intro h1 {
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  font-family: "Darwin", sans-serif;
  font-weight: 700;
  letter-spacing: 1.12px; }

.playlist-intro p {
  font-size: 0.85em; }

.playlist-logo {
  padding: 0 0 1em 0; }

.playlist-logo img {
  width: 380px; }

.playlist-description {
  max-width: 800px;
  text-align: center;
  padding: 0 0 0 6em; }

.playlist-grid {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center; }

.playlist-grid a {
  text-decoration: none;
  cursor: pointer; }

.video-block {
  width: 300px;
  margin: 0.8em 0.5em;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between; }

.video-block.podcast {
  width: 570px; }

.video-title {
  background-color: #ffffff;
  text-align: left; }

.video-title h1 {
  color: #706e6a;
  font-size: 1.8em;
  padding: 0.5em 0 0.2em 0;
  text-transform: uppercase; }

.video-title p {
  color: #706e6a;
  font-size: 0.85em; }

.video-block-img {
  position: relative; }

.video-block-img img {
  max-width: 300px; }

.video-block.podcast .video-block-img img {
  max-width: 570px; }

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 2, 104, 0.5); }

.video-overlay.disabled {
  background-color: rgba(2, 2, 104, 0); }

.play-hover .video-overlay {
  background-color: rgba(2, 2, 104, 0); }

.play-hover .video-icon img {
  opacity: 0; }

.play-hover:hover .video-icon img {
  opacity: 1; }

.video-block.podcast .video-overlay {
  background-color: rgba(2, 2, 104, 0.3); }

.video-block.orange-bg:hover .video-overlay {
  background-color: rgba(255, 102, 0, 0.5); }

.video-block.blue-bg:hover .video-overlay {
  background-color: rgba(0, 80, 164, 0.5); }

.video-block.green-bg:hover .video-overlay {
  background-color: rgba(11, 164, 70, 0.5); }

.video-block.purple-bg:hover .video-overlay {
  background-color: rgba(107, 53, 181, 0.5); }

.video-block.pink-bg:hover .video-overlay {
  background-color: rgba(229, 20, 131, 0.5); }

.video-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }

.video-icon img {
  max-width: 60px !important; }

@media screen and (max-width: 992px) {
  .video-block.podcast {
    width: 300px; }
  .video-block.podcast .video-block-img img {
    max-width: 300px; }
  .video-block-img img {
    width: 300px; }
  .playlist-description {
    padding: 1em; }
  .playlist-intro {
    flex-flow: wrap;
    padding: 2em; }
  .playlist-logo img {
    width: 300px; } }

button {
  background-color: #FEC057;
  height: 60px;
  border: none;
  width: 140px;
  border-radius: 10px;
  font-family: "Kapra", sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
  color: #ffffff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
  cursor: pointer; }

.admin-button {
  padding-top: 0; }

.admin-button button {
  width: 250px; }

button:hover {
  background-color: #ffd691; }

#copyButton {
  margin-top: 0.5em; }

input {
  background-color: #D9D9D9;
  border-radius: 10px;
  height: 46px;
  width: 100%;
  border: none;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
  font-family: "Kapra", sans-serif;
  font-size: 1.2em;
  padding: 1em 0.5em;
  margin: 0.2em 0 1em 0; }

input:focus {
  border-color: #ffffff;
  outline-color: #ffffff;
  background-color: #ffffff; }

.pass-eye {
  width: 87%; }

.login-password {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center; }

.login-password img {
  width: 8%;
  margin: 0px 0 20px 20px;
  cursor: pointer; }

#textarea {
  background-color: #ffffff;
  border-radius: 10px;
  height: 105px;
  width: 100%;
  border: none;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
  font-family: "Darwin", sans-serif;
  font-size: 1em;
  letter-spacing: 0.01em;
  line-height: 1.5em;
  padding: 1em 1em;
  resize: none; }

#textarea:focus {
  border-color: #ffffff;
  outline-color: #ffffff;
  background-color: #ffffff;
  outline: none; }

/*# sourceMappingURL=main.css.map */