[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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [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: 0s
}

    [data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate {
        transition-delay: 3s
    }

[data-aos] {
    pointer-events: none
}

    [data-aos].aos-animate {
        pointer-events: auto
    }

    [data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] {
        transition-timing-function: cubic-bezier(.25,.25,.75,.75)
    }

    [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] {
        transition-timing-function: ease
    }

    [data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] {
        transition-timing-function: ease-in
    }

    [data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] {
        transition-timing-function: ease-out
    }

    [data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] {
        transition-timing-function: ease-in-out
    }

    [data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] {
        transition-timing-function: cubic-bezier(.6,-.28,.735,.045)
    }

    [data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] {
        transition-timing-function: cubic-bezier(.175,.885,.32,1.275)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] {
        transition-timing-function: cubic-bezier(.68,-.55,.265,1.55)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] {
        transition-timing-function: cubic-bezier(.47,0,.745,.715)
    }

    [data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] {
        transition-timing-function: cubic-bezier(.39,.575,.565,1)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] {
        transition-timing-function: cubic-bezier(.445,.05,.55,.95)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] {
        transition-timing-function: cubic-bezier(.55,.085,.68,.53)
    }

    [data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] {
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] {
        transition-timing-function: cubic-bezier(.455,.03,.515,.955)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] {
        transition-timing-function: cubic-bezier(.55,.085,.68,.53)
    }

    [data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] {
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] {
        transition-timing-function: cubic-bezier(.455,.03,.515,.955)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] {
        transition-timing-function: cubic-bezier(.55,.085,.68,.53)
    }

    [data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] {
        transition-timing-function: cubic-bezier(.25,.46,.45,.94)
    }

    [data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] {
        transition-timing-function: cubic-bezier(.455,.03,.515,.955)
    }

@media screen {
    html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity,-webkit-transform;
        transition-property: opacity,transform;
        transition-property: opacity,transform,-webkit-transform
    }

        html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
            opacity: 1;
            -webkit-transform: none;
            transform: none
        }

    html:not(.no-js) [data-aos=fade-up] {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0)
    }

    html:not(.no-js) [data-aos=fade-down] {
        -webkit-transform: translate3d(0,-100px,0);
        transform: translate3d(0,-100px,0)
    }

    html:not(.no-js) [data-aos=fade-right] {
        -webkit-transform: translate3d(-100px,0,0);
        transform: translate3d(-100px,0,0)
    }

    html:not(.no-js) [data-aos=fade-left] {
        -webkit-transform: translate3d(100px,0,0);
        transform: translate3d(100px,0,0)
    }

    html:not(.no-js) [data-aos=fade-up-right] {
        -webkit-transform: translate3d(-100px,100px,0);
        transform: translate3d(-100px,100px,0)
    }

    html:not(.no-js) [data-aos=fade-up-left] {
        -webkit-transform: translate3d(100px,100px,0);
        transform: translate3d(100px,100px,0)
    }

    html:not(.no-js) [data-aos=fade-down-right] {
        -webkit-transform: translate3d(-100px,-100px,0);
        transform: translate3d(-100px,-100px,0)
    }

    html:not(.no-js) [data-aos=fade-down-left] {
        -webkit-transform: translate3d(100px,-100px,0);
        transform: translate3d(100px,-100px,0)
    }

    html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] {
        opacity: 0;
        transition-property: opacity,-webkit-transform;
        transition-property: opacity,transform;
        transition-property: opacity,transform,-webkit-transform
    }

        html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate {
            opacity: 1;
            -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1)
        }

    html:not(.no-js) [data-aos=zoom-in] {
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-up] {
        -webkit-transform: translate3d(0,100px,0) scale(.6);
        transform: translate3d(0,100px,0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-down] {
        -webkit-transform: translate3d(0,-100px,0) scale(.6);
        transform: translate3d(0,-100px,0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-right] {
        -webkit-transform: translate3d(-100px,0,0) scale(.6);
        transform: translate3d(-100px,0,0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-in-left] {
        -webkit-transform: translate3d(100px,0,0) scale(.6);
        transform: translate3d(100px,0,0) scale(.6)
    }

    html:not(.no-js) [data-aos=zoom-out] {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-up] {
        -webkit-transform: translate3d(0,100px,0) scale(1.2);
        transform: translate3d(0,100px,0) scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-down] {
        -webkit-transform: translate3d(0,-100px,0) scale(1.2);
        transform: translate3d(0,-100px,0) scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-right] {
        -webkit-transform: translate3d(-100px,0,0) scale(1.2);
        transform: translate3d(-100px,0,0) scale(1.2)
    }

    html:not(.no-js) [data-aos=zoom-out-left] {
        -webkit-transform: translate3d(100px,0,0) scale(1.2);
        transform: translate3d(100px,0,0) scale(1.2)
    }

    html:not(.no-js) [data-aos^=slide][data-aos^=slide] {
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        visibility: hidden
    }

        html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate {
            visibility: visible;
            -webkit-transform: translateZ(0);
            transform: translateZ(0)
        }

    html:not(.no-js) [data-aos=slide-up] {
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    html:not(.no-js) [data-aos=slide-down] {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    html:not(.no-js) [data-aos=slide-right] {
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    html:not(.no-js) [data-aos=slide-left] {
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    html:not(.no-js) [data-aos^=flip][data-aos^=flip] {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform
    }

    html:not(.no-js) [data-aos=flip-left] {
        -webkit-transform: perspective(2500px) rotateY(-100deg);
        transform: perspective(2500px) rotateY(-100deg)
    }

        html:not(.no-js) [data-aos=flip-left].aos-animate {
            -webkit-transform: perspective(2500px) rotateY(0);
            transform: perspective(2500px) rotateY(0)
        }

    html:not(.no-js) [data-aos=flip-right] {
        -webkit-transform: perspective(2500px) rotateY(100deg);
        transform: perspective(2500px) rotateY(100deg)
    }

        html:not(.no-js) [data-aos=flip-right].aos-animate {
            -webkit-transform: perspective(2500px) rotateY(0);
            transform: perspective(2500px) rotateY(0)
        }

    html:not(.no-js) [data-aos=flip-up] {
        -webkit-transform: perspective(2500px) rotateX(-100deg);
        transform: perspective(2500px) rotateX(-100deg)
    }

        html:not(.no-js) [data-aos=flip-up].aos-animate {
            -webkit-transform: perspective(2500px) rotateX(0);
            transform: perspective(2500px) rotateX(0)
        }

    html:not(.no-js) [data-aos=flip-down] {
        -webkit-transform: perspective(2500px) rotateX(100deg);
        transform: perspective(2500px) rotateX(100deg)
    }

        html:not(.no-js) [data-aos=flip-down].aos-animate {
            -webkit-transform: perspective(2500px) rotateX(0);
            transform: perspective(2500px) rotateX(0)
        }
}

@charset "UTF-8";
/* 
    Relative units in media queries are based on the initial value, 
which means that units are never based on results of declarations. 
For example, in HTML, the em unit is relative to the initial value of font-size, 
defined by the user agent or the user’s preferences, not any styling on the page.

    Calculted based on assumed 16px default font size; if user has changed this everythggn will be relative and
    should still fit in any device or window width
    better for user, harder to target devices at specific px - test this on devices
    -could you get in sencario where you are not within a block of min-width/max-width if your font size is enlarged
    because the em to px conversion ends up being more than 1px apart?
    we only use max-width for the visibility helpers - :( If we used visiblity helpers like foundation, ems would work

*/
:root,
:root .light-mode-only {
    color-scheme: light;
    --brand-red-h: 346;
    --brand-red-s: 100%;
    --brand-red-l: 42%;
    --brand-red: hsl(var(--brand-red-h), var(--brand-red-s), var(--brand-red-l));
    --brand-red-darken-5: hsl(var(--brand-red-h), var(--brand-red-s), calc(var(--brand-red-l) - 5%));
    --brand-red-darken-10: hsl(var(--brand-red-h), var(--brand-red-s), calc(var(--brand-red-l) - 10%));
    --brand-red-bg-h: 346;
    --brand-red-bg-s: 100%;
    --brand-red-bg-l: 42%;
    --brand-red-bg: hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), var(--brand-red-bg-l));
    --brand-red-bg-darken-5: hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), calc(var(--brand-red-bg-l) - 5%));
    --brand-red-bg-darken-7: hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), calc(var(--brand-red-bg-l) - 7%));
    --brand-red-bg-darken-10: hsl(var(--brand-red-bg-h), var(--brand-red-bg-s), calc(var(--brand-red-bg-l) - 10%));
    --brand-blue-h: 198;
    --brand-blue-s: 51%;
    --brand-blue-l: 39%;
    --brand-blue: hsl(var(--brand-blue-h), var(--brand-blue-s), var(--brand-blue-l));
    --brand-blue-darken-4: hsl(var(--brand-blue-h), var(--brand-blue-s), calc(var(--brand-blue-l) - 4%));
    --brand-blue-darken-6: hsl(var(--brand-blue-h), var(--brand-blue-s), calc(var(--brand-blue-l) - 6%));
    --brand-blue-darken-10: hsl(var(--brand-blue-h), var(--brand-blue-s), calc(var(--brand-blue-l) - 10%));
    --brand-blue-bg-h: 198;
    --brand-blue-bg-s: 51%;
    --brand-blue-bg-l: 39%;
    --brand-blue-bg: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), var(--brand-blue-bg-l));
    --brand-blue-bg-lighten-55: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) + 55%));
    --brand-blue-bg-lighten-13: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) + 13%));
    --brand-blue-bg-lighten-6: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) + 6%));
    --brand-blue-bg-darken-4: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) - 4%));
    --brand-blue-bg-darken-10: hsl(var(--brand-blue-bg-h), var(--brand-blue-bg-s), calc(var(--brand-blue-bg-l) - 10%));
    --error-h: 353;
    --error-s: 100%;
    --error-l: 41%;
    --error: hsl(var(--error-h), var(--error-s), var(--error-l));
    --error-bg-h: 353;
    --error-bg-s: 100%;
    --error-bg-l: 41%;
    --error-bg: hsl(var(--error-bg-h), var(--error-bg-s), var(--error-bg-l));
    --success-h: 155;
    --success-s: 100%;
    --success-l: 24%;
    --success: hsl(var(--success-h), var(--success-s), var(--success-l));
    --success-bg-h: 155;
    --success-bg-s: 100%;
    --success-bg-l: 24%;
    --success-bg: hsl(var(--success-bg-h), var(--success-bg-s), var(--success-bg-l));
    --success-bg-lighten-56: hsl(var(--success-bg-h), var(--success-bg-s), calc(var(--success-bg-l) + 56%));
    --success-bg-darken-5: hsl(var(--success-bg-h), var(--success-bg-s), calc(var(--success-bg-l) - 5%));
    --success-bg-darken-9: hsl(var(--success-bg-h), var(--success-bg-s), calc(var(--success-bg-l) - 9%));
    --warn-h: 20;
    --warn-s: 100%;
    --warn-l: 41%;
    --warn: hsl(var(--warn-h), var(--warn-s), var(--warn-l));
    --warn-bg-h: 23;
    --warn-bg-s: 100%;
    --warn-bg-l: 40%;
    --warn-bg: hsl(var(--warn-bg-h), var(--warn-bg-s), var(--warn-bg-l));
    --warn-bg-lighten-45: hsl(var(--warn-bg-h), var(--warn-bg-s), calc(var(--warn-bg-l) + 45%));
    --white: hsl(214, 0%, 100%);
    --gray-98: hsl(214, 0%, 98%);
    --gray-96: hsl(214, 0%, 96%);
    --gray-93: hsl(214, 0%, 93%);
    --gray-93c: hsl(214, 3%, 93%);
    --gray-90: hsl(214, 0%, 90%);
    --gray-90c: hsl(214, 2%, 90%);
    --gray-88: hsl(214, 3%, 88%);
    --gray-87: hsl(214, 0%, 87%);
    --gray-85: hsl(214, 0%, 85%);
    --gray-83: hsl(214, 0%, 83%);
    --gray-80: hsl(214, 0%, 80%);
    --gray-77: hsl(214, 0%, 77%);
    --gray-73: hsl(214, 0%, 73%);
    --gray-70: hsl(214, 0%, 70%);
    --gray-67: hsl(214, 0%, 67%);
    --gray-64: hsl(214, 2%, 64%);
    --gray-60: hsl(214, 0%, 60%);
    --gray-54: hsl(214, 2%, 54%);
    --gray-51: hsl(214, 0%, 51%);
    --gray-45: hsl(214, 2%, 45%);
    --gray-44: hsl(214, 4%, 44%);
    --gray-42: hsl(214, 4%, 42%);
    --gray-40: hsl(214, 4%, 40%);
    --gray-38: hsl(214, 2%, 38%);
    --gray-35: hsl(214, 2%, 35%);
    --gray-34: hsl(214, 4%, 34%);
    --gray-32: hsl(214, 2%, 32%);
    --gray-30: hsl(214, 2%, 30%);
    --gray-29: hsl(214, 4%, 29%);
    --gray-28: hsl(214, 2%, 28%);
    --gray-26: hsl(214, 0%, 26%);
    --gray-24: hsl(214, 4%, 24%);
    --gray-20: hsl(214, 2%, 20%);
    --gray-18: hsl(214, 0%, 18%);
    --gray-17: hsl(214, 0%, 17%);
    --gray-16: hsl(214, 0%, 16%);
    --gray-15: hsl(214, 0%, 15%);
    --gray-14: hsl(214, 0%, 14%);
    --gray-12: hsl(214, 0%, 12%);
    --gray-10: hsl(214, 0%, 10%);
    --black: hsl(214, 0%, 0%);
    --faint-gray: var(--gray-96);
    --light-gray: var(--gray-93);
    --med-gray: var(--gray-67);
    --neutral-gray: var(--gray-60);
    --gray: var(--gray-45);
    --dark-gray: var(--gray-35);
    --extra-dark-gray: var(--gray-28);
    --brand-faint-gray: var(--gray-93c);
    --brand-light-gray: var(--gray-85);
    --brand-medium-gray: var(--gray-54);
    --brand-dark-gray: var(--gray-34);
    --white-hsl: 214, 0%, 100%;
    --white-05: hsla(var(--white-hsl), .05);
    --white-10: hsla(var(--white-hsl), .1);
    --white-15: hsla(var(--white-hsl), .15);
    --white-20: hsla(var(--white-hsl), .2);
    --white-30: hsla(var(--white-hsl), .3);
    --white-40: hsla(var(--white-hsl), .4);
    --white-50: hsla(var(--white-hsl), .5);
    --white-60: hsla(var(--white-hsl), .6);
    --white-70: hsla(var(--white-hsl), .7);
    --white-80: hsla(var(--white-hsl), .8);
    --white-85: hsla(var(--white-hsl), .85);
    --white-90: hsla(var(--white-hsl), .9);
    --white-95: hsla(var(--white-hsl), .95);
    --black-hsl: 214, 0%, 0%;
    --black-10: hsla(var(--black-hsl), .1);
    --black-15: hsla(var(--black-hsl), .15);
    --black-20: hsla(var(--black-hsl), .2);
    --black-30: hsla(var(--black-hsl), .3);
    --black-35: hsla(var(--black-hsl), .35);
    --black-40: hsla(var(--black-hsl), .4);
    --black-50: hsla(var(--black-hsl), .5);
    --black-60: hsla(var(--black-hsl), .6);
    --black-70: hsla(var(--black-hsl), .7);
    --black-80: hsla(var(--black-hsl), .8);
    --black-90: hsla(var(--black-hsl), .9);
    --warn-03: hsla(var(--warn), .3);
    --warn-08: hsla(var(--warn), .8);
}

    :root,
    :root .light-mode-only {
        --text-primary: var(--brand-red);
        --text-primary-active: var(--brand-red-darken-5);
        --text-primary-active-extra-dark: var(--brand-red-darken-10);
        --text-link: var(--brand-blue);
        --text-link-dark: var(--brand-blue-darken-4);
        --text-link-active: var(--brand-blue-darken-6);
        --text-link-active-extra-dark: var(--brand-blue-darken-10);
        --text-info: var(--text-link);
        --text-info-active: var(--text-link-active);
        --text-info-active-extra-dark: var(--text-link-active-extra-dark);
        --text-error: var(--error);
        --text-success: var(--success);
        --text-warn: var(--warn);
        --text-gray-85: var(--gray-85);
        --text-gray-80: var(--gray-80);
        --text-gray-73: var(--gray-73);
        --text-gray-67: var(--gray-67);
        --text-gray-60: var(--gray-60);
        --text-gray-54: var(--gray-54);
        --text-gray-51: var(--gray-51);
        --text-gray-45: var(--gray-45);
        --text-gray-42: var(--gray-42);
        --text-gray-38: var(--gray-38);
        --text-gray-35: var(--gray-35);
        --text-gray-34: var(--gray-34);
        --text-gray-32: var(--gray-32);
        --text-gray-20: var(--gray-20);
        --text-faint-gray: var(--text-gray-73);
        --text-light-gray: var(--text-gray-45);
        --text-med-gray: var(--text-gray-32);
        --text-gray: var(--text-gray-20);
        --text-white: var(--white);
        --text-white-opacity-50: var(--white-50);
        --text-white-opacity-70: var(--white-70);
        --text-white-opacity-85: var(--white-85);
        --text-white-opacity-95: var(--white-95);
        --bg-primary: var(--brand-red-bg);
        --bg-primary-dark: var(--brand-red-bg-darken-5);
        --bg-primary-darker: var(--brand-red-bg-darken-7);
        --bg-primary-extra-dark: var(--brand-red-bg-darken-10);
        --bg-info: var(--brand-blue-bg);
        --bg-info-light: var(--brand-blue-bg-lighten-6);
        --bg-info-dark: var(--brand-blue-bg-darken-4);
        --bg-info-darker: var(--brand-blue-bg-darken-10);
        --bg-error: var(--error-bg);
        --bg-success: var(--success-bg);
        --bg-success-dark: var(--success-bg-darken-5);
        --bg-success-extra-light: var(--success-bg-lighten-56);
        --bg-warn: var(--warn-bg);
        --bg-warn-extra-light: var(--warn-bg-lighten-45);
        --bg-gray-98: var(--gray-98);
        --bg-gray-96: var(--gray-96);
        --bg-gray-93c: var(--gray-93c);
        --bg-gray-93: var(--gray-93);
        --bg-gray-90c: var(--gray-90c);
        --bg-gray-90: var(--gray-90);
        --bg-gray-88: var(--gray-88);
        --bg-gray-87: var(--gray-87);
        --bg-gray-85: var(--gray-85);
        --bg-gray-80: var(--gray-80);
        --bg-gray-73: var(--gray-73);
        --bg-gray-70: var(--gray-70);
        --bg-gray-67: var(--gray-67);
        --bg-gray-60: var(--gray-60);
        --bg-gray-54: var(--gray-54);
        --bg-gray-51: var(--gray-51);
        --bg-gray-45: var(--gray-45);
        --bg-gray-44: var(--gray-44);
        --bg-gray-40: var(--gray-40);
        --bg-gray-35: var(--gray-35);
        --bg-gray-34: var(--gray-34);
        --bg-gray-29: var(--gray-29);
        --bg-gray-24: var(--gray-24);
        --bg-gray-20: var(--gray-20);
        --bg-faint-gray: var(--bg-gray-96);
        --bg-light-gray: var(--bg-gray-93);
        --bg-med-gray: var(--bg-gray-67);
        --bg-gray: var(--bg-gray-45);
        --bg-dark-gray: var(--bg-gray-35);
        --bg-gray-54-opacity-05: hsla(214, 2%, 54%, .05);
        --bg-gray-54-opacity-25: hsla(214, 2%, 54%, .25);
        --bg-gray-54-opacity-35: hsla(214, 2%, 54%, .35);
        --bg-gray-34-opacity-90: hsla(214, 4%, 34%, .9);
        --bg-gray-34-opacity-95: hsla(214, 4%, 34%, .95);
        --bg-gray-20-opacity-50: hsla(214, 2%, 20%, .5);
        --bg-white: var(--white);
        --bg-white-opacity-10: var(--white-10);
        --bg-white-opacity-80: var(--white-80);
        --bg-white-opacity-95: var(--white-95);
        --bg-black: var(--black);
        --bg-black-opacity-05: var(--black-5);
        --bg-black-opacity-10: var(--black-10);
        --bg-black-opacity-20: var(--black-20);
        --bg-black-opacity-30: var(--black-30);
        --bg-black-opacity-40: var(--black-40);
        --border-primary: var(--brand-red-bg);
        --border-primary-dark: var(--brand-red-bg-darken-5);
        --border-primary-extra-dark: var(--brand-red-bg-darken-10);
        --border-info: var(--brand-blue-bg);
        --border-info-light: var(--brand-blue-bg-lighten-13);
        --border-error: var(--error-bg);
        --border-success: var(--success-bg);
        --border-success-dark: var(--success-bg-darken-9);
        --border-warn: var(--warn-bg);
        --border-warn-opacity-3: var(--warn-03);
        --border-white: var(--bg-white);
        --border-white-opacity-20: var(--white-20);
        --border-white-opacity-30: var(--white-30);
        --border-white-opacity-80: var(--white-80);
        --border-white-opacity-90: var(--white-90);
        --border-gray-96: var(--gray-96);
        --border-gray-93: var(--gray-93);
        --border-gray-90: var(--gray-90);
        --border-gray-88: var(--gray-88);
        --border-gray-87: var(--gray-87);
        --border-gray-85: var(--gray-85);
        --border-gray-80: var(--gray-80);
        --border-gray-70: var(--gray-70);
        --border-gray-67: var(--gray-67);
        --border-gray-64: var(--gray-64);
        --border-gray-60: var(--gray-60);
        --border-gray-54: var(--gray-54);
        --border-gray-45: var(--gray-45);
        --border-gray-44: var(--gray-44);
        --border-gray-35: var(--gray-35);
        --border-gray-34: var(--gray-34);
        --border-gray-29: var(--gray-29);
        --border-gray-24: var(--gray-24);
        --border-faint-gray: var(--border-gray-96);
        --border-light-gray: var(--border-gray-93);
        --border-med-gray: var(--border-gray-67);
        --border-gray: var(--border-gray-45);
        --border-dark-gray: var(--border-gray-35);
        --box-shadow: hsla(0, 0%, 87%, .65);
        --box-shadow-level-1: hsla(0, 0%, 83%,.53);
        --box-shadow-level-20: hsla(0, 0%, 20%, .5);
        --box-shadow-no-opacity: var(--gray-87);
        --box-shadow-black-opacity-10: var(--black-10);
        --box-shadow-black-opacity-20: var(--black-20);
        --box-shadow-black-opacity-30: var(--black-30);
        --box-shadow-black-opacity-35: var(--black-35);
        --box-shadow-black-opacity-40: var(--black-40);
        --box-shadow-black-opacity-50: var(--black-50);
        --box-shadow-warn: var(--warn-08);
        --box-shadow-info: var(--brand-blue-bg);
        --text-shadow: var(--gray-28);
        --filter-drop-shadow: var(--gray-60);
        --focus-outline: var(--brand-blue-bg-lighten-13);
        --focus-outline-link: var(--brand-bg-blue);
        --focus-outline-link-extra-dark: var(--brand-blue-bg-darken-10);
        --focus-outline-white: var(--white);
        --focus-outline-white-opacity-70: var(--white-70);
        --focus-outline-gray: var(--gray-60);
        --progress-spin-indicator-border-right: var(--gray-64);
        --progress-spin-indicator-border-bottom: var(--gray-54);
        --progress-spin-indicator-border-left: var(--gray-44);
        --progress-steps-todo-borders-backgrounds: var(--gray-70);
        --progress-steps-done-borders-backgrounds: var(--gray-34);
        --progress-steps-text-todo: var(--gray-90c);
        --uwcu-loading-circle-border: var(--gray-67);
        --uwcu-loading-circle-inner-border: var(--gray-87);
        --timeline-line: var(--gray-34);
        --toggle-text: var(--text-med-gray);
        --toggle-background: var(--bg-white);
        --toggle-border: var(--border-gray-80);
        --toggle-pressed-text: var(--text-white);
        --toggle-pressed-background: var(--bg-gray-45);
        --toggle-pressed-border: var(--border-gray-45);
        --popover-background: var(--bg-white);
        --popover-title-background: var(--bg-faint-gray);
        --popover-point-border: var(--border-med-gray);
        --button-disabled-text: var(--text-faint-gray);
        --button-disabled-border: var(--border-gray-87);
        --button-disabled-background: var(--border-light-gray);
        --verifyukey-digit-text: var(--gray-20);
        --verifyukey-date-text: var(--gray-34);
    }

/*#region ACCESSBILITY */
/*#endregion */
/*#region HORIZONTAL RULES */
/*#endregion */
/*#region IMAGES */
/*#endregion */
/*#region TYPOGRAPHY */
/*#endregion */
/*#region RESETS */
/*#endregion */
/*#region ADS */
/*#endregion */
/*#region BADGES */
/*#endregion */
/*#region BOXES */
/*#endregion */
/*#region BUTTONS */
/*#endregion */
/*#region CALENDARS */
/*#endregion */
/*#region FILTERS */
/*#endregion */
/*#region ICONS*/
/*#endregion */
/*#region INPUTS */
/*#endregion */
/*#region LINES */
/*#endregion */
/*#region LISTS */
/*#endregion */
/*#region NAV */
/*#endregion */
/*#region OVERLAYS */
/*#endregion */
/*#endregion */
/*#region LOADING SPINNERS */
/*#endregion */
/*#region RIBBONS */
/*#endregion */
/*#region SORTING */
/*#endregion */
/*#region SWITCHES */
/*#endregion */
/*#region TILES */
/*#endregion */
/*#region TOGGLES */
/*#endregion */
/*#region WIZARDS */
/*#endregion */
/*#region ACTION MODE */
/*#endregion */
/*#region TOASTER */
/*#endregion */
/* #region CAROUSELS*/
/*#endregion */
/*#region TIMELINE*/
/*#endregion*/
/*  @function unicode will compile these properly

    SASS file example:
    .icon-line-chart:before {
	    content: unicode($icon-line-chart); 
    }

    Compiles to :

    .icon-line-chart:before {
      content: "\e600"; 
    }

*/
/*
    NOTES ABOUT BASE FONT SIZE
    
    
    CURRENT STATE -
    Base font - 10px
    Media queries in pixels (480px, 768px, 980px, 1260px)
    
    Pros
            - 10px base makes calculations of rems easy
            - Media queries in pixels makes it easy to target specific devices
    Con
            - User font size not reflected on our site, must use zoom instead

    
    DESIRED STATE - 
    Base font - 62.5% = 10px (assuming default browser font size of 16px)
    Media queries in ems (30em, 48em, 61.25em, 78.75em)
    
    Pros 
            - Allows user to change font size and have it honored on our site
            - 10px base makes calculations of rems easy
    Con 
            - Our visibility helpers use combinations of min-with and max-width. 
                - It's possbile to end up with an extra pixel between tiers if brwoser hits that pixel none of the visiblity helpers kick in.
                - (set user font size to 20px and browser width to 599)
            - Potentially certain devices might not hit the em-based breakpoints as expected (would need to test)

    Solution 
            - Switch our visiblity helpers to only use min-width - see Foundation - this is a better method, but our current visibility helpers are so widely used, changing it now seems like too much effort

    
*/
/*
 
 NOTES ABOUT EM & REM


 Font sizes set in rem.
 Margin and padding set in em (2) or rem (3).

 (1)    10px sets up a base of 10 units for easy mental math on px to rem. 10px = 1rem
        Prevents user font size from taking effect. Necessary evil due to the fact that our media queries cannot be in ems.
        We use the Bootstrap visibility helpers which use combinations of min-with and max-width. Using ems in media queries, makes it possbile at larger font sizes, to end up with an extra pixel between tiers.
        If the browser hits that pixel none of the visiblity helpers kick in. (To see this, use em-based media queries and set user font size to 20px and browser width to 599.)

 (2)    Vertical padding and margins for typography elements - p, ul, h1, etc. - are set in rem.
        The spacing is relative to the root font-size of the element and therefore the same regardless of the element's font size.

        Note: Vertical padding and margins for other elements may be em. It depends on whether or not the vertical height and distance from other elements should change relative to its font size

 (3)    Hortizontal padding and margins for typography elements - blockquote, ul - are set in rem.
        The spacing is relative to the root font size and therefore the same regardless of the element.
        This gives a consistent left indent down the page regardless of the font size of each element.

 Note:  "IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements." See caniuse.com/#search=rem

*/
:root {
    --uwcu-font-stack: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
}

/* Gotham Narrow Light */
/* Gotham Narrow Book */
/* Gotham Narrow Medium */
/* Gotham Narrow Bold */
/*
    NOTES ABOUT BASE FONT SIZE
    
    
    CURRENT STATE -
    Base font - 10px
    Media queries in pixels (480px, 768px, 980px, 1260px)
    
    Pros
            - 10px base makes calculations of rems easy
            - Media queries in pixels makes it easy to target specific devices
    Con
            - User font size not reflected on our site, must use zoom instead

    
    DESIRED STATE - 
    Base font - 62.5% = 10px (assuming default browser font size of 16px)
    Media queries in ems (30em, 48em, 61.25em, 78.75em)
    
    Pros 
            - Allows user to change font size and have it honored on our site
            - 10px base makes calculations of rems easy
    Con 
            - Our visibility helpers use combinations of min-with and max-width. 
                - It's possbile to end up with an extra pixel between tiers if browser hits that pixel none of the visiblity helpers kick in.
                - (set user font size to 20px and browser width to 599)
            - Potentially certain devices might not hit the em-based breakpoints as expected (would need to test)

    Solution 
            - Switch our visiblity helpers to only use min-width - see Foundation - this is a better method, but our current visibility helpers are so widely used, changing it now seems like too much effort

    
*/
/*
 
 NOTES ABOUT EM & REM


 Font sizes set in rem.
 Margin and padding set in em (2) or rem (3).

 (1)    10px sets up a base of 10 units for easy mental math on px to rem. 10px = 1rem
        Prevents user font size from taking effect. Necessary evil due to the fact that our media queries cannot be in ems.
        We use the Bootstrap visibility helpers which use combinations of min-with and max-width. Using ems in media queries, makes it possbile at larger font sizes, to end up with an extra pixel between tiers.
        If the browser hits that pixel none of the visiblity helpers kick in. (To see this, use em-based media queries and set user font size to 20px and browser width to 599.)

 (2)    Vertical padding and margins for typography elements - p, ul, h1, etc. - are set in rem.
        The spacing is relative to the root font-size of the element and therefore the same regardless of the element's font size.

        Note: Vertical padding and margins for other elements may be em. It depends on whether or not the vertical height and distance from other elements should change relative to its font size

 (3)    Hortizontal padding and margins for typography elements - blockquote, ul - are set in rem.
        The spacing is relative to the root font size and therefore the same regardless of the element.
        This gives a consistent left indent down the page regardless of the font size of each element.

 Note:  "IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements." See caniuse.com/#search=rem

*/
/* Gotham Narrow Light */
/* Gotham Narrow Book */
/* Gotham Narrow Medium */
/* Gotham Narrow Bold */
/*lining numerals*/
/*  
    This file contains:

    GLOBAL COLOR VARIABLE OVERRIDES
    PUBLIC SITE ONLY COLOR VARIABLES
*/
/* Multiplier for base padding unit */
/* Function to output icons with proper characters when complied */
/*self clearing*/
/*
    
    This file includes the FLEXBOX GRID and FLEXBOX UTITLTY classes.

*/
/* FLEX CONTAINER 
    .container         For .flex-rows where items should be flush to the edge of their container.
                            Sets negative horiztonal margin equal to horizontal padding of contained flex-items
*/
.container {
    padding-right: 2rem;
    padding-left: 2rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 1100px;
}

@media print, (min-width: 768px) {
    .container {
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

/*
    FLEX DIRECTION STYLES
    --- to be placed on the flex parent container 
 */
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -2rem;
    margin-right: -2rem;
}

@media print, (min-width: 768px) {
    .row {
        margin-right: -5rem;
        margin-left: -5rem;
    }
}

.row-reverse {
    margin-left: -2rem;
    margin-right: -2rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

@media print, (min-width: 768px) {
    .row-reverse {
        margin-right: -5rem;
        margin-left: -5rem;
    }
}

.flex-column {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-column-reversed {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*
    FLEX WRAP STYLES
    --- to be placed on the flex parent container 
 */
.flex-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse !important;
    flex-wrap: wrap-reverse !important;
}

/*
    JUSTIFY CONTENT STYLES
    ---place on the flex parent container
    ---horizontally aligns children of row
    ---vertically aligns children of flex-column
 */
.justify-content-flex-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}

.justify-content-flex-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.justify-content-space-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.justify-content-space-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}

/*
    ALIGN ITEMS STYLES
    --- to be placed on the flex parent container 
    ---vertically aligns children of row
    ---horizontally aligns children of flex-column
*/
.align-items-flex-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

.align-items-flex-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.align-items-baseline {
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
}

.align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

/*
    ALIGN CONTENT STYLES
    --- to be placed on the flex parent container 
 */
.align-content-flex-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
}

.align-content-flex-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
}

.align-content-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
}

.align-content-space-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
}

.align-content-space-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
}

.align-content-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
}

/*
    ALIGN SELF STYLES
    --- to be placed on the flex children
*/
.align-self-auto {
    -ms-flex-item-align: auto !important;
    -ms-grid-row-align: auto !important;
    align-self: auto !important;
}

.align-self-flex-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
}

.align-self-flex-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
}

.align-self-center {
    -ms-flex-item-align: center !important;
    -ms-grid-row-align: center !important;
    align-self: center !important;
}

.align-self-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
}

.align-self-stretch {
    -ms-flex-item-align: stretch !important;
    -ms-grid-row-align: stretch !important;
    align-self: stretch !important;
}

/*
    FLEX GROW STYLES
    --- to be placed on the flex children
    .flex-grow-1, .flex-grow-2, etc.
*/
.flex-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
}

.flex-grow-2 {
    -ms-flex-positive: 2 !important;
    flex-grow: 2 !important;
}

.flex-grow-3 {
    -ms-flex-positive: 3 !important;
    flex-grow: 3 !important;
}

.flex-grow-4 {
    -ms-flex-positive: 4 !important;
    flex-grow: 4 !important;
}

.flex-grow-5 {
    -ms-flex-positive: 5 !important;
    flex-grow: 5 !important;
}

.flex-grow-6 {
    -ms-flex-positive: 6 !important;
    flex-grow: 6 !important;
}

/*
    FLEX SHRINK STYLES 
    --- to be placed on the flex children
     .flex-shrink-0, .flex-shrink-1 (default)
*/
.flex-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
}

/*
    FLEX ORDER STYLES 
    --- to be placed on the flex children
    .flex-order-0, .flex-order-1, etc.
*/
.flex-order-0 {
    -ms-flex-order: 0 !important;
    order: 0 !important;
}

.flex-order-1 {
    -ms-flex-order: 1 !important;
    order: 1 !important;
}

.flex-order-2 {
    -ms-flex-order: 2 !important;
    order: 2 !important;
}

.flex-order-3 {
    -ms-flex-order: 3 !important;
    order: 3 !important;
}

.flex-order-4 {
    -ms-flex-order: 4 !important;
    order: 4 !important;
}

.flex-order-5 {
    -ms-flex-order: 5 !important;
    order: 5 !important;
}

.flex-order-6 {
    -ms-flex-order: 6 !important;
    order: 6 !important;
}

.flex-order-7 {
    -ms-flex-order: 7 !important;
    order: 7 !important;
}

.flex-order-8 {
    -ms-flex-order: 8 !important;
    order: 8 !important;
}

.flex-order-9 {
    -ms-flex-order: 9 !important;
    order: 9 !important;
}

.flex-order-10 {
    -ms-flex-order: 10 !important;
    order: 10 !important;
}

.flex-order-11 {
    -ms-flex-order: 11 !important;
    order: 11 !important;
}

.flex-order-12 {
    -ms-flex-order: 12 !important;
    order: 12 !important;
}

.flex-order-13 {
    -ms-flex-order: 13 !important;
    order: 13 !important;
}

.flex-order-14 {
    -ms-flex-order: 14 !important;
    order: 14 !important;
}

.flex-order-15 {
    -ms-flex-order: 15 !important;
    order: 15 !important;
}

.flex-order-16 {
    -ms-flex-order: 16 !important;
    order: 16 !important;
}

.flex-order-17 {
    -ms-flex-order: 17 !important;
    order: 17 !important;
}

.flex-order-18 {
    -ms-flex-order: 18 !important;
    order: 18 !important;
}

.flex-order-19 {
    -ms-flex-order: 19 !important;
    order: 19 !important;
}

.flex-order-20 {
    -ms-flex-order: 20 !important;
    order: 20 !important;
}

/*#region FLEXBOX GRID */
/*

    FLEXBOX GRID
    --- to be placed on the .row children to make the grid

*/
.col-xs,
.col-sm,
.col-md,
.col-lg,
.col-xl {
    padding-right: 2rem;
    padding-left: 2rem;
}

@media print, (min-width: 768px) {
    .col-xs,
    .col-sm,
    .col-md,
    .col-lg,
    .col-xl {
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

.col-shrink-0 {
    padding-right: 2rem;
    padding-left: 2rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media print, (min-width: 768px) {
    .col-shrink-0 {
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-right: 2rem;
    padding-left: 2rem;
    width: 100%;
}

@media print {
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12 {
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

@media print, (min-width: 768px) {
    .bg-white.rte .container .row .col-xs-1,
    .bg-white.rte .container .row .col-xs-2,
    .bg-white.rte .container .row .col-xs-3,
    .bg-white.rte .container .row .col-xs-4,
    .bg-white.rte .container .row .col-xs-5,
    .bg-white.rte .container .row .col-xs-6,
    .bg-white.rte .container .row .col-xs-7,
    .bg-white.rte .container .row .col-xs-8,
    .bg-white.rte .container .row .col-xs-9,
    .bg-white.rte .container .row .col-xs-10,
    .bg-white.rte .container .row .col-xs-11,
    .bg-white.rte .container .row .col-xs-12,
    .bg-white.rte .container .row .col-sm-1,
    .bg-white.rte .container .row .col-sm-2,
    .bg-white.rte .container .row .col-sm-3,
    .bg-white.rte .container .row .col-sm-4,
    .bg-white.rte .container .row .col-sm-5,
    .bg-white.rte .container .row .col-sm-6,
    .bg-white.rte .container .row .col-sm-7,
    .bg-white.rte .container .row .col-sm-8,
    .bg-white.rte .container .row .col-sm-9,
    .bg-white.rte .container .row .col-sm-10,
    .bg-white.rte .container .row .col-sm-11,
    .bg-white.rte .container .row .col-sm-12,
    .bg-white.rte .container .row .col-md-1,
    .bg-white.rte .container .row .col-md-2,
    .bg-white.rte .container .row .col-md-3,
    .bg-white.rte .container .row .col-md-4,
    .bg-white.rte .container .row .col-md-5,
    .bg-white.rte .container .row .col-md-6,
    .bg-white.rte .container .row .col-md-7,
    .bg-white.rte .container .row .col-md-8,
    .bg-white.rte .container .row .col-md-9,
    .bg-white.rte .container .row .col-md-10,
    .bg-white.rte .container .row .col-md-11,
    .bg-white.rte .container .row .col-md-12,
    .bg-white.rte .container .row .col-lg-1,
    .bg-white.rte .container .row .col-lg-2,
    .bg-white.rte .container .row .col-lg-3,
    .bg-white.rte .container .row .col-lg-4,
    .bg-white.rte .container .row .col-lg-5,
    .bg-white.rte .container .row .col-lg-6,
    .bg-white.rte .container .row .col-lg-7,
    .bg-white.rte .container .row .col-lg-8,
    .bg-white.rte .container .row .col-lg-9,
    .bg-white.rte .container .row .col-lg-10,
    .bg-white.rte .container .row .col-lg-11,
    .bg-white.rte .container .row .col-lg-12,
    .bg-white.rte .container .row .col-xl-1,
    .bg-white.rte .container .row .col-xl-2,
    .bg-white.rte .container .row .col-xl-3,
    .bg-white.rte .container .row .col-xl-4,
    .bg-white.rte .container .row .col-xl-5,
    .bg-white.rte .container .row .col-xl-6,
    .bg-white.rte .container .row .col-xl-7,
    .bg-white.rte .container .row .col-xl-8,
    .bg-white.rte .container .row .col-xl-9,
    .bg-white.rte .container .row .col-xl-10,
    .bg-white.rte .container .row .col-xl-11,
    .bg-white.rte .container .row .col-xl-12 {
        padding-right: 2rem;
        padding-left: 2rem;

    }
    .bg-white.rte .container .row .col-xs-1 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-2 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-3 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-4 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-5 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-6 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-7 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-8 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-9 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-10 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-11 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xs-12 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-1 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-2 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-3 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-4 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-5 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-6 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-7 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-8 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-9 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-10 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-11 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-sm-12 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-1 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-2 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-3 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-4 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-5 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-6 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-7 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-8 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-9 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-10 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-11 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-md-12 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-1 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-2 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-3 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-4 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-5 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-6 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-7 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-8 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-9 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-10 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-11 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-lg-12 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-1 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-2 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-3 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-4 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-5 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-6 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-7 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-8 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-9 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-10 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-11 .bg-white.rte .container .row,
    .bg-white.rte .container .row .col-xl-12 .bg-white.rte .container .row {
        margin-left: -2rem;
        margin-right: -2rem;
    }
}

.col-xs {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.col-xs-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-xs-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-xs-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.col-xs-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-xs-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-xs-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-xs-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-xs-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-xs-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.col-xs-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-xs-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-xs-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.col-xs-pull-0 {
    right: auto;
}

.col-xs-pull-1 {
    right: 8.333333%;
}

.col-xs-pull-2 {
    right: 16.666667%;
}

.col-xs-pull-3 {
    right: 25%;
}

.col-xs-pull-4 {
    right: 33.333333%;
}

.col-xs-pull-5 {
    right: 41.666667%;
}

.col-xs-pull-6 {
    right: 50%;
}

.col-xs-pull-7 {
    right: 58.333333%;
}

.col-xs-pull-8 {
    right: 66.666667%;
}

.col-xs-pull-9 {
    right: 75%;
}

.col-xs-pull-10 {
    right: 83.333333%;
}

.col-xs-pull-11 {
    right: 91.666667%;
}

.col-xs-pull-12 {
    right: 100%;
}

.col-xs-push-0 {
    left: auto;
}

.col-xs-push-1 {
    left: 8.333333%;
}

.col-xs-push-2 {
    left: 16.666667%;
}

.col-xs-push-3 {
    left: 25%;
}

.col-xs-push-4 {
    left: 33.333333%;
}

.col-xs-push-5 {
    left: 41.666667%;
}

.col-xs-push-6 {
    left: 50%;
}

.col-xs-push-7 {
    left: 58.333333%;
}

.col-xs-push-8 {
    left: 66.666667%;
}

.col-xs-push-9 {
    left: 75%;
}

.col-xs-push-10 {
    left: 83.333333%;
}

.col-xs-push-11 {
    left: 91.666667%;
}

.col-xs-push-12 {
    left: 100%;
}

.col-xs-offset-1 {
    margin-left: 8.333333%;
}

.col-xs-offset-2 {
    margin-left: 16.666667%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-4 {
    margin-left: 33.333333%;
}

.col-xs-offset-5 {
    margin-left: 41.666667%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-7 {
    margin-left: 58.333333%;
}

.col-xs-offset-8 {
    margin-left: 66.666667%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-10 {
    margin-left: 83.333333%;
}

.col-xs-offset-11 {
    margin-left: 91.666667%;
}

@media (min-width: 480px) {
    .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-pull-1 {
        right: 8.333333%;
    }

    .col-sm-pull-2 {
        right: 16.666667%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-4 {
        right: 33.333333%;
    }

    .col-sm-pull-5 {
        right: 41.666667%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-7 {
        right: 58.333333%;
    }

    .col-sm-pull-8 {
        right: 66.666667%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-10 {
        right: 83.333333%;
    }

    .col-sm-pull-11 {
        right: 91.666667%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-push-1 {
        left: 8.333333%;
    }

    .col-sm-push-2 {
        left: 16.666667%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-4 {
        left: 33.333333%;
    }

    .col-sm-push-5 {
        left: 41.666667%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-7 {
        left: 58.333333%;
    }

    .col-sm-push-8 {
        left: 66.666667%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-10 {
        left: 83.333333%;
    }

    .col-sm-push-11 {
        left: 91.666667%;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-offset-0 {
        margin-left: 0%;
    }

    .col-sm-offset-1 {
        margin-left: 8.333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.666667%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-4 {
        margin-left: 33.333333%;
    }

    .col-sm-offset-5 {
        margin-left: 41.666667%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-7 {
        margin-left: 58.333333%;
    }

    .col-sm-offset-8 {
        margin-left: 66.666667%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-10 {
        margin-left: 83.333333%;
    }

    .col-sm-offset-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 768px) {
    .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-md-pull-0 {
        right: auto;
    }

    .col-md-pull-1 {
        right: 8.333333%;
    }

    .col-md-pull-2 {
        right: 16.666667%;
    }

    .col-md-pull-3 {
        right: 25%;
    }

    .col-md-pull-4 {
        right: 33.333333%;
    }

    .col-md-pull-5 {
        right: 41.666667%;
    }

    .col-md-pull-6 {
        right: 50%;
    }

    .col-md-pull-7 {
        right: 58.333333%;
    }

    .col-md-pull-8 {
        right: 66.666667%;
    }

    .col-md-pull-9 {
        right: 75%;
    }

    .col-md-pull-10 {
        right: 83.333333%;
    }

    .col-md-pull-11 {
        right: 91.666667%;
    }

    .col-md-pull-12 {
        right: 100%;
    }

    .col-md-push-0 {
        left: auto;
    }

    .col-md-push-1 {
        left: 8.333333%;
    }

    .col-md-push-2 {
        left: 16.666667%;
    }

    .col-md-push-3 {
        left: 25%;
    }

    .col-md-push-4 {
        left: 33.333333%;
    }

    .col-md-push-5 {
        left: 41.666667%;
    }

    .col-md-push-6 {
        left: 50%;
    }

    .col-md-push-7 {
        left: 58.333333%;
    }

    .col-md-push-8 {
        left: 66.666667%;
    }

    .col-md-push-9 {
        left: 75%;
    }

    .col-md-push-10 {
        left: 83.333333%;
    }

    .col-md-push-11 {
        left: 91.666667%;
    }

    .col-md-push-12 {
        left: 100%;
    }

    .col-md-offset-0 {
        margin-left: 0%;
    }

    .col-md-offset-1 {
        margin-left: 8.333333%;
    }

    .col-md-offset-2 {
        margin-left: 16.666667%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-4 {
        margin-left: 33.333333%;
    }

    .col-md-offset-5 {
        margin-left: 41.666667%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-7 {
        margin-left: 58.333333%;
    }

    .col-md-offset-8 {
        margin-left: 66.666667%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-10 {
        margin-left: 83.333333%;
    }

    .col-md-offset-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 980px) {
    .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-lg-pull-0 {
        right: auto;
    }

    .col-lg-pull-1 {
        right: 8.333333%;
    }

    .col-lg-pull-2 {
        right: 16.666667%;
    }

    .col-lg-pull-3 {
        right: 25%;
    }

    .col-lg-pull-4 {
        right: 33.333333%;
    }

    .col-lg-pull-5 {
        right: 41.666667%;
    }

    .col-lg-pull-6 {
        right: 50%;
    }

    .col-lg-pull-7 {
        right: 58.333333%;
    }

    .col-lg-pull-8 {
        right: 66.666667%;
    }

    .col-lg-pull-9 {
        right: 75%;
    }

    .col-lg-pull-10 {
        right: 83.333333%;
    }

    .col-lg-pull-11 {
        right: 91.666667%;
    }

    .col-lg-pull-12 {
        right: 100%;
    }

    .col-lg-push-0 {
        left: auto;
    }

    .col-lg-push-1 {
        left: 8.333333%;
    }

    .col-lg-push-2 {
        left: 16.666667%;
    }

    .col-lg-push-3 {
        left: 25%;
    }

    .col-lg-push-4 {
        left: 33.333333%;
    }

    .col-lg-push-5 {
        left: 41.666667%;
    }

    .col-lg-push-6 {
        left: 50%;
    }

    .col-lg-push-7 {
        left: 58.333333%;
    }

    .col-lg-push-8 {
        left: 66.666667%;
    }

    .col-lg-push-9 {
        left: 75%;
    }

    .col-lg-push-10 {
        left: 83.333333%;
    }

    .col-lg-push-11 {
        left: 91.666667%;
    }

    .col-lg-push-12 {
        left: 100%;
    }

    .col-lg-offset-0 {
        margin-left: 0%;
    }

    .col-lg-offset-1 {
        margin-left: 8.333333%;
    }

    .col-lg-offset-2 {
        margin-left: 16.666667%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-4 {
        margin-left: 33.333333%;
    }

    .col-lg-offset-5 {
        margin-left: 41.666667%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-7 {
        margin-left: 58.333333%;
    }

    .col-lg-offset-8 {
        margin-left: 66.666667%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-10 {
        margin-left: 83.333333%;
    }

    .col-lg-offset-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 1260px) {
    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-pull-1 {
        right: 8.333333%;
    }

    .col-xl-pull-2 {
        right: 16.666667%;
    }

    .col-xl-pull-3 {
        right: 25%;
    }

    .col-xl-pull-4 {
        right: 33.333333%;
    }

    .col-xl-pull-5 {
        right: 41.666667%;
    }

    .col-xl-pull-6 {
        right: 50%;
    }

    .col-xl-pull-7 {
        right: 58.333333%;
    }

    .col-xl-pull-8 {
        right: 66.666667%;
    }

    .col-xl-pull-9 {
        right: 75%;
    }

    .col-xl-pull-10 {
        right: 83.333333%;
    }

    .col-xl-pull-11 {
        right: 91.666667%;
    }

    .col-xl-pull-12 {
        right: 100%;
    }

    .col-xl-push-0 {
        left: auto;
    }

    .col-xl-push-1 {
        left: 8.333333%;
    }

    .col-xl-push-2 {
        left: 16.666667%;
    }

    .col-xl-push-3 {
        left: 25%;
    }

    .col-xl-push-4 {
        left: 33.333333%;
    }

    .col-xl-push-5 {
        left: 41.666667%;
    }

    .col-xl-push-6 {
        left: 50%;
    }

    .col-xl-push-7 {
        left: 58.333333%;
    }

    .col-xl-push-8 {
        left: 66.666667%;
    }

    .col-xl-push-9 {
        left: 75%;
    }

    .col-xl-push-10 {
        left: 83.333333%;
    }

    .col-xl-push-11 {
        left: 91.666667%;
    }

    .col-xl-push-12 {
        left: 100%;
    }

    .col-xl-offset-0 {
        margin-left: 0%;
    }

    .col-xl-offset-1 {
        margin-left: 8.333333%;
    }

    .col-xl-offset-2 {
        margin-left: 16.666667%;
    }

    .col-xl-offset-3 {
        margin-left: 25%;
    }

    .col-xl-offset-4 {
        margin-left: 33.333333%;
    }

    .col-xl-offset-5 {
        margin-left: 41.666667%;
    }

    .col-xl-offset-6 {
        margin-left: 50%;
    }

    .col-xl-offset-7 {
        margin-left: 58.333333%;
    }

    .col-xl-offset-8 {
        margin-left: 66.666667%;
    }

    .col-xl-offset-9 {
        margin-left: 75%;
    }

    .col-xl-offset-10 {
        margin-left: 83.333333%;
    }

    .col-xl-offset-11 {
        margin-left: 91.666667%;
    }
}

/*#endregion */
/*Flex box rules for public site only. Putting this here and not in global because the breakpoint for switching to one column 
    differs in the public site.
*/
/* FLEX ORDER */
@media (max-width: 979px) {
    .flex-first-mobile {
        -ms-flex-order: -1;
        order: -1;
    }
}

/* FLEX COL WITH TILE CHILD */
.flex.col-lg-1 > .tile {
    width: 100%;
}

.flex.col-lg-2 > .tile {
    width: 100%;
}

.flex.col-lg-3 > .tile {
    width: 100%;
}

.flex.col-lg-4 > .tile {
    width: 100%;
}

.flex.col-lg-5 > .tile {
    width: 100%;
}

.flex.col-lg-6 > .tile {
    width: 100%;
}

.flex.col-lg-7 > .tile {
    width: 100%;
}

.flex.col-lg-8 > .tile {
    width: 100%;
}

.flex.col-lg-9 > .tile {
    width: 100%;
}

.flex.col-lg-10 > .tile {
    width: 100%;
}

.flex.col-lg-11 > .tile {
    width: 100%;
}

.flex.col-lg-12 > .tile {
    width: 100%;
}

/* ROWS WITH CONDENSED GUTTER
    Only breakpoint for public site grid is LG, 
    Grid only offers 2 or 3 columns 
*/
@media (min-width: 980px) {
    .condensed-gutter-lg.col-lg:first-child, .condensed-gutter-lg.col-lg-1:first-child, .condensed-gutter-lg.col-lg-2:first-child, .condensed-gutter-lg.col-lg-3:first-child, .condensed-gutter-lg.col-lg-4:first-child, .condensed-gutter-lg.col-lg-5:first-child, .condensed-gutter-lg.col-lg-6:first-child, .condensed-gutter-lg.col-lg-7:first-child, .condensed-gutter-lg.col-lg-8:first-child, .condensed-gutter-lg.col-lg-9:first-child, .condensed-gutter-lg.col-lg-10:first-child, .condensed-gutter-lg.col-lg-11:first-child, .condensed-gutter-lg.col-lg-12:first-child {
        padding-left: 5rem;
    }
}

@media (min-width: 980px) {
    .condensed-gutter-lg.col-lg:last-child, .condensed-gutter-lg.col-lg-1:last-child, .condensed-gutter-lg.col-lg-2:last-child, .condensed-gutter-lg.col-lg-3:last-child, .condensed-gutter-lg.col-lg-4:last-child, .condensed-gutter-lg.col-lg-5:last-child, .condensed-gutter-lg.col-lg-6:last-child, .condensed-gutter-lg.col-lg-7:last-child, .condensed-gutter-lg.col-lg-8:last-child, .condensed-gutter-lg.col-lg-9:last-child, .condensed-gutter-lg.col-lg-10:last-child, .condensed-gutter-lg.col-lg-11:last-child, .condensed-gutter-lg.col-lg-12:last-child {
        padding-right: 5rem;
    }
}

@media (min-width: 980px) {
    .condensed-gutter-lg.col-lg, .condensed-gutter-lg.col-lg-1, .condensed-gutter-lg.col-lg-2, .condensed-gutter-lg.col-lg-3, .condensed-gutter-lg.col-lg-4, .condensed-gutter-lg.col-lg-5, .condensed-gutter-lg.col-lg-6, .condensed-gutter-lg.col-lg-7, .condensed-gutter-lg.col-lg-8, .condensed-gutter-lg.col-lg-9, .condensed-gutter-lg.col-lg-10, .condensed-gutter-lg.col-lg-11, .condensed-gutter-lg.col-lg-12 {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

.condensed-gutter-lg {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

@media (min-width: 980px) {
    .condensed-gutter-lg.col-lg-4 {
        padding-right: 0;
        padding-left: 5rem;
    }
}

@media (min-width: 980px) {
    .condensed-gutter-lg.col-lg-4:first-child {
        /*padding-right: 1rem;
        padding-left: 5rem;*/
    }
}

@media (min-width: 980px) {
    .condensed-gutter-lg.col-lg-4:last-child {
        /*padding-left: 1rem;
        padding-right: 5rem;*/
    }
}

@-ms-viewport {
    width: device-width;
}

body {
    color: var(--text-gray);
    background: var(--bg-white);
    margin: 0;
    padding: 0;
}

@media print {
    body {
        color: var(--black);
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

a {
    color: var(--text-link);
    text-decoration: underline;
    -webkit-touch-callout: none;
}

    .hover a:hover, a.active {
        color: var(--text-link-active-extra-dark);
        text-decoration: none;
    }

    a.inactive {
        cursor: default;
    }

@media (min-width: 768px) {
    a[href^='tel:'],
    .hover a[href^='tel:']:hover {
        color: inherit;
        cursor: default;
        text-decoration: none;
    }
}

.hover a:focus,
.hover button:focus {
    outline: 1px dotted var(--focus-outline);
    outline-offset: -2px;
}

.hover a:active,
.hover button:active,
.hover a.active,
.hover button.active {
    outline: none !important;
}

.hover a.active,
.hover button.active {
    transition: none !important;
}

table {
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
}

td,
th {
    padding: 0;
    text-align: left;
    vertical-align: top;
    border-width: 0;
}

.simple-table {
    overflow: auto;
    width: 100%;
}

    .simple-table table {
        border: 1px solid #dededf;
        height: 100%;
        width: 100%;
        table-layout: auto;
        border-collapse: collapse;
        border-spacing: 1px;
        text-align: left;
    }

    .simple-table caption {
        caption-side: top;
        text-align: left;
    }

    .simple-table th {
        border: 1px solid #dededf;
        background-color: #53565a;
        color: #fff;
        padding: 20px;
        text-transform: uppercase;
    }

    .simple-table td {
        border: 1px solid #dededf;
        padding: 20px;
    }

    .simple-table tr:nth-child(even) td {
        background-color: #ffffff;
        color: #000000;
    }

    .simple-table tr:nth-child(odd) td {
        background-color: #ededed;
        color: #000000;
    }

form,
fieldset,
legend {
    margin: 0;
}

fieldset {
    padding: 0;
    border: 0;
}

legend {
    color: var(--text-gray);
    background: var(--bg-white);
    display: block;
    padding: 0;
    margin-bottom: .7143em;
    line-height: inherit;
    border: 0;
}

button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button {
    overflow: visible;
    background: none;
    border: none;
    padding: 0;
}

button,
select {
    text-transform: none;
}

button,
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

input,
button {
    line-height: normal;
}

    input[type=number] {
        -moz-appearance: textfield;
    }

        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    input[type=text]::-ms-clear {
        display: none;
    }

    input::-webkit-input-placeholder {
        color: var(--text-light-gray);
        font-style: normal;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 1.4rem;
    }

@media print, (min-width: 768px) {
    input::-webkit-input-placeholder {
        font-size: 1.2rem;
    }
}

input:-moz-placeholder {
    color: var(--text-light-gray);
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

@media print, (min-width: 768px) {
    input:-moz-placeholder {
        font-size: 1.2rem;
    }
}

input::-moz-placeholder {
    color: var(--text-light-gray);
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

@media print, (min-width: 768px) {
    input::-moz-placeholder {
        font-size: 1.2rem;
    }
}

input:-ms-input-placeholder {
    color: var(--text-light-gray);
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

@media print, (min-width: 768px) {
    input:-ms-input-placeholder {
        font-size: 1.2rem;
    }
}

html {
    font-size: 10px;
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-size: 1.6rem;
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

@media (min-width: 768px) {
    body {
        font-size: 1.6rem;
    }
}

@media print {
    body {
        font-size: 9pt;
    }
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

h1, .looks-like-h1,
h2,
.looks-like-h2,
h3,
.looks-like-h3,
h4,
.looks-like-h4,
h5,
h6 {
    text-rendering: optimizelegibility;
    color: inherit;
}

@media print {
    h1, .looks-like-h1,
    h2,
    .looks-like-h2,
    h3,
    .looks-like-h3,
    h4,
    .looks-like-h4,
    h5,
    h6 {
        break-after: avoid;
    }
}

h1, .looks-like-h1 {
    font-family: "museo-slab", "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.5rem;
}

p + h1, p + .looks-like-h1 {
    margin-top: 2.5rem;
}

@media print, (min-width: 768px) {
    h1, .looks-like-h1 {
        font-size: 6rem;
        margin-bottom: 1.5rem;
    }

    p + h1, p + .looks-like-h1 {
        margin-top: 2.5rem;
    }
}


h2,
.looks-like-h2 {
    font-family: "museo-slab", "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 1.75rem;
}

p + h2, p + .looks-like-h2 {
    margin-top: 2rem;
}

@media print, (min-width: 768px) {

    h2,
    .looks-like-h2 {
        font-size: 3.3rem;
        margin-bottom: 1.75rem;
    }

    p + h2, p + .looks-like-h2 {
        margin-top: 2rem;
    }
}


h3,
.looks-like-h3 {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
}

p + h3, p + .looks-like-h3 {
    margin-top: 2rem;
}

@media print, (min-width: 768px) {

    h3,
    .looks-like-h3 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    p + h3, p + .looks-like-h3 {
        margin-top: 2rem;
    }
}


h4,
.looks-like-h4 {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
}

p + h4, p + .looks-like-h4 {
    margin-top: 2rem;
}

@media print, (min-width: 768px) {

    h4,
    .looks-like-h4 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    p + h4, p + .looks-like-h4 {
        margin-top: 2rem;
    }
}

h5 {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
}

p + h5 {
    margin-top: 2rem;
}

@media print, (min-width: 768px) {
    h5 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    p + h5 {
        margin-top: 2rem;
    }
}

h6 {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
}

p + h6 {
    margin-top: 2rem;
}

@media print, (min-width: 768px) {
    h6 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    p + h6 {
        margin-top: 2rem;
    }
}

p {
    margin: 0 0 2rem;
    padding: 0;
}

@media print, (min-width: 768px) {
    p {
        margin: 0 0 2rem;
    }
}

/*BLOCKQUOTE*/
blockquote {
    margin: 2rem;
    border: none;
    color: var(--text-gray);
}

@media print, (min-width: 768px) {
    blockquote {
        margin: 2rem;
    }
}

/*ABBREVIATION*/
/*does not display on small + touchable screens*/
abbr[title]:after {
    content: "";
}

/*displays only on hover, aria hidden true*/
/*abbreviation indicated by a small dotted line under the text; on hover, the cursor turns into a question mark*/
@media (min-width: 980px) {
    abbr[title] {
        border-bottom: 1px dotted var(--border-gray-80);
        cursor: help;
    }
}

.txt-xxsmall {
    font-size: 1.1rem !important;
}

.txt-xsmall, .txt-caps-xsmall {
    font-size: 1.2rem !important;
}

small, .txt-small, .txt-caps-small {
    font-size: 1.4rem !important;
}

.txt-default-size {
    font-size: 1.6rem !important;
}

.txt-large {
    font-size: 1.8rem !important;
}

.txt-xlarge {
    font-size: 2.4rem !important;
}

.txt-xxlarge {
    font-size: 3rem !important;
}

@media print, (min-width: 768px) {
    .txt-xxsmall {
        font-size: 1.1rem !important;
    }

    .txt-xsmall, .txt-caps-xsmall {
        font-size: 1.2rem !important;
    }

    small, .txt-small, .txt-caps-small {
        font-size: 1.4rem !important;
    }

    .txt-default-size {
        font-size: 1.6rem !important;
    }

    .txt-large {
        font-size: 1.8rem !important;
    }

    .txt-xlarge {
        font-size: 3.2rem !important;
    }

    .txt-xxlarge {
        font-size: 3.2rem !important;
    }
}

.txt-bold {
    font-weight: 700 !important;
    font-style: normal !important;
}

.txt-semibold {
    font-weight: 500 !important;
    font-style: normal !important;
}

.txt-normal {
    font-weight: 400 !important;
    font-style: normal !important;
}

.txt-light {
    font-weight: 300 !important;
    font-style: normal !important;
}

.txt-italic {
    font-style: italic !important;
}

.txt-center, .txt-center-xs {
    text-align: center !important;
}

@media print, (min-width: 480px) {
    .txt-center-sm {
        text-align: center !important;
    }
}

@media print, (min-width: 768px) {
    .txt-center-md {
        text-align: center !important;
    }
}

@media (min-width: 980px) {
    .txt-center-lg {
        text-align: center !important;
    }
}

@media print, (min-width: 1260px) {
    .txt-center-xl {
        text-align: center !important;
    }
}

.txt-left, .txt-left-xs {
    text-align: left !important;
}

@media print, (min-width: 480px) {
    .txt-left-sm {
        text-align: left !important;
    }
}

@media print, (min-width: 768px) {
    .txt-left-md {
        text-align: left !important;
    }
}

@media (min-width: 980px) {
    .txt-left-lg {
        text-align: left !important;
    }
}

@media print, (min-width: 1260px) {
    .txt-left-xl {
        text-align: left !important;
    }
}

.txt-right, .txt-right-xs {
    text-align: right !important;
}

@media print, (min-width: 480px) {
    .txt-right-sm {
        text-align: right !important;
    }
}

@media print, (min-width: 768px) {
    .txt-right-md {
        text-align: right !important;
    }
}

@media (min-width: 980px) {
    .txt-right-lg {
        text-align: right !important;
    }
}

@media print, (min-width: 1260px) {
    .txt-right-xl {
        text-align: right !important;
    }
}

.txt-caps, .txt-caps-xsmall, .txt-caps-small {
    text-transform: uppercase !important;
    letter-spacing: 1px;
}

.txt-transform-none {
    text-transform: none !important;
}

.txt-bottom,
.txt-bottom th,
.txt-bottom td {
    vertical-align: bottom !important;
}

.txt-top,
.txt-top th,
.txt-top td {
    vertical-align: top !important;
}

.txt-middle,
.txt-middle th,
.txt-middle td {
    vertical-align: middle !important;
}

.txt-line-normal {
    line-height: normal !important;
}

.txt-line-1 {
    line-height: 1em !important;
}

.txt-breakword {
    word-wrap: break-word;
}

.txt-overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}

/*
    ul      An unorderd list with disc bullet points    
    ol      An ordered list with numbered items
    .no-indent      A list (ordered or unordered) without a left indent
    .no-bullet      An unordered list without bullets and without a left indent
    .lower-alpha    An ordered list with lower-alpha numbering
    .spaced         A list (ordered or unordered) with extra space under each list item

*/
ul,
ol {
    margin: 0 0 2rem 2rem;
    padding: 0;
}

@media print, (min-width: 768px) {
    ul,
    ol {
        margin: 0 0 2rem 4rem;
        padding: 0;
    }
}

ul.no-indent,
ol.no-indent {
    margin-left: 1.5rem;
}

ul.spaced > li,
ol.spaced > li {
    padding-bottom: 0.7143em;
}

ul {
    list-style: disc;
}

    ul.no-bullet {
        list-style: none;
        margin-left: 0;
    }

ol {
    list-style: decimal;
}

    ol.lower-alpha {
        list-style-type: lower-alpha;
    }

    ul ul,
    ul ol,
    ol ol,
    ol ul {
        margin-bottom: 0;
    }

.indent, .indent-xs {
    margin-left: 4rem !important;
}

@media print, (min-width: 480px) {
    .indent-sm {
        margin-left: 4rem !important;
    }
}

@media print, (min-width: 768px) {
    .indent-md {
        margin-left: 4rem !important;
    }
}

@media (min-width: 980px) {
    .indent-lg {
        margin-left: 4rem !important;
    }
}

@media (min-width: 1260px) {
    .indent-xl {
        margin-left: 4rem !important;
    }
}

/* ASTERISKS */
/*align a single line of text with an asterisk*/
.asterisk-container {
    position: relative;
    top: -4px;
}

.asterisk {
    font-weight: bold;
    font-size: 2.4rem;
    position: relative;
    top: 4px;
    line-height: 1;
}

/*
    .currency           A container to hold formatted currency with a small dollar sign and elevated cents
                        [Module parent]
    .currency_symbol    A container for the dollar symbol
                        [Child of .currency]
    .currency_sign      A container for the sign - positive or negative
                        [Child of .currency]
    .currency_dollars   A container for the dollars
                        [Child of .currency]
    .currency_cents     A container for the cents 
                        [Child of .currency]
    .currency_label     A container for the label 
                        [Child of .currency.large]

    Example markup:

    <span class="currency" aria-hidden="true">
        <span class="currency_symbol">$</span>
        <span class="currency_dollars">500</span>
        <span class="currency_cents">00</span>
        <span class="currency_label">Avail<span class="screen-reader-only">able</span></span>
    </span>
    <span class="screen-reader-only">$500.00</span>

    */
.currency_symbol, .currency_sign, .currency_cents, .currency.large .currency_label {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
    position: relative;
}

.currency_symbol, .currency_cents, .currency.large .currency_label {
    font-size: 1.4rem;
}

@media print, (min-width: 768px) {
    .currency_symbol, .currency_cents, .currency.large .currency_label {
        font-size: 1.2rem;
    }
}

.currency.large .currency_symbol, .currency.large .currency_cents {
    font-size: 1.5rem;
}

@media print, (min-width: 768px) {
    .currency.large .currency_symbol, .currency.large .currency_cents {
        font-size: 2rem;
    }
}

.currency {
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
    font-size: 2rem;
}

@media print, (min-width: 768px) {
    .currency {
        font-size: 1.8rem;
    }
}

.currency.large {
    font-size: 2.6rem;
}

@media print, (min-width: 768px) {
    .currency.large {
        font-size: 3.2rem;
    }
}

.currency_symbol {
    top: 4px;
    margin-right: -4px;
    /* scoot closer to the dollars */
}

@media print, (min-width: 768px) {
    .currency_symbol {
        margin-right: -2px;
    }
}

.currency.large .currency_symbol {
    top: 5px;
}

@media print, (min-width: 768px) {
    .currency.large .currency_symbol {
        top: 7px;
        margin-right: -6px;
    }
}

.currency_sign {
    font-size: 1.6rem;
    top: 3px;
    margin-right: -1px;
    /* scoot closer to the dollars */
    min-width: .5em;
    /* make the width more even whether it's + or -*/
}

@media print, (min-width: 768px) {
    .currency_sign {
        font-size: 1.6rem;
    }
}

.currency_cents {
    top: 3px;
    margin-left: -3px;
    /* scoot closer to the dollars */
}

.currency.large .currency_cents {
    top: 4px;
    margin-left: -5px;
}

@media print, (min-width: 768px) {
    .currency.large .currency_cents {
        top: 6px;
    }
}

.currency.large .currency_dollars {
    font-weight: 300;
}

.currency.large .currency_label {
    text-transform: uppercase;
    letter-spacing: 1px;
    top: 4px;
}

@media print, (min-width: 768px) {
    .currency.large .currency_label {
        top: 8px;
    }
}

/*
    .date               A styled date with a larger month and day and smaller year
                        [Module parent]

    .date_month-day     The month and day, i.e. Jan 4
                        [Child of .date]

    .date_year          The year, i.e. 1980
                        [Child of .date]


    Example markup:
    <div class="date">
        <div class="date_month-day">Jan 4</div>
        <div class="date_year">2017</div>
    </div>

   */
.date {
    line-height: normal;
    padding-top: .1em;
    white-space: nowrap;
}

.date_month-day {
    display: inline;
    font-size: 1.8rem;
}

@media print, (min-width: 768px) {
    .date_month-day {
        display: block;
        font-size: 1.8rem;
    }
}

.date_year {
    display: inline;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-light-gray);
}

@media print, (min-width: 768px) {
    .date_year {
        display: block;
        font-size: 1.2rem;
    }
}

.mini-label {
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--text-gray-35);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media print, (min-width: 768px) {
    .mini-label {
        font-size: 1.2rem;
    }
}

.mini-heading {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-gray-35);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media print, (min-width: 768px) {
    .mini-heading {
        font-size: 1.4rem;
    }
}

/*#region TEXTCOLORS BRAND REFRESH 2018*/
.txt-white,
.txt-white a,
.txt-white a.active,
.hover .txt-white a:hover,
body a.txt-white,
body a.txt-white.active,
body.hover a.txt-white:hover {
    color: var(--text-white);
}

.txt-white-reversed,
.txt-white-reversed a,
.txt-white-reversed a.active,
.hover .txt-white-reversed a:hover,
body a.txt-white-reversed,
body a.txt-white-reversed.active,
body.hover a.txt-white-reversed:hover {
    color: var(--text-white-opacity-85);
}

.txt-primary,
.txt-primary a,
.txt-primary a.active,
.hover .txt-primary a:hover,
body a.txt-primary,
body a.txt-primary.active,
body.hover a.txt-primary:hover {
    color: var(--text-primary);
}

.txt-link,
.txt-link a,
body a.txt-link {
    color: var(--text-link);
}

.bg-light-gray .txt-link, .bg-light-gray
.txt-link a, .bg-light-gray
body a.txt-link {
    color: var(--text-link-dark);
}

.txt-link a.active,
.hover .txt-link a:hover,
body a.txt-link.active,
body.hover a.txt-link:hover {
    color: var(--text-link-active-extra-dark);
}

a.txt-link,
.txt-link a {
    text-decoration: none;
    border-bottom: 1px solid var(--border-light-gray);
}

    a.txt-link:hover, a.txt-link:focus, a.txt-link:active, a.txt-link.active,
    .txt-link a:hover,
    .txt-link a:focus,
    .txt-link a:active,
    .txt-link a.active {
        border-bottom: 1px solid transparent;
    }

.txt-link-dark a.active,
.hover .txt-link-dark a:hover,
body a.txt-link-dark.active,
body.hover a.txt-link-dark:hover {
    color: var(--text-link-active-extra-dark);
}

a.txt-link-dark,
.txt-link-dark a {
    text-decoration: none;
    border-bottom: 1px solid var(--border-med-gray);
    color: var(--text-link-dark);
}

    a.txt-link-dark:hover, a.txt-link-dark:focus, a.txt-link-dark:active, a.txt-link-dark.active,
    .txt-link-dark a:hover,
    .txt-link-dark a:focus,
    .txt-link-dark a:active,
    .txt-link-dark a.active {
        border-bottom: 1px solid transparent;
    }

.txt-gray,
.txt-gray a,
.txt-gray a.active,
.hover .txt-gray a:hover,
body a.txt-gray,
body a.txt-gray.active,
.hover a.txt-gray:hover {
    color: var(--text-gray);
}

.txt-med-gray,
.txt-med-gray a,
.txt-med-gray a.active,
.hover .txt-med-gray a:hover,
body a.txt-med-gray,
body a.txt-med-gray.active,
body.hover a.txt-med-gray:hover {
    color: var(--text-med-gray);
}

.txt-med-gray-reversed,
.txt-med-gray-reversed a,
.txt-med-gray-reversed a.active,
.hover .txt-med-gray-reversed a:hover,
body a.txt-med-gray-reversed,
body a.txt-med-gray-reversed.active,
body.hover a.txt-med-gray-reversed:hover {
    color: var(--text-white-opacity-70);
}

.txt-light-gray,
.txt-light-gray a,
.txt-light-gray a.active,
.hover .txt-light-gray a:hover,
body a.txt-light-gray,
body a.txt-light-gray.active,
.hover a.txt-light-gray:hover {
    color: var(--text-light-gray);
}

.txt-light-gray-reversed,
.txt-light-gray-reversed a,
.txt-light-gray-reversed a.active,
.hover .txt-light-gray-reversed a:hover,
body a.txt-light-gray-reversed,
body a.txt-light-gray-reversed.active,
body.hover a.txt-light-gray-reversed:hover {
    color: var(--text-white-opacity-50);
}

.txt-faint-gray,
.txt-faint-gray a,
.txt-faint-gray a.active,
.hover .txt-faint-gray a:hover,
body a.txt-faint-gray,
body a.txt-faint-gray.active,
body.hover a.txt-faint-gray:hover {
    color: var(--text-faint-gray);
}

.txt-error,
.txt-error a,
.txt-error a.active,
.hover .txt-error a:hover,
body a.txt-error,
body a.txt-error.active,
body.hover a.txt-error:hover {
    color: var(--text-error);
}

.icon.txt-error:before {
    color: var(--text-error);
}

.txt-success,
.txt-success a,
.txt-success a.active,
.hover .txt-success a:hover,
body a.txt-success,
body a.txt-success.active,
body.hover a.txt-success:hover {
    color: var(--text-success);
}

.icon.txt-success:before {
    color: var(--text-success);
}

.txt-warn,
.txt-warn a,
.txt-warn a.active,
.hover .txt-warn a:hover,
body a.txt-warn,
body a.txt-warn.active,
body.hover a.txt-warn:hover {
    color: var(--text-warn);
}

.icon.txt-warn:before {
    color: var(--text-warn);
}

.txt-info,
.txt-info a,
.txt-info a.active,
.hover .txt-info a:hover,
body a.txt-info,
body a.txt-info.active,
body.hover a.txt-info:hover {
    color: var(--text-info);
}

.bg-light-gray .txt-info, .bg-light-gray
.txt-info a, .bg-light-gray
.txt-info a.active, .bg-light-gray
.hover .txt-info a:hover, .bg-light-gray
body a.txt-info, .bg-light-gray
body a.txt-info.active, .bg-light-gray
body.hover a.txt-info:hover {
    color: var(--text-link-dark);
}

.icon.txt-info:before {
    color: var(--text-info);
}

.hover .txt-active-white:hover,
body.hover a.txt-active-white:hover,
.hover a:hover .txt-active-white,
.hover .txt-active-white:focus,
.hover a:focus .txt-active-white,
.hover .txt-active-white:active,
.hover a:active .txt-active-white,
.txt-active-white.active,
body a.txt-active-white.active,
.active .txt-active-white {
    color: var(--text-white);
}

/*#endregion */
.bg-error {
    background-color: var(--bg-error) !important;
}

.bg-warn {
    background-color: var(--bg-warn) !important;
}

.bg-info {
    background-color: var(--bg-info) !important;
}

    .hover .bg-info.clickable:hover, .bg-info.clickable.active {
        background-color: var(--bg-info-light) !important;
    }

.bg-faint-gray {
    background-color: var(--bg-faint-gray) !important;
}

.bg-light-gray {
    background-color: var(--bg-light-gray) !important;
}

.bg-med-gray {
    background-color: var(--bg-med-gray) !important;
}

.bg-gray {
    background-color: var(--bg-gray) !important;
}

    .hover .bg-gray.clickable:hover, .bg-gray.clickable.active {
        background-color: var(--bg-dark-gray) !important;
    }

.bg-white {
    background-color: var(--bg-white) !important;
}

.bg-dark-gray {
    background-color: var(--bg-dark-gray) !important;
}

.bg-success {
    background-color: var(--bg-success) !important;
}

.border-error {
    border: 0.1429em solid var(--border-error) !important;
}

.border-success {
    border: 0.1429em solid var(--border-success) !important;
}

.border-warn {
    border: 0.1429em solid var(--border-warn) !important;
}

.border-info {
    border: 0.1429em solid var(--border-info) !important;
}



@media print, (min-width: 768px) {
    .row {
        margin-left: -2px;
        margin-right: -2px;

        .col- {
        }
    }

}

/*ROUNDED CORNERS
    r = round
    t = top
    b = bottom
    r = right
    l = left
    a = all
*/
.corner-rtr,
.corner-rt,
.corner-rr,
.corner-ra {
    border-top-right-radius: 0.1875em !important;
    /* 3px/16px */
}

@media (min-width: 768px) {
    .corner-rtr-medium,
    .corner-rt-medium,
    .corner-rr-medium,
    .corner-ra-medium {
        border-top-right-radius: 0.1875em !important;
        /* 3px/16px */
    }
}

.corner-rtl,
.corner-rt,
.corner-rl,
.corner-ra {
    border-top-left-radius: 0.1875em !important;
    /* 3px/16px */
}

@media (min-width: 768px) {
    .corner-rtl-medium,
    .corner-rt-medium,
    .corner-rl-medium,
    .corner-ra-medium {
        border-top-left-radius: 0.1875em !important;
        /* 3px/16px */
    }
}

.corner-rbr,
.corner-rb,
.corner-rr,
.corner-ra {
    border-bottom-right-radius: 0.1875em !important;
    /* 3px/16px */
}

@media (min-width: 768px) {
    .corner-rbr-medium,
    .corner-rb-medium,
    .corner-rr-medium,
    .corner-ra-medium {
        border-bottom-right-radius: 0.1875em !important;
        /* 3px/16px */
    }
}

.corner-rbl,
.corner-rb,
.corner-rl,
.corner-ra {
    border-bottom-left-radius: 0.1875em !important;
    /* 3px/16px */
}

@media (min-width: 768px) {
    .corner-rbl-medium,
    .corner-rb-medium,
    .corner-rl-medium,
    .corner-ra-medium {
        border-bottom-left-radius: 0.1875em !important;
        /* 3px/16px */
    }
}

/*
    Example markup:

    <a id="SomeId" class="anchor"></a>

*/
.anchor {
    display: block;
    position: relative;
    top: -7rem;
    visibility: hidden;
}

@media (min-width: 768px) {
    .anchor {
        top: -15rem;
    }
}

.screen-reader-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* SKIP TO MAIN LINK
    .skip-to-main   A "skip to main content" link for accessibility
                    First link on the page for screen readers and keyboard navigation
                    Invisible until it receives focus
                    [Extends .screen-reader-only]

*/
a.skip-to-main {
    display: block;
    top: -2em;
    transition: top .25s ease-in-out;
}

.hover a.skip-to-main:focus {
    top: 0;
    left: 10px;
    z-index: 9900;
    width: auto;
    height: auto;
    clip: auto;
    padding: .5em 2em;
    margin: 0;
    background-color: var(--bg-gray-34);
    outline-color: var(--focus-outline-white-opacity-70);
    color: var(--text-white);
    text-decoration: none;
    border-bottom-right-radius: .2143em;
    border-bottom-left-radius: .2143em;
}

img {
    border: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
}

    img.deco {
        border: 3px solid var(--border-light-gray);
    }

.img-responsive {
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.img-shadowed {
    border: 1px solid var(--box-shadow-no-opacity);
    box-shadow: 0 0 1px 0 var(--box-shadow);
}

.img-drop-shadow {
    filter: drop-shadow(2px 2px 2px var(--filter-drop-shadow));
}

.img-full-width {
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
    text-align: center;
}

.img-illustration {
    max-height: 100px;
    width: auto;
    margin: 1em auto;
    text-decoration: none;
    border-bottom: 0;
}

/* BREAKPOINT DETECTION
    

    #BreakpointDetection    A container for empty elements which are set to display:inline; or display:none; depending on the breakpoint.
                            Used by javascript to detect which CSS breakpoint is being displayed.

    .bp-sm                  Set to display:inline; at the SM breakpoint and above
    .bp-md                  Set to display:inline; at the MD breakpoint and above
    .bp-lg                  Set to display:inline; at the LG breakpoint and above
    .bp-xl                  Set to display:inline; at the XL breakpoint and above
    
*/
#BreakpointDetection {
    position: absolute;
    /*remove from flow of document so it doesn't take up space */
    height: 1px;
    width: 1px;
    overflow: hidden;
    bottom: 0;
    left: 0;
}

.bp-sm, .bp-md, .bp-lg, .bp-xl {
    display: none;
}

@media print, (min-width: 480px) {
    .bp-sm {
        display: inline;
    }
}

@media print, (min-width: 768px) {
    .bp-md {
        display: inline;
    }
}

@media (min-width: 980px) {
    .bp-lg {
        display: inline;
    }
}

@media (min-width: 1260px) {
    .bp-xl {
        display: inline;
    }
}

/* VISIBILITY 
    .invisible  Used to hide an element while preserving the amount of space it takes up.
    .hidden     Used to hide an element while not preserving the amount of space it takes up.  
                
*/
.invisible {
    visibility: hidden !important;
}

.hidden {
    display: none !important;
}

.visible-xs,
.visible-inline-xs {
    display: none !important;
}

@media screen and (max-width: 479px) {
    .visible-xs {
        display: block !important;
    }

    .visible-inline-xs {
        display: inline !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .visible-xs.visible-sm {
        display: block !important;
    }

    .visible-inline-xs.visible-inline-sm {
        display: inline !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .visible-xs.visible-md {
        display: block !important;
    }

    .visible-inline-xs.visible-inline-md {
        display: inline !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .visible-xs.visible-lg {
        display: block !important;
    }

    .visible-inline-xs.visible-inline-lg {
        display: inline !important;
    }
}

@media screen and (min-width: 1260px) {
    .visible-xs.visible-xl {
        display: block !important;
    }

    .visible-inline-xs.visible-inline-xl {
        display: inline !important;
    }
}

.visible-sm,
.visible-inline-sm {
    display: none !important;
}

@media screen and (max-width: 479px) {
    .visible-sm.visible-xs {
        display: block !important;
    }

    .visible-inline-sm.visible-inline-xs {
        display: inline !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .visible-sm {
        display: block !important;
    }

    .visible-inline-sm {
        display: inline !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .visible-sm.visible-md {
        display: block !important;
    }

    .visible-sm-inline.visible-md-inline {
        display: inline !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .visible-sm.visible-lg {
        display: block !important;
    }

    .visible-sm-inline.visible-lg-inline {
        display: inline !important;
    }
}

@media screen and (min-width: 1260px) {
    .visible-sm.visible-xl {
        display: block !important;
    }

    .visible-inline-sm.visible-inline-xl {
        display: inline !important;
    }
}

.visible-md,
.visible-inline-md {
    display: none !important;
}

@media screen and (max-width: 479px) {
    .visible-md.visible-xs {
        display: block !important;
    }

    .visible-inline-md.visible-inline-xs {
        display: inline !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .visible-md.visible-sm {
        display: block !important;
    }

    .visible-inline-md.visible-inline-sm {
        display: inline !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .visible-md {
        display: block !important;
    }

    .visible-inline-md {
        display: inline !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .visible-md.visible-lg {
        display: block !important;
    }

    .visible-inline-md.visible-inline-lg {
        display: inline !important;
    }
}

@media screen and (min-width: 1260px) {
    .visible-md.visible-xl {
        display: block !important;
    }

    .visible-inline-md.visible-inline-xl {
        display: inline !important;
    }
}

.visible-lg,
.visible-inline-lg {
    display: none !important;
}

@media screen and (max-width: 479px) {
    .visible-lg.visible-xs {
        display: block !important;
    }

    .visible-inline-lg.visible-inline-xs {
        display: inline !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .visible-lg.visible-sm {
        display: block !important;
    }

    .visible-inline-lg.visible-inline-sm {
        display: inline !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .visible-lg.visible-md {
        display: block !important;
    }

        .visible-lg.visible-md.inline {
            display: inline !important;
        }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .visible-lg {
        display: block !important;
    }

    .visible-inline-lg {
        display: inline !important;
    }
}

@media screen and (min-width: 1260px) {
    .visible-lg.visible-xl {
        display: block !important;
    }

    .visible-inline-lg.visible-inline-xl {
        display: inline !important;
    }
}

.visible-xl,
.visible-inline-xl {
    display: none !important;
}

@media screen and (max-width: 479px) {
    .visible-xl.visible-xs {
        display: block !important;
    }

    .visible-inline-xl.visible-inline-xs {
        display: inline !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .visible-xl.visible-sm {
        display: block !important;
    }

    .visible-inline-xl.visible-inline-sm {
        display: inline !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .visible-xl.visible-md {
        display: block !important;
    }

    .visible-inline-xl.visible-inline-md {
        display: inline !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .visible-xl.visible-lg {
        display: block !important;
    }

    .visible-inline-xl.visible-inline-lg {
        display: inline !important;
    }
}

@media screen and (min-width: 1260px) {
    .visible-xl {
        display: block !important;
    }

    .visible-inline-xl {
        display: inline !important;
    }
}

/* Visible Mobile */
.visible-mobile,
.visible-inline-mobile {
    display: none !important;
}

@media screen and (max-width: 479px) {
    .visible-mobile,
    .visible-mobile.visible-xs {
        display: block !important;
    }

    .visible-inline-mobile,
    .visible-inline-mobile.visible-inline-xs {
        display: inline !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .visible-mobile,
    .visible-mobile.visible-sm {
        display: block !important;
    }

    .visible-inline-mobile,
    .visible-inline-mobile.visible-inline-sm {
        display: inline !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .visible-mobile.visible-md {
        display: block !important;
    }

    .visible-inline-mobile.visible-inline-md {
        display: inline !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .visible-mobile.visible-lg {
        display: block !important;
    }

    .visible-inline-mobile.visible-inline-lg {
        display: inline !important;
    }
}

@media screen and (min-width: 1260px) {
    .visible-mobile.visible-xl {
        display: block !important;
    }

    .visible-inline-mobile.visible-inline-xl {
        display: inline !important;
    }
}

.hidden-xs {
    display: block !important;
}

.hidden-inline-xs {
    display: inline !important;
}

@media screen and (max-width: 479px) {
    .hidden-xs,
    .hidden-inline-xs {
        display: none !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden-xs.hidden-sm,
    .hidden-inline-xs.hidden-inline-sm {
        display: none !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .hidden-xs.hidden-md,
    .hidden-inline-xs.hidden-inline-md {
        display: none !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .hidden-xs.hidden-lg,
    .hidden-inline-xs.hidden-inline-lg {
        display: none !important;
    }
}

@media screen and (min-width: 1260px) {
    .hidden-xs.hidden-xl,
    .hidden-inline-xs.hidden-inline-xl {
        display: none !important;
    }
}

.hidden-sm {
    display: block !important;
}

.hidden-inline-sm {
    display: inline !important;
}

@media screen and (max-width: 479px) {
    .hidden-sm.hidden-xs,
    .hidden-inline-sm.hidden-inline-xs {
        display: none !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden-sm,
    .hidden-inline-sm {
        display: none !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .hidden-sm.hidden-md,
    .hidden-inline-sm.hidden-inline-md {
        display: none !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .hidden-sm.hidden-lg,
    .hidden-inline-sm.hidden-inline-lg {
        display: none !important;
    }
}

@media screen and (min-width: 1260px) {
    .hidden-sm.hidden-xl,
    .hidden-inline-sm.hidden-inline-xl {
        display: none !important;
    }
}

.hidden-md {
    display: block !important;
}

.hidden-inline-md {
    display: inline !important;
}

@media screen and (max-width: 479px) {
    .hidden-md.hidden-xs,
    .hidden-inline-md.hidden-inline-xs {
        display: none !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden-md.hidden-sm,
    .hidden-inline-md.hidden-inline-sm {
        display: none !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .hidden-md,
    .hidden-inline-md {
        display: none !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .hidden-md.hidden-lg,
    .hidden-inline-md.hidden-inline-lg {
        display: none !important;
    }
}

@media screen and (min-width: 1260px) {
    .hidden-md.hidden-xl,
    .hidden-inline-md.hidden-inline-xl {
        display: none !important;
    }
}

.hidden-lg {
    display: block !important;
}

.hidden-inline-lg {
    display: inline !important;
}

@media screen and (max-width: 479px) {
    .hidden-lg.hidden-xs,
    .hidden-inline-lg.hidden-inline-xs {
        display: none !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden-lg.hidden-sm,
    .hidden-inline-lg.hidden-inline-sm {
        display: none !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .hidden-lg.hidden-md,
    .hidden-inline-lg.hidden-inline-md {
        display: none !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .hidden-lg,
    .hidden-inline-lg {
        display: none !important;
    }
}

@media screen and (min-width: 1260px) {
    .hidden-lg.hidden-xl,
    .hidden-inline-lg.hidden-inline-xl {
        display: none !important;
    }
}

.hidden-xl {
    display: block !important;
}

.hidden-inline-xl {
    display: inline !important;
}

@media screen and (max-width: 479px) {
    .hidden-xl.hidden-xs,
    .hidden-inline-xl.hidden-inline-xs {
        display: none !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden-xl.hidden-sm,
    .hidden-inline-xl.hidden-inline-sm {
        display: none !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .hidden-xl.hidden-md,
    .hidden-inline-xl.hidden-inline-md {
        display: none !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .hidden-xl.hidden-lg,
    .hidden-inline-xl.hidden-inline-lg {
        display: none !important;
    }
}

@media screen and (min-width: 1260px) {
    .hidden-xl,
    .hidden-inline-xl {
        display: none !important;
    }
}

/* hidden mobile*/
.hidden-mobile {
    display: block !important;
}

.hidden-inline-mobile {
    display: inline !important;
}

@media screen and (max-width: 767px) {
    .hidden-mobile,
    .hidden-inline-mobile {
        display: none !important;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    .hidden-mobile,
    .hidden-inline-mobile,
    .hidden-mobile.hidden-sm,
    .hidden-inline-mobile.hidden-inline-sm {
        display: none !important;
    }
}

@media print, (min-width: 768px) and (max-width: 979px) {
    .hidden-mobile.hidden-md,
    .hidden-inline-mobile.hidden-inline-md {
        display: none !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1259px) {
    .hidden-mobile.hidden-lg,
    .hidden-inline-mobile.hidden-inline-lg {
        display: none !important;
    }
}

@media screen and (min-width: 1260px) {
    .hidden-mobile.hidden-xl,
    .hidden-inline-mobile.hidden-inline-xl {
        display: none !important;
    }
}

/* .table-cell 
*/
@media print, (min-width: 768px) {
    .hidden-xs.hidden-sm.table-cell {
        display: table-cell !important;
    }
}

/* PADDING & MARGIN HELPERS

p,m = padding, margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
0,1,2,3,4,5,6 = units of padding


*/
.pt0, .pv0, .pa0 {
    padding-top: 0 !important;
}

.pt1, .pv1, .pa1 {
    padding-top: 0.5rem !important;
}

.pt2, .pv2, .pa2 {
    padding-top: 1rem !important;
}

.pt3, .pv3, .pa3 {
    padding-top: 1.5rem !important;
}

.pt4, .pv4, .pa4 {
    padding-top: 2rem !important;
}

.pt5, .pv5, .pa5 {
    padding-top: 2.5rem !important;
}

.pt6, .pv6, .pa6 {
    padding-top: 3rem !important;
}

.pr0, .ph0, .pa0 {
    padding-right: 0 !important;
}

.pr1, .ph1, .pa1 {
    padding-right: 0.5rem !important;
}

.pr2, .ph2, .pa2 {
    padding-right: 1rem !important;
}

.pr3, .ph3, .pa3 {
    padding-right: 1.5rem !important;
}

.pr4, .ph4, .pa4 {
    padding-right: 2rem !important;
}

.pr5, .ph5, .pa5 {
    padding-right: 2.5rem !important;
}

.pr6, .ph6, .pa6 {
    padding-right: 3rem !important;
}

.pb0, .pv0, .pa0 {
    padding-bottom: 0 !important;
}

.pb1, .pv1, .pa1 {
    padding-bottom: 0.5rem !important;
}

.pb2, .pv2, .pa2 {
    padding-bottom: 1rem !important;
}

.pb3, .pv3, .pa3 {
    padding-bottom: 1.5rem !important;
}

.pb4, .pv4, .pa4 {
    padding-bottom: 2rem !important;
}

.pb5, .pv5, .pa5 {
    padding-bottom: 2.5rem !important;
}

.pb6, .pv6, .pa6 {
    padding-bottom: 3rem !important;
}

.pl0, .ph0, .pa0 {
    padding-left: 0 !important;
}

.pl1, .ph1, .pa1 {
    padding-left: 0.5rem !important;
}

.pl2, .ph2, .pa2 {
    padding-left: 1rem !important;
}

.pl3, .ph3, .pa3 {
    padding-left: 1.5rem !important;
}

.pl4, .ph4, .pa4 {
    padding-left: 2rem !important;
}

.pl5, .ph5, .pa5 {
    padding-left: 2.5rem !important;
}

.pl6, .ph6, .pa6 {
    padding-left: 3rem !important;
}

.mt0, .mv0, .ma0 {
    margin-top: 0 !important;
}

.mt1, .mv1, .ma1 {
    margin-top: 0.5rem !important;
}

.mt2, .mv2, .ma2 {
    margin-top: 1rem !important;
}

.mt3, .mv3, .ma3 {
    margin-top: 1.5rem !important;
}

.mt4, .mv4, .ma4 {
    margin-top: 2rem !important;
}

.mt5, .mv5, .ma5 {
    margin-top: 2.5rem !important;
}

.mt6, .mv6, .ma6 {
    margin-top: 3rem !important;
}

.mr0, .mh0, .ma0 {
    margin-right: 0 !important;
}

.mr1, .mh1, .ma1 {
    margin-right: 0.5rem !important;
}

.mr2, .mh2, .ma2 {
    margin-right: 1rem !important;
}

.mr3, .mh3, .ma3 {
    margin-right: 1.5rem !important;
}

.mr4, .mh4, .ma4 {
    margin-right: 2rem !important;
}

.mr5, .mh5, .ma5 {
    margin-right: 2.5rem !important;
}

.mr6, .mh6, .ma6 {
    margin-right: 3rem !important;
}

.mb0, .mv0, .ma0 {
    margin-bottom: 0 !important;
}

.mb1, .mv1, .ma1 {
    margin-bottom: 0.5rem !important;
}

.mb2, .mv2, .ma2 {
    margin-bottom: 1rem !important;
}

.mb3, .mv3, .ma3 {
    margin-bottom: 1.5rem !important;
}

.mb4, .mv4, .ma4 {
    margin-bottom: 2rem !important;
}

.mb5, .mv5, .ma5 {
    margin-bottom: 2.5rem !important;
}

.mb6, .mv6, .ma6 {
    margin-bottom: 3rem !important;
}

.ml0, .mh0, .ma0 {
    margin-left: 0 !important;
}

.ml1, .mh1, .ma1 {
    margin-left: 0.5rem !important;
}

.ml2, .mh2, .ma2 {
    margin-left: 1rem !important;
}

.ml3, .mh3, .ma3 {
    margin-left: 1.5rem !important;
}

.ml4, .mh4, .ma4 {
    margin-left: 2rem !important;
}

.ml5, .mh5, .ma5 {
    margin-left: 2.5rem !important;
}

.ml6, .mh6, .ma6 {
    margin-left: 3rem !important;
}

/* PADDING & MARGIN HELPERS 

p,m = padding,margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
xs, s,m,l,xl,n = xsmall,small,medium,large,extra-large,none
*/
.ptn, .pvn, .pan {
    padding-top: 0 !important;
}

.ptxs, .pvxs, .paxs {
    padding-top: .2143em !important;
    /*3px assuming 14px base*/
}

.pts, .pvs, .pas {
    padding-top: 0.5rem !important;
}

.ptm, .pvm, .pam {
    padding-top: 1rem !important;
}

.ptl, .pvl, .pal {
    padding-top: 2rem !important;
}

.ptxl, .pvxl, .paxl {
    padding-top: 3rem !important;
}

.prn, .phn, .pan {
    padding-right: 0 !important;
}

.prxs, .phxs, .paxs {
    padding-right: .2143em !important;
}

.prs, .phs, .pas {
    padding-right: 0.5rem !important;
}

.prm, .phm, .pam {
    padding-right: 1rem !important;
}

.prl, .phl, .pal {
    padding-right: 2rem !important;
}

.prxl, .phxl, .paxl {
    padding-right: 3rem !important;
}

.pbn, .pvn, .pan {
    padding-bottom: 0 !important;
}

.pbxs, .pvxs, .paxs {
    padding-bottom: .2143em !important;
}

.pbs, .pvs, .pas {
    padding-bottom: 0.5rem !important;
}

.pbm, .pvm, .pam {
    padding-bottom: 1rem !important;
}

.pbl, .pvl, .pal {
    padding-bottom: 2rem !important;
}

.pbxl, .pvxl, .paxl {
    padding-bottom: 3rem !important;
}

.pln, .phn, .pan {
    padding-left: 0 !important;
}

.plxs, .phxs, .paxs {
    padding-left: .2143em !important;
    /*3px assuming 14px base*/
}

.pls, .phs, .pas {
    padding-left: 0.5rem !important;
}

.plm, .phm, .pam {
    padding-left: 1rem !important;
}

.pll, .phl, .pal {
    padding-left: 2rem !important;
}

.plxl, .phxl, .paxl {
    padding-left: 3rem !important;
}

.mtn, .mvn, .man {
    margin-top: 0 !important;
}

.mtxs, .mvxs, .maxs {
    margin-top: .2143em !important;
    /*3px assuming 14px base*/
}

.mts, .mvs, .mas {
    margin-top: 0.5rem !important;
}

.mtm, .mvm, .mam {
    margin-top: 1rem !important;
}

.mtl, .mvl, .mal {
    margin-top: 2rem !important;
}

.mtxl, .mvxl, .maxl {
    margin-top: 3rem !important;
}

.mrn, .mhn, .man {
    margin-right: 0 !important;
}

.mrxs, .mhxs, .maxs {
    margin-right: .2143em !important;
    /*3px assuming 14px base*/
}

.mrs, .mhs, .mas {
    margin-right: 0.5rem !important;
}

.mrm, .mhm, .mam {
    margin-right: 1rem !important;
}

.mrl, .mhl, .mal {
    margin-right: 2rem !important;
}

.mrxl, .mhxl, .maxl {
    margin-right: 3rem !important;
}

.mbn, .mvn, .man {
    margin-bottom: 0 !important;
}

.mbxs, .mvxs, .maxs {
    margin-bottom: .2143em !important;
    /*3px assuming 14px base*/
}

.mbs, .mvs, .mas {
    margin-bottom: 0.5rem !important;
}

.mbm, .mvm, .mam {
    margin-bottom: 1rem !important;
}

.mbl, .mvl, .mal {
    margin-bottom: 2rem !important;
}

.mbxl, .mvxl, .maxl {
    margin-bottom: 3rem !important;
}

.mln, .mhn, .man {
    margin-left: 0 !important;
}

.mlxs, .mhxs, .maxs {
    margin-left: .2143em !important;
    /*3px assuming 14px base*/
}

.mls, .mhs, .mas {
    margin-left: 0.5rem !important;
}

.mlm, .mhm, .mam {
    margin-left: 1rem !important;
}

.mll, .mhl, .mal {
    margin-left: 2rem !important;
}

.mlxl, .mhxl, .maxl {
    margin-left: 3rem !important;
}

/* HORIZONTAL RULES
    .condensed      An hr with less space above and below
    .on-light-gray  An hr that can be placed on a light-gray background that does not turn the rule white in color
    .on-faint-gray  An hr that can be placed on a faint-gray background that does not turn the rule white in color
*/
hr {
    margin: 1.0714em 0;
    border: 0;
    height: 0;
    border-top: 1px solid var(--border-gray-87);
    border-bottom: 1px solid var(--border-white);
    box-sizing: content-box;
    width: 100%;
}

@media print, (min-width: 768px) {
    hr {
        margin: 1.4286em 0;
        /* 20px 0 */
    }
}

hr.condensed {
    margin: .5em 0;
    /* 7px 0 */
}

@media print, (min-width: 768px) {
    hr.condensed {
        margin: .7143em 0;
        /* 10px 0 */
    }
}

hr.on-light-gray {
    border-top-color: var(--border-gray-87);
    border-bottom-color: var(--border-light-gray);
}

hr.on-faint-gray {
    border-top-color: var(--border-gray-90);
    border-bottom-color: var(--border-faint-gray);
}

/* PRINT */
.print-only {
    display: none !important;
}

@media print {
    .print-only {
        display: block !important;
    }
}

.print-avoid-break-inside {
    page-break-inside: avoid;
}

@media print {
    .no-print, .no-print.visible-xs, .no-print.visible-sm, .no-print.visible-md, .no-print.visible-lg, .no-print.visible-xl, .no-print.visible-inline-xs, .no-print.visible-inline-sm, .no-print.visible-inline-md, .no-print.visible-inline-lg, .no-print.visible-inline-xl {
        display: none !important;
    }
}

.clickable {
    cursor: pointer !important;
}

/* DISPLAY */
.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.flex {
    display: -ms-flexbox;
    display: flex;
}

/* POSITION */
.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.position-relative {
    position: relative;
}

/* WIDTHS */
.full-width {
    width: 100%;
}

.auto-width {
    width: auto !important;
}

/* CENTERING */
.center-container {
    width: 100%;
    text-align: center;
}

.center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left;
}

/* AUTO MARGINS */
.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

/* COLUMN BREAKS */
.break-inside-avoid {
    break-inside: avoid;
}

/* CLEARS, FLOATS */
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.right {
    float: right;
}

@media print, (min-width: 480px) {
    .right-sm {
        float: right;
    }
}

@media print, (min-width: 768px) {
    .right-md {
        float: right;
    }
}

@media (min-width: 980px) {
    .right-lg {
        float: right;
    }
}

@media (min-width: 1260px) {
    .right-xl {
        float: right;
    }
}

.left {
    float: left;
}

@media print, (min-width: 480px) {
    .left-sm {
        float: left;
    }
}

@media print, (min-width: 768px) {
    .left-md {
        float: left;
    }
}

@media (min-width: 980px) {
    .left-lg {
        float: left;
    }
}

@media (min-width: 1260px) {
    .left-xl {
        float: left;
    }
}

/* BORDERS */
.bt-none {
    border-top: none !important;
}

.bb-none {
    border-bottom: none !important;
}

/*
   CSS GRID STYLES

*/
/* Variables for CSS Grid Functions and Mixins*/
/*
    FUNCTIONS FOR CSS GRID STYLES 

    (borrowed from bootstrap)
    These funtions will not generate CSS on their own.
    Will be used in the @mixin and @each

    breakpoint-infix ()     Will adds the -sm, -md, -lg & -xl to the rule (does not add -xs)

    breakpoint-min()        This checks if the breakpoint has a value (480px, 768px, etc.)

*/
/*
   MIXIN CSS GRID STYLES
   These mixins will not generate CSS on their own.
   Must be used with the @include

    media-breakpoint-up()               Figures out if there is a value for the breakpoint and will add it when it builds out the media queries
                                        Example: @media (inserts value) {...}
                                        (also borrowed from bootstrap)
                                        [Mixin Selector]

    make-grid-rows()                    will make all the rules for number of rows for the grid  (1 through max-rows)
                                        Example: .grid .rows-3
                                        [Mixin Selector]

    make-grid-cols()                    will make all the rules for number of columns for the grid  (1 through max-columns)
                                        Example: .grid .cols-3
                                        [Mixin Selector]

    make-grid-item-position-row()       Will make all the rules for what row the grid item will start
                                        Example: .grid_item .position-row-3
                                        [Mixin Selector]

    make-grid-item-position-col()       Will make all the rules for what column the grid item will start
                                        Example: .grid_item .position-column-3
                                        [Mixin Selector]

    make-grid-item-rowspan()            Will make all the rules for how tall grid item will be
                                        Example: .grid_item .rowspan-3
                                        [Mixin Selector]

    make-grid-item-colspan()            Will make all the rules for how wide grid item will be
                                        Example: .grid_item .colspan-3
                                        [Mixin Selector]

*/
/* GRID 

    .grid           Container for the Grid items
                    Define/Extend the size of the grid using (.cols-* .rows-* see below)
                    [Parent Module]

    .grid_item      Individual children of the grid
                    Define/extend .grid_items with size and position (.rowspan-*, .colspan-*, .position-row-*, & .position-col-* see below)
                    [Child Module]

   Example Markup:
    <div class="grid">
        <div class="grid_item">
            ...
        </div>
        <div class="grid_item">
            ...
        </div>
    </div>

*/
.grid {
    display: -ms-grid;
    display: grid;
}

@media (min-width: 480px) {
    .grid-sm {
        display: -ms-grid;
        display: grid;
    }
}

@media (min-width: 768px) {
    .grid-md {
        display: -ms-grid;
        display: grid;
    }
}

@media (min-width: 980px) {
    .grid-lg {
        display: -ms-grid;
        display: grid;
    }
}

@media (min-width: 1260px) {
    .grid-xl {
        display: -ms-grid;
        display: grid;
    }
}

/* 
 
    .rows-*             Defines/sets the number of rows the grid will have          
                        Examples: .rows-3, .rows-sm-3, .rows-md-3,... etc.
                        Max of 12 rows
                        [Extends .grid]

    .cols-*             Defines/sets the number of columns the grid will have             
                        Examples: .cols-12, .cols-sm-12, .cols-md-12,... etc.
                        Max of 12 columns
                        [Extends .grid]
    
    .postion-row-*      Defines/sets the start position for the grid item vertically - "Start in row 6"
                        Examples: .position-row-6, .position-row-sm-6, .position-row-md-6,... etc.
                        Max of 12 rows
                        [Extends .grid_item]

    .postion-col-*      Defines/sets the start position for the grid item horizontally - "Start in column 3"
                        Examples: .position-cols-3, .position-cols-sm-3, .position-cols-md-3,... etc.
                        Max of 12 columns
                        [Extends .grid_item]

    .rowspan-*          Defines the height for the grid item - "Span three rows"
                        Examples: .rowspan-3, .rowspan-sm-3, .rowspan-md-3,... etc.
                        Max of 12 rows
                        [Extends .grid_item]

    .colspan-*          Defines the width for the grid item - "Span four columns"
                        Examples: .colspan-4, .colspan-sm-4, .colspan-md-4,... etc.
                        Max of 12 columns
                        [Extends .grid_item]


    Example Markup:
    <div class="grid cols-3 rows-2">
        <div class="grid_item colspan-2 rowspan-1">
            ...
        </div>
        <div class="grid_item position-row-1 position-col-3">
            ...
        </div>
    </div>
*/
/*This magic creates all of the above css grid extension rules */
.rows-1 {
    -ms-grid-rows: (auto)[1];
    grid-template-rows: repeat(1, auto);
}

.rows-2 {
    -ms-grid-rows: (auto)[2];
    grid-template-rows: repeat(2, auto);
}

.rows-3 {
    -ms-grid-rows: (auto)[3];
    grid-template-rows: repeat(3, auto);
}

.rows-4 {
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4, auto);
}

.rows-5 {
    -ms-grid-rows: (auto)[5];
    grid-template-rows: repeat(5, auto);
}

.rows-6 {
    -ms-grid-rows: (auto)[6];
    grid-template-rows: repeat(6, auto);
}

.rows-7 {
    -ms-grid-rows: (auto)[7];
    grid-template-rows: repeat(7, auto);
}

.rows-8 {
    -ms-grid-rows: (auto)[8];
    grid-template-rows: repeat(8, auto);
}

.rows-9 {
    -ms-grid-rows: (auto)[9];
    grid-template-rows: repeat(9, auto);
}

.rows-10 {
    -ms-grid-rows: (auto)[10];
    grid-template-rows: repeat(10, auto);
}

.rows-11 {
    -ms-grid-rows: (auto)[11];
    grid-template-rows: repeat(11, auto);
}

.rows-12 {
    -ms-grid-rows: (auto)[12];
    grid-template-rows: repeat(12, auto);
}

.cols-1 {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
}

.cols-2 {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
}

.cols-5 {
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr);
}

.cols-6 {
    -ms-grid-columns: (1fr)[6];
    grid-template-columns: repeat(6, 1fr);
}

.cols-7 {
    -ms-grid-columns: (1fr)[7];
    grid-template-columns: repeat(7, 1fr);
}

.cols-8 {
    -ms-grid-columns: (1fr)[8];
    grid-template-columns: repeat(8, 1fr);
}

.cols-9 {
    -ms-grid-columns: (1fr)[9];
    grid-template-columns: repeat(9, 1fr);
}

.cols-10 {
    -ms-grid-columns: (1fr)[10];
    grid-template-columns: repeat(10, 1fr);
}

.cols-11 {
    -ms-grid-columns: (1fr)[11];
    grid-template-columns: repeat(11, 1fr);
}

.cols-12 {
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
}

.grid_item.position-row-1 {
    -ms-grid-row: 1;
    grid-row-start: 1;
}

.grid_item.position-row-2 {
    -ms-grid-row: 2;
    grid-row-start: 2;
}

.grid_item.position-row-3 {
    -ms-grid-row: 3;
    grid-row-start: 3;
}

.grid_item.position-row-4 {
    -ms-grid-row: 4;
    grid-row-start: 4;
}

.grid_item.position-row-5 {
    -ms-grid-row: 5;
    grid-row-start: 5;
}

.grid_item.position-row-6 {
    -ms-grid-row: 6;
    grid-row-start: 6;
}

.grid_item.position-row-7 {
    -ms-grid-row: 7;
    grid-row-start: 7;
}

.grid_item.position-row-8 {
    -ms-grid-row: 8;
    grid-row-start: 8;
}

.grid_item.position-row-9 {
    -ms-grid-row: 9;
    grid-row-start: 9;
}

.grid_item.position-row-10 {
    -ms-grid-row: 10;
    grid-row-start: 10;
}

.grid_item.position-row-11 {
    -ms-grid-row: 11;
    grid-row-start: 11;
}

.grid_item.position-row-12 {
    -ms-grid-row: 12;
    grid-row-start: 12;
}

.grid_item.position-col-1 {
    -ms-grid-column: 1;
    grid-column-start: 1;
}

.grid_item.position-col-2 {
    -ms-grid-column: 2;
    grid-column-start: 2;
}

.grid_item.position-col-3 {
    -ms-grid-column: 3;
    grid-column-start: 3;
}

.grid_item.position-col-4 {
    -ms-grid-column: 4;
    grid-column-start: 4;
}

.grid_item.position-col-5 {
    -ms-grid-column: 5;
    grid-column-start: 5;
}

.grid_item.position-col-6 {
    -ms-grid-column: 6;
    grid-column-start: 6;
}

.grid_item.position-col-7 {
    -ms-grid-column: 7;
    grid-column-start: 7;
}

.grid_item.position-col-8 {
    -ms-grid-column: 8;
    grid-column-start: 8;
}

.grid_item.position-col-9 {
    -ms-grid-column: 9;
    grid-column-start: 9;
}

.grid_item.position-col-10 {
    -ms-grid-column: 10;
    grid-column-start: 10;
}

.grid_item.position-col-11 {
    -ms-grid-column: 11;
    grid-column-start: 11;
}

.grid_item.position-col-12 {
    -ms-grid-column: 12;
    grid-column-start: 12;
}

.grid_item.rowspan-1 {
    -ms-grid-row-span: 1;
    grid-row-end: span 1;
}

.grid_item.rowspan-2 {
    -ms-grid-row-span: 2;
    grid-row-end: span 2;
}

.grid_item.rowspan-3 {
    -ms-grid-row-span: 3;
    grid-row-end: span 3;
}

.grid_item.rowspan-4 {
    -ms-grid-row-span: 4;
    grid-row-end: span 4;
}

.grid_item.rowspan-5 {
    -ms-grid-row-span: 5;
    grid-row-end: span 5;
}

.grid_item.rowspan-6 {
    -ms-grid-row-span: 6;
    grid-row-end: span 6;
}

.grid_item.rowspan-7 {
    -ms-grid-row-span: 7;
    grid-row-end: span 7;
}

.grid_item.rowspan-8 {
    -ms-grid-row-span: 8;
    grid-row-end: span 8;
}

.grid_item.rowspan-9 {
    -ms-grid-row-span: 9;
    grid-row-end: span 9;
}

.grid_item.rowspan-10 {
    -ms-grid-row-span: 10;
    grid-row-end: span 10;
}

.grid_item.rowspan-11 {
    -ms-grid-row-span: 11;
    grid-row-end: span 11;
}

.grid_item.rowspan-12 {
    -ms-grid-row-span: 12;
    grid-row-end: span 12;
}

.grid_item.colspan-1 {
    -ms-grid-column-span: 1;
    grid-column-end: span 1;
}

.grid_item.colspan-2 {
    -ms-grid-column-span: 2;
    grid-column-end: span 2;
}

.grid_item.colspan-3 {
    -ms-grid-column-span: 3;
    grid-column-end: span 3;
}

.grid_item.colspan-4 {
    -ms-grid-column-span: 4;
    grid-column-end: span 4;
}

.grid_item.colspan-5 {
    -ms-grid-column-span: 5;
    grid-column-end: span 5;
}

.grid_item.colspan-6 {
    -ms-grid-column-span: 6;
    grid-column-end: span 6;
}

.grid_item.colspan-7 {
    -ms-grid-column-span: 7;
    grid-column-end: span 7;
}

.grid_item.colspan-8 {
    -ms-grid-column-span: 8;
    grid-column-end: span 8;
}

.grid_item.colspan-9 {
    -ms-grid-column-span: 9;
    grid-column-end: span 9;
}

.grid_item.colspan-10 {
    -ms-grid-column-span: 10;
    grid-column-end: span 10;
}

.grid_item.colspan-11 {
    -ms-grid-column-span: 11;
    grid-column-end: span 11;
}

.grid_item.colspan-12 {
    -ms-grid-column-span: 12;
    grid-column-end: span 12;
}

@media (min-width: 480px) {
    .rows-sm-1 {
        -ms-grid-rows: (auto)[1];
        grid-template-rows: repeat(1, auto);
    }

    .rows-sm-2 {
        -ms-grid-rows: (auto)[2];
        grid-template-rows: repeat(2, auto);
    }

    .rows-sm-3 {
        -ms-grid-rows: (auto)[3];
        grid-template-rows: repeat(3, auto);
    }

    .rows-sm-4 {
        -ms-grid-rows: (auto)[4];
        grid-template-rows: repeat(4, auto);
    }

    .rows-sm-5 {
        -ms-grid-rows: (auto)[5];
        grid-template-rows: repeat(5, auto);
    }

    .rows-sm-6 {
        -ms-grid-rows: (auto)[6];
        grid-template-rows: repeat(6, auto);
    }

    .rows-sm-7 {
        -ms-grid-rows: (auto)[7];
        grid-template-rows: repeat(7, auto);
    }

    .rows-sm-8 {
        -ms-grid-rows: (auto)[8];
        grid-template-rows: repeat(8, auto);
    }

    .rows-sm-9 {
        -ms-grid-rows: (auto)[9];
        grid-template-rows: repeat(9, auto);
    }

    .rows-sm-10 {
        -ms-grid-rows: (auto)[10];
        grid-template-rows: repeat(10, auto);
    }

    .rows-sm-11 {
        -ms-grid-rows: (auto)[11];
        grid-template-rows: repeat(11, auto);
    }

    .rows-sm-12 {
        -ms-grid-rows: (auto)[12];
        grid-template-rows: repeat(12, auto);
    }

    .cols-sm-1 {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    }

    .cols-sm-2 {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .cols-sm-3 {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .cols-sm-4 {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    .cols-sm-5 {
        -ms-grid-columns: (1fr)[5];
        grid-template-columns: repeat(5, 1fr);
    }

    .cols-sm-6 {
        -ms-grid-columns: (1fr)[6];
        grid-template-columns: repeat(6, 1fr);
    }

    .cols-sm-7 {
        -ms-grid-columns: (1fr)[7];
        grid-template-columns: repeat(7, 1fr);
    }

    .cols-sm-8 {
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr);
    }

    .cols-sm-9 {
        -ms-grid-columns: (1fr)[9];
        grid-template-columns: repeat(9, 1fr);
    }

    .cols-sm-10 {
        -ms-grid-columns: (1fr)[10];
        grid-template-columns: repeat(10, 1fr);
    }

    .cols-sm-11 {
        -ms-grid-columns: (1fr)[11];
        grid-template-columns: repeat(11, 1fr);
    }

    .cols-sm-12 {
        -ms-grid-columns: (1fr)[12];
        grid-template-columns: repeat(12, 1fr);
    }

    .grid_item.position-row-sm-1 {
        -ms-grid-row: 1;
        grid-row-start: 1;
    }

    .grid_item.position-row-sm-2 {
        -ms-grid-row: 2;
        grid-row-start: 2;
    }

    .grid_item.position-row-sm-3 {
        -ms-grid-row: 3;
        grid-row-start: 3;
    }

    .grid_item.position-row-sm-4 {
        -ms-grid-row: 4;
        grid-row-start: 4;
    }

    .grid_item.position-row-sm-5 {
        -ms-grid-row: 5;
        grid-row-start: 5;
    }

    .grid_item.position-row-sm-6 {
        -ms-grid-row: 6;
        grid-row-start: 6;
    }

    .grid_item.position-row-sm-7 {
        -ms-grid-row: 7;
        grid-row-start: 7;
    }

    .grid_item.position-row-sm-8 {
        -ms-grid-row: 8;
        grid-row-start: 8;
    }

    .grid_item.position-row-sm-9 {
        -ms-grid-row: 9;
        grid-row-start: 9;
    }

    .grid_item.position-row-sm-10 {
        -ms-grid-row: 10;
        grid-row-start: 10;
    }

    .grid_item.position-row-sm-11 {
        -ms-grid-row: 11;
        grid-row-start: 11;
    }

    .grid_item.position-row-sm-12 {
        -ms-grid-row: 12;
        grid-row-start: 12;
    }

    .grid_item.position-col-sm-1 {
        -ms-grid-column: 1;
        grid-column-start: 1;
    }

    .grid_item.position-col-sm-2 {
        -ms-grid-column: 2;
        grid-column-start: 2;
    }

    .grid_item.position-col-sm-3 {
        -ms-grid-column: 3;
        grid-column-start: 3;
    }

    .grid_item.position-col-sm-4 {
        -ms-grid-column: 4;
        grid-column-start: 4;
    }

    .grid_item.position-col-sm-5 {
        -ms-grid-column: 5;
        grid-column-start: 5;
    }

    .grid_item.position-col-sm-6 {
        -ms-grid-column: 6;
        grid-column-start: 6;
    }

    .grid_item.position-col-sm-7 {
        -ms-grid-column: 7;
        grid-column-start: 7;
    }

    .grid_item.position-col-sm-8 {
        -ms-grid-column: 8;
        grid-column-start: 8;
    }

    .grid_item.position-col-sm-9 {
        -ms-grid-column: 9;
        grid-column-start: 9;
    }

    .grid_item.position-col-sm-10 {
        -ms-grid-column: 10;
        grid-column-start: 10;
    }

    .grid_item.position-col-sm-11 {
        -ms-grid-column: 11;
        grid-column-start: 11;
    }

    .grid_item.position-col-sm-12 {
        -ms-grid-column: 12;
        grid-column-start: 12;
    }

    .grid_item.rowspan-sm-1 {
        -ms-grid-row-span: 1;
        grid-row-end: span 1;
    }

    .grid_item.rowspan-sm-2 {
        -ms-grid-row-span: 2;
        grid-row-end: span 2;
    }

    .grid_item.rowspan-sm-3 {
        -ms-grid-row-span: 3;
        grid-row-end: span 3;
    }

    .grid_item.rowspan-sm-4 {
        -ms-grid-row-span: 4;
        grid-row-end: span 4;
    }

    .grid_item.rowspan-sm-5 {
        -ms-grid-row-span: 5;
        grid-row-end: span 5;
    }

    .grid_item.rowspan-sm-6 {
        -ms-grid-row-span: 6;
        grid-row-end: span 6;
    }

    .grid_item.rowspan-sm-7 {
        -ms-grid-row-span: 7;
        grid-row-end: span 7;
    }

    .grid_item.rowspan-sm-8 {
        -ms-grid-row-span: 8;
        grid-row-end: span 8;
    }

    .grid_item.rowspan-sm-9 {
        -ms-grid-row-span: 9;
        grid-row-end: span 9;
    }

    .grid_item.rowspan-sm-10 {
        -ms-grid-row-span: 10;
        grid-row-end: span 10;
    }

    .grid_item.rowspan-sm-11 {
        -ms-grid-row-span: 11;
        grid-row-end: span 11;
    }

    .grid_item.rowspan-sm-12 {
        -ms-grid-row-span: 12;
        grid-row-end: span 12;
    }

    .grid_item.colspan-sm-1 {
        -ms-grid-column-span: 1;
        grid-column-end: span 1;
    }

    .grid_item.colspan-sm-2 {
        -ms-grid-column-span: 2;
        grid-column-end: span 2;
    }

    .grid_item.colspan-sm-3 {
        -ms-grid-column-span: 3;
        grid-column-end: span 3;
    }

    .grid_item.colspan-sm-4 {
        -ms-grid-column-span: 4;
        grid-column-end: span 4;
    }

    .grid_item.colspan-sm-5 {
        -ms-grid-column-span: 5;
        grid-column-end: span 5;
    }

    .grid_item.colspan-sm-6 {
        -ms-grid-column-span: 6;
        grid-column-end: span 6;
    }

    .grid_item.colspan-sm-7 {
        -ms-grid-column-span: 7;
        grid-column-end: span 7;
    }

    .grid_item.colspan-sm-8 {
        -ms-grid-column-span: 8;
        grid-column-end: span 8;
    }

    .grid_item.colspan-sm-9 {
        -ms-grid-column-span: 9;
        grid-column-end: span 9;
    }

    .grid_item.colspan-sm-10 {
        -ms-grid-column-span: 10;
        grid-column-end: span 10;
    }

    .grid_item.colspan-sm-11 {
        -ms-grid-column-span: 11;
        grid-column-end: span 11;
    }

    .grid_item.colspan-sm-12 {
        -ms-grid-column-span: 12;
        grid-column-end: span 12;
    }
}

@media (min-width: 768px) {
    .rows-md-1 {
        -ms-grid-rows: (auto)[1];
        grid-template-rows: repeat(1, auto);
    }

    .rows-md-2 {
        -ms-grid-rows: (auto)[2];
        grid-template-rows: repeat(2, auto);
    }

    .rows-md-3 {
        -ms-grid-rows: (auto)[3];
        grid-template-rows: repeat(3, auto);
    }

    .rows-md-4 {
        -ms-grid-rows: (auto)[4];
        grid-template-rows: repeat(4, auto);
    }

    .rows-md-5 {
        -ms-grid-rows: (auto)[5];
        grid-template-rows: repeat(5, auto);
    }

    .rows-md-6 {
        -ms-grid-rows: (auto)[6];
        grid-template-rows: repeat(6, auto);
    }

    .rows-md-7 {
        -ms-grid-rows: (auto)[7];
        grid-template-rows: repeat(7, auto);
    }

    .rows-md-8 {
        -ms-grid-rows: (auto)[8];
        grid-template-rows: repeat(8, auto);
    }

    .rows-md-9 {
        -ms-grid-rows: (auto)[9];
        grid-template-rows: repeat(9, auto);
    }

    .rows-md-10 {
        -ms-grid-rows: (auto)[10];
        grid-template-rows: repeat(10, auto);
    }

    .rows-md-11 {
        -ms-grid-rows: (auto)[11];
        grid-template-rows: repeat(11, auto);
    }

    .rows-md-12 {
        -ms-grid-rows: (auto)[12];
        grid-template-rows: repeat(12, auto);
    }

    .cols-md-1 {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    }

    .cols-md-2 {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .cols-md-3 {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .cols-md-4 {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    .cols-md-5 {
        -ms-grid-columns: (1fr)[5];
        grid-template-columns: repeat(5, 1fr);
    }

    .cols-md-6 {
        -ms-grid-columns: (1fr)[6];
        grid-template-columns: repeat(6, 1fr);
    }

    .cols-md-7 {
        -ms-grid-columns: (1fr)[7];
        grid-template-columns: repeat(7, 1fr);
    }

    .cols-md-8 {
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr);
    }

    .cols-md-9 {
        -ms-grid-columns: (1fr)[9];
        grid-template-columns: repeat(9, 1fr);
    }

    .cols-md-10 {
        -ms-grid-columns: (1fr)[10];
        grid-template-columns: repeat(10, 1fr);
    }

    .cols-md-11 {
        -ms-grid-columns: (1fr)[11];
        grid-template-columns: repeat(11, 1fr);
    }

    .cols-md-12 {
        -ms-grid-columns: (1fr)[12];
        grid-template-columns: repeat(12, 1fr);
    }

    .grid_item.position-row-md-1 {
        -ms-grid-row: 1;
        grid-row-start: 1;
    }

    .grid_item.position-row-md-2 {
        -ms-grid-row: 2;
        grid-row-start: 2;
    }

    .grid_item.position-row-md-3 {
        -ms-grid-row: 3;
        grid-row-start: 3;
    }

    .grid_item.position-row-md-4 {
        -ms-grid-row: 4;
        grid-row-start: 4;
    }

    .grid_item.position-row-md-5 {
        -ms-grid-row: 5;
        grid-row-start: 5;
    }

    .grid_item.position-row-md-6 {
        -ms-grid-row: 6;
        grid-row-start: 6;
    }

    .grid_item.position-row-md-7 {
        -ms-grid-row: 7;
        grid-row-start: 7;
    }

    .grid_item.position-row-md-8 {
        -ms-grid-row: 8;
        grid-row-start: 8;
    }

    .grid_item.position-row-md-9 {
        -ms-grid-row: 9;
        grid-row-start: 9;
    }

    .grid_item.position-row-md-10 {
        -ms-grid-row: 10;
        grid-row-start: 10;
    }

    .grid_item.position-row-md-11 {
        -ms-grid-row: 11;
        grid-row-start: 11;
    }

    .grid_item.position-row-md-12 {
        -ms-grid-row: 12;
        grid-row-start: 12;
    }

    .grid_item.position-col-md-1 {
        -ms-grid-column: 1;
        grid-column-start: 1;
    }

    .grid_item.position-col-md-2 {
        -ms-grid-column: 2;
        grid-column-start: 2;
    }

    .grid_item.position-col-md-3 {
        -ms-grid-column: 3;
        grid-column-start: 3;
    }

    .grid_item.position-col-md-4 {
        -ms-grid-column: 4;
        grid-column-start: 4;
    }

    .grid_item.position-col-md-5 {
        -ms-grid-column: 5;
        grid-column-start: 5;
    }

    .grid_item.position-col-md-6 {
        -ms-grid-column: 6;
        grid-column-start: 6;
    }

    .grid_item.position-col-md-7 {
        -ms-grid-column: 7;
        grid-column-start: 7;
    }

    .grid_item.position-col-md-8 {
        -ms-grid-column: 8;
        grid-column-start: 8;
    }

    .grid_item.position-col-md-9 {
        -ms-grid-column: 9;
        grid-column-start: 9;
    }

    .grid_item.position-col-md-10 {
        -ms-grid-column: 10;
        grid-column-start: 10;
    }

    .grid_item.position-col-md-11 {
        -ms-grid-column: 11;
        grid-column-start: 11;
    }

    .grid_item.position-col-md-12 {
        -ms-grid-column: 12;
        grid-column-start: 12;
    }

    .grid_item.rowspan-md-1 {
        -ms-grid-row-span: 1;
        grid-row-end: span 1;
    }

    .grid_item.rowspan-md-2 {
        -ms-grid-row-span: 2;
        grid-row-end: span 2;
    }

    .grid_item.rowspan-md-3 {
        -ms-grid-row-span: 3;
        grid-row-end: span 3;
    }

    .grid_item.rowspan-md-4 {
        -ms-grid-row-span: 4;
        grid-row-end: span 4;
    }

    .grid_item.rowspan-md-5 {
        -ms-grid-row-span: 5;
        grid-row-end: span 5;
    }

    .grid_item.rowspan-md-6 {
        -ms-grid-row-span: 6;
        grid-row-end: span 6;
    }

    .grid_item.rowspan-md-7 {
        -ms-grid-row-span: 7;
        grid-row-end: span 7;
    }

    .grid_item.rowspan-md-8 {
        -ms-grid-row-span: 8;
        grid-row-end: span 8;
    }

    .grid_item.rowspan-md-9 {
        -ms-grid-row-span: 9;
        grid-row-end: span 9;
    }

    .grid_item.rowspan-md-10 {
        -ms-grid-row-span: 10;
        grid-row-end: span 10;
    }

    .grid_item.rowspan-md-11 {
        -ms-grid-row-span: 11;
        grid-row-end: span 11;
    }

    .grid_item.rowspan-md-12 {
        -ms-grid-row-span: 12;
        grid-row-end: span 12;
    }

    .grid_item.colspan-md-1 {
        -ms-grid-column-span: 1;
        grid-column-end: span 1;
    }

    .grid_item.colspan-md-2 {
        -ms-grid-column-span: 2;
        grid-column-end: span 2;
    }

    .grid_item.colspan-md-3 {
        -ms-grid-column-span: 3;
        grid-column-end: span 3;
    }

    .grid_item.colspan-md-4 {
        -ms-grid-column-span: 4;
        grid-column-end: span 4;
    }

    .grid_item.colspan-md-5 {
        -ms-grid-column-span: 5;
        grid-column-end: span 5;
    }

    .grid_item.colspan-md-6 {
        -ms-grid-column-span: 6;
        grid-column-end: span 6;
    }

    .grid_item.colspan-md-7 {
        -ms-grid-column-span: 7;
        grid-column-end: span 7;
    }

    .grid_item.colspan-md-8 {
        -ms-grid-column-span: 8;
        grid-column-end: span 8;
    }

    .grid_item.colspan-md-9 {
        -ms-grid-column-span: 9;
        grid-column-end: span 9;
    }

    .grid_item.colspan-md-10 {
        -ms-grid-column-span: 10;
        grid-column-end: span 10;
    }

    .grid_item.colspan-md-11 {
        -ms-grid-column-span: 11;
        grid-column-end: span 11;
    }

    .grid_item.colspan-md-12 {
        -ms-grid-column-span: 12;
        grid-column-end: span 12;
    }
}

@media (min-width: 980px) {
    .rows-lg-1 {
        -ms-grid-rows: (auto)[1];
        grid-template-rows: repeat(1, auto);
    }

    .rows-lg-2 {
        -ms-grid-rows: (auto)[2];
        grid-template-rows: repeat(2, auto);
    }

    .rows-lg-3 {
        -ms-grid-rows: (auto)[3];
        grid-template-rows: repeat(3, auto);
    }

    .rows-lg-4 {
        -ms-grid-rows: (auto)[4];
        grid-template-rows: repeat(4, auto);
    }

    .rows-lg-5 {
        -ms-grid-rows: (auto)[5];
        grid-template-rows: repeat(5, auto);
    }

    .rows-lg-6 {
        -ms-grid-rows: (auto)[6];
        grid-template-rows: repeat(6, auto);
    }

    .rows-lg-7 {
        -ms-grid-rows: (auto)[7];
        grid-template-rows: repeat(7, auto);
    }

    .rows-lg-8 {
        -ms-grid-rows: (auto)[8];
        grid-template-rows: repeat(8, auto);
    }

    .rows-lg-9 {
        -ms-grid-rows: (auto)[9];
        grid-template-rows: repeat(9, auto);
    }

    .rows-lg-10 {
        -ms-grid-rows: (auto)[10];
        grid-template-rows: repeat(10, auto);
    }

    .rows-lg-11 {
        -ms-grid-rows: (auto)[11];
        grid-template-rows: repeat(11, auto);
    }

    .rows-lg-12 {
        -ms-grid-rows: (auto)[12];
        grid-template-rows: repeat(12, auto);
    }

    .cols-lg-1 {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    }

    .cols-lg-2 {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .cols-lg-3 {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .cols-lg-4 {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    .cols-lg-5 {
        -ms-grid-columns: (1fr)[5];
        grid-template-columns: repeat(5, 1fr);
    }

    .cols-lg-6 {
        -ms-grid-columns: (1fr)[6];
        grid-template-columns: repeat(6, 1fr);
    }

    .cols-lg-7 {
        -ms-grid-columns: (1fr)[7];
        grid-template-columns: repeat(7, 1fr);
    }

    .cols-lg-8 {
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr);
    }

    .cols-lg-9 {
        -ms-grid-columns: (1fr)[9];
        grid-template-columns: repeat(9, 1fr);
    }

    .cols-lg-10 {
        -ms-grid-columns: (1fr)[10];
        grid-template-columns: repeat(10, 1fr);
    }

    .cols-lg-11 {
        -ms-grid-columns: (1fr)[11];
        grid-template-columns: repeat(11, 1fr);
    }

    .cols-lg-12 {
        -ms-grid-columns: (1fr)[12];
        grid-template-columns: repeat(12, 1fr);
    }

    .grid_item.position-row-lg-1 {
        -ms-grid-row: 1;
        grid-row-start: 1;
    }

    .grid_item.position-row-lg-2 {
        -ms-grid-row: 2;
        grid-row-start: 2;
    }

    .grid_item.position-row-lg-3 {
        -ms-grid-row: 3;
        grid-row-start: 3;
    }

    .grid_item.position-row-lg-4 {
        -ms-grid-row: 4;
        grid-row-start: 4;
    }

    .grid_item.position-row-lg-5 {
        -ms-grid-row: 5;
        grid-row-start: 5;
    }

    .grid_item.position-row-lg-6 {
        -ms-grid-row: 6;
        grid-row-start: 6;
    }

    .grid_item.position-row-lg-7 {
        -ms-grid-row: 7;
        grid-row-start: 7;
    }

    .grid_item.position-row-lg-8 {
        -ms-grid-row: 8;
        grid-row-start: 8;
    }

    .grid_item.position-row-lg-9 {
        -ms-grid-row: 9;
        grid-row-start: 9;
    }

    .grid_item.position-row-lg-10 {
        -ms-grid-row: 10;
        grid-row-start: 10;
    }

    .grid_item.position-row-lg-11 {
        -ms-grid-row: 11;
        grid-row-start: 11;
    }

    .grid_item.position-row-lg-12 {
        -ms-grid-row: 12;
        grid-row-start: 12;
    }

    .grid_item.position-col-lg-1 {
        -ms-grid-column: 1;
        grid-column-start: 1;
    }

    .grid_item.position-col-lg-2 {
        -ms-grid-column: 2;
        grid-column-start: 2;
    }

    .grid_item.position-col-lg-3 {
        -ms-grid-column: 3;
        grid-column-start: 3;
    }

    .grid_item.position-col-lg-4 {
        -ms-grid-column: 4;
        grid-column-start: 4;
    }

    .grid_item.position-col-lg-5 {
        -ms-grid-column: 5;
        grid-column-start: 5;
    }

    .grid_item.position-col-lg-6 {
        -ms-grid-column: 6;
        grid-column-start: 6;
    }

    .grid_item.position-col-lg-7 {
        -ms-grid-column: 7;
        grid-column-start: 7;
    }

    .grid_item.position-col-lg-8 {
        -ms-grid-column: 8;
        grid-column-start: 8;
    }

    .grid_item.position-col-lg-9 {
        -ms-grid-column: 9;
        grid-column-start: 9;
    }

    .grid_item.position-col-lg-10 {
        -ms-grid-column: 10;
        grid-column-start: 10;
    }

    .grid_item.position-col-lg-11 {
        -ms-grid-column: 11;
        grid-column-start: 11;
    }

    .grid_item.position-col-lg-12 {
        -ms-grid-column: 12;
        grid-column-start: 12;
    }

    .grid_item.rowspan-lg-1 {
        -ms-grid-row-span: 1;
        grid-row-end: span 1;
    }

    .grid_item.rowspan-lg-2 {
        -ms-grid-row-span: 2;
        grid-row-end: span 2;
    }

    .grid_item.rowspan-lg-3 {
        -ms-grid-row-span: 3;
        grid-row-end: span 3;
    }

    .grid_item.rowspan-lg-4 {
        -ms-grid-row-span: 4;
        grid-row-end: span 4;
    }

    .grid_item.rowspan-lg-5 {
        -ms-grid-row-span: 5;
        grid-row-end: span 5;
    }

    .grid_item.rowspan-lg-6 {
        -ms-grid-row-span: 6;
        grid-row-end: span 6;
    }

    .grid_item.rowspan-lg-7 {
        -ms-grid-row-span: 7;
        grid-row-end: span 7;
    }

    .grid_item.rowspan-lg-8 {
        -ms-grid-row-span: 8;
        grid-row-end: span 8;
    }

    .grid_item.rowspan-lg-9 {
        -ms-grid-row-span: 9;
        grid-row-end: span 9;
    }

    .grid_item.rowspan-lg-10 {
        -ms-grid-row-span: 10;
        grid-row-end: span 10;
    }

    .grid_item.rowspan-lg-11 {
        -ms-grid-row-span: 11;
        grid-row-end: span 11;
    }

    .grid_item.rowspan-lg-12 {
        -ms-grid-row-span: 12;
        grid-row-end: span 12;
    }

    .grid_item.colspan-lg-1 {
        -ms-grid-column-span: 1;
        grid-column-end: span 1;
    }

    .grid_item.colspan-lg-2 {
        -ms-grid-column-span: 2;
        grid-column-end: span 2;
    }

    .grid_item.colspan-lg-3 {
        -ms-grid-column-span: 3;
        grid-column-end: span 3;
    }

    .grid_item.colspan-lg-4 {
        -ms-grid-column-span: 4;
        grid-column-end: span 4;
    }

    .grid_item.colspan-lg-5 {
        -ms-grid-column-span: 5;
        grid-column-end: span 5;
    }

    .grid_item.colspan-lg-6 {
        -ms-grid-column-span: 6;
        grid-column-end: span 6;
    }

    .grid_item.colspan-lg-7 {
        -ms-grid-column-span: 7;
        grid-column-end: span 7;
    }

    .grid_item.colspan-lg-8 {
        -ms-grid-column-span: 8;
        grid-column-end: span 8;
    }

    .grid_item.colspan-lg-9 {
        -ms-grid-column-span: 9;
        grid-column-end: span 9;
    }

    .grid_item.colspan-lg-10 {
        -ms-grid-column-span: 10;
        grid-column-end: span 10;
    }

    .grid_item.colspan-lg-11 {
        -ms-grid-column-span: 11;
        grid-column-end: span 11;
    }

    .grid_item.colspan-lg-12 {
        -ms-grid-column-span: 12;
        grid-column-end: span 12;
    }
}

@media (min-width: 1260px) {
    .rows-xl-1 {
        -ms-grid-rows: (auto)[1];
        grid-template-rows: repeat(1, auto);
    }

    .rows-xl-2 {
        -ms-grid-rows: (auto)[2];
        grid-template-rows: repeat(2, auto);
    }

    .rows-xl-3 {
        -ms-grid-rows: (auto)[3];
        grid-template-rows: repeat(3, auto);
    }

    .rows-xl-4 {
        -ms-grid-rows: (auto)[4];
        grid-template-rows: repeat(4, auto);
    }

    .rows-xl-5 {
        -ms-grid-rows: (auto)[5];
        grid-template-rows: repeat(5, auto);
    }

    .rows-xl-6 {
        -ms-grid-rows: (auto)[6];
        grid-template-rows: repeat(6, auto);
    }

    .rows-xl-7 {
        -ms-grid-rows: (auto)[7];
        grid-template-rows: repeat(7, auto);
    }

    .rows-xl-8 {
        -ms-grid-rows: (auto)[8];
        grid-template-rows: repeat(8, auto);
    }

    .rows-xl-9 {
        -ms-grid-rows: (auto)[9];
        grid-template-rows: repeat(9, auto);
    }

    .rows-xl-10 {
        -ms-grid-rows: (auto)[10];
        grid-template-rows: repeat(10, auto);
    }

    .rows-xl-11 {
        -ms-grid-rows: (auto)[11];
        grid-template-rows: repeat(11, auto);
    }

    .rows-xl-12 {
        -ms-grid-rows: (auto)[12];
        grid-template-rows: repeat(12, auto);
    }

    .cols-xl-1 {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1, 1fr);
    }

    .cols-xl-2 {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .cols-xl-3 {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .cols-xl-4 {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    .cols-xl-5 {
        -ms-grid-columns: (1fr)[5];
        grid-template-columns: repeat(5, 1fr);
    }

    .cols-xl-6 {
        -ms-grid-columns: (1fr)[6];
        grid-template-columns: repeat(6, 1fr);
    }

    .cols-xl-7 {
        -ms-grid-columns: (1fr)[7];
        grid-template-columns: repeat(7, 1fr);
    }

    .cols-xl-8 {
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr);
    }

    .cols-xl-9 {
        -ms-grid-columns: (1fr)[9];
        grid-template-columns: repeat(9, 1fr);
    }

    .cols-xl-10 {
        -ms-grid-columns: (1fr)[10];
        grid-template-columns: repeat(10, 1fr);
    }

    .cols-xl-11 {
        -ms-grid-columns: (1fr)[11];
        grid-template-columns: repeat(11, 1fr);
    }

    .cols-xl-12 {
        -ms-grid-columns: (1fr)[12];
        grid-template-columns: repeat(12, 1fr);
    }

    .grid_item.position-row-xl-1 {
        -ms-grid-row: 1;
        grid-row-start: 1;
    }

    .grid_item.position-row-xl-2 {
        -ms-grid-row: 2;
        grid-row-start: 2;
    }

    .grid_item.position-row-xl-3 {
        -ms-grid-row: 3;
        grid-row-start: 3;
    }

    .grid_item.position-row-xl-4 {
        -ms-grid-row: 4;
        grid-row-start: 4;
    }

    .grid_item.position-row-xl-5 {
        -ms-grid-row: 5;
        grid-row-start: 5;
    }

    .grid_item.position-row-xl-6 {
        -ms-grid-row: 6;
        grid-row-start: 6;
    }

    .grid_item.position-row-xl-7 {
        -ms-grid-row: 7;
        grid-row-start: 7;
    }

    .grid_item.position-row-xl-8 {
        -ms-grid-row: 8;
        grid-row-start: 8;
    }

    .grid_item.position-row-xl-9 {
        -ms-grid-row: 9;
        grid-row-start: 9;
    }

    .grid_item.position-row-xl-10 {
        -ms-grid-row: 10;
        grid-row-start: 10;
    }

    .grid_item.position-row-xl-11 {
        -ms-grid-row: 11;
        grid-row-start: 11;
    }

    .grid_item.position-row-xl-12 {
        -ms-grid-row: 12;
        grid-row-start: 12;
    }

    .grid_item.position-col-xl-1 {
        -ms-grid-column: 1;
        grid-column-start: 1;
    }

    .grid_item.position-col-xl-2 {
        -ms-grid-column: 2;
        grid-column-start: 2;
    }

    .grid_item.position-col-xl-3 {
        -ms-grid-column: 3;
        grid-column-start: 3;
    }

    .grid_item.position-col-xl-4 {
        -ms-grid-column: 4;
        grid-column-start: 4;
    }

    .grid_item.position-col-xl-5 {
        -ms-grid-column: 5;
        grid-column-start: 5;
    }

    .grid_item.position-col-xl-6 {
        -ms-grid-column: 6;
        grid-column-start: 6;
    }

    .grid_item.position-col-xl-7 {
        -ms-grid-column: 7;
        grid-column-start: 7;
    }

    .grid_item.position-col-xl-8 {
        -ms-grid-column: 8;
        grid-column-start: 8;
    }

    .grid_item.position-col-xl-9 {
        -ms-grid-column: 9;
        grid-column-start: 9;
    }

    .grid_item.position-col-xl-10 {
        -ms-grid-column: 10;
        grid-column-start: 10;
    }

    .grid_item.position-col-xl-11 {
        -ms-grid-column: 11;
        grid-column-start: 11;
    }

    .grid_item.position-col-xl-12 {
        -ms-grid-column: 12;
        grid-column-start: 12;
    }

    .grid_item.rowspan-xl-1 {
        -ms-grid-row-span: 1;
        grid-row-end: span 1;
    }

    .grid_item.rowspan-xl-2 {
        -ms-grid-row-span: 2;
        grid-row-end: span 2;
    }

    .grid_item.rowspan-xl-3 {
        -ms-grid-row-span: 3;
        grid-row-end: span 3;
    }

    .grid_item.rowspan-xl-4 {
        -ms-grid-row-span: 4;
        grid-row-end: span 4;
    }

    .grid_item.rowspan-xl-5 {
        -ms-grid-row-span: 5;
        grid-row-end: span 5;
    }

    .grid_item.rowspan-xl-6 {
        -ms-grid-row-span: 6;
        grid-row-end: span 6;
    }

    .grid_item.rowspan-xl-7 {
        -ms-grid-row-span: 7;
        grid-row-end: span 7;
    }

    .grid_item.rowspan-xl-8 {
        -ms-grid-row-span: 8;
        grid-row-end: span 8;
    }

    .grid_item.rowspan-xl-9 {
        -ms-grid-row-span: 9;
        grid-row-end: span 9;
    }

    .grid_item.rowspan-xl-10 {
        -ms-grid-row-span: 10;
        grid-row-end: span 10;
    }

    .grid_item.rowspan-xl-11 {
        -ms-grid-row-span: 11;
        grid-row-end: span 11;
    }

    .grid_item.rowspan-xl-12 {
        -ms-grid-row-span: 12;
        grid-row-end: span 12;
    }

    .grid_item.colspan-xl-1 {
        -ms-grid-column-span: 1;
        grid-column-end: span 1;
    }

    .grid_item.colspan-xl-2 {
        -ms-grid-column-span: 2;
        grid-column-end: span 2;
    }

    .grid_item.colspan-xl-3 {
        -ms-grid-column-span: 3;
        grid-column-end: span 3;
    }

    .grid_item.colspan-xl-4 {
        -ms-grid-column-span: 4;
        grid-column-end: span 4;
    }

    .grid_item.colspan-xl-5 {
        -ms-grid-column-span: 5;
        grid-column-end: span 5;
    }

    .grid_item.colspan-xl-6 {
        -ms-grid-column-span: 6;
        grid-column-end: span 6;
    }

    .grid_item.colspan-xl-7 {
        -ms-grid-column-span: 7;
        grid-column-end: span 7;
    }

    .grid_item.colspan-xl-8 {
        -ms-grid-column-span: 8;
        grid-column-end: span 8;
    }

    .grid_item.colspan-xl-9 {
        -ms-grid-column-span: 9;
        grid-column-end: span 9;
    }

    .grid_item.colspan-xl-10 {
        -ms-grid-column-span: 10;
        grid-column-end: span 10;
    }

    .grid_item.colspan-xl-11 {
        -ms-grid-column-span: 11;
        grid-column-end: span 11;
    }

    .grid_item.colspan-xl-12 {
        -ms-grid-column-span: 12;
        grid-column-end: span 12;
    }
}

/*  Grid Gap

        .grid-gap               Add gaps/gutters between rows and columns
                                [Extends .grid]
    
        .grid-row-gap           Add gaps/gutters between rows only
                                [Extends .grid]

        .grid-column-gap        Add gaps/gutters between columns only
                                [Extends .grid]

        Note: there is potential to add .grid-gap-xs, .grid-gap-sm etc.

    Example Markup:
    <div class="grid cols-3 rows-2 grid-gap">
        <div class="grid_item">
            ...
        </div>
        <div class="grid_item">
            ...
        </div>
    </div>

*/
.grid-gap {
    grid-column-gap: calc(2rem * 2);
    grid-row-gap: calc(1.2em * 2);
}

@media print, (min-width: 768px) {
    .grid-gap {
        grid-column-gap: calc(5rem * 2);
        grid-row-gap: calc(1em * 2);
    }
}

.grid-column-gap {
    grid-column-gap: calc(2rem * 2);
}

@media print, (min-width: 768px) {
    .grid-column-gap {
        grid-column-gap: calc(5rem * 2);
    }
}

.grid-row-gap {
    grid-row-gap: calc(1.2em * 2);
}

@media print, (min-width: 768px) {
    .grid-row-gap {
        grid-row-gap: calc(1em * 2);
    }
}

/*  Grid Auto Flow 
   
    .grid-auto-flow-column  Tells the auto-placement algorithm to fill in each row in turn, adding new columns as necessary
                            [Extends .grid]

    .grid-auto-flow-row     Tells the auto-placement algorithm to fill in each column in turn, adding new rows as necessary
                            [Extends .grid]
                            [Note: grid-auto-flow: row;  it the default - so remove class is best practice]

*/
.grid-auto-flow-column {
    grid-auto-flow: column !important;
}

.grid-auto-flow-row {
    grid-auto-flow: row !important;
}

/*  Grid Alignment 

    .justify-content-*  Aligns the whole grid horizontally
                        [Extends .grid]

    .align-content-*    Aligns the whole grid vertically
                        [Extends .grid]

*/
.grid.justify-content-start {
    -ms-flex-pack: start !important;
    justify-content: start !important;
}

.grid.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.grid.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: end !important;
}

.grid.justify-content-stretch {
    -ms-flex-pack: stretch !important;
    justify-content: stretch !important;
}

.grid.justify-content-space-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.grid.justify-content-space-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}

.grid.justify-content-space-evenly {
    -ms-flex-pack: space-evenly !important;
    justify-content: space-evenly !important;
}

.grid.align-content-start {
    -ms-flex-line-pack: start !important;
    align-content: start !important;
}

.grid.align-content-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
}

.grid.align-content-end {
    -ms-flex-line-pack: end !important;
    align-content: end !important;
}

.grid.align-content-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
}

.grid .align-content-space-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
}

.grid .align-content-space-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
}

.grid.align-content-space-evenly {
    -ms-flex-line-pack: space-evenly !important;
    align-content: space-evenly !important;
}

/*  Grid Items Alignment

    .justify-items-*    Aligns ALL the grid items content horizontally
                        [Default is stretch]
                        [Extends .grid]

    .align-items-*      Aligns ALL the grid items content vertically
                        [Default is stretch]
                        [Extends .grid]

*/
.grid.justify-items-start {
    -ms-grid-column-align: start !important;
    justify-items: start !important;
}

.grid.justify-items-center {
    -ms-grid-column-align: center !important;
    justify-items: center !important;
}

.grid.justify-items-end {
    -ms-grid-column-align: end !important;
    justify-items: end !important;
}

.grid.justify-items-stretch {
    -ms-grid-column-align: stretch !important;
    justify-items: stretch !important;
}

.grid.align-items-start {
    -ms-flex-align: start !important;
    align-items: start !important;
}

.grid.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.grid.align-items-end {
    -ms-flex-align: end !important;
    align-items: end !important;
}

.grid.align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

/*  Individual Grid Items Alignment

    .justify-self-*     Aligns the grid item content horizontally
                        [Default is stretch]
                        [Extends .grid_item]
                        Note: Not supported in IE11

    .align-self-*       Aligns the grid item content vertically
                        [Default is stretch]
                        [Extends .grid_item]
*/
.grid_item.justify-self-start {
    justify-self: start !important;
}

.grid_item.justify-self-center {
    justify-self: center !important;
}

.grid_item.justify-self-end {
    justify-self: end !important;
}

.grid_item.justify-self-stretch {
    justify-self: stretch !important;
}

.grid_item.align-self-start {
    -ms-flex-item-align: start !important;
    -ms-grid-row-align: start !important;
    align-self: start !important;
}

.grid_item.align-self-center {
    -ms-flex-item-align: center !important;
    -ms-grid-row-align: center !important;
    align-self: center !important;
}

.grid_item.align-self-end {
    -ms-flex-item-align: end !important;
    -ms-grid-row-align: end !important;
    align-self: end !important;
}

.grid_item.align-self-stretch {
    -ms-flex-item-align: stretch !important;
    -ms-grid-row-align: stretch !important;
    align-self: stretch !important;
}

/*
   PLACHOLDER CSS TABLE STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    %table        Base styles for all responsive tables regardless of whether or not they are display:table
                  [Placeholder Selector]

*/
.table-xs, .table-sm, .table-md {
    margin: 0;
    padding: 0;
    width: 100%;
}

.center.table-xs, .center.table-sm, .center.table-md {
    width: auto;
    margin: 0 auto;
}

.auto-width.table-xs, .auto-width.table-sm, .auto-width.table-md {
    width: auto;
}

.deco.table-xs, .deco.table-sm, .deco.table-md {
    border: 1px solid var(--border-light-gray);
    border-collapse: collapse;
}

    .deco.table-xs > .table-row, .deco.table-sm > .table-row, .deco.table-md > .table-row {
        border-bottom: 1px solid var(--border-light-gray);
        /*apply a horizontal border between rows when not rendering as a table */
    }

        .deco.table-xs > .table-row:last-child, .deco.table-sm > .table-row:last-child, .deco.table-md > .table-row:last-child {
            border-bottom: none;
        }

/*
   MIXIN CSS TABLE STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    table-display()        Base styles for responsive tables when they are display:table;
                           [Placeholder Selector]

*/
/* CSS TABLES
    
    .table-container        For nested tables or tables that should be flush to the edge of their container.
                            Sets negative horiztonal margin equal to horizontal padding of contained table-cells
    
    .table-*                An element that renders as a table at * screen sizes and above
                            Currently supports XS, SM, MD (LG, XL have yet to be a valid use case)
                            [Module parent]
    .deco                   Applies a border around the element and borders under each row when not rendering as a table
                            Applies borders around each table cell when rendering as a table
                            [Extends .table-*]
    .center                 Centers the table when rending as a table
                            [Extends .table-*]
    .auto-width             Sets the width to auto so the table shrinks around its content and doesn't extend to full width
                            [Extends .table-*]

    .table-header           A header row which labels the columns.
                            An element that is visible and renders as a table row when its parent renders as a table; Otherwise it is hidden
                            [Child of .table-*]

    .table-row              An element that renders as a table row when its parent renders as a table
                            [Child of .table-*]
    .deco-bottom            Adds a bottom border to child table cell elements when its parent renders as a table
                            [Extends .table-row]
    .deco-top               Adds a top border to child table cell elements when its parent renders as a table
                            [Extends .table-row]
    .bg-*                   Apply a background color to the row
                            [Extends .table-row]
    .has-ribbon             An item with a ribbon; Leaves room for the ribbon
                            [Extends .table-row; See modules_decoration.css]
    .has-ribbon-large       An item with a large ribbon; Leaves room for the ribbon
                            [Extends .table-row;  See modules_decoration.css]
    .has-empty-ribbon       An item without a ribbon in a list of other items with ribbons
                            Leaves empty space where a ribbon would be on MD+ only
                            [Extends .table-row; See modules_decoration.css]
    .has-empty-ribbon-large    An item without a large ribbon in a list of other items with large ribbons
                                Leaves empty space where a ribbon would be on MD+ only
                                [Extends .table-row;  See modules_decoration.css]
    

    .table-cell             An element that renders as a table cell when its parent renders as a table row     
                            [Child of .table-row]
    .full-width             A table cell that stretches to take up the maximum amount of space.                      
                            [Extends .table-cell]
    .deco-left              Adds a left border to child table cell elements when its parent renders as a table
                            [Extends .table-cell]
    .deco-right             Adds a right border to child table cell elements when its parent renders as a table
                            [Extends .table-cell]
    .valign-middle          Vertically align items to the middle  when its parent renders as a table
                            [Extends .table-cell]
    .valign-bottom          Vertically align items to the bottom  when its parent renders as a table
                            [Extends .table-cell]
    .bg-*                   Apply a background color to the cells
                            [Extends .table-cell]

    .table-caption          An element that renders as a table caption when its parent renders as a table
                            [Child of .table-*]

*/
.table-container {
    margin-left: -2rem;
    margin-right: -2rem;
}

@media print, (min-width: 768px) {
    .table-container {
        margin-right: -5rem;
        margin-left: -5rem;
    }
}

.table-header {
    display: none;
}

.table-row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

@media print, (min-width: 768px) {
    .table-row {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

.table-cell {
    display: block;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    border-color: var(--border-light-gray);
    border-style: solid;
    border-width: 0;
}

@media print, (min-width: 768px) {
    .table-cell {
        padding-right: 5rem;
        padding-left: 5rem;
    }
}

a.table-cell {
    text-decoration: none;
}

.hover a.table-cell.clickable:active {
    background-color: var(--bg-faint-gray);
}

.table-cell.full-width {
    width: 100%;
}

.table-cell.deco-right {
    border-right-width: 0;
}

.table-cell.deco-left {
    border-left-width: 0;
}

.table-cell[class*="bg-"],
.table-row[class*="bg-"] > .table-cell,
.table-header[class*="bg-"] > .table-cell {
    border-color: var(--border-white-opacity-20);
}

.table-cell.bg-faint-gray,
.table-row.bg-faint-gray > .table-cell,
.table-header.bg-faint-gray > .table-cell {
    border-color: var(--border-gray-90);
}

/* XS Table */
.table-xs {
    display: table;
}

    .table-xs > .table-row,
    .table-xs > .table-header {
        display: table-row;
    }

        .table-xs > .table-row > .table-cell,
        .table-xs > .table-header > .table-cell {
            display: table-cell;
            vertical-align: top;
            padding-top: 1.2em;
            padding-bottom: 1.2em;
        }

@media print, (min-width: 768px) {
    .table-xs > .table-row > .table-cell,
    .table-xs > .table-header > .table-cell {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

.table-xs > .table-row > .table-cell.valign-middle,
.table-xs > .table-header > .table-cell.valign-middle {
    vertical-align: middle;
}

.table-xs > .table-row > .table-cell.valign-bottom,
.table-xs > .table-header > .table-cell.valign-bottom {
    vertical-align: bottom;
}

.table-xs.deco > .table-header > .table-cell {
    border-left-width: 1px;
}

    .table-xs.deco > .table-header > .table-cell:first-child {
        border-left-width: 0;
    }

.table-xs.deco > .table-row > .table-cell {
    border-width: 1px;
}

.table-xs > .table-row {
    padding: 0;
}

    .table-xs > .table-row > .table-cell.deco-right {
        border-right-width: 1px;
    }

    .table-xs > .table-row > .table-cell.deco-left {
        border-left-width: 1px;
    }

    .table-xs > .table-row.deco-bottom > .table-cell {
        border-bottom-width: 1px;
    }

    .table-xs > .table-row.deco-top > .table-cell {
        border-top-width: 1px;
    }

.table-xs .basic-item.deco-top-thick > .table-cell {
    border-top-width: 5px;
}

.table-xs > .table-caption {
    display: table-caption;
    caption-side: bottom;
}

/* SM Table */
@media print, (min-width: 480px) {
    .table-sm {
        display: table;
    }

        .table-sm > .table-row,
        .table-sm > .table-header {
            display: table-row;
        }

            .table-sm > .table-row > .table-cell,
            .table-sm > .table-header > .table-cell {
                display: table-cell;
                vertical-align: top;
                padding-top: 1.2em;
                padding-bottom: 1.2em;
            }
}

@media print, print and (min-width: 480px), print and (min-width: 768px), (min-width: 480px) and (min-width: 768px) {
    .table-sm > .table-row > .table-cell,
    .table-sm > .table-header > .table-cell {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

@media print, (min-width: 480px) {
    .table-sm > .table-row > .table-cell.valign-middle,
    .table-sm > .table-header > .table-cell.valign-middle {
        vertical-align: middle;
    }

    .table-sm > .table-row > .table-cell.valign-bottom,
    .table-sm > .table-header > .table-cell.valign-bottom {
        vertical-align: bottom;
    }

    .table-sm.deco > .table-header > .table-cell {
        border-left-width: 1px;
    }

        .table-sm.deco > .table-header > .table-cell:first-child {
            border-left-width: 0;
        }

    .table-sm.deco > .table-row > .table-cell {
        border-width: 1px;
    }

    .table-sm > .table-row {
        padding: 0;
    }

        .table-sm > .table-row > .table-cell.deco-right {
            border-right-width: 1px;
        }

        .table-sm > .table-row > .table-cell.deco-left {
            border-left-width: 1px;
        }

        .table-sm > .table-row.deco-bottom > .table-cell {
            border-bottom-width: 1px;
        }

        .table-sm > .table-row.deco-top > .table-cell {
            border-top-width: 1px;
        }

    .table-sm .basic-item.deco-top-thick > .table-cell {
        border-top-width: 5px;
    }

    .table-sm > .table-caption {
        display: table-caption;
        caption-side: bottom;
    }
}

/* MD Table */
@media print, (min-width: 768px) {
    .table-md {
        display: table;
    }

        .table-md > .table-row,
        .table-md > .table-header {
            display: table-row;
        }

            .table-md > .table-row > .table-cell,
            .table-md > .table-header > .table-cell {
                display: table-cell;
                vertical-align: top;
                padding-top: 1.2em;
                padding-bottom: 1.2em;
            }
}

@media print, print and (min-width: 768px), print and (min-width: 768px), (min-width: 768px) and (min-width: 768px) {
    .table-md > .table-row > .table-cell,
    .table-md > .table-header > .table-cell {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

@media print, (min-width: 768px) {
    .table-md > .table-row > .table-cell.valign-middle,
    .table-md > .table-header > .table-cell.valign-middle {
        vertical-align: middle;
    }

    .table-md > .table-row > .table-cell.valign-bottom,
    .table-md > .table-header > .table-cell.valign-bottom {
        vertical-align: bottom;
    }

    .table-md.deco > .table-header > .table-cell {
        border-left-width: 1px;
    }

        .table-md.deco > .table-header > .table-cell:first-child {
            border-left-width: 0;
        }

    .table-md.deco > .table-row > .table-cell {
        border-width: 1px;
    }

    .table-md > .table-row {
        padding: 0;
    }

        .table-md > .table-row > .table-cell.deco-right {
            border-right-width: 1px;
        }

        .table-md > .table-row > .table-cell.deco-left {
            border-left-width: 1px;
        }

        .table-md > .table-row.deco-bottom > .table-cell {
            border-bottom-width: 1px;
        }

        .table-md > .table-row.deco-top > .table-cell {
            border-top-width: 1px;
        }

    .table-md .basic-item.deco-top-thick > .table-cell {
        border-top-width: 5px;
    }

    .table-md > .table-caption {
        display: table-caption;
        caption-side: bottom;
    }
}

/* TABLE CELL WIDTHS
    
    .cell-xs-*      A table cell set to a specific percentage width, based on 12 units
                    (Allows division by 2, 3, 4, 6)
                    i.e. .cell-xs-3
    
*/
.cell-xs-1 {
    width: 8.333333333333332% !important;
}

.cell-xs-2 {
    width: 16.666666666666664% !important;
}

.cell-xs-3 {
    width: 25% !important;
}

.cell-xs-4 {
    width: 33.33333333333333% !important;
}

.cell-xs-5 {
    width: 41.66666666666667% !important;
}

.cell-xs-6 {
    width: 50% !important;
}

.cell-xs-7 {
    width: 58.333333333333336% !important;
}

.cell-xs-8 {
    width: 66.66666666666666% !important;
}

.cell-xs-9 {
    width: 75% !important;
}

.cell-xs-10 {
    width: 83.33333333333334% !important;
}

.cell-xs-11 {
    width: 91.66666666666666% !important;
}

.cell-xs-12 {
    width: 100% !important;
}

@media print, (min-width: 480px) {
    .cell-sm-1 {
        width: 8.333333333333332% !important;
    }

    .cesl-sm-2 {
        width: 16.666666666666664% !important;
    }

    .cell-sm-3 {
        width: 25% !important;
    }

    .cell-sm-4 {
        width: 33.33333333333333% !important;
    }

    .cell-sm-5 {
        width: 41.66666666666667% !important;
    }

    .cell-sm-6 {
        width: 50% !important;
    }

    .cell-sm-7 {
        width: 58.333333333333336% !important;
    }

    .cell-sm-8 {
        width: 66.66666666666666% !important;
    }

    .cell-sm-9 {
        width: 75% !important;
    }

    .cell-sm-10 {
        width: 83.33333333333334% !important;
    }

    .cell-sm-11 {
        width: 91.66666666666666% !important;
    }

    .cell-sm-12 {
        width: 100% !important;
    }
}

@media print, (min-width: 768px) {
    .cell-md-1 {
        width: 8.333333333333332% !important;
    }

    .cell-md-2 {
        width: 16.666666666666664% !important;
    }

    .cell-md-3 {
        width: 25% !important;
    }

    .cell-md-4 {
        width: 33.33333333333333% !important;
    }

    .cell-md-5 {
        width: 41.66666666666667% !important;
    }

    .cell-md-6 {
        width: 50% !important;
    }

    .cell-md-7 {
        width: 58.333333333333336% !important;
    }

    .cell-md-8 {
        width: 66.66666666666666% !important;
    }

    .cell-md-9 {
        width: 75% !important;
    }

    .cell-md-10 {
        width: 83.33333333333334% !important;
    }

    .cell-md-11 {
        width: 91.66666666666666% !important;
    }

    .cell-md-12 {
        width: 100% !important;
    }
}

@media (min-width: 980px) {
    .cell-lg-1 {
        width: 8.333333333333332% !important;
    }

    .cesl-lg-2 {
        width: 16.666666666666664% !important;
    }

    .cell-lg-3 {
        width: 25% !important;
    }

    .cell-lg-4 {
        width: 33.33333333333333% !important;
    }

    .cell-lg-5 {
        width: 41.66666666666667% !important;
    }

    .cell-lg-6 {
        width: 50% !important;
    }

    .cell-lg-7 {
        width: 58.333333333333336% !important;
    }

    .cell-lg-8 {
        width: 66.66666666666666% !important;
    }

    .cell-lg-9 {
        width: 75% !important;
    }

    .cell-lg-10 {
        width: 83.33333333333334% !important;
    }

    .cell-lg-11 {
        width: 91.66666666666666% !important;
    }

    .cell-lg-12 {
        width: 100% !important;
    }
}

@media (min-width: 1260px) {
    .cell-xl-1 {
        width: 8.333333333333332% !important;
    }

    .cesl-xl-2 {
        width: 16.666666666666664% !important;
    }

    .cell-xl-3 {
        width: 25% !important;
    }

    .cell-xl-4 {
        width: 33.33333333333333% !important;
    }

    .cell-xl-5 {
        width: 41.66666666666667% !important;
    }

    .cell-xl-6 {
        width: 50% !important;
    }

    .cell-xl-7 {
        width: 58.333333333333336% !important;
    }

    .cell-xl-8 {
        width: 66.66666666666666% !important;
    }

    .cell-xl-9 {
        width: 75% !important;
    }

    .cell-xl-10 {
        width: 83.33333333333334% !important;
    }

    .cell-xl-11 {
        width: 91.66666666666666% !important;
    }

    .cell-xl-12 {
        width: 100% !important;
    }
}

/* LINK CELL

    Example Markup:
    <div class="table-cell"><div class="link-cell">...

    .link-cell          A wrapper for the contents of a clickable table cell
                        Establishes positioning context for an icon to indicate that the cell is clickable
                        [Module Parent; Child of .table-cell]
    
    .link-cell_icon     The icon which indicates that the cell is clickable
                        [Child of .link-cell]
                    
*/
.link-cell {
    display: block;
    position: relative;
    padding-right: 1.7143em;
}

    .link-cell:focus {
        outline-style: solid;
    }

.link-cell_icon {
    position: absolute;
    top: 0;
    right: 0;
}

    .link-cell_icon.txt-middle {
        top: 30%;
    }

    .link-cell_icon.medium.txt-middle {
        top: 25%;
    }

/* RESPONSIVE TABLE 
    
    .faux-table                     A CSS table that responds to screen size. 
                                    Columns will wrap to their own line on small screens.
                                    Good for two column tables, where the second column should wrap to the next line on narrow screens.
                                    [Module Parent]
    .faux-table.flat                The faux-table automatically applies spacing below table rows and below the table itself. 
                                    Use the "flat" protocol to remove spacing.
    .faux-table.flat-wide-screens   Remove spacing on wide screens only
    .faux-table.flat-medium-screens Remove spacing on medium screens 
    .faux-table_row                 A container for a row of data
                                    [Child of .faux-table]
    .faux-table_item                A container for a piece of data
                                    [Child of .faux-table]

*/
.faux-table {
    display: block;
}

@media print, (min-width: 768px) {
    .faux-table .faux-table {
        display: table;
    }
}

h2 + .faux-table, .looks-like-h2 + .faux-table {
    margin-top: 2rem;
}

.faux-table_row {
    display: block;
    padding-bottom: .7143em;
}

    .faux-table_row:last-child {
        padding-bottom: 0;
    }

.faux-table.condensed .faux-table_row {
    padding-bottom: .3571em;
}

@media print, (min-width: 768px) {
    .faux-table_row {
        display: table-row;
        padding-bottom: 0;
    }
}

.faux-table_item {
    display: block;
}

.faux-table.flat .faux-table_item,
.faux-table_row.flat .faux-table_item {
    padding-bottom: 0;
}

.faux-table.condensed .faux-table_item {
    padding-bottom: .2143em;
}

@media print, (min-width: 768px) {
    .faux-table_item {
        display: table-cell;
        vertical-align: top;
        padding: 0 .8571em .8571em 0;
    }

    .faux-table_row:last-child .faux-table_item,
    .faux-table.flat .faux-table_item,
    .faux-table_row.flat .faux-table_item {
        padding-bottom: 0;
    }

    .faux-table.condensed .faux-table_item {
        padding-bottom: .4286em;
    }

    .faux-table_item.txt-bottom {
        vertical-align: bottom;
    }

    .faux-table_item.txt-middle {
        vertical-align: middle;
    }
}

/* OPACITY 
    .opacity-invisible     A class to set the visiblity of any element to 0.
    .opacity-visible       A class to set the visiblity of any element to 1.

    Note: Set in Web Branch on pjax container via JavaScript.
    Note: !important used because as utility classes they need to be able to override style definitions of classes defined with the same specificity later in the CSS bundle.
*/
.opacity-invisible {
    opacity: 0 !important;
}

.opacity-visible {
    opacity: 1 !important;
}

.transition-opacity {
    transition: opacity .5s ease-in-out;
}

.transition-opacity-fast {
    transition: opacity .25s ease-in-out;
}

/*   
    PLACHOLDER BOX STYLES
    These placeholder rules will not generate CSS on their own.
    Must be used with the @extend directive.
*/
/* BOXES 

    .box                    A container with padding and rounded corners
                            [Module parent]  

    .padded                 A box with extra padding
                            [Extends .box, .box-message or .box-left-cap]

    .sharp                  A box, box message or box w/left cap  without rounded corners
                            [Extends .box, .box-message or .box-left-cap]

    .shadowed               A box, box message or box w/left cap with a drop shadow
                            [Extends .box, .box-message or .box-left-cap]

    .deco                   A box with a border
                            [Extends .box]

    .has-close-x            A close X in the upper right                            
                            [Extends .box]

    .inline-block           A box with display inline-block
                            [Extends .box]

*/
.box {
    display: block;
    padding: 1.2em 1.2em;
    margin: 0 0 3rem;
    border-radius: 3px;
    position: relative;
    /* WITH TABLE */
}

@media print, (min-width: 768px) {
    .box {
        padding: 1.5em 1.2em;
        margin: 0 0 3rem;
    }
}

.padded.box {
    padding: 1.5em 1.2em;
}

@media print, (min-width: 768px) {
    .padded.box {
        padding: 2em 2em;
    }
}

.sharp.box {
    border-radius: 0;
}

.shadowed.box {
    box-shadow: 0 0 0.2857em var(--box-shadow);
    margin: 0 -3px 3rem;
}

@media print, (min-width: 768px) {
    .shadowed.box {
        margin: 0 -3px 3rem;
    }
}

.box > :last-child {
    margin-bottom: 0;
}

.box[class*=table-] {
    padding: 0;
}

.has-close-x.box .close-x {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em 1.2em;
    color: var(--text-light-gray);
    text-decoration: none;
    z-index: 1;
}

@media print, (min-width: 768px) {
    .has-close-x.box .close-x {
        padding: 1em 1.2em;
    }
}

.has-close-x.box .close-x.active {
    /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
    background-color: var(--bg-faint-gray);
}

.box.deco, .box.shadowed {
    border: 1px solid var(--border-gray-87);
}

.box.inline-block {
    display: inline-block;
}

/*
   PLACHOLDER BUTTON STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

      %btn       Base styles for all buttons
                [Placeholder Selector]

*/
/* 

    BUTTON SIZES

    .small                     A small button with less padding (on mobile) that remains natural width and does not stretch to full width at any screen size.
                               [Extends .button-*]
    .xsmall                    An extra small button with less padding that remains natural width and does not stretch to full width at any screen size.
                               [Extends .button-*]
    .xlarge                    A hollow button for a single large icon
                               [Extends .button-hollow-circle]
   
    .full-width                A button that fills the entire width of its container at all screen sizes
                               [Extends .button-*]

*/
.button-primary, .button-secondary, .button-tertiary, .button-link, .button-reversed {
    display: inline-block;
    width: auto;
    margin: 0.5em 1em 1em 0;
    padding: 0.7em 1.2em;
    line-height: normal;
    border: none;
    text-align: center;
    font-weight: 500;
    font-size: 1.6rem;
    background-color: transparent;
    border-radius: 3px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}

@media print, (min-width: 768px) {
    .button-primary, .button-secondary, .button-tertiary, .button-link, .button-reversed {
        width: auto;
        padding: 0.6em 1.2em;
        font-size: 1.4rem;
    }
}

.small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-link, .small.button-reversed, .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-link, .xsmall.button-reversed {
    display: inline-block;
    width: auto;
}

@media print, (min-width: 768px) {
    .small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-link, .small.button-reversed, .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-link, .xsmall.button-reversed {
        width: auto;
    }
}

.small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-link, .small.button-reversed {
    padding: 0.6em 1.5em;
    font-size: 1.4rem;
}

@media print, (min-width: 768px) {
    .small.button-primary, .small.button-secondary, .small.button-tertiary, .small.button-link, .small.button-reversed {
        padding: 0.6em 1.5em;
        font-size: 1.2rem;
    }
}

.xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-link, .xsmall.button-reversed {
    padding: 0.5em 1em;
    font-size: 1.2rem;
}

@media print, (min-width: 768px) {
    .xsmall.button-primary, .xsmall.button-secondary, .xsmall.button-tertiary, .xsmall.button-link, .xsmall.button-reversed {
        padding: 0.6em 1.5em;
        font-size: 1.2rem;
    }
}

.full-width.button-primary, .full-width.button-secondary, .full-width.button-tertiary, .full-width.button-link, .full-width.button-reversed {
    display: block;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

/* decoration and focus

    Use %btn so it applies to any element (button, input, span, div) 
    In addition, use a%btn selector, to override default anchor tag styles

*/
.button-primary, .button-secondary, .button-tertiary, .button-link, .button-reversed,
a.button-primary,
a.button-secondary,
a.button-tertiary,
a.button-link,
a.button-reversed {
    text-decoration: none;
}

.hover .button-primary:focus, .hover .button-secondary:focus, .hover .button-tertiary:focus, .hover .button-link:focus, .hover .button-reversed:focus, .hover a.button-primary:focus, .hover a.button-secondary:focus, .hover a.button-tertiary:focus, .hover a.button-link:focus, .hover a.button-reversed:focus {
    outline-offset: -4px;
    outline: 1px dotted rgba(255, 255, 255, 0.8);
}

/*  GROUPS OF BUTTONS  - STACKED TO SIDE-BY-SIDE
    Adjust spacing between buttons to accommodate stacked on mobile versus side-by-side on desktop

*/
/* Group of buttons that are 50% wide on MD+ screens and stack on mobile */
.buttons-stretched, .buttons-stretched.basic-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    /* FLEX ORDER */
}

@media print, (min-width: 768px) {
    .buttons-stretched, .buttons-stretched.basic-item {
        -ms-flex-direction: row;
        flex-direction: row;
    }

        .buttons-stretched [class*=button-], .buttons-stretched.basic-item [class*=button-] {
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 50%;
            /* if only one button don't let it get too wide*/
        }
}

.buttons-stretched > .flex-first-mobile, .buttons-stretched.basic-item > .flex-first-mobile {
    /* Make the right button appear on top for mobile*/
}

@media (max-width: 767px) {
    .buttons-stretched > .flex-first-mobile, .buttons-stretched.basic-item > .flex-first-mobile {
        -ms-flex-order: -1;
        order: -1;
        margin-top: 0;
        margin-bottom: 1.5em;
    }
}

/*  
    ICONS IN BUTTONS 
    Adjust line-height to ensure button height remains the same height as buttons without icons across browsers
    Icons can only be used with <a> or <button> tags; <input> tags will not work

           
    .has-icon-only      A button that contains only an icon, reduces horizontal padding
                    Icon must be included in the markup
                    [Extends .button-*]
    .has-icon-right     A button with an icon to teh right of thext, reduces right padding
                    Icon must be included in the markup
                    [Extends .button-*]
    .has-icon-left      A button with an icon to the left of the text, reduces left padding
                    Icon must be included in the markup                
                    [Extends .button-*]
    .forward       A button with a "forward" icon, a chevron-right
                    Class automatically adds the icon, no icon needed in markup
                    Must be anchor or button tag; Input tag will not work
                    [Extends .button-*]
    .backward       A button with a "backward" icon, a chevron-left
                    Class automatically adds the icon, no icon needed in markup
                    [Extends .button-*]

*/
@media print, (min-width: 768px) {
    .has-icon-left[class*=button-], .backward[class*=button-] {
        padding-left: .9em;
    }
}

.small.has-icon-left[class*=button-], .small.backward[class*=button-] {
    padding-left: .9em;
}

@media print, (min-width: 768px) {
    .has-icon-right[class*=button-], .forward[class*=button-] {
        padding-right: .8em;
    }
}

.small.has-icon-right[class*=button-], .small.forward[class*=button-] {
    padding-right: .8em;
}

[class*=button-] [class*=icon-], .forward[class*=button-]:after, .backward[class*=button-]:before {
    position: relative;
    top: 2px;
}

    [class*=button-] [class*=icon-]:before, .backward[class*=button-]:before, [class*=button-] [class*=icon-]:after, .forward[class*=button-]:after {
        line-height: .5 !important;
        /*line-height shouldn't be larger than line height of the text in the button, so set it really small*/
    }

[class*=button-].has-icon-only {
    padding-left: 1.8em;
    padding-right: 1.7em;
}

    [class*=button-].has-icon-only.small {
        padding-left: .9em;
        padding-right: .8em;
    }

[class*=button-].forward:after {
    content: "\e603";
    display: inline !important;
    padding-left: .4em;
    margin-right: -1em;
}

@media print, (min-width: 768px) {
    [class*=button-].forward:after {
        margin-right: 0;
    }
}

[class*=button-].forward.small:after, [class*=button-].forward.xsmall:after {
    margin-right: 0;
}

[class*=button-].backward:before {
    content: "\e602";
    padding-right: .4em;
    margin-left: -1em;
}

    [class*=button-].backward:before.small, [class*=button-].backward:before.xsmall {
        margin-left: 0;
    }

@media print, (min-width: 768px) {
    [class*=button-].backward:before {
        margin-left: 0;
    }
}

[class*=button-].backward.small:before, [class*=button-].backward.xsmall:before {
    margin-left: 0;
    padding-right: 0;
}

/*
     PRIMARY BUTTON
    
     .button-primary           The primary action for a form/wizard
                               [Module Parent]

*/
.button-primary {
    font-weight: 500;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}

.button-primary,
a.button-primary {
    color: var(--text-white);
}

    .hover .button-primary:hover,
    .hover .button-primary:focus,
    .hover .button-primary:active, .button-primary.active, .hover
    a.button-primary:hover,
    .hover
    a.button-primary:focus,
    .hover
    a.button-primary:active,
    a.button-primary.active {
        color: var(--text-white);
        background-color: var(--border-primary-dark);
        border: 1px solid var(--border-primary-dark);
    }

/*
     SECONDARY BUTTON
    
     .button-secondary         The secondary action for a form/wizard
                               [Module Parent]

*/
.button-secondary {
    font-weight: 500;
    background-color: var(--bg-gray-44);
    border: 1px solid var(--border-gray-44);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}

.button-secondary,
a.button-secondary {
    color: var(--text-white);
}

    .hover .button-secondary:hover,
    .hover .button-secondary:focus,
    .hover .button-secondary:active, .button-secondary.active, .hover
    a.button-secondary:hover,
    .hover
    a.button-secondary:focus,
    .hover
    a.button-secondary:active,
    a.button-secondary.active {
        color: var(--text-white);
        background-color: var(--bg-gray-34);
        border: 1px solid var(--border-gray-34);
    }

/*
     TERTIARY BUTTON
    
     .button-tertiary          A tertiary action on a page; Less prominent
                               [Module Parent]

*/
.button-tertiary {
    font-weight: 500;
    background-color: transparent;
    border: 1px solid var(--border-med-gray);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}

.button-tertiary,
a.button-tertiary {
    color: var(--text-med-gray);
}

    .hover .button-tertiary:hover,
    .hover .button-tertiary:focus,
    .hover .button-tertiary:active, .button-tertiary.active, .hover
    a.button-tertiary:hover,
    .hover
    a.button-tertiary:focus,
    .hover
    a.button-tertiary:active,
    a.button-tertiary.active {
        color: var(--text-gray);
        background-color: var(--bg-faint-gray);
        border: 1px solid var(--border-gray);
    }

/*
    LINK BUTTON

    
    .button-link    An anchor tag, button tag or input[type="submit"] that looks like a stylized text link, but has a larger hit area like a button
                    [Module Parent]

*/
/* base styles */
.button-link {
    font-weight: 700;
    background-color: transparent;
    transition: color 0.2s ease;
    padding-left: .5em;
    padding-right: .5em;
}

    .button-link.backward {
        padding-left: .5em;
    }

    .button-link.forward {
        padding-right: .5em;
    }

/* text color, hover state */
.button-link,
a.button-link {
    color: var(--text-link);
}

    .hover .button-link:hover,
    .hover .button-link:focus,
    .hover .button-link:active, .button-link.active, .hover
    a.button-link:hover,
    .hover
    a.button-link:focus,
    .hover
    a.button-link:active,
    a.button-link.active {
        color: var(--text-link-active-extra-dark);
    }

    .button-link.txt-med-gray,
    a.button-link.txt-med-gray {
        color: var(--text-med-gray);
    }

        .hover .button-link.txt-med-gray:hover,
        .hover .button-link.txt-med-gray:focus,
        .hover .button-link.txt-med-gray:active, .button-link.txt-med-gray.active, .hover
        a.button-link.txt-med-gray:hover,
        .hover
        a.button-link.txt-med-gray:focus,
        .hover
        a.button-link.txt-med-gray:active,
        a.button-link.txt-med-gray.active {
            color: var(--text-light-gray);
        }

    .button-link.txt-light-gray,
    a.button-link.txt-light-gray {
        color: var(--text-light-gray);
    }

        .hover .button-link.txt-light-gray:hover,
        .hover .button-link.txt-light-gray:focus,
        .hover .button-link.txt-light-gray:active, .button-link.txt-light-gray.active, .hover
        a.button-link.txt-light-gray:hover,
        .hover
        a.button-link.txt-light-gray:focus,
        .hover
        a.button-link.txt-light-gray:active,
        a.button-link.txt-light-gray.active {
            color: var(--text-med-gray);
        }

    .button-link.active,
    a.button-link.active {
        /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
        background-color: var(--bg-faint-gray);
    }

.hover .button-link:focus, .hover
a.button-link:focus {
    outline: 1px dotted var(--focus-outline);
    outline-offset: -2px;
}

/*
     REVERSED BUTTON
    
     .button-reversed          A button that is reversed - white border and text for use on a dark background
                               [Module Parent]

*/
.button-reversed {
    font-weight: 500;
    background-color: transparent;
    border: 2px solid var(--border-white);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}

.button-reversed,
a.button-reversed {
    color: var(--text-white);
}

    .hover .button-reversed:hover,
    .hover .button-reversed:focus,
    .hover .button-reversed:active, .button-reversed.active, .hover
    a.button-reversed:hover,
    .hover
    a.button-reversed:focus,
    .hover
    a.button-reversed:active,
    a.button-reversed.active {
        color: var(--text-gray-34);
        background-color: var(--bg-white);
        border: 2px solid var(--border-white);
    }

/* COLLAPSIBLE AREA 
    .collapsible-area       A section of content that is collapsed by default to save screen real estate.
                            Relies on JavaScript to open/close the section via an associated button or trigger of some sort.                                               
                            [Module Parent]
    .open                   An open state. When this class is present, the section will be visible.
                            This class is added/removed via JavaScript.
                            [Extends .collapsible-area]
    .open-sm                The section will be open by default on SM+. It will only be collapsed on XS screens.
                            [Extends .collapsible-area]
    .open-md                Open by default on MD+.  Collapsed on XS, SM screens.
                            [Extends .collapsible-area]
    .open-lg                Open by default on LG+.  Collapsed on XS, SM, MD screens.
                            [Extends .collapsible-area]
    .open-xl                Open by default on XL. Collapsed on XS, SM, MD, LG screens.
                            [Extends .collapsible-area]
*/
.collapsible-area {
    display: none;
}

    .collapsible-area.open {
        display: block;
    }

@media print, (min-width: 480px) {
    .collapsible-area.open-sm {
        display: block;
    }
}

@media print, (min-width: 768px) {
    .collapsible-area.open-md {
        display: block;
    }
}

@media (min-width: 980px) {
    .collapsible-area.open-lg {
        display: block;
    }
}

@media (min-width: 1260px) {
    .collapsible-area.open-xl {
        display: block;
    }
}

/* FILTER 
   .filter                      A container for a filter. The filter refines a list or view of data on the page, i.e. Transfer Activity or Report Type.
                                [Module parent; Optionally extends .tile_body]\
    
   .filter_title                The title of the filter
                                Sits to the left of the .filter_items on SM+
                                Sits in the .filter_trigger to the left of the selected item on XS 
                                [Child of .filter]
   
   .filter_item                 An item in the filter which represents a way to refine the view.
                                [Child of .filter]

   .filter_item.selected        The selected filter item.
                                Orange text with orange underline by default.
                                [Extends .filter_item] 
    
   .filter_bar                  The bar to that animates back and forth via javascript to indicate which item is selected
                                [Child of .filter]             
*/
.filter {
    display: inline-block;
    position: relative;
    padding: 0;
}

.filter_title {
    margin-right: .3571em;
}

.filter_item {
    font-size: 1.4rem;
    font-weight: 700;
    padding: 1.1em .6em .8em;
    display: inline-block;
    line-height: normal;
    background: transparent;
    border-bottom: 4px solid transparent !important;
}

@media print, (min-width: 768px) {
    .filter_item {
        font-size: 1.6rem;
        padding: 1.2em 1.4em .7em;
    }
}

a.filter_item {
    color: var(--text-light-gray);
    text-decoration: none;
}

    .hover a.filter_item:hover,
    .hover a.filter_item:focus,
    .hover a.filter_item:active, a.filter_item.active {
        color: var(--text-primary);
        text-decoration: none;
    }

    a.filter_item.selected {
        color: var(--text-primary);
    }

        .hover a.filter_item.selected:hover,
        .hover a.filter_item.selected:focus,
        .hover a.filter_item.selected:active, a.filter_item.selected.active {
            color: var(--text-primary);
        }

        a.filter_item.selected,
        .hover a.filter_item.selected:hover,
        .hover a.filter_item.selected:focus,
        .hover a.filter_item.selected:active, a.filter_item.selected.active {
            border-bottom-width: 0;
            cursor: default;
        }

.filter_item .icon-more-horizontal {
    position: relative;
    top: 3px;
}

.filter_bar {
    border-bottom: 6px solid var(--border-primary);
    border-top: none;
    transition: all .15s ease-out;
    margin-top: 0;
    margin-bottom: 0;
    width: 0;
    position: absolute;
    bottom: 0;
}

/*  ____________________________
    MODULES_ICONS.css

    Purpose:        Use a custom icon font to display icons
                    Font generated from icomoon.io/app

    Screen Sizes:   All, including Print

    Notes:          Fonts created using SVG icons (IKONS) and downloaded SVG images from font libraries in Icomoon. All images
                    based on 16px grid. 16px used as this is the recommended size - relative to the size of browser
                    font size. This helps to guide the white space around the icon and the line height.

    TODO:           Better sizing for icons. The icons look better when they are a larger font size than any adjacent text, 
                    however, b/c of the relative font sizing in ems, the small and large sizes don't always act as expected
                    
    ____________________________
*/
/* TABLE OF CONTENTS
------------------------
    - @font-face / icons
    - FORM INPUTS
    - SIZES
    - POSITION HELPERS
    - ICON LINK
    - ICON PREPEND
-------------------------
*/
/* Documentation on @font-face loading. Explains reasons for syntax below.
    http://css-tricks.com/snippets/css/using-font-face/

    Anything after the question mark can/should be changed to the date of the new file upload for cache busting purposes
*/
@font-face {
    font-family: 'uwcu';
    src: url("../fonts/uwcu.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

.forward[class*=button-]:after, .backward[class*=button-]:before, [class^=icon-]:before, [class*=' icon-']:before, .ui-datepicker-trigger, .sortable-overlay_handle, .check-mark-list:before,
.check-mark-list li:before, .basic-item.forward:before {
    font-family: 'uwcu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 16px;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkbox, .icon-radio {
    margin-right: .2857em;
    font-size: 2.1rem;
    vertical-align: text-bottom;
}

@media print, (min-width: 768px) {
    .icon-checkbox, .icon-radio {
        font-size: 1.6rem;
    }
}

[class^=icon-].small:before, [class*=' icon-'].small:before {
    font-size: 12px;
}

[class^=icon-].medium:before, [class*=' icon-'].medium:before {
    font-size: 24px;
}

[class^=icon-].large:before, [class*=' icon-'].large:before {
    font-size: 32px;
}

[class^=icon-].xlarge:before, [class*=' icon-'].xlarge:before {
    font-size: 40px;
}

[class^=icon-].rel-top-3, [class*=' icon-'].rel-top-3 {
    position: relative;
    top: 3px;
}

li[class^=icon-], li[class*=' icon-'] {
    padding-right: .3571em;
}

.icon-collapse:before {
    content: "\e902";
}

.icon-expand:before {
    content: "\e903";
}

.icon-line-chart:before {
    content: "\e600";
}

.icon-chevron-down:before {
    content: "\e601";
}

.icon-chevron-left:before {
    content: "\e602";
}

.icon-chevron-right:before {
    content: "\e603";
}

.icon-chevron-up:before {
    content: "\e605";
}

.icon-folder:before {
    content: "\e607";
}

.icon-folder-open:before {
    content: "\e608";
}

.icon-bar-chart:before {
    content: "\e609";
}

.icon-move:before {
    content: "\e60a";
}

.icon-pending-item:before {
    content: "\e60b";
}

.icon-edit-inline:before {
    content: "\e60c";
}

.icon-pie-chart:before {
    content: "\e60d";
}

.icon-document:before {
    content: "\e60e";
}

.icon-papercheck:before {
    content: "\e60f";
}

.icon-printer:before {
    content: "\e610";
}

.icon-mail:before {
    content: "\e907";
}

.icon-mail-outline:before {
    content: "\e908";
}

.icon-menu:before {
    content: "\e613";
}

.icon-notification:before {
    content: "\e90c";
}

.icon-notification-outline:before {
    content: "\e90b";
}

.icon-x:before {
    content: "\e616";
}

.icon-arrow-down:before {
    content: "\e617";
}

.icon-arrow-up:before {
    content: "\e618";
}

.icon-arrow-right:before {
    content: "\e618";
    transform: rotate(90deg);
}

.icon-arrow-left:before {
    content: "\e618";
    transform: rotate(-90deg);
}

.icon-larger-image:before {
    content: "\e619";
}

.icon-move-vertical:before {
    content: "\e61a";
}

.icon-more-horizontal:before {
    content: "\e61b";
}

.icon-trash:before {
    content: "\e61c";
}

.icon-triangle-left:before {
    content: "\e61d";
}

.icon-triangle-right:before {
    content: "\e61e";
}

.icon-triangle-up:before {
    content: "\e61f";
}

.icon-triangle-down:before {
    content: "\e620";
}

.icon-documents:before {
    content: "\e621";
}

.icon-dollar-sign:before {
    content: "\e622";
}

.icon-less:before {
    content: "\e623";
}

.icon-multiple {
    position: relative;
    top: 2px;
}

    .icon-multiple:before {
        content: "\e625";
    }

.icon-calendar:before {
    content: "\e626";
}

.icon-calendar-dropdown:before {
    content: "\e627";
}

.icon-compose:before {
    content: "\e628";
}

.icon-lock:before {
    content: "\e629";
}

.icon-unlock:before {
    content: "\e660";
}

.icon-card:before {
    content: "\e655";
}

.icon-cancel-card:before {
    content: "\e657";
}

.icon-replace-card:before {
    content: "\e659";
}

.icon-card-numbers:before {
    content: "\e91a";
}

.icon-change-pin:before {
    content: "\e658";
}

.icon-limit-increase:before {
    content: "\e661";
}

.icon-home:before {
    content: "\e62a";
}

.icon-organize-fill:before {
    content: "\e62b";
}

.icon-reorder {
    position: relative;
    top: 2px;
}

    .icon-reorder:before {
        content: "\e62c";
    }

.icon-mobile:before {
    content: "\e906";
}

.icon-mobile-outline:before {
    content: "\e905";
}

.icon-split-item:before {
    content: "\e62e";
}

.icon-reply:before {
    content: "\e62f";
}

.icon-mail-open:before {
    content: "\e909";
}

.icon-mail-open-outline:before {
    content: "\e90a";
}

.icon-star:before {
    content: "\e631";
}

.icon-star-empty:before {
    content: "\e9d7";
}

.icon-phone:before {
    content: "\e632";
}

.icon-electronic:before {
    content: "\e633";
}

.icon-help:before {
    content: "\e634";
}

.icon-error:before {
    content: "\e635";
}

.icon-warn:before {
    content: "\e636";
}

.icon-error-outline:before {
    content: "\e639";
}

.icon-user:before {
    content: "\e63b";
}

.icon-info:before {
    content: "\e63c";
}

.icon-checkmark-circle:before {
    content: "\e63d";
}

.icon-check-mark:before {
    content: "\e63e";
}

.icon-user-circle:before {
    content: "\e640";
}

.icon-recurring:before {
    content: "\e641";
}

.icon-split:before {
    content: "\e642";
}

.icon-text:before {
    content: "\e644";
}

.icon-key:before {
    content: "\e645";
}

.icon-more:before {
    content: "\e646";
}

.icon-location:before {
    content: "\e647";
}

.icon-edit:before {
    content: "\e649";
}

.icon-search:before {
    content: "\e64a";
}

.icon-dispute:before {
    content: "\e64e";
}

.icon-processing:before {
    content: "\e64f";
}

.icon-x-circle:before {
    content: "\e650";
}

.icon-camera:before {
    content: "\e651";
}

[class*=button-] .icon-camera {
    position: relative;
    top: 0;
}

.icon-pin:before {
    content: "\e652";
}

.icon-cog:before {
    content: "\e653";
}

.icon-checkmark-filled-circle:before {
    content: "\e654";
}

.icon-pin-circle:before {
    content: "\e656";
}

.icon-dot:before {
    content: "\e90d";
}

.icon-gift:before {
    content: "\e901";
}

.icon-erase:before {
    content: "\e90e";
}

.icon-checkbox:before {
    content: "\e63f";
}

.icon-checkbox.checked:before {
    content: "\e624";
}

.icon-checkbox.half-checked:before {
    content: "\e64c";
}

.icon-radio:before {
    content: "\e64b";
}

.icon-radio.checked:before {
    content: "\e63a";
}

.icon-radio.mr0 {
    margin-right: 0;
}

.icon-facebook:before {
    content: "\e910";
}

.icon-linkedin:before {
    content: "\e911";
}

.icon-twitter:before {
    content: "\e912";
}

.icon-youtube:before {
    content: "\e913";
}

.icon-instagram:before {
    content: "\e914";
}

.icon-tiktok:before {
    content: "\e91b";
}

.icon-eye:before {
    content: "\e9ce";
}

.icon-eye-blocked:before {
    content: "\e9d1";
}

.icon-lightbulb:before {
    content: "\e900";
}

.icon-office:before {
    content: "\e917";
}

.icon-users:before {
    content: "\e973";
}

.icon-download:before {
    content: "\e919";
}

.icon-upload:before {
    content: "\e934";
}

[class*=button-] .icon-upload {
    position: relative;
    top: 0;
}

.icon-happy:before {
    content: "\e9df";
}

.icon-sad:before {
    content: "\e9e5";
}

.icon-smile:before {
    content: "\e9e1";
}

.icon-neutral:before {
    content: "\e9f7";
}

.icon-wondering:before {
    content: "\e9fb";
}

.icon-angry:before {
    content: "\e9ed";
}

.icon-earlypayday:before {
    content: "\e918";
}

.icon-link:before {
    content: "\e9cb";
}

.icon-sort-amount-asc:before {
    content: "\ea4c";
}

.icon-sort-amount-desc:before {
    content: "\ea4d";
}

.icon-sort-horizontal-arrows:before {
    content: "\ea45";
}

.icon-sort-vertical-arrows:before {
    content: "\ea46";
}

.icon-plus:before {
    content: "\ea0a";
}

.icon-filter:before {
    content: "\ea5b";
}

.icon-bar-filter-square:before {
    content: "\e91c";
}

.icon-bar-filter-rounded:before {
    content: "\e91d";
}

.icon-copy:before {
    content: "\e92c";
}

.icon-settings-horizontal:before {
    content: "\e992";
}

.icon-settings-vertical:before {
    content: "\e993";
}

.icon-menu-open:before {
    content: "\e9bf";
}

.icon-menu-close:before {
    content: "\e9c0";
}

.icon-sun:before {
    content: "\e91f";
}

.icon-bug:before {
    content: "\e920";
}

.icon-brightness-contrast:before {
    content: "\e91e";
}

/* CIRCULAR ICON BACKGROUNDS*/
/* TODO: Add to styleguide*/
.icon-bg-solid-circle {
    width: 1em;
    height: 1em;
    line-height: 1;
    border-radius: 50%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

    .icon-bg-solid-circle.small {
        font-size: 22px;
    }

        .icon-bg-solid-circle.small:before {
            font-size: 10px;
        }

    .icon-bg-solid-circle.medium {
        font-size: 38px;
    }

        .icon-bg-solid-circle.medium:before {
            font-size: 20px;
        }

/* ICON LINK 
    
    .link-icon  An anchor tag surrounding an icon.
                [Module parent]
*/
a.link-icon,
.hover a.link-icon:hover,
.hover a.link-icon:focus,
.hover a.link-icon:active, a.link-icon.active {
    text-decoration: none;
}

/* ICON PREPEND 

    .prepend-icon                   A container for an icon and a block of content; the icon sits to the left of the content
                                    [Module parent]

    .condensed                      A container with less vertical spacing
                                    [Extends .prepend-icon]

    .medium                         A container with a medium-sized icon
                                    [Extends .prepend-icon]

    .border-bottom-*                Adds a border below the icon and title 
                                    Used in Messages
                                    [Extends .prepend-icon]

    .prepend-icon_title             Positioning of the text/headline that sits to the right of the icon
                                    [Child of .prepend-icon]

    .prepend-icon_icon              Positioning of the icon
                                    [Child of .prepend-icon]
*/
.prepend-icon {
    display: block;
    padding-left: 2.7143em;
    position: relative;
}

    .prepend-icon.condensed {
        line-height: 1.2em;
    }

        .prepend-icon.condensed .prepend-icon_icon {
            top: 0;
        }

@media (min-width: 980px) {
    .prepend-icon.medium .prepend-icon_icon {
        top: -4px;
    }
}

.prepend-icon.medium .prepend-icon_icon:before {
    font-size: 22px;
}

.prepend-icon.medium .icon-phone {
    top: 5px;
}

.prepend-icon.medium .icon-mail {
    top: 1px;
}

.prepend-icon.small {
    padding-left: 18px;
}

    .prepend-icon.small .prepend-icon_icon:before {
        font-size: 14px;
    }

    .prepend-icon.small .icon-checkmark-circle {
        top: 2px;
    }

.prepend-icon .prepend-icon_icon {
    position: absolute;
    top: -2px;
    left: 0;
}

    .prepend-icon .prepend-icon_icon:before {
        font-size: 28px;
    }

    .prepend-icon .prepend-icon_icon.icon-warn {
        top: -4px;
    }

    .prepend-icon .prepend-icon_icon.icon-mail {
        top: -4px;
    }

.prepend-icon_title {
    display: block;
}

.prepend-icon.border-bottom-success, .prepend-icon.border-bottom-warn, .prepend-icon.border-bottom-error, .prepend-icon.border-bottom-info {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.prepend-icon.border-bottom-success {
    border-bottom-color: var(--border-success);
}

.prepend-icon.border-bottom-warn {
    border-bottom-color: var(--border-warn);
}

.prepend-icon.border-bottom-error {
    border-bottom-color: var(--border-error);
}

.prepend-icon.border-bottom-info {
    border-bottom-color: var(--border-info);
}

.ui-datepicker-trigger:before {
    content: "\e627";
}

.ui-icon-seek-prev:before {
    content: "\e602";
}

.ui-icon-seek-next:before {
    content: "\e603";
}

/*  
    CHECK MARK LIST
    
    .check-mark-list    A list with checkmark icons in place of the default bullet
                        [Module parent]
    .centered           Extends .check-mark-list so that the list is centered
    .list-columns       Extends .check-mark-list so that the list breaks into two columns

    Examples:
    <ul class="check-mark-list">
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>

    <div class="check-mark-list">
    This list contains only one item and therefore is not really a list. A div is a better container for semantics and accessibility.
    </div>
*/
.check-mark-list:before,
.check-mark-list li:before {
    content: "\e63e";
    font-weight: 700;
    font-size: 16px;
    color: var(--text-gray);
    position: absolute;
    left: -1.5em;
    top: 0;
}

.check-mark-list {
    list-style: none;
    margin: 0 0 2rem 2rem;
    position: relative;
    text-align: left;
}

@media print, (min-width: 768px) {
    .check-mark-list {
        margin: 0 0 2rem 4rem;
    }
}

.check-mark-list li {
    position: relative;
}

.check-mark-list.centered {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

@media (min-width: 768px) {
    .check-mark-list.list-columns {
        column-count: 2;
        column-gap: 10rem;
    }
}

ul.check-mark-list:before,
ol.check-mark-list:before {
    display: none;
}

/*  
    ICON SOLID CIRCLE 
    
    .icon-solid-circle      A white icon (possibly an arrow) in a solid circle
                            [Module parent]

    Example Markup:
    <div class="icon-solid-circle centered">
        <i class="icon-arrow-down visible-sm visible-xs"></i>
        <i class="icon-arrow-right hidden-sm hidden-xs"></i>
    </div>
*/
.icon-solid-circle {
    display: block;
    max-width: 2em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    background-color: var(--bg-gray-60);
    color: var(--text-white);
    text-align: center;
    line-height: 2.3;
    margin-bottom: 1em;
    z-index: 1;
}

    .icon-solid-circle.centered {
        margin-left: auto;
        margin-right: auto;
    }

/*correctly size the container of a standard-sized icon so the icon doesn't overflow the container */
.contains-icon {
    min-height: 2.5rem;
    padding-top: 0.5rem;
}

@media (min-width: 768px) {
    .force-icon-right-md {
        padding-right: 3em !important;
    }
}

/*
   PLACHOLDER INPUT STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

     %input-base                Base styles for inputs - borders, backgrounds, etc.
                                [Placeholder Selector]
     %input-text                Base styles for text inputs - single or multiline
                                [Placeholder Selector]
     %input-widths              Width modifiers for inputs - narrow, extra-narrow
                                [Placeholder Selector]

     %input-list-container      Base styles for an input container with a list, such as drop down lists or list of automatic suggestions appearing below a text field
                                [Placeholder Selector]
     %input-list                Base styles for input lists 
                                [Placeholder Selector]
     %input-list-item           Base styles for an individual item in an input list 
                                [Placeholder Selector]

*/
.input-text, .input-text-area, .input-date, .input-scrollbox, .input-append-outside_button {
    color: var(--text-gray);
    line-height: normal;
    vertical-align: middle;
    border: 1px solid var(--border-gray-80);
    outline: 0;
    margin: 0.2143em 0;
    padding: 0.445em;
    border-radius: .2143em;
    background: var(--bg-white);
}

    .input-text:focus, .input-text-area:focus, .input-date:focus, .input-scrollbox:focus, .input-append-outside_button:focus {
        outline: 0;
        border: 1px solid var(--focus-outline);
    }

.input-text, .input-text-area {
    width: 100%;
}

@media print, (min-width: 768px) {
    .input-text, .input-text-area {
        width: 20em;
        max-width: 100%;
    }

    .full-width.input-text, .full-width.input-text-area {
        width: 100%;
    }
}

.narrow.input-text, .narrow.input-select, .narrow.input-suggest, .narrow.VAMListWithError {
    max-width: 10em;
}

.extra-narrow.input-text, .extra-narrow.input-select, .extra-narrow.input-suggest, .extra-narrow.VAMListWithError {
    max-width: 5em;
}

.extra-narrow.input-select, .extra-narrow.input-suggest {
    max-width: 3.4286em;
}

@media print, (min-width: 768px) {
    .input-select, .input-suggest {
        display: inline-block;
        width: 20em;
    }

    .full-width.input-select, .full-width.input-suggest {
        width: 100%;
        max-width: 100%;
    }
}

.input-select_list, .input-suggest_list {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--bg-white);
    border-radius: 3px;
    box-shadow: inset 0 0 1px var(--box-shadow-no-opacity);
}

@media print, (min-width: 768px) {
    .input-select_list, .input-suggest_list,
    [class*=input-].narrow .input-select_list,
    [class*=input-].narrow .input-suggest_list,
    [class*=input-].extra-narrow .input-select_list,
    [class*=input-].extra-narrow .input-suggest_list {
        width: 100%;
    }
}

.input-select_list_item, .input-suggest_list_item {
    position: relative;
    list-style: none;
    overflow: hidden;
    margin: 0;
    line-height: normal;
    border-bottom: 1px solid var(--border-light-gray);
    border-collapse: collapse;
}

@media print, (min-width: 768px) {
    .input-select_list_item, .input-suggest_list_item {
        padding: .4286em .5714em;
    }
}

.input-select_list_item:first-child, .input-suggest_list_item:first-child {
    border-radius: 3px 3px 0 0;
}

.input-select_list_item:last-child, .input-suggest_list_item:last-child {
    border-radius: 0 0 3px 3px;
}

.hover .input-select_list_item:hover, .hover .input-suggest_list_item:hover, .active.input-select_list_item, .active.input-suggest_list_item, .selected.input-select_list_item, .selected.input-suggest_list_item {
    background: var(--bg-light-gray);
    border-color: var(--border-white);
    cursor: pointer;
}

/* TEXT INPUT (SINGLE LINE TEXT INPUT)

    .input-text                     A text input field (input type="text") 
                                    [Module Parent]

    .narrow                         Good for small inputs, such as zip code, date, amount
                                    [Extends .input-text]

    .extra-narrow                   Good for 1-2 digit inputs, such as state or middle initial

*/
/* TEXT AREA (MULTILINE TEXT INPUT)

    .input-text-area         A textarea input field for multiline text input
                            [Module Parent]

*/
/*EDIT INLINE
    text that can be edited inline
    // todo: make this class name .edit-inline

    .editable                   Decorates the text to indicate clicking the text will open a form 
                                [Module Parent]

*/
a.editable, .editable {
    text-decoration: none;
    border-bottom: 1px dashed var(--border-info-light);
    margin: 0 .3571em 0 0;
}

    a.editable.txt-gray, a.editable.txt-dark-gray, .editable.txt-gray, .editable.txt-dark-gray {
        border-bottom-color: var(--border-gray-60);
    }

/* DATE INPUT

    .input-date                     A text input field (input type="text") with a jQuery date box control
                                    [Module Parent]
*/
@media print, (min-width: 768px) {
    .input-date {
        width: 8em;
    }
}

/*  SCROLLBOX

    .input-scrollbox                A textarea input field that is prefilled with information (such as a long agreement to terms) and scrolls via
                                    mouse or gesture
                                    [Module Parent]

*/
.input-scrollbox {
    width: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 15em;
}

/*
    INPUT SELECT LIST
    
    .input-select               A container for a custom drop down menu. The "select" element is hidden and replaced by a more stylized drop down menu. 
                                On small screens, the menu pops up as a modal box above the page content. On medium and large screens, the menu acts like an HTML select.
                                The trigger and the list of options stretch to 100% width inside this container. Conrol the width of this container
                                to control the width of the trigger and the list of options.
                                [Module parent]
    .has-ribbon                 An input select which leaves room for a ribbon in the trigger and the list_item
                                [Extends .input-select]

    .input-select_trigger       A button-like element that when clicked, opens the drop down menu
                                [Child of .input-select ]
    .input-select_list          An unordered list of select options
                                [Child of .input-select]
    .input-select_list_title    A title that appears at the beginning of the list on XS/SM when the list is rpesented as a modal
                                [Child of .input-select]
    .input-select_list_item     A single option
                                [Child of .input-select_list]
 

 */
.input-select {
    margin: 0.2143em 0;
    color: var(--text-gray);
}

    .input-select select {
        display: none;
    }

    .input-select.has-ribbon {
        padding-left: 0;
    }

.input-select_trigger {
    position: relative;
    min-height: 1em;
    line-height: normal;
    padding: .5em .5714em;
    background: var(--bg-white);
    border: 1px solid var(--border-gray-80);
    border-radius: 3px;
    box-shadow: inset 0 0 1px var(--box-shadow-no-opacity);
    cursor: pointer;
    outline: 0;
}

@media print, (min-width: 768px) {
    .input-select_trigger {
        padding: .5em .4286em;
    }
}

.input-select_trigger:focus {
    outline: 0;
    border: 1px solid var(--focus-outline);
}

.input-select_trigger .icon-triangle-down {
    position: absolute;
    top: 30%;
    right: .2857em;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-gray-60);
}

.input-select_trigger .icon-radio {
    display: none;
}

.input-select.has-ribbon .input-select_trigger .ribbon {
    display: none;
}

.input-select_trigger_text {
    display: block;
    padding-right: .7143em;
    overflow: hidden;
}

@media print, (min-width: 768px) {
    .input-select_trigger_text {
        padding-right: 1em;
    }
}

@media print, (min-width: 768px) {
    .input-select_list {
        border: 1px solid var(--border-gray-80);
    }
}

.input-select_list_title {
    position: relative;
    list-style: none;
    overflow: hidden;
    margin: 0;
}

@media print, (min-width: 768px) {
    .input-select_list_title .input-select_list_title {
        display: none;
    }
}

.input-select_list_item {
    min-height: 1em;
    padding: 1em 0.5714em 1em 2.5714em;
}

@media print, (min-width: 768px) {
    .input-select_list_item {
        padding: 0.4286em 0.5714em;
    }
}

.input-select.has-ribbon .input-select_list_item {
    padding-right: 4.4em;
}

@media print, (min-width: 768px) {
    .input-select.has-ribbon .input-select_list_item {
        padding-left: 2.7em;
    }
}

.input-select.has-ribbon .input-select_list_item .ribbon {
    margin-top: 2px;
    right: 1em;
    left: auto;
}

@media print, (min-width: 768px) {
    .input-select.has-ribbon .input-select_list_item .ribbon {
        margin-top: 0;
        left: .6em;
        right: auto;
    }
}

@media print, (min-width: 768px) {
    .input-select.has-ribbon .input-select_list_item .ribbon:before {
        font-size: 16px;
    }
}

.input-select_list_item .icon-radio {
    position: absolute;
    top: .6em;
    left: .7em;
}

    .input-select_list_item .icon-radio:before {
        font-size: 1.8rem;
    }

@media print, (min-width: 768px) {
    .input-select_list_item .icon-radio {
        display: none;
    }
}

/*
    INPUT WITH SUGGESTIONS

    .input-suggest              A container for a text input with a list of suggestions that appear as you type. 
                                The input and the list of suggestions stretch to 100% width inside this container. 
                                This container can be set to a narrower width using "narrow" or "extra-narrow", or to 100% of it's container with "full-width"
                                [Module parent]
    .input-suggest_input        A text input 
                                [Child of .input-suggest | Extends .input-text ]
    .input-suggest_list         An unordered list of suggestions
                                [Child of .input-suggest]
    .input-suggest_list_item    A single suggestion
                                [Child of .input-suggest_list]
*/
.input-suggest_input {
    margin-bottom: 0;
}

@media print, (min-width: 768px) {
    .input-suggest_input {
        width: 100%;
    }
}

.input-suggest_list {
    border: 1px solid var(--border-gray-80);
    position: absolute;
    z-index: 100;
}

.input-suggest_list_item {
    padding: .7143em .5714em;
}

    .input-suggest_list_item a {
        text-decoration: none;
    }

/* APPENDED INPUT
    Example markup:

    <div class="input-append">
          <input type="text" class="input-text input-append_input">  
          <span class="input-append_button">


    .input-append               A container for a text input with an icon button appened to the right side (i.e. magnifying glass) 
                                The input stretches to 100% width inside this container. 
                                This container can be set to a narrower width using "narrow" or to 100% of it's container with "full-width"
                                [Module parent]
    
    .input-append_input         A text input 
                                [Child of .input-append; Extends .input-text]

    .input-append_button        An icon button that sits at the right side of the input field
                                [Child of .input-append]

    .large                      A modifier class to increase the padding-right on the text input.
                                Used when the button on the right side of the input field is a short string of text like "Not You?" in txt-small size.
                                [Extends .input-append_input]
    
*/
.input-append {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0.2143em 0;
}

@media print, (min-width: 768px) {
    .input-append {
        width: 20em;
    }

        .input-append.full-width,
        .input-append.full-width .input-suggest {
            width: 100%;
        }
}

.input-append.narrow {
    max-width: 10em;
}

.input-append.extra-narrow {
    max-width: 5em;
}

.input-append_input {
    width: 100%;
    padding-right: 2em;
    margin: 0;
}

@media print, (min-width: 768px) {
    .input-append_input {
        padding-right: 2.4286em;
    }
}

.input-append_input.two-icons {
    padding-right: 4.5rem;
}

@media print, (min-width: 768px) {
    .input-append_input.two-icons {
        padding-right: 4.5rem;
    }
}

.input-append_input.large {
    padding-right: 7rem;
}

@media print, (min-width: 768px) {
    .input-append_input.large {
        padding-right: 6rem;
    }
}

.input-append_button {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: .4286em;
    color: var(--text-light-gray);
    line-height: normal;
    border: none;
    text-align: center;
    background-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

a.input-append_button {
    text-decoration: none;
}

.hover .input-append_button:hover,
.hover .input-append_button:focus,
.hover .input-append_button:active, .input-append_button.active {
    color: var(--text-gray-38);
}

.hover .input-append_button:focus {
    outline-offset: 2px;
}

.input-append_button .icon-search:before {
    line-height: normal;
}

.input-append_symbol {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: .4286em;
    color: var(--text-light-gray);
    line-height: normal;
    border: none;
    text-align: center;
    background-color: transparent;
}

/* APPENDED INPUT - OUTSIDE
    Example markup:

    <div class="input-append-outside">
          <input type="text" class="input-text input-append-outside_input">  
          <span class="input-append-outside_button">


    .input-append-outside           A container for a text input with an icon button appened to the right side - e.g: the show/hide password button
                                    Differs from the ".input-append" because the button and icon are actually outside the input, though they appear to be part of it.
                                    The input stretches to 100% width inside this container, and the container is full width at mobile sizes.
                                    [Module parent]
    
    .input-append-outside_input     A text input 
                                    [Child of .input-append-outside; Extends .input-text]

    .input-append-outside_button    An icon button that sits outside the input field, to the far right
                                    [Child of .input-append-outside]
    
*/
.input-append-outside {
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
}

@media (min-width: 768px) {
    .input-append-outside {
        width: auto;
    }
}

.input-append-outside_input {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-append-outside_button {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* prependED INPUT
    Example markup:

    <div class="input-prepend">
          <input type="text" class="input-text input-prepend_input">  
          <span class="input-prepend_label">


    .input-prepend               A container for a text input with an icon label appened to the right side (i.e. magnifying glass) 
                                The input stretches to 100% width inside this container. 
                                This container can be set to a narrower width using "narrow" or to 100% of it's container with "full-width"
                                [Module parent]
    
    .input-prepend_input         A text input 
                                [Child of .input-prepend; Extends .input-text]

    .wide-label                 A text input with extra padding on the left to accommodate a wider label
                                [Extends .input-pepend_input]

    .input-prepend_label        An icon label that sits at the right side of the input field
                                [Child of .input-prepend]
    
*/
.input-prepend {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0.2143em 0;
}

@media print, (min-width: 768px) {
    .input-prepend {
        width: 20em;
    }

        .input-prepend.full-width,
        .input-prepend.full-width .input-suggest {
            width: 100%;
        }
}

.input-prepend.narrow {
    max-width: 10em;
}

.input-prepend.extra-narrow {
    max-width: 6em;
}

.input-prepend_input {
    width: 100%;
    padding-left: 2.85em;
    margin: 0;
}

    .input-prepend_input.wide-label {
        padding-left: 3.9em;
    }

.input-prepend_label {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    color: var(--text-light-gray);
    line-height: normal;
    text-align: center;
    background-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-right: 1px solid var(--border-gray-80);
    padding: 0.55em 0.75em;
}

@media print, (min-width: 768px) {
    .input-prepend_label {
        padding: 0.35em 0.65em;
    }
}

a.input-prepend_label {
    text-decoration: none;
}

.hover .input-prepend_label:hover,
.hover .input-prepend_label:focus,
.hover .input-prepend_label:active, .input-prepend_label.active {
    color: var(--text-gray-38);
}

.hover .input-prepend_label:focus {
    outline-offset: 2px;
}

.input-prepend_label [class^=icon-],
.input-prepend_label [class*=' icon-'] {
    position: relative;
    top: 1px;
}

@media print, (min-width: 768px) {
    .input-prepend_label [class^=icon-],
    .input-prepend_label [class*=' icon-'] {
        top: 2px;
    }
}

/* INPUT DIVIDER

    .input-divide    An hr to divide form inputs into logical sections 
                     Provides appropriate spacing when placed between two input-group containers
                     [Module Parent]
*/
@media print, (min-width: 768px) {
    .input-divide {
        margin: 1.0714em 0;
    }
}

/*
   PLACHOLDER INPUT STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

   %input-group-option-child    Base styles for child of .input-group_option
                                [Placeholder Selector]

   %input-group-option-boxed    Styles when an .input-group_option is bordered
                                [Placeholder Selector]

*/
.input-group_option_input, .input-group_option_text {
    display: table-cell;
    vertical-align: top;
    cursor: pointer;
}

.input-group_option.txt-middle .input-group_option_input, .input-group_option.txt-middle .input-group_option_text {
    vertical-align: middle;
}

.input-group_option.disabled .input-group_option_input, .input-group_option.disabled .input-group_option_text {
    cursor: default;
}

.input-group_option.pvn .input-group_option_input, .input-group_option.pvn .input-group_option_text {
    padding-top: 0;
    padding-bottom: 0;
}

.input-group_option-wrapper, .input-group.deco .input-group_option {
    background: var(--bg-white);
    margin-bottom: 1.1429em;
    border-radius: 3px;
    border: 1px solid var(--border-gray-87);
    box-shadow: 0 0 1px 0 var(--box-shadow-level-1);
}

/* INPUT GROUP
  
    .input-group                    A container for an input and other elements, provides spacing under the group
                                    [Module parent]
    
    .deco                           A container for an input and other elements that adds a shadowed box around each input-group_option
                                    [Extends .input-group]
    
    .input-group-sub                A container for an input and other elements that is indented (i.e. to display under a radio button choice)
                                    [Optionally extends .input-group if a bottom margin is desired]    
    
    .input-group_option             One choice in a list of options (i.e. radio button list, check box list)
                                    Displays as a CSS table
                                    [Child of .input-group or .input-group_option-wrapper (only when an .input-group_description is also present)]
    TODO: example markup
    .highlighted                    The selected choice in a list of options (i.e. radio button list, check box list)
                                    [Extends .input-group_option]
    .disabled                       An input group option that contains a disabled input (radio button or checkbox)
                                    Sets the default cursor so the option doesn't appear clickable
                                    [Extends .input-group_option]
    .no-text                        An input group option that has a label but the label has no text                                    
                                    [Extends .input-group_option]

    .input-group_option_input       A container for the input element - radio button or checkbox
                                    Displays as a CSS table-cell 
                                    [Child of .input-group_option]
    
    .input-group_option_text        A container for the label element or othe text associated with the input
                                    Displays as a CSS table-cell to keep text indented (rather than wrapping to a second line below the input)
                                    [Child of .input-group_option]
    
    .input-group_description        An optional container used when an input-group_option needs further text
                                    Allows for responsive indenting via the .indent-sm, .indent-md classes
                                    [Child of .input-group_item-wrapper]

    .input-group_option-wrapper     A container for input-group_option and input-group_description
                                    Adds a shadowed box around the item
                                    If an input-group_description is present, this wrapper should be used.
                                    [Child of .input-group]

    .limit-width                    An input group option wrapper that has a limited width rather than extending full width
                                    [Extends .input-group_option-wrapper]

*/
.input-group {
    margin-bottom: .7143em;
}

    .input-group.condensed {
        margin-bottom: .3571em;
    }

.input-group-sub {
    display: block;
    padding-left: 3.1429em;
}

@media print, (min-width: 768px) {
    .input-group-sub {
        padding-left: 2.5714em;
    }
}

.input-group-sub.highlighted {
    padding-bottom: .3571em;
    padding-right: .3571em;
}

.input-group_option-wrapper.limit-width {
    max-width: 70ch;
}

.input-group_option {
    display: table;
    cursor: pointer;
}

    .input-group_option.disabled {
        cursor: default;
    }

    .input-group.deco .input-group_option,
    .input-group_option.full-width .input-group_option,
    .input-group_option-wrapper .input-group_option {
        width: 100%;
    }

        .input-group_option-wrapper .input-group_option.highlighted,
        .input-group.deco .input-group_option.highlighted {
            background: var(--bg-gray-98);
        }

.hover .input-group_option:focus {
    outline: 1px dotted var(--focus-outline);
    outline-offset: -2px;
}

@media print, (min-width: 768px) {
    .input-group_option_input {
        padding-top: .3571em;
        padding-bottom: .3571em;
    }

    .input-group_option.txt-middle > .input-group_option_input > .icon-radio {
        position: relative;
        top: -2px;
    }
}

.input-group_option_input,
.input-group.no-deco .input-group_option_input {
    padding: .438em .2857em .5714em .7143em;
}

@media (min-width: 980px) {
    .input-group_option_input,
    .input-group.no-deco .input-group_option_input {
        padding: .5714em .2857em .5714em .7143em;
    }
}

.input-group_option.pln .input-group_option_input,
.input-group_option.phn .input-group_option_input,
.input-group_option.no-indent .input-group_option_input {
    padding-left: 0;
}

.input-group_option.label-ribbon .input-group_option_input {
    padding-top: .438em;
}

@media (min-width: 980px) {
    .input-group_option.label-ribbon .input-group_option_input {
        padding-top: .5714em;
    }
}

.input-group.deco .input-group_option_input {
    padding: 1.4286em .2857em 1.4286em 1.0714em;
}

.input-group_option-wrapper .input-group_option_input {
    padding: 1em .2857em .8571em 1.0714em;
}

    .input-group_option-wrapper .input-group_option_input [class*=icon-] {
        font-size: 1.6rem;
        line-height: 1;
    }

        .input-group_option-wrapper .input-group_option_input [class*=icon-]::before {
            line-height: 1.3;
        }

@media print, (min-width: 768px) {
    .input-group_option-wrapper .input-group_option_input [class*=icon-]::before {
        line-height: 1;
    }
}

.hover .input-group_option_input input:focus + [class*=icon-] {
    outline: 1px dotted var(--focus-outline);
}

.input-group_option_text {
    /*Checkboxes in action-mode (account history & web pay), messages and disputes have empty labels*/
}

.input-group_option_text,
.input-group.no-deco .input-group_option_text {
    padding: .7143em .5714em .5714em 0;
}

@media print, (min-width: 768px) {
    .input-group_option_text {
        padding-top: .5em;
        padding-bottom: .3571em;
    }
}

.input-group.deco .input-group_option_text,
.input-group_option.full-width .input-group_option_text,
.input-group_option-wrapper .input-group_option_text {
    width: 100%;
}

.input-group_option.prn .input-group_option_text,
.input-group_option.phn .input-group_option_text {
    padding-right: 0;
}

.input-group.deco .input-group_option_text {
    padding: 1.4286em 1.4286em 1.4286em 0;
}

.input-group_option-wrapper .input-group_option_text {
    padding: 1em 1.0714em .8571em 0;
}

@media print, (min-width: 768px) {
    .input-group_option-wrapper .input-group_option_text {
        padding-top: .9286em;
    }
}

.input-group_option.no-text .input-group_option_text {
    padding: 0;
}

.input-group_description {
    padding: .8571em 1.0714em 1.0714em;
    border-top: 1px solid var(--border-light-gray);
}

    .input-group_description.indent-xs, .input-group_description.indent-sm, .input-group_description.indent-md {
        margin-left: 0 !important;
    }

    .input-group_description.indent-xs {
        padding-left: 3.2857em;
    }

@media print, (min-width: 420px) {
    .input-group_description.indent-sm {
        padding-left: 3.2857em;
    }
}

@media print, (min-width: 768px) {
    .input-group_description.indent-xs, .input-group_description.indent-sm, .input-group_description.indent-md {
        padding-left: 2.9286em;
    }
}

/* INPUT LABELS
    
    .input-label     A label element which displays above its corresponding input field
                     [Module Parent]


*/
.input-label {
    display: block;
    margin-bottom: .1429em;
    font-weight: 500;
    max-width: 100%;
}

/* VALIDATION 
    The following class names are automatically generated by MVC valdition:

    .field-validation-error         A span next to an input field containing an error message 

    .input-validation-error         An input field with an error

    .input-select-validation-error  A container around a select input with an error

    .input-group-validation-error   A radio button list or check box list with an error
*/
.field-validation-error {
    display: block;
    color: var(--text-error);
}

.input-validation-error,
.hover .input-validation-error:focus {
    border: 2px solid var(--border-error);
    background: var(--bg-white);
}

.input-select-validation-error .input-select_trigger,
.hover .input-select-validation-error:hover .input-select_trigger,
.input-select-validation-error.active .input-select_trigger,
.hover .input-select-validation-error .input-select_trigger:focus {
    border: 2px solid var(--border-error);
    background: var(--bg-white);
}

.input-group-validation-error {
    border: 2px solid var(--border-error);
    border-radius: .2143em;
}

    .input-group-validation-error .field-validation-error {
        display: block;
        margin: .5714em .7143em;
    }

    .input-group-validation-error.deco {
        border: none;
    }

        .input-group-validation-error.deco .field-validation-error {
            padding: .2857em;
            margin: .2857em 0 .7143em;
            border: 1px solid var(--border-error);
            border-radius: .2143em;
        }

.hover .input-validation-error:focus,
.hover .input-select-validation-error .input-select_trigger:focus {
    border: 3px solid var(--border-error);
}

/*
   PLACHOLDER LIST item-container STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

    %item-container       Base styles for all list item-containers
                 [Placeholder Selector]
    

*/
.item-container, .item-container-unattached, .item-container-convertible {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile.item-container, .tile.item-container-unattached, .tile.item-container-convertible {
    padding: 0;
}

/*  item-container 

    Accommodate 3 patterns of markup. 
    Use direct descendant selector (>) to avoid affecting nested item-containers

    Standard markup:
    <ul class="item-container"><li><a class="basic-item">...
    <ul class="item-container"><li class="basic-item">...
    <div class="item-container"><a class="basic-item">...

   
    Unattached markup:
    <ul class="item-container-unattached"><li><a class="basic-item">...
    <ul class="item-container-unattached"><li class="basic-item">...
    <div class="item-container-unattached"><a class="basic-item">...


    Convertible markup:
    <ul class="item-container-convertible"><li><a class="basic-item">...
    <ul class="item-container-convertible"><li class="basic-item">...
    <div class="item-container-convertible"><a class="basic-item">...

    Example item-container with background color:
    <ul class="item-container bg-orange"><li><a class="basic-item">...


     .item-container                A container (ul, ol, div) for a list of attached items
                                    [Module parent]

    .item-container-unattached      A container (ul, ol, div) for a list of unattached items
                                    [Module parent]

    .item-container-convertible     A container (ul, ol, div) for a list of unattached items on XS/SM, and attached items on MD+
                                    [Module parent]

    .condensed                      A container for a list of attached items with less vertical padding on each item.
                                    [Extends .item-container;]


    .bg-*                           Apply a background color to the container
                                    [Extends .item-container]




*/
.item-container {
    border-bottom: 1px solid var(--border-light-gray);
    border-top: 1px solid var(--border-light-gray);
}

    .item-container[class*="bg-"] {
        border-color: var(--border-white-opacity-20);
    }

    .item-container .item-container {
        border-bottom: none;
    }

@media print, (min-width: 768px) {
    .item-container-convertible {
        border-bottom: 1px solid var(--border-light-gray);
        border-top: 1px solid var(--border-light-gray);
    }
}

/*
   PLACHOLDER ITEM STYLES
   These placeholder rules will not generate CSS on their own.
   Must be used with the @extend directive.

   
    
    %item-icon           Base styles for a icon within an item
                         [Placeholder Selector]

    %item-icon-right     Base styles for a icon that sits on the right side of an item
                         [Placeholder Selector]

    %item-icon-left      Base styles for a icon that sits on the left side of an item
                         [Placeholder Selector]

*/
.basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-left {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    /*half the line-height of the icon, which is 16px, plus a little extra because it seems to need it*/
}

@media print, (min-width: 768px) {
    .basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-left {
        margin-top: -8px;
        /*half the line-height of the icon, which is 16px*/
    }
}

.icon-radio.basic-item.forward:before, .icon-radio.basic-item_icon-right, .icon-radio.basic-item_icon-left {
    /*this icon sits low relative to the line-height, so scoot it up a little more*/
    margin-top: -15px;
}

@media print, (min-width: 768px) {
    .icon-radio.basic-item.forward:before, .icon-radio.basic-item_icon-right, .icon-radio.basic-item_icon-left {
        margin-top: -10px;
    }
}

.medium.basic-item.forward:before, .medium.basic-item_icon-right, .medium.basic-item_icon-left {
    margin-top: -12px;
    margin-left: -6px;
}

.basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-bottom-right, .basic-item_icon-top-right {
    right: 2rem;
}

.link-area_action.basic-item.forward:before, .link-area_action.basic-item_icon-right, .link-area_action.basic-item_icon-bottom-right, .link-area_action.basic-item_icon-top-right,
.link-area_action .basic-item.forward:before,
.link-area_action .basic-item_icon-right,
.link-area_action .basic-item_icon-bottom-right,
.link-area_action .basic-item_icon-top-right {
    right: .1em;
}

.link-area.non-stacking .link-area_action.basic-item.forward:before, .link-area.non-stacking .link-area_action.basic-item_icon-right, .link-area.non-stacking .link-area_action.basic-item_icon-bottom-right, .link-area.non-stacking .link-area_action.basic-item_icon-top-right, .link-area.non-stacking .link-area_action .basic-item.forward:before, .link-area.non-stacking .link-area_action .basic-item_icon-right, .link-area.non-stacking .link-area_action .basic-item_icon-bottom-right, .link-area.non-stacking .link-area_action .basic-item_icon-top-right {
    right: 1.2em;
}

@media print, (min-width: 768px) {
    .basic-item.forward:before, .basic-item_icon-right, .basic-item_icon-bottom-right, .basic-item_icon-top-right {
        right: 5rem;
    }

    .link-area_action.basic-item.forward:before, .link-area_action.basic-item_icon-right, .link-area_action.basic-item_icon-bottom-right, .link-area_action.basic-item_icon-top-right,
    .link-area_action .basic-item.forward:before,
    .link-area_action .basic-item_icon-right,
    .link-area_action .basic-item_icon-bottom-right,
    .link-area_action .basic-item_icon-top-right {
        right: 5rem;
    }
}

.basic-item_icon-left {
    left: 2rem;
}

.link-area_action.basic-item_icon-left,
.link-area_action .basic-item_icon-left {
    left: .1em;
}

@media print, (min-width: 768px) {
    .basic-item_icon-left {
        left: 5rem;
    }

    .link-area_action.basic-item_icon-left,
    .link-area_action .basic-item_icon-left {
        left: 5rem;
    }
}

/* ITEM

    Standalone Markup:
    <div class="basic-item">...</div>
    <a class="basic-item">...</div>

    Markup In an .item-container:
    Accommodate 3 patterns of markup. 
    Use direct descendant selector (>) to avoid affecting nested item-containers
    <ul class="item-container"><li><a class="basic-item">...
    <ul class="item-container"><li class="basic-item">...
    <div class="item-container"><a class="basic-item">...


    .basic-item                       An item, either standalone or in a item-container
                                [Module Parent]
    .no-deco                    Remove default border from top of basic-item
                                [Extends .basic-item]
    .deco-top-thick             Adds a thick top border
                                [Extends .basic-item]
    .deco-bottom-thick          Adds a thick bottom border
                                [Extends .basic-item]
    .forward                    Adds a chevron-right to indicate forward motion
                                [Extends .basic-item]
    .has-icon-right             Adjusts right padding when the basic-item contains an icon on the right side
                                [Extends .basic-item]
    .has-icon-left              Adjusts left padding when the basic-item contains an icon on the left side
                                [Extends .basic-item]

    .basic-item_title           A title for the item
                                [Child of .basic-item]
    
    .basic-item_icon-right      An icon positioned to the right of basic-item
                                This class controls the positioning of the icon.
                                [Child of .basic-item]
    .basic-item_icon-bottom-right     An icon positioned to the right of basic-item, in the bottom corner
                                This class controls the positioning of the icon.
                                [Child of .basic-item]
    .basic-item_icon-top-right        An icon positioned to the right of basic-item, in the top corner
                                This class controls the positioning of the icon.
                                [Child of .basic-item]
    .basic-item_icon-left             An icon positioned to the left of basic-item
                                This class controls the positioning of the icon.
                                [Child of .basic-item]

*/
.basic-item {
    display: block;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
    /*  
        ITEM with Layout -  ROW or TABLE-ROW
        Example markup:
        <ul class="item-container"><li><a class="basic-item row"><div class="col-md-6">...
        <ul class="item-container"><li class="basic-item table-row"><div class="table-cell">...
    */
    /*  
        WITH TABLE-CELL
        <div class="table-cell basic-item forward">
          Link
        </div>
    */
    /* WITH LINK-AREA_ACTION (which is indented on mobile)
        <div class="link-area_action basic-item forward">...
        
        <div class="link-area_action item-container">
            <a class="basic-item forward">...
            <a class="basic-item forward">...
    */
}

    .basic-item, .basic-item.tile {
        padding: 1.2em 1.2em;
    }

@media print, (min-width: 768px) {
    .basic-item, .basic-item.tile {
        padding: 1em 1.2em;
    }
}

.basic-item.button-link {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

@media print, (min-width: 768px) {
    .basic-item.button-link {
        padding-top: 1.4em;
        padding-bottom: 1.4em;
    }
}

.basic-item.padded {
    padding: 1.5em 1.2em;
}

@media print, (min-width: 768px) {
    .basic-item.padded {
        padding: 2em 2em;
    }
}

.basic-item.padded-horizontal {
    padding-left: 1.2em;
    padding-right: 1.2em;
}

@media print, (min-width: 768px) {
    .basic-item.padded-horizontal {
        padding-left: 2em;
        padding-right: 2em;
    }
}

.item-container.condensed > .basic-item,
.item-container.condensed > li:not(.basic-item) > .basic-item {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

@media print, (min-width: 768px) {
    .item-container.condensed > .basic-item,
    .item-container.condensed > li:not(.basic-item) > .basic-item {
        padding-top: 0.7em;
        padding-bottom: 0.7em;
    }
}

@media print, (min-width: 768px) {
    .item-container.condensed-md > .basic-item,
    .item-container.condensed-md > li:not(.basic-item) > .basic-item {
        padding-top: 0.7em;
        padding-bottom: 0.7em;
    }
}

.item-container > .basic-item,
.item-container > li:not(.basic-item) > .basic-item {
    border: none;
    border-color: var(--border-light-gray);
    border-top-style: solid;
    border-width: 1px;
}

    .item-container > .basic-item:first-child,
    .item-container > li:first-child > .basic-item {
        border-top-width: 0;
    }

[class*=item-container-] > .basic-item,
[class*=item-container-] > li:not(.basic-item) > .basic-item {
    margin-bottom: .7em;
    border-radius: 3px;
    border: 1px solid var(--border-gray-87);
    background-color: var(--bg-white);
    box-shadow: var(--box-shadow);
}

.item-container-unattached.spaced > .basic-item,
.item-container-unattached.spaced > li:not(.basic-item) > .basic-item {
    margin-bottom: 1.4em;
}

@media print, (min-width: 768px) {
    .item-container-convertible > .basic-item,
    .item-container-convertible > li:not(.basic-item) > .basic-item {
        margin-bottom: 0;
        box-shadow: none;
        border: none;
        border-color: var(--border-light-gray);
        border-top-style: solid;
        border-width: 1px;
    }

        .item-container-convertible > .basic-item:first-child,
        .item-container-convertible > li:first-child > .basic-item {
            border-top-width: 0;
        }

    .item-container > .basic-item > .table-cell {
        border: none;
        border-color: var(--border-light-gray);
        border-top-style: solid;
        border-width: 1px;
    }

    .item-container > .basic-item:first-child > .table-cell,
    .item-container-convertible > .basic-item:first-child > .table-cell {
        border-top-width: 0;
    }

    .item-container-convertible > .basic-item > .table-cell {
        border-top: 1px solid var(--border-light-gray);
    }

        .item-container-convertible > .basic-item > .table-cell[class*="bg-"] {
            border-top-color: var(--border-white-opacity-20);
        }

        .item-container-convertible > .basic-item > .table-cell.bg-faint-gray {
            border-top-color: var(--border-gray-90);
        }
}

.basic-item.no-deco {
    border: none;
}

.basic-item.deco-top-thick {
    border-top-width: 3px !important;
}

.basic-item.deco-bottom-thick {
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
}

.basic-item.has-icon-right {
    padding-right: 3em;
}

.basic-item.has-icon-left {
    padding-left: 3em;
}

.basic-item.forward {
    padding-right: 3em !important;
}

    .basic-item.forward:before {
        content: "\e603";
    }

@media print {
    .basic-item.forward:before {
        content: none;
    }
}

.basic-item.forward [class*=col-] .currency.right {
    position: absolute;
    right: -1.4em;
}

@media print, (min-width: 480px) {
    .basic-item.forward [class*=col-] .currency.right {
        position: relative;
        right: auto;
    }
}

.basic-item_title {
    font-size: 1.8rem;
    font-weight: 500;
}

@media print, (min-width: 768px) {
    .basic-item_title {
        font-size: 1.8rem;
    }
}

.basic-item_icon-bottom-right {
    position: absolute;
    bottom: 1.2em;
    margin-bottom: -2px;
}

@media print, (min-width: 768px) {
    .basic-item_icon-bottom-right {
        bottom: 1em;
    }
}

.basic-item_icon-top-right {
    position: absolute;
    top: 1.2em;
}

@media print, (min-width: 768px) {
    .basic-item_icon-top-right {
        top: 1em;
    }
}

.basic-item.row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    display: -ms-flexbox;
    display: flex;
}

@media print, (min-width: 768px) {
    .basic-item.row {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

.basic-item.row > [class*=col-] {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

@media print, (min-width: 768px) {
    .basic-item.row > [class*=col-] {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.basic-item.table-row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

@media print, (min-width: 768px) {
    .basic-item.table-row {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

.basic-item.table-cell {
    vertical-align: middle !important;
    white-space: nowrap;
}

.basic-item.link-area_action,
.link-area_action > .basic-item {
    padding-left: .4em;
    padding-right: .4em;
}

@media print, (min-width: 768px) {
    .basic-item.link-area_action,
    .link-area_action > .basic-item {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

a.basic-item {
    text-decoration: none;
}

    .hover a.basic-item:hover,
    .hover a.basic-item:focus,
    .hover a.basic-item:active, a.basic-item.active {
        background: var(--bg-faint-gray);
    }

        .hover a.basic-item:hover hr,
        .hover a.basic-item:focus hr,
        .hover a.basic-item:active hr, a.basic-item.active hr {
            border-bottom-color: var(--bg-faint-gray);
            border-top-color: var(--border-gray-90);
        }

.item-container[class*="bg-"] .basic-item,
.item-container[class*="bg-"] > li:not(.basic-item) > .basic-item {
    border-color: var(--border-white-opacity-20);
    color: var(--text-white);
}

.item-container > .basic-item.bg-faint-gray {
    border-color: var(--border-gray-90);
}

.hover .item-container[class*="bg-"] a.basic-item:hover,
.hover .item-container[class*="bg-"] a.basic-item:focus,
.hover .item-container[class*="bg-"] a.basic-item:active, .item-container[class*="bg-"] a.basic-item.active {
    background-color: var(--bg-black-opacity-10);
    color: var(--text-white);
}

.hover .item-container[class*="bg-"] a.basic-item:focus {
    outline-offset: -2px;
    outline: 1px dotted var(--focus-outline-white-opacity-70);
}

.basic-item > :last-child {
    margin-bottom: 0;
}

/* DECO (Borders & Underlines)
     
    .deco-top      Apply border-top to an element
    .deco-bottom   Apply border-bottom to an element
    .deco-left     Apply border-left to an element
    .deco-right    Apply border-right to an element

    .deco-top-white     Apply a white border-top to an element
    .deco-bottom        Apply a white border-bottom to an element
    .deco-left          Apply a white border-left to an element
    .deco-right         Apply a white border-right to an element

    .deco-left-*   Responsive deco-left classes. Only apply left border at * and larger sizes.

    .no-deco       Remove the underline or border(s) on an element
*/
.deco-top {
    border-top: 1px solid var(--border-gray-87);
}

.deco-top-white {
    border-top: 1px solid var(--border-white);
}

.deco-top-sm, .deco-top-md, .deco-top-lg, .deco-top-xl {
    border-left: none;
}

h1.deco-top, .deco-top.looks-like-h1, h2.deco-top, .deco-top.looks-like-h2, h3.deco-top, .deco-top.looks-like-h3, h4.deco-top, .deco-top.looks-like-h4, h5.deco-top, h6.deco-top {
    padding-top: .3571em;
    margin-top: 1em;
}

.deco-bottom {
    border-bottom: 1px solid var(--border-gray-87);
}

.deco-bottom-white {
    border-bottom: 1px solid var(--border-white);
}

h1.deco-bottom, .deco-bottom.looks-like-h1, h2.deco-bottom, .deco-bottom.looks-like-h2, h3.deco-bottom, .deco-bottom.looks-like-h3, h4.deco-bottom, .deco-bottom.looks-like-h4, h5.deco-bottom, h6.deco-bottom {
    padding-bottom: .3571em;
}

.deco-left {
    border-left: 1px solid var(--border-gray-87);
}

.deco-left-white {
    border-left: 1px solid var(--border-white);
}

@media (min-width: 480px) {
    .deco-left-sm {
        border-left: 1px solid var(--border-gray-87);
    }
}

@media print, (min-width: 768px) {
    .deco-left-md {
        border-left: 1px solid var(--border-gray-87);
    }
}

@media (min-width: 980px) {
    .deco-left-lg {
        border-left: 1px solid var(--border-gray-87);
    }
}

@media (min-width: 1260px) {
    .deco-left-xl {
        border-left: 1px solid var(--border-gray-87);
    }
}

.deco-right {
    border-right: 1px solid var(--border-gray-87);
}

.deco-right-white {
    border-right: 1px solid var(--border-white);
}

@media (min-width: 480px) {
    .deco-right-sm {
        border-right: 1px solid var(--border-gray-87);
    }
}

@media print, (min-width: 768px) {
    .deco-right-md {
        border-right: 1px solid var(--border-gray-87);
    }
}

@media (min-width: 980px) {
    .deco-right-lg {
        border-right: 1px solid var(--border-gray-87);
    }
}

@media (min-width: 1260px) {
    .deco-right-xl {
        border-right: 1px solid var(--border-gray-87);
    }
}

.no-deco {
    border: none !important;
}

a.no-deco,
.hover a.no-deco:active,
.hover a.no-deco:hover,
.hover a.no-deco:focus,
a.no-deco.active {
    text-decoration: none;
}

.no-deco-bottom {
    border-bottom: none !important;
}

.no-deco-top {
    border-top: none !important;
}

/*DECORATIVE LINE
    Use the decorative line classes when a line helps fill the space and aid the eye in grouping content on larger screen sizes, 
    but adds too much visual clutter on smaller screens.

    .decorative-line-sm     A decorative line that shows on sm, md, lg, xl screens.
                            Does not show on xs screens.
    .decorative-line-md     A decorative line that shows on md, lg, xl screens.
                            Does not show on xs, sm screens.
    .decorative-line-lg     A decorative line that shows on lg, xl screens.
                            Does not show on xs, sm, md screens.
    .decorative-line-xl     A decorative line that shows on xl screens.
                            Does not show on xs, sm, md, lg screens.

*/
.decorative-line-sm, .decorative-line-md, .decorative-line-lg, .decorative-line-xl {
    display: none;
}

@media print, (min-width: 480px) {
    .decorative-line-sm {
        display: block;
    }
}

@media print, (min-width: 768px) {
    .decorative-line-md {
        display: block;
    }
}

@media (min-width: 980px) {
    .decorative-line-lg {
        display: block;
    }
}

@media (min-width: 1260px) {
    .decorative-line-xl {
        display: block;
    }
}

/* PROGRESS NAVIGATION
    .nav-progress               A horizontal nav with forward arrows indicating progress through a workflow
                                [Module Parent]

    .done                       A progress nav that has reached the final step.
                                All dots, titles, and lines are green.
                                [child of .nav-progress]

    .nav-progress_title         Centered title for the current step. Color should match done-itude.
                                [child of .nav-progress]

    .nav-progress_block         A single nav item with a top border.
                                [child of .nav-progress]

    .step-done                   The nav item that represents the current step.
                                Filled with a brighter colored background.
                                Contains words to describe the current step.
                                [Extends .nav-progress_block]

    .nav-progress_dot           The dots on the nav
                                The dots match the step progress (empty gray circle for not done, orange for done)
                                                                
    .first                      The first nav dot.
                                This item is positioned at the top left of the progress bar


*/
.nav-progress {
    margin: 2rem auto;
    width: 70%;
}

    .nav-progress .nav-progress_title {
        font-size: 1.8rem;
        color: var(--text-gray-34);
        font-weight: 500;
        text-align: center;
        margin-bottom: 20px;
    }

        .nav-progress .nav-progress_title .nav-progress_subtitle {
            font-size: 1.6rem;
            color: var(--text-gray-45);
            font-weight: 500;
        }

    .nav-progress .nav-progress_block {
        border-top: 5px solid var(--border-gray-54);
        position: relative;
        max-width: 150px;
    }

        .nav-progress .nav-progress_block.step-done {
            border-top: 5px solid var(--border-primary);
        }

    .nav-progress .step-done .nav-progress_dot {
        background-color: var(--bg-primary);
        border: none;
    }

    .nav-progress.done .nav-progress_title {
        color: var(--text-primary);
    }

    .nav-progress.done .nav-progress_block {
        border-top: 5px solid var(--border-primary);
    }

    .nav-progress.done .nav-progress_dot {
        background-color: var(--bg-primary);
        border: none;
    }

.nav-progress_dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--bg-white);
    border: 2px solid var(--border-gray-54);
    box-shadow: 0 0 0 3px var(--bg-white);
    z-index: 1;
    position: absolute;
    top: -10px;
    right: 0px;
}

    .nav-progress_dot.first {
        top: -5px;
        left: 2px;
        position: relative;
        background-color: var(--bg-primary);
        border: none;
    }

/* DROPDOWN 
    .dropdown           A container for content that is hidden by default (i.e. select list or flyout menu)
                        This class is just for controlling the content that shows/hides. The trigger to get the content to show/hide is controlled via other classes, i.e. input-select or .flyout)
                        Sets the positioning context for .dropdown_content on large screens.                    
                        Takes over the whole viewport and applies a dark background on smalls screens.        
                        [Module parent]
    //TOOD: REMOVE, no longer have pill buttons
    .under-pill-btn     Indents the drop down menu content so it sits under the flat edge of the button only (not under the rounded edges on left and right which looks weird)
                        [Extends .dropdown]

    .dropdown_content   Content drops down below on medium and large screens, like a traditional HTML select element.
                        Content pops up as an overlay box on small screens, like a modal.
                        [Child of .dropdown]
                        [Must to be extended with other styles to apply background colors, borders, shadows etc., i.e. .input-select_list or .flyout_content]
     
*/
.dropdown.open {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-gray-20-opacity-50);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media print, (min-width: 768px) {
    .dropdown.open {
        position: relative;
        overflow: visible;
    }
}

.dropdown_content {
    display: none;
}

.dropdown.open .dropdown_content {
    display: block;
    position: relative;
    margin: 3% 2%;
    width: 96%;
    min-height: 94%;
    background: var(--bg-white);
    border-radius: .2143em;
    box-shadow: 0 0 1px 0 var(--box-shadow-level-20);
}

@media print, (min-width: 768px) {
    .dropdown.open .dropdown_content {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        width: 100%;
        height: auto;
        min-height: 0;
    }
}

@media print, (min-width: 768px) {
    .dropdown.open.under-pill-btn .dropdown_content {
        margin: 0 4%;
        width: 92%;
    }
}

/*
    FLYOUT

    .flyout                     A container for a clickable/tapple trigger, and associated content that is hidden by default
                                This class is for visual styling of the trigger and content.                         
                                The show/hide and positioning of associated content is controlled by a functional class, i.e. .dropdown or .popup.
                                [Module parent]
    .flyout_trigger             The element that when clicked/tapped causes the content to appear. (Controlled via Javascript toggle of .open class.)
                                [Child of .flyout]
    .flyout_content             The content 
                                [Child of .flyout, Extends .dropdown_content or. popup_content]
    .flyout_content_title       The content title
                                Displays on small screens to give context to the content
                                [Child of .flyout_content]
*/
.flyout_trigger {
    cursor: pointer;
}

.flyout_content {
    text-align: left;
    min-width: 16em;
    /* ITEM CONTAINER INSIDE A FLYOUT */
}

@media print, (min-width: 768px) {
    .flyout_content {
        border: 1px solid var(--border-gray-87);
    }

        .flyout_content.dark {
            border: none;
            border-radius: 0;
        }
}

.flyout_content_title {
    padding: 1.2em 1.2em;
    padding-right: 3em;
    padding-left: 2rem;
    margin-bottom: 0;
    border-radius: 3px 3px 0 0;
}

@media print, (min-width: 768px) {
    .flyout_content_title {
        padding: 1em 1.2em;
        padding-right: 3em;
        padding-left: 2rem;
    }
}

.flyout_content_title, .flyout_content_title_text {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 500;
}

@media print, (min-width: 768px) {
    .flyout_content_title, .flyout_content_title_text {
        font-size: 1.8rem;
    }
}

@media print, (min-width: 768px) {
    .flyout_content_title {
        display: none;
    }
}

.flyout_content_close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em 1.2em;
    color: var(--text-light-gray);
    text-decoration: none;
    z-index: 9100;
}

@media print, (min-width: 768px) {
    .flyout_content_close {
        padding: 1em 1.2em;
    }
}

.flyout_content_close.active {
    /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
    background-color: var(--bg-faint-gray);
}

@media print, (min-width: 768px) {
    .flyout_content_close {
        display: none;
    }
}

.flyout_content .item-container.condensed .basic-item {
    padding-top: 1.2em;
    padding-bottom: 1.2em;
}

@media print, (min-width: 768px) {
    .flyout_content .item-container.condensed .basic-item {
        padding-top: 0.7em 1.2em;
        padding-bottom: 0.7em 1.2em;
    }
}

/*  MODAL 
    .modal                      A container for content that pops up as a modal box above page content.
                                Takes over the whole viewport and applies a dark background.
                                [Module parent]
    .modal.open                 A class applied via javascript when the modal is open
                                [Extends .modal]
    .modal.force-interaction    Hide the "X" for modals that don't allow closing without taking some action
                                [Extends .modal]
    .modal_content              The content sits on top of the dark background.
                                [Child of .modal]
    .modal_close                The close "X" in the upper right hand corner
                                [Child of .modal_content]

    
    .narrow                     Display the modal at a narrow width on md+ screen sizes
                                [Extends .modal]
    .wide                       Display the modal at a wide width on md+ screen sizes
                                [Extends .modal]
    .mini                       Display the modal at a mini width and height on all screen sizes
                                Only use when the modal content is very short
                                [Extends .modal]


*/
.modal.open {
    position: fixed;
    z-index: 9000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-gray-20-opacity-50);
    overflow-x: hidden;
    overflow-y: -moz-scrollbars-vertical;
    overflow-y: scroll;
    -webkit-overflow-scrolling: auto;
}

@media (max-width: 979px) {
    .modal.open.mini {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

@media print {
    .modal {
        display: none;
    }
    .page-container {
        position: relative;
        padding-top: 75px;
    }
    .page-container::before {
        position: absolute;
        content: url('/img/logo_u_uwcu_stacked.svg');
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 50px;
    }
}

.modal_content {
    display: none;
}

.modal.open .modal_content {
    display: block;
    position: relative;
    margin: 3% 2%;
    width: 96%;
    min-height: 94%;
    background: var(--bg-white);
    border-radius: .2143em;
    box-shadow: 0 0 0.2857em var(--box-shadow-level-20);
}

.modal.open.mini .modal_content {
    min-height: 0;
    width: 300px;
    max-width: 95%;
    max-height: 95%;
    overflow-y: auto;
    overflow-x: hidden;
}

@media print, (min-width: 768px) {
    .modal.open .modal_content {
        margin: 5% 20%;
        width: 60%;
        min-height: 0;
    }

    .modal.open.narrow .modal_content {
        margin: 5% 30%;
        width: 40%;
    }

    .modal.open.wide .modal_content {
        margin: 5% 10%;
        width: 80%;
    }

    .modal.open.mini .modal_content {
        margin: 5% auto;
        width: 300px;
    }
}

@media (min-width: 980px) {
    .modal.open .modal_content {
        margin: 5% 25%;
        width: 50%;
    }

    .modal.open.narrow .modal_content {
        margin: 5% 35%;
        width: 30%;
    }

    .modal.open.wide .modal_content {
        margin: 5% 15%;
        width: 70%;
    }
}

@media (min-width: 1260px) {
    .modal.open .modal_content {
        margin: 5% 30%;
        width: 40%;
    }

    .modal.open.narrow .modal_content {
        margin: 5% 37%;
        width: 26%;
    }

    .modal.open.wide .modal_content {
        margin: 5% 22%;
        width: 56%;
    }
}

.modal_title {
    padding: 1.2em 1.2em;
    padding-right: 3em;
    padding-left: 2rem;
    margin-bottom: 0;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid var(--border-light-gray);
}

@media print, (min-width: 768px) {
    .modal_title {
        padding: 1em 1.2em;
        padding-right: 3em;
        padding-left: 2rem;
    }
}

.modal_title, .modal_title_text {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 500;
}

@media print, (min-width: 768px) {
    .modal_title, .modal_title_text {
        font-size: 1.8rem;
    }
}

.modal.force-interaction .modal_title {
    padding-right: 1.25em;
}

.modal_close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em 1.2em;
    color: var(--text-light-gray);
    text-decoration: none;
    z-index: 9100;
}

@media print, (min-width: 768px) {
    .modal_close {
        padding: 1em 1.2em;
    }
}

.modal_close.active {
    /* class added via javascript on tap for touch devices for visual feedback that item was tapped */
    background-color: var(--bg-faint-gray);
}

.modal.force-interaction .modal_close {
    display: none;
}

/* BODY SCROLLING 
 
    body                Add a dummy scroll bar to the body even if the page is shorter than the viewport. 
                        LG, XL (Desktop) only
                        If something dynamically changes on the page causing it's height to exceed the height of the viewport, the page won't jump.
                        This is especially helpful on the WB Dashboard when organizing widgets.

    body.modal-open     Prevent body scrolling when .modal is open. 
                        Note: Prevents scrolling on desktop only. Has no effect on mobile devices.
                        This hides the scrollbar on the body, however the .modal it has its own scrollbar (dummy or real depending on its height) which takes the place of the body's scrollbar. 
                        This makes for a smooth transition (although the body does jump slightly horizontally when its scrollbar disappears.)

*/
@media (min-width: 980px) {
    body {
        overflow-y: -moz-scrollbars-vertical;
        overflow-y: scroll;
    }
}

body.modal-open {
    overflow: hidden;
}

    /* MODAL HEIGHT FIX */
    body.modal-open.dropdown-open .modal {
        min-height: 105%;
    }

@media print, (min-width: 768px) {
    body.modal-open.dropdown-open .modal {
        min-height: 0;
    }
}

/* POPOVER

    .popover-container          A container for the popover to set positioning
                                [Module parent]  
    .active                     A class applied via javascript when the popover is open
                                [Extends .popover-container]

    .popover-trigger            The icon or text that opens the popup when clicked.
                                [Module parent]
    
    .popover                    A container for the contents of the popover                         
                                [Module parent]

    .popover_title              A container for the title of the popover
                                [Child of .popover]
    
    .popover_content            A container for the popover contents
                                [Child of .popover]

    .popover_arrow              The arrow for the popover to point to parent trigger.
                                [Child of .popover]
    .top                        Positions the arrow at the top of the popover
                                [Extends .popover_arrow]
    .bottom                     Positions the arrow at the bottom of the popover
                                [Extends .popover_arrow]
    .right                      Positions the arrow at the right of the popover
                                [Extends .popover_arrow]
    .left                       Positions the arrow at the left of the popover
                                [Extends .popover_arrow]
*/
.popover-container {
    position: relative;
    display: inline-block;
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 17.5em;
    padding: 0;
    text-align: left;
    font-weight: normal;
    background-color: var(--popover-background);
    box-shadow: 0 1px 3px 1px var(--box-shadow-black-opacity-30);
    border-radius: 4px 4px 3px 3px;
}

@media print, (min-width: 480px) {
    .popover {
        width: 31em;
    }
}

.popover-trigger {
    color: var(--text-link);
    display: inline-block;
    margin: 0;
    padding: .5em;
    line-height: normal;
    border: none;
    background-color: transparent;
    text-align: center;
    border-radius: 3px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: background-color .5s ease-in-out;
}

a.popover-trigger {
    text-decoration: none;
}

.hover .popover-trigger:focus {
    outline: none;
    background-color: var(--bg-black-opacity-05);
    color: var(--text-link-active-extra-dark);
}

.popover-container.active .popover-trigger {
    background-color: var(--bg-black-opacity-05);
}

    .popover-container.active .popover-trigger [class*=icon-],
    .hover .popover-trigger [class*=icon-]:hover,
    .hover .popover-trigger [class*=icon-]:focus,
    .hover .popover-trigger [class*=icon-]:active,
    .popover-trigger [class*=icon-].active,
    .hover .popover-trigger:focus [class*=icon-] {
        color: var(--text-link-active-extra-dark);
    }

.popover-trigger .icon-help {
    position: relative;
    top: 1px;
}

.hover .popover-trigger:focus [class*=icon-]:before {
    outline: var(--text-link-active-extra-dark) dotted 1px;
    outline-offset: 2px;
    border-radius: 50px;
}

.popover_title {
    padding: 0.7em 1.2em;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 500;
    background-color: var(--popover-title-background);
    color: var(--text-gray-35);
    border-radius: 3px 3px 0 0;
}

@media print, (min-width: 768px) {
    .popover_title {
        font-size: 1.6rem;
        padding: 0.7em 1.2em;
    }
}

.popover_content {
    padding: 1.2em 1.2em;
}

    .popover_content > :last-child {
        margin-bottom: 0;
    }

@media print, (min-width: 768px) {
    .popover_content {
        padding: 1em 1.2em;
    }
}

.popover_arrow {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: .875em solid transparent;
}

.popover.top .popover_arrow {
    bottom: -.875em;
    left: 50%;
    border-top-color: var(--popover-point-border);
    border-bottom-width: 0;
}

@media print, (min-width: 768px) {
    .popover.top .popover_arrow {
        bottom: -.8em;
    }
}

.popover.right .popover_arrow {
    top: 3px;
    left: -.8em;
    border-right-color: var(--popover-point-border);
    border-left-width: 0;
}

.popover.bottom .popover_arrow {
    top: -.875em;
    left: 50%;
    border-bottom-color: var(--popover-point-border);
    border-top-width: 0;
}

@media print, (min-width: 768px) {
    .popover.bottom .popover_arrow {
        top: -.8em;
    }
}

.popover.left .popover_arrow {
    top: 3px;
    right: -.8em;
    border-left-color: var(--popover-point-border);
    border-right-width: 0;
}

/*   
    PLACHOLDER TILE STYLES
    These placeholder rules will not generate CSS on their own.
    Must be used with the @extend directive.

*/
.tile, .tile-convertible {
    position: relative;
    margin: 0 -3px 3rem;
    border-radius: 3px;
}

@media print, (min-width: 768px) {
    .tile, .tile-convertible {
        margin: 0 -3px 3rem;
    }
}

/* TILES 
    Example markup:
    <div class="tile">
    ...Content..
    </div>

    Example markup with .item-container
    <div class="tile item-container">
        <div class="basic-item">...Header Content...</div>
        <div class="basic-item">...Content...</div>
        <div class="basic-item">...Footer Content...</div>
    </div>

    .tile                   A container for a content tile
                            [Module parent]

    .condensed              Less padding to match .basic-item padding if needed
                            [Extends .tile]  
       
*/
/* Tile */
.tile {
    background-color: var(--bg-white);
    border: 1px solid var(--border-gray-85);
    box-shadow: 0 0 1px 0 var(--box-shadow);
    padding: 1.5em 1.2em;
    /*  
        TILE with Layout -  ROW 
        Example markup:
        <div class="tile row"><div class="col-md-6">...
    */
}

@media print, (min-width: 768px) {
    .tile {
        padding: 2em 2em;
    }
}

.tile.condensed {
    padding: 1.2em 1.2em;
}

@media print, (min-width: 768px) {
    .tile.condensed {
        padding: 1em 1.2em;
    }
}

.tile > :last-child {
    margin-bottom: 0;
}

.tile.row {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    display: -ms-flexbox;
    display: flex;
}

@media print, (min-width: 768px) {
    .tile.row {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

.tile.row > [class*=col-] {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

@media print, (min-width: 768px) {
    .tile.row > [class*=col-] {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* TILE CONVERTIBLE 

     Example markup with .item-container
    <div class="item-container tile-convertible">
        <div class="basic-item">...Header Content...</div>
        <div class="basic-item">...Content...</div>
        <div class="basic-item">...Footer Content...</div>
    </div>
    
    .tile-convertible       A tile whose contents are attached at MD+ screen sizes and separate at XS, SM sizes
                            [Module parent]

    .stacked-above          A tile-convertible that is stacked directly above another tile-convertible (needed for lists that use "view more" functionality)
                            [Extends .tile-convertible]                
    
    .stacked-below          A tile-convertible that is stacked directly below another tile-convertible (needed for lists that use "view more" functionality)
                            [Extends .tile-convertible]
*/
/* Tile Convertible */
@media print, (min-width: 768px) {
    .tile-convertible {
        background-color: var(--bg-white);
        border: 1px solid var(--border-gray-85);
        box-shadow: 0 0 1px 0 var(--box-shadow);
    }
}

.tile-convertible.stacked-above {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: var(--border-light-gray);
    margin-bottom: .7em;
}

@media print, (min-width: 768px) {
    .tile-convertible.stacked-above {
        margin-bottom: 0;
    }
}

.tile-convertible.stacked-below {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-top: none;
}

/* TIMELINE 

    .timeline           Container for the entire timeline
                        [Module parent]
        .dot            Exends the timeline to make them dots instead of numbers
                        [Extends .timeline]
    .timeline_title     The title for each timeline
                        [Child of .timeline]
    .timeline_subtitle  The subtitle for each timeline
                        [Child of .timeline]
    .timeline_item      Each Individual item in a timeline
                        [Child of .timeline]

    .timeline_item_circle   The dot for each timeline
                            [Child of .timeline_item]
    .timeline_item_title    The title for each timeline item
                            [Child of .timeline_item]
    .timeline_item_text     The descriptive text within each timeline item
                            [Child of .timeline_item]

*/
/* Timeline Styles  */
.timeline ul {
    list-style: none;
    margin: 3rem 0 0 0;
}

.timeline_title {
    font-weight: 500;
    margin-bottom: 0;
    font-size: 2rem;
}

.timeline_subtitle {
    font-weight: 700;
    margin-top: 0;
}

.timeline_item {
    min-height: 5.5rem;
    margin: 0 0 0 3rem;
    position: relative;
    border-left: 3px solid var(--timeline-line);
}

.dot .timeline_item {
    border-left: 3px solid var(--border-gray-60);
}

ul .timeline_item.li, .timeline_item {
    padding: 0 0 2rem 4rem;
}

.dot ul .timeline_item.li, .dot .timeline_item {
    padding: 0 0 2rem 3rem;
}

.timeline_item:last-child {
    border: 3px solid transparent;
    padding-bottom: 0;
    margin-bottom: 0;
}

.timeline_item_circle {
    margin-top: -.7rem;
    top: 0;
    left: -5.9rem;
    width: 3.6rem;
    height: 3.6rem;
    background: var(--bg-white);
    border-radius: 50%;
    display: block;
    position: absolute;
    padding: .4rem 0 0;
    font-weight: bold;
    text-align: center;
    border: 3px solid var(--timeline-line);
    color: var(--text-primary);
    font-size: 1.6rem;
}

.dot .timeline_item_circle {
    margin-top: .2rem;
    left: -3.9rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: .2rem 0 0;
    border: 2px solid var(--border-gray-60);
    box-shadow: 0 0 0 3px var(--bg-white);
}

.bg-faint-gray .timeline_item_circle {
    background: var(--bg-faint-gray);
}

.timeline_item_title {
    font-weight: 700;
    position: relative;
    top: -5px;
}

.timeline_item_text {
    padding: 0 0 2rem;
    position: relative;
    word-break: break-word;
}

/*  ____________________________
    MODULES_WIZARDS.css

    Purpose:        Styles for wizard workflows

    Screens:        All, including Print

    ____________________________
*/
/* WIZARDS 
  .wizard                       A container for a wizard, with a background color
                                [Module parent]
  .wizard_progress              A container for the progress nav of the wizard.
                                [Child of wizard]
  .wizard_content               A container for the wizard contents, with a white background
                                [Child of wizard]

*/
.wizard {
    background-color: var(--bg-white);
    border: 1px solid var(--border-gray-85);
    box-shadow: 0 0 1px 0 var(--box-shadow-level-1);
    margin: 0 -3px 3rem;
    border-radius: 3px;
}

@media print, (min-width: 768px) {
    .wizard {
        margin: 0 -3px 3rem;
    }
}

.wizard_progress {
    background-color: var(--bg-gray-60);
}

    .wizard_progress.completed {
        background-color: var(--bg-info-light);
    }

.wizard_content {
    padding: 1em 1.2em 1.5em;
}

    .wizard_content:before, .wizard_content:after {
        display: table;
        content: "";
    }

    .wizard_content:after {
        clear: both;
    }

@media print, (min-width: 768px) {
    .wizard_content {
        padding: 1em 2em 2em;
    }
}

.wizard_content hr {
    margin-top: 1.4286em;
    margin-bottom: 1.4286em;
}

@media print, (min-width: 768px) {
    .wizard_content hr {
        margin-top: 1.7143em;
    }
}

@media print, (min-width: 768px) {
    .wizard_content h2, .wizard_content .looks-like-h2 {
        font-size: 2rem;
    }
}

.wizard_content_buttons {
    margin-top: 1.4286em;
}

    .wizard_content_buttons:before, .wizard_content_buttons:after {
        display: table;
        content: "";
    }

    .wizard_content_buttons:after {
        clear: both;
    }

@media print, (min-width: 768px) {
    .wizard_content_buttons {
        margin-top: 1.8571em;
    }
}

.wizard .data-display {
    margin-top: .7143em;
}

.bg-dark-aqua {
    background-color: #005968;
}

.last-child-mb0 > :last-child {
    margin-bottom: 0;
}

h1, .looks-like-h1,
h2,
.looks-like-h2 {
    font-feature-settings: "liga" 0;
    letter-spacing: -1px;
}

@media print {
    h1, .looks-like-h1,
    h2,
    .looks-like-h2 {
        font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    }
}

h1.looks-like-h2, .looks-like-h2.looks-like-h1 {
    font-family: "museo-slab", "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 1.75rem;
}

p + h1.looks-like-h2, p + .looks-like-h2.looks-like-h1 {
    margin-top: 2rem;
}

@media print, (min-width: 768px) {
    h1.looks-like-h2, .looks-like-h2.looks-like-h1 {
        font-size: 3.3rem;
        margin-bottom: 1.75rem;
    }

    p + h1.looks-like-h2, p + .looks-like-h2.looks-like-h1 {
        margin-top: 2rem;
    }
}

.registered {
    position: relative;
    line-height: 0;
    font-size: 1.7em;
    top: 6px;
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

h1 .registered, .looks-like-h1 .registered {
    font-size: .7em;
    top: -.4em;
}

h2 .registered, .looks-like-h2 .registered {
    font-size: 1em;
    top: -.15em;
}

sup {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    position: relative;
    font-size: 65%;
    line-height: 0;
    vertical-align: baseline;
    top: -0.7rem;
}

h2 sup, .looks-like-h2 sup {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    top: -1.1rem;
    font-weight: normal;
}

@media (min-width: 768px) {
    h2 sup, .looks-like-h2 sup {
        top: -1.4rem;
    }
}

h3 sup, .looks-like-h3 sup {
    font-size: 1.1rem;
    font-weight: normal;
}

/*Adobe Typekit FOUT (Museo) */
.wf-loading {
    /* styles to use when web fonts are loading */
}

    .wf-loading h1, .wf-loading .looks-like-h1 {
        opacity: 0;
    }

    .wf-loading h2, .wf-loading .looks-like-h2 {
        visibility: hidden;
    }

.wf-active {
    /* styles to use when web fonts are active */
}

    .wf-active h1, .wf-active .looks-like-h1 {
        opacity: 1;
        transition: all 300ms ease;
    }

    .wf-active h2, .wf-active .looks-like-h2 {
        visibility: visible;
    }

.wf-inactive {
    /* styles to use when web fonts are inactive */
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
}

.mega-info {
    /* mega-size information for infographic-style callout */
    color: var(--text-primary);
    font-weight: 300;
    font-size: 3.6rem;
    line-height: 1.15;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

@media print, (min-width: 768px) {
    .mega-info {
        font-size: 4.8rem;
    }
}

.caption {
    /* small caption text */
    color: var(--text-med-gray);
    line-height: 1.5;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: block;
}

/* 
    ARTICLE LISTING PAGE

    .article-list               The unordered list for Newsroom Articles
                                [Module parent]
    .article-list_item          Individual Newsroom Article
                                [Child of .article-list]
    .article-list_item_image    The image for the newsroom article
                                [Child of .article-list_item]
    .article-list_item_title    The title for the newsroom article
                                [Child of .article-list_item]
    .article-list_item_date     The date for the newsroom article
                                [Child of .article-list_item]
    .article-list_item_summary  The summary for the newsroom article
                                [Child of .article-list_item]
    .article-list_item_more     The "read more" for the newsroom article
                                [Child of .article-list_item]
*/
.article-list {
    margin-left: 0;
    list-style: none;
}

@media print {
    .article-list {
        margin-top: 2rem;
    }
}

.article-list_item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--text-med-gray);
    margin-bottom: 5rem;
}

@media (min-width: 768px) {
    .article-list_item {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: center;
        align-items: center;
    }
}

a.article-list_item {
    text-decoration: none;
}

    a.article-list_item:hover {
        color: var(--text-med-gray);
    }

    a.article-list_item:focus {
        outline-offset: 1rem;
    }

@media (min-width: 980px) {
    a.article-list_item:focus {
        outline-offset: 1rem;
    }
}

.article-list_item_image {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    height: 18rem;
    width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .article-list_item_image {
        height: 100%;
        width: auto;
        margin-right: 3rem;
        margin-bottom: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
}

@media (min-width: 980px) {
    .article-list_item_image {
        width: 29.5rem;
    }
}

@media print {
    .article-list_item_image {
        display: none;
    }
}

.article-list_item_image img {
    left: 50%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    height: 100%;
}

@media (min-width: 480px) {
    .article-list_item_image img {
        height: auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .article-list_item_image img {
        left: 0;
        top: 0;
        transform: none;
    }
}

.article-list_item_title {
    margin-bottom: 1.5rem;
    font-size: 2.4rem;
}

@media (min-width: 980px) {
    .article-list_item_title {
        font-size: 2.7rem;
    }
}

.theme-navy .article-list_item_title {
    color: var(--text-info);
}

.article-list_item:hover .article-list_item_title {
    color: var(--text-info-active-extra-dark);
}

.article-list_item_date {
    font-size: 1.4rem;
    color: var(--text-light-gray);
    margin-bottom: 1rem;
}

.article-list_item_summary {
    margin-bottom: 1rem;
}

.article-list_item_more {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.4rem;
}

@media print {
    .article-list_item_more {
        display: none;
    }
}

/* 
    ARTICLE PAGE IMAGE
*/
.image-article {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    height: 18rem;
    width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .image-article {
        float: right;
        height: auto;
        width: auto;
        margin: 0 0 3rem 3rem;
    }
}

@media (min-width: 980px) {
    .image-article {
        width: 25rem;
    }
}

@media (min-width: 1260px) {
    .image-article {
        width: auto;
    }
}

.image-article img {
    left: 50%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    height: 100%;
}

@media (min-width: 480px) {
    .image-article img {
        height: auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .image-article img {
        left: 0;
        top: 0;
        transform: none;
    }
}

/*
    RELATED ARTICLES

    .related-title              The Title for the Right Column (aside)
                                [Module parent]
    .related-list               The unordered list for Related Newsroom Articles
                                [Module parent]
    .related-list_item          The individual Related Newsroom Article
                                [Child of .related-list]
    .related-list_item_image    The Image for the Related Newsroom Article
                                [Child of .related-list_item]
    .related-list_item_title    The Title for the Related Newsroom Article
                                [Child of .related-list_item]
*/
[class*='theme-'] .related-title {
    color: var(--text-gray-35);
}

@media print {
    .related-title {
        display: none;
    }
}

.related-list {
    margin-top: 2rem;
    margin-left: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .related-list {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

@media (min-width: 980px) {
    .related-list {
        display: block;
    }
}

@media print {
    .related-list {
        display: none;
    }
}

.related-list_item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--text-med-gray);
    margin: 3rem 0;
}

@media (min-width: 768px) {
    .related-list_item {
        -ms-flex-align: start;
        align-items: flex-start;
        max-width: 22rem;
        margin: 0;
    }
}

@media (min-width: 980px) {
    .related-list_item {
        -ms-flex-direction: column;
        flex-direction: column;
        margin: 0 0 2rem 0;
        max-width: none;
    }
}

a.related-list_item {
    text-decoration: none;
}

    a.related-list_item:focus {
        outline-offset: 1rem;
    }

@media (min-width: 980px) {
    a.related-list_item:focus {
        outline-offset: 1rem;
    }
}

@media (min-width: 768px) {
    li:first-child .related-list_item {
        margin-right: 2rem;
    }
}

@media (min-width: 980px) {
    li:first-child .related-list_item {
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    li:last-child .related-list_item {
        margin-left: 2rem;
    }
}

@media (min-width: 980px) {
    li:last-child .related-list_item {
        margin-left: 0;
    }
}

.related-list_item_image {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    height: 18rem;
    width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .related-list_item_image {
        height: 100%;
        width: auto;
        margin-bottom: 1.5rem;
        -ms-flex-negative: 0;
        flex-shrink: 0;
    }
}

@media (min-width: 980px) {
    .related-list_item_image {
        margin-bottom: 1.0rem;
    }
}

.related-list_item_image img {
    left: 50%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    height: 100%;
}

@media (min-width: 480px) {
    .related-list_item_image img {
        height: auto;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .related-list_item_image img {
        left: 0;
        top: 0;
        transform: none;
    }
}

.related-list_item_title {
    font-size: 1.8rem;
}

@media print, (min-width: 768px) {
    .related-list_item_title {
        font-size: 1.8rem;
    }
}

a.related-list_item .related-list_item_title {
    color: var(--text-gray-35);
}

    a.related-list_item .related-list_item_title:hover,
    a.related-list_item:focus .related-list_item_title {
        color: var(--text-info);
    }

/*
    ARTICLE ASIDE

    .article-aside              The container for the right-floated image and toolbox inside an article
                                [Module parent]
    .article-aside img          The image inside the article

*/
.article-aside {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    height: 18rem;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

@media (min-width: 768px) {
    .article-aside {
        float: right;
        height: auto;
        width: 25rem;
        margin: 0 0 3rem 3rem;
        z-index: 1;
    }
}

.article-aside img {
    left: 50%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
}

/*@media (min-width: 480px) {
    .article-aside img {
        height: auto;
        width: 100%;
    }
}*/

@media (min-width: 768px) {
    .article-aside img {
        left: 0;
        top: 0;
        transform: none;
    }
}

/*
    ARTICLE CARD

    .article-card                   The container for the reusable teaser article
                                    [Module parent]
    .article-card_image             The image inside the article-card
                                    [Child of  .article-card]
    .article-card_image_featured    The "featured" flag that floats over the article card image
                                    [Child of  .article-card_image]
*/
.article-card {
    height: 100%;
}

.article-card_image {
    position: relative;
}

    .article-card_image img {
        width: 100%;
    }

/*@media (max-width: 768px) {
    .article-card_image img {
        width: auto;
    }
}*/

.article-card_image_featured {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1000;
    background-color: var(--bg-primary);
    color: var(--text-white);
}

/* DECO (Borders & Underlines)
     
    .aside      Content to appear in a right column on desktop, falls below on mobile
                [Module parent; Extends .col-lg-*]
*/
.aside {
    border-top: 1px solid var(--border-gray-87);
    margin-top: 1em;
    padding-top: 2em;
}

@media print, (min-width: 980px) {
    .aside {
        border-top: none;
        border-left: 1px solid var(--border-gray-87);
        margin-top: 0;
        padding-top: 0;
    }
}

/*  If a button is the only child of a column, add some margin to the bottom of the button
    not sure this is the best way, maybe .button-row [class*=button-] {}
    depends if we have a special row for buttons this is likely since it will be a special 4 column option
    or we don't give them a 4 col row and we just do it for them?
*/
[class*=col-]:not(:only-child) > [class*=button-]:only-child {
    margin-bottom: 1.5em;
}

[class*=button-]:last-child {
    margin-bottom: 0;
    margin-right: 0;
}

/*
    
    .button-on-photo    Extends button-reversed

*/
.button-on-photo {
    margin: 0;
    background-color: var(--bg-black-opacity-30);
    border: 2px solid var(--border-white);
    z-index: 1;
    white-space: nowrap;
}

    a.button-on-photo.button-reversed, .button-on-photo.button-reversed {
        color: var(--text-white);
    }

        .hover a.button-on-photo.button-reversed:hover,
        .hover a.button-on-photo.button-reversed:focus,
        .hover a.button-on-photo.button-reversed:active, a.button-on-photo.button-reversed.active, .hover .button-on-photo.button-reversed:hover,
        .hover .button-on-photo.button-reversed:focus,
        .hover .button-on-photo.button-reversed:active, .button-on-photo.button-reversed.active {
            color: var(--text-white);
            background-color: var(--bg-primary);
            border: 2px solid var(--border-primary);
        }

/*
    BUTTON GRID

    .buttons-grid           The container for the button grid

*/
.buttons-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    margin: 3rem 0 1rem;
}

@media (min-width: 480px) {
    .buttons-grid {
        margin-left: -2%;
        margin-right: -2%;
    }
}

@media (min-width: 768px) {
    .buttons-grid {
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: -1%;
        margin-right: -1%;
    }
}

@media (min-width: 980px) {
    .buttons-grid {
        margin-left: -.5%;
        margin-right: -.5%;
    }
}

@media (min-width: 1260px) {
    .buttons-grid {
        margin-left: -1%;
        margin-right: -1%;
    }
}

.buttons-grid [class*="button-"].small {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 2rem;
    text-align: center;
    line-height: 1.2;
}

@media (min-width: 480px) {
    .buttons-grid [class*="button-"].small {
        width: 46%;
        margin-right: 2%;
    }
}

@media (min-width: 768px) {
    .buttons-grid [class*="button-"].small {
        width: 20%;
        margin-right: 1%;
    }
}

@media (min-width: 980px) {
    .buttons-grid [class*="button-"].small {
        width: 23%;
        padding-left: 1.5em;
        padding-right: 1.5em;
    }
}

/*  ____________________________
    MODULES_ICONS.css

    Purpose:        Use a custom icon font to display icons
                    Font generated from icomoon.io/app

    Screen Sizes:   All, including Print

    Notes:          Fonts created using SVG icons (IKONS) and downloaded SVG images from font libraries in Icomoon. All images
                    based on 16px grid. 16px used as this is the recommended size - relative to the size of browser
                    font size. This helps to guide the white space around the icon and the line height.

    TODO:           Better sizing for icons. The icons look better when they are a larger font size than any adjacent text, 
                    however, b/c of the relative font sizing in ems, the small and large sizes don't always act as expected
                    
    ____________________________
*/
/* TABLE OF CONTENTS
------------------------
    - ICONS
    - FORM INPUTS
    - SIZES
    - ICON LINK
    - ICON PREPEND
-------------------------
*/
/* 
    Public Site Icons

   The @font-face is in _global

*/
.forward[class*=button-]:after, .backward[class*=button-]:before, [class^=icon-]:before, [class*=' icon-']:before, .ui-datepicker-trigger, .sortable-overlay_handle, .check-mark-list:before,
.check-mark-list li:before, .basic-item.forward:before {
    font-family: 'uwcu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 16px;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkbox, .icon-radio {
    margin-right: .2857em;
    font-size: 2.1rem;
    vertical-align: text-bottom;
}

@media print, (min-width: 768px) {
    .icon-checkbox, .icon-radio {
        font-size: 1.6rem;
    }
}

[class^=icon-].small:before, [class*=' icon-'].small:before {
    font-size: 12px;
}

[class^=icon-].medium:before, [class*=' icon-'].medium:before {
    font-size: 24px;
}

[class^=icon-].large:before, [class*=' icon-'].large:before {
    font-size: 32px;
}

[class^=icon-].xlarge:before, [class*=' icon-'].xlarge:before {
    font-size: 40px;
}

li[class^=icon-], li[class*=' icon-'] {
    padding-right: .3571em;
}

.icon-play:before {
    content: "\e90f";
}

.icon-chevron-down:before {
    content: "\e601";
}

.icon-chevron-left:before {
    content: "\e602";
}

.icon-chevron-right:before {
    content: "\e603";
}

.icon-chevron-up:before {
    content: "\e605";
}

.icon-menu:before {
    content: "\e613";
}

.icon-x:before {
    content: "\e616";
}

.icon-arrow-down:before {
    content: "\e617";
}

.icon-arrow-up:before {
    content: "\e618";
}

.icon-triangle-left:before {
    content: "\e61d";
}

.icon-triangle-right:before {
    content: "\e61e";
}

.icon-triangle-up:before {
    content: "\e61f";
}

.icon-triangle-down:before {
    content: "\e620";
}

.icon-calendar:before {
    content: "\e626";
}

.icon-calendar-dropdown:before {
    content: "\e627";
}

.icon-lock:before {
    content: "\e629";
}

.icon-help:before {
    content: "\e634";
}

.icon-error-outline:before {
    content: "\e639";
}

.icon-user:before {
    content: "\e63b";
}

.icon-info:before {
    content: "\e63c";
}

.icon-check-mark:before {
    content: "\e63e";
}

.icon-checkmark-circle:before {
    content: "\e63d";
}

.icon-location:before {
    content: "\e647";
}

.icon-search:before {
    content: "\e64a";
}

.icon-pin-circle:before {
    content: "\e656";
}

.icon-checkbox:before {
    content: "\e63f";
}

.icon-checkbox.checked:before {
    content: "\e624";
}

.icon-checkbox.half-checked:before {
    content: "\e64c";
}

.icon-radio:before {
    content: "\e64b";
}

.icon-radio.checked:before {
    content: "\e63a";
}

.icon-radio.mr0 {
    margin-right: 0;
}

.icon-dollar-sign:before {
    content: "\e622";
}

.icon-facebook:before {
    content: "\e910";
}

.icon-linkedin:before {
    content: "\e911";
}

.icon-twitter:before {
    content: "\e912";
}

.icon-youtube:before {
    content: "\e913";
}

.icon-instagram:before {
    content: "\e914";
}

.icon-map-pin:before {
    content: "\e915";
}

.icon-gps-location:before {
    content: "\e916";
}

/* ICON LINK 
    
    .link-icon  An anchor tag surrounding an icon.
                [Module parent]
*/
a.link-icon,
.hover a.link-icon:hover,
.hover a.link-icon:focus,
.hover a.link-icon:active, a.link-icon.active {
    text-decoration: none;
}

.ui-datepicker-trigger:before {
    content: "\e627";
}

.ui-icon-seek-prev:before {
    content: "\e602";
}

.ui-icon-seek-next:before {
    content: "\e603";
}

/*
    ICON GRID

    .icon-grid                      The container for the icon grid
                                    [Module Parent]
    .icon-grid_item                 The individual Item in the icon grid that contains the icon and title
                                    [Child of .icon-grid]
    .icon-grid_item_graphic         The graphic for the icon grid item
                                    [Child of .icon-grid_item]
    .icon-grid_item_title           The title for the icon grid item
                                    [Child of .icon-grid_item]
    .icon-grid_item_graphic.left    The graphic for the icon grid item when it sits to the left of some content 
                                    [Extend of .icon-grid_item_graphic]
*/
.icon-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

@media print, (min-width: 768px) {
    .icon-grid {
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 1.5rem;
    }
}

.icon-grid_item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 50%;
    margin: 0 0 4.5rem;
    text-align: center;
    text-decoration: none;
    /* six icons */
}

    .icon-grid_item a.icon-grid_item {
        text-decoration: none;
    }

@media print, (min-width: 768px) {
    .icon-grid_item {
        width: 25%;
    }
}

@media print, (min-width: 768px) {
    .icon-grid_item:nth-child(1):nth-last-child(6), .icon-grid_item:nth-child(2):nth-last-child(5), .icon-grid_item:nth-child(3):nth-last-child(4), .icon-grid_item:nth-child(4):nth-last-child(3), .icon-grid_item:nth-child(5):nth-last-child(2), .icon-grid_item:nth-child(6):nth-last-child(1) {
        width: 33%;
    }
}

.icon-grid_item_graphic {
    max-height: 6rem;
    margin-top: 8px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    transition: all .3s ease-in-out;
}

@media (min-width: 768px) {
    .icon-grid_item_graphic {
        max-height: 7.5rem;
    }
}

a.icon-grid_item:hover .icon-grid_item_graphic {
    transform: scale(1.15);
}

.icon-grid_item_title {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-gray-35);
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .icon-grid_item_title {
        font-size: 1.8rem;
    }
}

a.icon-grid_item .icon-grid_item_title {
    color: var(--text-link);
}

a.icon-grid_item:hover .icon-grid_item_title {
    color: var(--text-gray-35);
}

/*
    ICON CONTENT GRID

    .icon-content-grid-graphic   The graphic that sits to the left of some content

*/
.icon-content-grid-graphic {
    max-height: none;
    width: 55px;
    max-width: 55px;
    max-height: 100%;
}

@media (min-width: 980px) {
    .icon-content-grid-graphic {
        width: 65px;
        max-width: 65px;
    }
}

/*
    ICON ROW

    .icon-row                   The container for the icon grid
                                [Module Parent]

    .icon-row_item              The individual Item in the icon row that contains the icon and title
                                [Child of .icon-row]

    .icon-row_item_graphic      The graphic for the icon row item
                                [Child of .icon-row_item]

    .icon-row_item_title        The title for the icon row item
                                [Child of .icon-row_item]

    .icon-row_item_text         The text for the icon row item
                                [Child of .icon-row_item]

*/
.icon-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}

@media print, (min-width: 768px) {
    .icon-row {
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.icon-row_item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 0 3rem;
    text-align: center;
}

@media print {
    .icon-row_item {
        width: 33.3%;
        page-break-inside: avoid;
    }
}

.icon-row_item_graphic {
    min-height: 11rem;
    min-width: 16rem;
    max-height: 11rem;
    max-width: 16rem;
    margin: 0 auto 2rem;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

@media print {
    .icon-row_item_graphic {
        min-height: 8.25rem;
        min-width: 12rem;
        max-height: 8.25rem;
        max-width: 12rem;
    }
}

.icon-row_item_title {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 2.4rem;
}

@media print {
    .icon-row_item_title span {
        display: block;
    }
}

.icon-row_item_text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/* PRODUCT CARDS 

    .product-cards                      A container for product cards
                                        [Container]

    .product-card                       A product card that contains an image (optional), title and info (terms and rates).
                                        [Module parent]

    .product-card_content               Container for the .product-card_title and .product-card-info
                                        [Child of .product-card]

    .product-card_content_title         Title container; a flex container so the title centers vertically whether two rows or one.
                                        [Child of .product-content]

    .product-card_content_title_text    The title for the card
                                        [Child of .product-card_title]

    .product-card_content_body          Container for the rates and terms
                                        [Child of .product-card_content]


    Example Markup:

    <div class="product-card">
        <div class="product-card_content">
            <div class="product-card_content_title">
                <h2 class="product-card_content_title_text">Used Vehicle</h2>
            </div>
            <div class="product-card_content_body">
                ...
            </div>
        </div>
    </div>            

*/
.product-cards {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    padding: 1em 0;
}

@media print, (min-width: 768px) {
    .product-cards {
        -ms-flex-pack: center;
        justify-content: center;
    }
}

.product-card {
    display: block;
    width: 100%;
    margin: .8em 0;
    position: relative;
    /* two cards */
    /* three cards */
    /* four cards */
    /* five cards */
    /* six cards */
}

@media (min-width: 768px) {
    .product-card {
        max-width: 47%;
        -ms-flex-preferred-size: 47%;
        flex-basis: 47%;
        display: -ms-flexbox;
        display: flex;
    }
}

@media print, (min-width: 980px) {
    .product-card {
        max-width: 16em;
        -ms-flex-preferred-size: 16em;
        flex-basis: 16em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

@media (min-width: 768px) {
    .product-card:nth-child(1):nth-last-child(2), .product-card:nth-child(2):nth-last-child(1) {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
}

@media print, (min-width: 980px) {
    .product-card:nth-child(1):nth-last-child(2), .product-card:nth-child(2):nth-last-child(1) {
        max-width: 16em;
        -ms-flex-preferred-size: 16em;
        flex-basis: 16em;
        margin-left: 2em;
        margin-right: 2em;
    }
}

@media (min-width: 768px) {
    .product-card:nth-child(1):nth-last-child(3), .product-card:nth-child(2):nth-last-child(2), .product-card:nth-child(3):nth-last-child(1) {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
}

@media print, (min-width: 980px) {
    .product-card:nth-child(1):nth-last-child(3), .product-card:nth-child(2):nth-last-child(2), .product-card:nth-child(3):nth-last-child(1) {
        max-width: 15em;
        -ms-flex-preferred-size: 15em;
        flex-basis: 15em;
        margin-left: 1.375em;
        margin-right: 1.375em;
    }
}

@media (min-width: 1260px) {
    .product-card:nth-child(1):nth-last-child(3), .product-card:nth-child(2):nth-last-child(2), .product-card:nth-child(3):nth-last-child(1) {
        margin-left: 2em;
        margin-right: 2em;
    }
}

@media (min-width: 768px) {
    .product-card:nth-child(1):nth-last-child(4), .product-card:nth-child(2):nth-last-child(3), .product-card:nth-child(3):nth-last-child(2), .product-card:nth-child(4):nth-last-child(1) {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
}

@media print, (min-width: 980px) {
    .product-card:nth-child(1):nth-last-child(4), .product-card:nth-child(2):nth-last-child(3), .product-card:nth-child(3):nth-last-child(2), .product-card:nth-child(4):nth-last-child(1) {
        max-width: 16em;
        -ms-flex-preferred-size: 16em;
        flex-basis: 16em;
        margin-left: 3em;
        margin-right: 3em;
    }
}

@media (min-width: 1260px) {
    .product-card:nth-child(1):nth-last-child(4), .product-card:nth-child(2):nth-last-child(3), .product-card:nth-child(3):nth-last-child(2), .product-card:nth-child(4):nth-last-child(1) {
        max-width: 13.5em;
        -ms-flex-preferred-size: 13.5em;
        flex-basis: 13.5em;
        margin-left: 1em;
        margin-right: 1em;
    }
}

@media print {
    .product-card:nth-child(1):nth-last-child(4), .product-card:nth-child(2):nth-last-child(3), .product-card:nth-child(3):nth-last-child(2), .product-card:nth-child(4):nth-last-child(1) {
        max-width: 13.5em;
        -ms-flex-preferred-size: 13.5em;
        flex-basis: 13.5em;
        margin-left: .5em;
        margin-right: .5em;
    }
}

@media (min-width: 768px) {
    .product-card:nth-child(1):nth-last-child(5), .product-card:nth-child(2):nth-last-child(4), .product-card:nth-child(3):nth-last-child(3), .product-card:nth-child(4):nth-last-child(2), .product-card:nth-child(5):nth-last-child(1) {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
}

@media print, (min-width: 980px) {
    .product-card:nth-child(1):nth-last-child(5), .product-card:nth-child(2):nth-last-child(4), .product-card:nth-child(3):nth-last-child(3), .product-card:nth-child(4):nth-last-child(2), .product-card:nth-child(5):nth-last-child(1) {
        max-width: 14em;
        -ms-flex-preferred-size: 14em;
        flex-basis: 14em;
        margin-left: 1.2em;
        margin-right: 1.2em;
    }
}

@media (min-width: 1260px) {
    .product-card:nth-child(1):nth-last-child(5), .product-card:nth-child(2):nth-last-child(4), .product-card:nth-child(3):nth-last-child(3), .product-card:nth-child(4):nth-last-child(2), .product-card:nth-child(5):nth-last-child(1) {
        margin-left: 1.5em;
        margin-right: 1.5em;
    }
}

@media (min-width: 768px) {
    .product-card:nth-child(1):nth-last-child(6), .product-card:nth-child(2):nth-last-child(5), .product-card:nth-child(3):nth-last-child(4), .product-card:nth-child(4):nth-last-child(3), .product-card:nth-child(5):nth-last-child(2), .product-card:nth-child(6):nth-last-child(1) {
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
}

@media print, (min-width: 980px) {
    .product-card:nth-child(1):nth-last-child(6), .product-card:nth-child(2):nth-last-child(5), .product-card:nth-child(3):nth-last-child(4), .product-card:nth-child(4):nth-last-child(3), .product-card:nth-child(5):nth-last-child(2), .product-card:nth-child(6):nth-last-child(1) {
        max-width: 15em;
        -ms-flex-preferred-size: 15em;
        flex-basis: 15em;
        margin-left: 1.375em;
        margin-right: 1.375em;
    }
}

@media (min-width: 1260px) {
    .product-card:nth-child(1):nth-last-child(6), .product-card:nth-child(2):nth-last-child(5), .product-card:nth-child(3):nth-last-child(4), .product-card:nth-child(4):nth-last-child(3), .product-card:nth-child(5):nth-last-child(2), .product-card:nth-child(6):nth-last-child(1) {
        margin-left: 2em;
        margin-right: 2em;
    }
}

.product-card_content {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.product-card_content_title {
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.product-card_content_title_text {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 2.4rem;
    margin: 0;
    padding: .7em .5em 0;
    text-align: center;
    color: var(--text-gray);
}

    .product-card_content_title_text sup {
        top: -12px;
        margin-left: 2px;
        font-size: 1rem;
        -ms-flex-item-align: end;
        align-self: flex-end;
    }

@media (min-width: 768px) {
    .product-card_content_title_text sup {
        top: -8px;
    }
}

@media print, (min-width: 768px) {
    .product-card_content_title_text {
        padding: .7em .5em .7em;
        font-size: 1.8rem;
    }
}

.product-card_content_title_text .registered {
    font-size: 1.4em;
    top: .15em;
}

.product-card_content_body {
    border-bottom: 2px solid var(--border-gray-85);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 1.6em;
}

.product-card:last-child .product-card_content_body {
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .product-card_content_body {
        border-bottom: none;
        border-top: 2px solid var(--border-gray-85);
        padding-bottom: 0;
    }
}

/* RATES FOR PRODUCT CARDS


    .rates                          A container for the rates; Can contain multiple .rate
                                    [Container]

    .rate                           A rate; contains a title, rate_number, rate_symbol
                                    [Module Parent; Child of .rates]

    .has-large-percent              A rate with a large  percentage symbol
                                    [Extends .rate]

    .rate_title                     Title usually "rates as low as"
                                    [Child of .rate]

    .rate_number                    The percentage or the points for the rate
                                    [Child of .rate]

    .rate_symbol                    A container for percent sign and the annotation such as APR, Points, etc.
                                    [Child of .rate]

    .rate_symbol_percent            Percent Symbol
                                    [Child of .rate_symbol]

    .rate_symbol_label              The APR or Points etc.
                                    [Child of .rate_symbol]

    .rate_symbol_label_asterisk     The asterisk
                                    [Child of .rate_symbol_label]

    .rate_symbol_label_terms        The terms 
                                    [Child of .rate_symbol_label]



    Example Markup:

    <div class="rates">
        <div class="rate">
            <div class="rate_title">Rates as Low as</div>
            <div class="rate_number">2.24</div>
            <div class="rate_symbol">
                <div class="rate_symbol_percent">%</div>
                <div class="rate_symbol_label">APR
                    <span class="rate_symbol_label_asterisk">*</span> 
                    <span class="rate_symbol_label_terms">48 mo.</span> 
                </div>
            </div>
        </div>
    </div>
*/
.rates {
    margin: .3em .5em 1em 1em;
}

@media (min-width: 768px) {
    .rates {
        margin: 1em .5em 1em 1em;
    }
}

.rate {
    color: var(--text-gray);
    margin-top: 3px;
    white-space: nowrap;
}

@media print, (min-width: 768px) {
    .rate {
        margin-top: 1px;
    }
}

.rate_title {
    font-size: 1.1rem;
    white-space: normal;
    text-align: center;
    text-transform: uppercase;
}

@media print, (min-width: 768px) {
    .rate_title {
        font-size: 1.1rem;
    }
}

.rate_number {
    display: inline-block;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: normal;
}

.rate_symbol {
    display: inline-block;
}

.has-large-percent .rate_symbol {
    margin-left: -6px;
}

.rate_symbol_percent {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.has-large-percent .rate_symbol_percent {
    font-size: 3.2rem;
    display: inline-block;
}

.rate_symbol_label {
    line-height: 1;
    font-size: 1.2rem;
    font-weight: 700;
}

@media print, (min-width: 768px) {
    .rate_symbol_label {
        font-size: 1rem;
    }
}

.has-large-percent .rate_symbol_label {
    display: inline-block;
}

.rate_symbol_label_asterisk {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.1rem;
    position: relative;
    top: 0;
}

@media print, (min-width: 768px) {
    .rate_symbol_label_asterisk {
        font-size: 1.1rem;
    }
}

.has-large-percent .rate_symbol_label_terms {
    display: block;
}

/*
    BASIC CHART                 

    .basic-chart                A card at mobile and a CSS table at MD+.
                                [Module Parent]

    .basic-chart_row            A container for a row of data
                                [Child of .basic-chart]

    .basic-chart_item           A container for a piece of data
                                [Child of .basic-chart]
*/
/* Important Note: This is depricated in the back office but still being used by seminars */
.basic-chart {
    display: block;
    width: 100%;
    margin: 0 auto 4rem;
}

@media (min-width: 768px) {
    .basic-chart {
        width: auto;
        display: table;
    }
}

.basic-chart_row {
    display: block;
    margin: 2.5rem auto;
    background: var(--bg-white);
}

@media (min-width: 768px) {
    .basic-chart_row {
        padding: .8rem 0;
        display: table-row;
        margin: 0;
    }
}

.basic-chart_row p {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .basic-chart_row:nth-of-type(odd) {
        background: var(--bg-light-gray);
    }
}

.basic-chart_row:first-child {
    display: none;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-white);
    background-color: var(--bg-gray-34);
}

@media (min-width: 768px) {
    .basic-chart_row:first-child {
        display: table-row;
    }
}

.basic-chart_item {
    padding: .75rem 1.5rem;
    display: block;
    width: 100%;
    border-left: 1px solid var(--border-gray-87);
    border-right: 1px solid var(--border-gray-87);
    line-height: normal;
}

@media (min-width: 768px) {
    .basic-chart_item {
        display: table-cell;
        width: auto;
        padding: 1.5rem 2rem;
        text-align: center;
        vertical-align: middle;
        border-left: 1px solid var(--border-gray-87);
        border-top: 1px solid var(--border-gray-87);
        border-right: none;
    }
}

.basic-chart_item:last-child {
    border-bottom: 1px solid var(--border-gray-87);
}

@media (min-width: 768px) {
    .basic-chart_item:last-child {
        border-right: 1px solid var(--border-gray-87);
        border-bottom: none;
    }
}

.basic-chart_item:first-child {
    padding: .75rem 1.5rem;
    border-left: none;
    border-right: none;
    text-align: left;
    font-size: 1.8rem;
    color: var(--text-white);
    background-color: var(--bg-gray-34);
}

@media (min-width: 768px) {
    .basic-chart_item:first-child {
        color: var(--text-gray);
    }
}

@media (min-width: 768px) {
    .basic-chart_item:first-child {
        padding: 1.5rem 2rem;
        border-bottom: none;
        border-left: 1px solid var(--border-gray-87);
        font-size: 1.6rem;
    }
}

@media (min-width: 768px) {
    .basic-chart_row .basic-chart_item {
        background-color: transparent;
    }
}

.basic-chart_row:first-child .basic-chart_item {
    padding: 2rem;
    border-left: 1px solid var(--border-white-opacity-30);
    border-top: none;
    border-bottom: none;
}

@media (min-width: 768px) {
    .basic-chart_row:first-child .basic-chart_item:first-child {
        border-left: none;
        color: var(--text-white);
    }
}

@media (min-width: 768px) {
    .basic-chart_row:first-child .basic-chart_item:last-child {
        border-right: none;
    }
}

@media (min-width: 768px) {
    .basic-chart_row:last-child .basic-chart_item {
        border-bottom: 1px solid var(--border-gray-87);
    }
}

.basic-chart_item:nth-child(1):nth-last-child(3), .basic-chart_item:nth-child(2):nth-last-child(2), .basic-chart_item:nth-child(3):nth-last-child(1) {
    width: 33%;
}

/*
   COMPARISON CHART

    .comparison-chart-container     A container for a comparison chart (div)
                                    Necessary to extend chart to edge of screen on mobile. <table> will not consistently honor the negative margins across browsers.
        
    .comparison-chart               A comparision chart  (table)
                                    [Module Parent]

    .two-cols                       A comparision chart with two columns
                                    Sets the width to 50% on each column
                                    [Extends .comparison-chart]
    
    .three-cols                     A comparison chart with three columns
                                    Sets the width to 33.3% on each column
                                    [Extends .comparison-chart]

    .comparison-chart_head          The chart header row (tr)
                                    One per chart, at the very top
                                    [Child of .comparison-chart]

    .comparison-chart_head_item     A table cell in the header row (td)
                                    [Child of .comparison-chart_head]

    .comparison-chart_subhead       A chart subheader row (tr)
                                    One or more per chart, to provide subhead (i.e. title) for one or more rows in the chart
                                    [Child of .comparison-chart]

    .comparison-chart_subhead_item  A table cell in a subheader row (td)
                                    [Child of .comparison-chart_subhead]

    .comparison-chart_content       A chart content row (tr)
                                    [Child of .comparison-chart]

    .comparison-chart_content_item  A table cell in a content row (td)
                                    [Child of .comparison-chart_subhead]
    
 
*/
.comparison-chart-container {
    margin: 0 -1.2em;
    background-color: var(--bg-white);
}

@media (min-width: 768px) {
    .comparison-chart-container {
        margin: 0 0;
    }
}

.comparison-chart {
    margin: 3rem 0 2rem;
    width: 100%;
    border-collapse: separate;
    border: 1px solid var(--border-gray-87);
    border-top: none;
    line-height: 1.3;
}

@media print {
    .comparison-chart {
        position: relative;
        margin: .25rem 0;
        width: 100%;
        page-break-inside: avoid;
        border: 1px solid var(--border-gray-87) !important;
    }
}

.comparison-chart p:last-child {
    margin-bottom: 0;
}

.comparison-chart_head {
    background: var(--bg-gray-34);
    color: var(--text-white);
    position: sticky;
    top: 6rem;
    z-index: 9000;
}

@media (min-width: 980px) {
    .comparison-chart_head {
        top: 13.9rem;
        z-index: 9000;
    }
}

@media print {
    .comparison-chart_head {
        background: none;
        border: 1px solid var(--border-gray-87);
    }
}

.comparison-chart_head_item {
    padding: 1.2rem;
    text-align: center;
    vertical-align: top;
    font-weight: 500;
    border-right: 1px solid var(--border-white);
}

@media print {
    .comparison-chart_head_item {
        background: none !important;
        border: 1px solid var(--border-gray-87) !important;
    }
}

.comparison-chart_head_item:last-child {
    border-right: none;
}

.comparison-chart_head_item [class*=button-] {
    margin: .5em 0;
}

.comparison-chart_head_item p {
    margin-bottom: .75em;
}

.comparison-chart_subhead {
    background: var(--bg-light-gray);
}

.comparison-chart_subhead_item {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    border-top: 1px solid var(--border-gray-87);
    border-bottom: 1px solid var(--border-gray-87);
    line-height: normal;
}

@media (min-width: 768px) {
    .comparison-chart_subhead_item {
        padding: 1.4rem;
    }
}

.comparison-chart_content_item {
    padding: 1.5rem 1.2rem;
    text-align: center;
    vertical-align: top;
    font-size: 1.4rem;
    border-right: 1px solid var(--border-gray-87);
}

@media (min-width: 768px) {
    .comparison-chart_content_item {
        padding: 2rem 1.4rem;
    }
}

.comparison-chart_content_item:last-child {
    border-right: none;
}

.comparison-chart.two-cols .comparison-chart_content_item {
    width: 50%;
}

.comparison-chart.three-cols .comparison-chart_content_item {
    width: 33.33%;
}

/*
    .rate-product-title             Section Title in a blue bar 
                                    [Module Parent]

    .rate-product-title_text        The white text in the section title
                                    [Child of .rate-product-title]

    .rate-card                      Mobile Rate Card that has a grey border and goes full width 
                                    [Module Parent]

    .rate-card_header               The header of the Rate Card that contains the title
                                    Can contain the help  icon, a flyout or subtext
                                    [Child of .rate-card]

    .rate-card_header_title         The title for the Rate Card
                                    [Child of .rate-card_header]

    .rate-card_content              The content for the Rate Card
                                    [Child of .rate-card]

    .rate-card_content_item         The content item for the Rate Card
                                    [Child of .rate-card_content]

    .rate-card_content_item_subtext Special text in the the content item for the Rate Card
                                    [Child of .rate-card_content_item]

*/
.rates-product-title {
    background: var(--bg-gray-34);
    width: 100%;
    display: block;
    padding: 1rem 2rem;
    color: var(--text-white);
    margin-bottom: 2rem;
    margin-top: 4rem;
    position: sticky;
    z-index: 1;
    top: 6rem;
}

    .rates-product-title:first-child {
        margin-top: 0;
    }

.rates-product-title_text {
    color: var(--text-white);
    font-weight: 700;
    font-size: 1.8rem;
}

.rate-card {
    color: var(--text-gray);
    text-align: left;
    border: 1px solid var(--border-gray-87);
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
}

    .rate-card a.button-primary.flyout_trigger {
        border-color: var(--border-dark-gray);
        color: var(--text-gray-35);
        margin-bottom: 0;
    }

.hover .rate-card a.button-primary.flyout_trigger:hover,
.hover .rate-card a.button-primary.flyout_trigger:active {
    background-color: var(--bg-dark-gray);
    border-color: var(--border-dark-gray);
}

.rate-card_header {
    background: var(--bg-light-gray);
    padding: 1em 3em 1em 1em;
}

    .rate-card_header .popover-container {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
    }

.rate-card_header_title {
    font-size: 1.8rem;
    font-weight: 700;
}

.rate-card_content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    border-top: 1px solid var(--border-gray-87);
}

    .rate-card_content:first-child {
        border-top: none;
    }

.rate-card_content_item {
    width: 33%;
    border-right: 1px solid var(--border-gray-87);
    text-align: center;
    padding: 1.5rem .5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    /* two items */
}

    .rate-card_content_item.full-width {
        width: 100%;
    }

    .rate-card_content_item:last-child {
        border-right: none;
    }

    .rate-card_content_item:nth-child(1):nth-last-child(2), .rate-card_content_item:nth-child(2):nth-last-child(1) {
        width: 50%;
    }

.rate-card_content_item_subtext {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--text-light-gray);
}

/*
    RATE TABLE

    .rate-table                     A container the centers the table in the row
                                    [Container]

    .rate-table-head                The Table Head
                                    [Module Parent]

    .rate-table-head_row            The Table Head Rows
                                    The head can have two rows with the first and second rows having different styles/properties
                                    [Child of .rate-table-head]

    .rate-table-head_item           The Table Head Cells
                                    [Child of .rate-table-head]

    .rate-table_body                The Table Body
                                    [Module Parent]

    .rate-table_body_row            The Table Body Row
                                    [Child of .rate-table-body]

    .rate-table-body_item           The Table Body Cells
                                    [Child of .rate-table-body]

    .rate-table-body_item_subtext   Special text in the table body cell
                                    [Child of .rate-table-body]

    .certificates                   Certificate tables have extra styles for header cells and body cells
                                    [Extends .rate-table]
*/
.rate-table {
    margin: 3rem 0 2rem;
    width: auto;
    min-width: 80%;
}

    .rate-table.full-width {
        width: 100%;
    }

@media print {
    .rate-table {
        position: relative;
        margin: .25rem 0;
        width: 100%;
        page-break-inside: avoid;
        border: 1px solid var(--border-gray-87) !important;
    }
}

@media (min-width: 768px) {
    .rate-table {
        font-size: 1.4rem;
    }
}

@media (min-width: 980px) {
    .rate-table {
        font-size: 1.6rem;
    }
}

@media print {
    .rate-table {
        font-size: 8px;
    }
}

.rate-table:first-child {
    margin-top: 0;
}

@media print {
    .rate-table:first-child {
        margin-top: .5rem;
    }
}

@media print {
    .rate-table:last-child {
        margin-bottom: .5rem;
    }
}

.rate-table-head,
.rate-table-body {
    color: var(--text-gray);
}

@media print {
    .rate-table-head .popover-container,
    .rate-table-body .popover-container {
        display: none !important;
    }
}

@media print {
    .rate-table-head,
    .rate-table-body {
        page-break-inside: avoid;
    }
}

.rate-table-body {
    border-bottom: 1px solid var(--border-gray-87);
}

.rate-table-head_row {
    background: var(--bg-light-gray);
    margin-bottom: 1em;
    border-top: 1px solid var(--border-gray-87);
    margin-bottom: 0;
}

@media print {
    .rate-table-head_row {
        background: none;
        border: 1px solid var(--border-gray-87);
    }
}

.rate-table-head_item {
    padding: 1.2rem;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
}

    .rate-table-head_item p {
        margin: 0;
    }

.rate-table-body_item p {
    margin: 0;
}

@media print {
    .rate-table-head_item {
        padding: .1rem .5rem;
        background: none !important;
        border: 1px solid var(--border-gray-87) !important;
    }
}

@media print {
    .rate-table-head_item .txt-xsmall {
        font-size: 8px !important;
    }
}

.rate-table-head_item:first-child {
    border-left: 1px solid var(--border-gray-87);
}

@media print {
    .rate-table-head_item:first-child {
        border-left: none;
    }
}

.rate-table-head_item.deco-right {
    border-right: 1px solid var(--border-gray-87);
}

@media print {
    .rate-table-head_item.deco-right {
        border-right: none;
    }
}

.rate-table-head_row:first-child .rate-table-head_item:first-child {
    text-align: left;
    background: var(--bg-gray-34);
    color: var(--text-white);
    font-size: 1.6rem;
}

@media print {
    .rate-table-head_row:first-child .rate-table-head_item:first-child {
        background-color: none !important;
        border: 1px solid var(--border-gray-87) !important;
        font-size: 1.1rem;
    }
}

.rate-table-head_row:first-child .rate-table-head_item {
    color: var(--text-light-gray);
    font-weight: 700;
    text-align: center;
    font-size: 1.2rem;
    background: var(--bg-white);
    border-right: 1px solid var(--border-gray-87);
}

@media print {
    .rate-table-head_row:first-child .rate-table-head_item {
        font-size: 8px;
        border-right: none;
    }
}

.rate-table-head_item [class*=button-] {
    margin: 0 0 0 3rem;
}

@media print {
    .rate-table-head_item [class*=button-] {
        display: none;
    }
}

@media (min-width: 768px) {
    .rate-table-head_item .popover-container.active .popover-trigger [class*=icon-],
    .rate-table-head_item .hover .popover-trigger [class*=icon-]:hover,
    .rate-table-head_item .hover .popover-trigger [class*=icon-]:focus,
    .rate-table-head_item .hover .rate-table-head_item [class*=icon-]:active,
    .rate-table-head_item .popover-trigger [class*=icon-].active {
        color: var(--text-white);
    }
}

@media (min-width: 768px) {
    .rate-table-head_item .popover-container.active .popover-trigger,
    .rate-table-head_item .popover-container .popover-trigger:focus {
        background-color: var(--bg-white-opacity-10);
    }
}

.rate-table-head_item .popover_content {
    color: var(--text-gray);
}

.rate-table-body_row {
    border-top: 1px solid var(--border-gray-87);
}

@media print {
    .rate-table-body_row {
        border-top: none;
    }
}

.rate-table-body_row:last-child {
    border-bottom: 1px solid var(--border-gray-87);
}

@media print {
    .rate-table-body_row:last-child {
        border-bottom: none;
    }
}

.rate-table-body_row:nth-child(even) {
    background: var(--bg-faint-gray);
}

.rate-table-body_item {
    padding: 2rem 1.2rem;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid var(--border-gray-87);
    position: relative;
}

.rate-table-body_row.padded .rate-table-body_item {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
}

@media print {
    .rate-table-body_item {
        padding: .1rem .5rem;
        border-bottom: 1px solid var(--border-gray-87);
        border-top: 1px solid var(--border-gray-87);
        border-left: 1px solid var(--border-gray-87);
        border-right: 1px solid var(--border-gray-87);
    }
}

.rate-table-body_item:first-child {
    border-left: 1px solid var(--border-gray-87);
    font-weight: 500;
    text-align: left;
}

.rate-table-body_item.rate-type {
    vertical-align: top;
    background: var(--bg-white);
    background-clip: padding-box;
}

.certificates .rate-table-body_row:nth-child(2n+1) .rate-table-body_item:nth-child(6),
.certificates .rate-table-body_row:nth-child(2n+1) .rate-table-body_item:nth-child(7) {
    background: var(--bg-faint-gray);
    background-clip: padding-box;
}

.rate-table-body_item_subtext {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-gray-42);
}

@media print {
    .rate-table-body_item_subtext {
        font-size: 8px;
    }
}

.rate-table-body_item_subtext.bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    letter-spacing: 0;
}

/* ACCORDION

    .accordion   An expanable and collapsable component
                 An container for tile and basic-item components

    
Example Markup:


<div class="accordion">
    <div class="tile no-deco pa0 mb3">
        <a href="javascript:void(0)" class="basic-item has-icon-right no-deco" data-expand="#Answer1" tabindex="0" role="button">
            <div class="txt-bold ">...</div>
            <span class="js-showhide basic-item_icon-right">
                <span class="screen-reader-only">Show</span>
                <i class="icon-chevron-down"></i>
            </span>
            <span class="js-showhide basic-item_icon-right" style="display:none;">
                <span class="screen-reader-only">Hide</span>
                <i class="icon-chevron-up"></i>
            /span>
        </a>
        <div class="basic-item pt0" id="Answer1" style="display:none;">
        ...        
         </div>
    </div>
</div>

*/
@media (min-width: 768px) {
    .accordion .basic-item_icon-right {
        right: 2rem;
    }
}

.accordion .tile {
    background-color: var(--bg-faint-gray);
}

.section.bg-faint-gray .accordion .tile {
    background: var(--bg-white);
}

.bg-faint-gray .accordion .tile {
    background: var(--bg-white);
}

.accordion a.basic-item {
    color: var(--text-gray);
}

    .accordion a.basic-item:hover, .accordion a.basic-item:active, .accordion a.basic-item:focus {
        color: var(--text-info);
    }

.section.bg-faint-gray .accordion a.basic-item:hover, .section.bg-faint-gray .accordion a.basic-item:active, .section.bg-faint-gray .accordion a.basic-item:focus {
    background: var(--bg-white);
}

.bg-faint-gray .accordion a.basic-item:hover, .section.bg-faint-gray .accordion a.basic-item:active, .section.bg-faint-gray .accordion a.basic-item:focus {
    background: var(--bg-white);
}

a.filter_item.selected {
    border-bottom: 6px solid var(--border-primary) !important;
}

    a.filter_item.selected,
    .hover a.filter_item.selected:hover,
    .hover a.filter_item.selected:focus,
    .hover a.filter_item.selected:active, a.filter_item.selected.active {
        border-bottom-width: 6px;
    }

/* SECTIONS 
    These classes are named to accommodate the markup that is generated by the Umbraco Grid Editor

    .section                The only row in a section, has padding top and bottom
                            [Module parent]
    .start                  The first row in a section of content, has padding top
                            [Module parent]
    .middle                 The middle row in a section of content, has no padding top or bottom
                            [Module parent]
    .end                    The last row in a section of content, has padding bottom
                            [Module parent]
    .flex-first-mobile      A column that will be order 1 on mobile
                            [Child of .section; Extends .col-lg-6]        
*/
.section {
    padding: 4rem 0 2.5rem;
}

@media (min-width: 768px) {
    .section {
        padding: 6rem 0 3rem;
    }
}

@media (min-width: 1260px) {
    .section {
        padding: 8rem 0 4.5rem;
    }
}

@media print {
    .section {
        padding: 0;
        background-color: var(--white) !important;
    }
}

.section.start {
    padding-bottom: 0;
}

.section.end {
    padding-top: 0;
}

.section.middle {
    padding-top: 0;
    padding-bottom: 0;
}

.section .flex-first-mobile {
    margin-bottom: 1em;
}

@media (min-width: 980px) {
    .section .flex-first-mobile {
        margin-bottom: 0;
    }
}

/* CONTENT IMAGES IN A SECTION

    .image-content      A container for a content image (img tag)
                        [Module parent]
*/
.image-content {
    margin: .5em 0 2rem;
    position: relative;
    height: 15.8rem;
    width: 100%;
    overflow: hidden;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--bg-gray-51);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .image-content {
        height: 22rem;
    }
}

@media (min-width: 980px) {
    .image-content {
        margin-top: 0;
        height: auto;
    }
}

@media print {
    .image-content {
        display: none;
    }
}

.image-content img {
    max-width: none;
    position: absolute;
    min-height: 1px;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 480px) {
    .image-content img {
        height: auto;
        width: 100%;
    }
}

@media (min-width: 980px) {
    .image-content img {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }
}

.image-content .button-on-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ILLUSTRATION IMAGES IN A SECTION

    .image-illustration      A container for an illustration (img tag with SVG image)
                             [Module parent]

*/
.image-illustration {
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    position: relative;
}

    .image-illustration img {
        max-width: 100%;
        max-height: 25rem;
        margin-bottom: 3rem;
    }

@media print, (min-width: 768px) {
    .image-illustration img {
        max-height: 28rem;
        margin-bottom: 4rem;
    }
}

@media print, (min-width: 980px) {
    .image-illustration img {
        max-width: 40rem;
        max-height: 54rem;
        margin-top: 1rem;
    }

    .col-lg-12 > .image-illustration img {
        max-height: 38rem;
        margin-bottom: 5rem;
    }
}

/*
    SOCIAL SHARING
    .social-sharing             Container for the social icons
                                [Module parent]
    .social-sharing_item        The individual links for social
                                [Child of .footer-social]
    .icon-facebook              Square clicklet with reversed f for Facebook
                                [Module parent]
    .icon-linkedin              Square clicklet with reversed in for LinkedIn
                                [Module parent]
    .icon-youtube               Rectangular clicklet with play icon for Youtube
                                [Module parent]
    .icon-twitter               Square clicklet with X (formerly Twitter)
                                [Module parent]
    .icon-instagram             Rectangular clicklet with camera icon for Instagram
                                [Module parent]
    .icon-tiktok                Square clicklet with a music symbol for TikTok 
                                [Module parent]

*/
.social-sharing {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-left: -10px;
}

@media print {
    .social-sharing {
        display: none;
    }
}

a.social-sharing_item {
    color: var(--text-light-gray);
}

.hover a.social-sharing_item:focus,
.hover a.social-sharing_item:active,
.hover a.social-sharing_item:hover {
    outline: none;
    color: var(--text-link);
}

.social-sharing_item .icon-linkedin, .social-sharing_item
.icon-facebook, .social-sharing_item
.icon-tiktok, .social-sharing_item
.icon-youtube, .social-sharing_item
.icon-twitter, .social-sharing_item
.icon-intsagram {
    padding: 8px 10px;
    display: block;
}

/* PREFOOTER 
    These classes are used to control the display of the three-column prefooter

    .prefooter              Container for the entire prefooter row
                            [Module parent]
    .prefooter_col          A column in the row
                            [Child of .prefooter]
    .prefooter_col_title    The title for each prefooter column
                            [Child of .prefooter_col]

*/
/* Prefooter Styles  */
.prefooter {
    color: var(--text-gray);
    background-color: var(--bg-white);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-direction: row;
    flex-direction: row;
}

.hover .prefooter a:focus {
    outline-offset: 5px;
}

@media (min-width: 980px) {
    .prefooter_col:first-child {
        -ms-flex: 0 0 32%;
        flex: 0 0 32%;
    }
}

@media (min-width: 980px) {
    .prefooter_col:nth-child(2) {
        -ms-flex: 0 0 32%;
        flex: 0 0 32%;
        margin: 0 2%;
    }
}

@media (min-width: 980px) {
    .prefooter_col:last-child {
        max-width: 32%;
    }
}

.prefooter_col_title {
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 2.3rem;
    margin-bottom: 1em;
    font-weight: 500;
}

/* HERO 

    .hero               Container for the entire hero
                        [Module parent]
    .has-photo          A hero with a photo
                        [Extends .hero]
    .tall               A hero with a taller homepage-like height
                        [Extends .hero]
    .hero_title         The title for each hero block
                        [Child of .hero]
    .hero_image         An optional image behind the title
                        [Child of .hero]
    .hero_time-stamp    Time Stamp for Rates pages
                        [Child of .hero]

    // image crop sizes --> 1920x340, 980x250, 480x200
*/
/* Styles  */
.hero {
    padding-top: 4rem;
    margin-bottom: 2em;
    text-align: center;
}

@media (min-width: 768px) {
    .hero {
        padding-top: 6rem;
    }
}

@media (min-width: 1260px) {
    .hero {
        padding-top: 8rem;
    }
}

@media print {
    .hero {
        padding-top: 0;
    }
}

.hero.has-photo {
    padding-top: 0;
    position: relative;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 18rem;
    background-color: white;
}

@media print, (min-width: 768px) {
    .hero.has-photo {
        height: 25rem;
    }
}

@media (min-width: 980px) {
    .hero.has-photo {
        height: 34rem;
    }
}

@media print {
    .hero.has-photo {
        height: 10rem;
    }
}

.hero.has-photo.tall {
    height: 35rem;
}

@media (min-width: 768px) {
    .hero.has-photo.tall {
        height: 40rem;
    }
}

@media (min-width: 980px) {
    .hero.has-photo.tall {
        height: 44rem;
    }
}

.hero.has-time-stamp {
    margin-bottom: 1.5rem;
}

@media print, (min-width: 768px) {
    .hero.has-time-stamp {
        margin-bottom: .5em;
    }
}

.hero_time-stamp {
    color: var(--text-light-gray);
    font-size: 1.4rem;
}

@media print {
    .hero_time-stamp {
        font-size: 1.1rem;
    }
}

.hero_image {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media print {
    .hero_image {
        display: none;
    }
}

.has-photo.tall .hero_image {
    height: auto;
    width: auto !important;
    left: 50%;
    top: 50%;
    max-width: none;
    min-width: 100%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
}

.hero_title {
    padding: 0 1rem;
    /*give a little buffer before edge of page*/
    max-width: 1100px;
    margin: 0 auto;
    letter-spacing: normal;
}

@media print, (min-width: 768px) {
    .hero_title {
        padding: 0 3rem;
    }
}

div.hero_title {
    font-size: 3.2rem;
    font-family: "museo-slab", "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    div.hero_title {
        font-size: 6rem;
        margin-bottom: 1.5rem;
    }
}

@media print {
    .hero_title {
        font-size: 4rem !important;
        margin-bottom: 1rem;
    }
}

.has-photo .hero_title {
    z-index: 1;
    color: var(--text-white) !important;
    text-shadow: 1px 1px 4px var(--text-shadow);
}

@media print {
    .has-photo .hero_title {
        text-shadow: none;
    }
}

/* INVESTMENT SERVICES LOGO

    .logo-investment-services   A logo used in the hero on Investment Services pages only
                                [Module parent]

*/
.logo-investment-services {
    max-width: 90%;
    max-height: 90px;
    image-rendering: -webkit-optimize-contrast;
}

@media print, (min-width: 768px) {
    .logo-investment-services {
        max-height: 125px;
    }
}

@media (min-width: 980px) {
    .logo-investment-services {
        max-width: 720px;
    }
}

@media print {
    .logo-investment-services {
        max-height: 90px;
    }
}

/* AT A GLANCE a.k.a. Differentiators 

    .differentiator-hero                        Container for the entire hero
                                                [Module parent]
    .differentiator-hero_photo                  A container for the image
                                                [Child of .differentiator-hero]
    .differentiator-hero_photo_img              The image for the hero 
                                                [Child of .differentiator-hero_photo]
    
    .differentiator-hero_content                The content for the hero that contains the title, icon and body copy
                                                [Child of .differentiator-hero]

    .differentiator-hero_content_icon           The icon to the left of the title
                                                [Child of .differentiator-hero_content]

    .differentiator-hero_content_title          The Title
                                                [Child of .differentiator-hero_content]

    .differentiator-hero_content_title_text     Special text for the second word of the title
                                                [Child of .differentiator-hero_content_title]

    // image crop sizes --> 1920x900 , 980x370, 480x312

*/
/* Styles  */
.differentiator-hero {
    background: var(--bg-faint-gray);
}

.differentiator-hero_photo {
    position: relative;
    overflow: hidden;
    height: 24rem;
}

@media (min-width: 480px) {
    .differentiator-hero_photo {
        height: 30rem;
    }
}

@media (min-width: 980px) {
    .differentiator-hero_photo {
        height: 42rem;
    }
}

.differentiator-hero_photo_img {
    background: var(--bg-faint-gray);
    position: absolute;
    height: auto;
    width: auto;
    left: 50%;
    top: 0;
    max-width: none;
    min-width: 100%;
    width: auto;
    margin: 0 auto;
    transform: translate(-50%, 0);
}

.differentiator-hero_content {
    width: 100%;
    padding: 0 0 3.2rem;
    color: var(--body-text);
    background: var(--bg-faint-gray);
}

@media (min-width: 768px) {
    .differentiator-hero_content {
        padding: 0 0 5rem;
    }
}

.differentiator-hero_content a {
    color: var(--text-link);
    text-decoration: underline;
}

.hover .differentiator-hero_content a:hover,
.hover .differentiator-hero_content a:active,
.hover .differentiator-hero_content a:focus {
    color: var(--text-link-active-extra-dark);
    outline-color: var(--focus-outline-link-extra-dark);
    text-decoration: none;
}

.differentiator-hero_content_icon {
    margin: 0 auto 2rem;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

@media (min-width: 768px) {
    .differentiator-hero_content_icon {
        margin: 0 1rem 0;
    }
}

.differentiator-hero_content_title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    font-size: 3.2rem;
    font-family: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-weight: 500;
    text-align: center;
    padding: 3rem 0 1.5rem;
    line-height: .8;
    color: var(--body-text) !important;
}

@media (min-width: 768px) {
    .differentiator-hero_content_title {
        font-size: 4rem;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: end;
        align-items: flex-end;
        padding-top: 5rem;
    }
}

@media (min-width: 980px) {
    .differentiator-hero_content_title {
        font-size: 5rem;
    }
}

.differentiator-hero_content_title_text {
    text-transform: uppercase;
    font-weight: 700;
}

/*
    These styles are being used by the Webforms on secure.
*/
.VAMErrorText {
    color: var(--error);
}

.VAMBlinkText {
    color: var(--text-white);
}

.VAMFieldWithError {
    border: 2px solid var(--border-error);
    color: var(--text-gray);
    line-height: normal;
    vertical-align: middle;
    outline: 0;
    margin: 0.2143em 0;
    padding: 0.445em;
    border-radius: .2143em;
    box-shadow: inset 0 0 1px var(--box-shadow-no-opacity);
    background: var(--bg-white);
    width: 100%;
}

    .VAMFieldWithError[type=radio], .VAMFieldWithError[type=checkbox] {
        width: auto;
    }

@media (min-width: 768px) {
    .VAMFieldWithError {
        max-width: 20em;
    }
}

.VAMFieldWithError[style="OrigCss:input-text extra-narrow;"], .VAMFieldWithError[size="3"], .VAMFieldWithError[size="4"], .VAMFieldWithError[size="6"] {
    max-width: 5em;
}

.VAMFieldWithError[style="OrigCss:input-text narrow;"] {
    max-width: 10em;
}

.VAMListWithError {
    width: 100%;
    border: 2px solid var(--border-error);
    color: var(--text-gray);
    line-height: normal;
    vertical-align: middle;
    outline: 0;
    margin: 0.2143em 0;
    padding: 0.445em;
    border-radius: .2143em;
    box-shadow: inset 0 0 1px var(--box-shadow-no-opacity);
    background: var(--bg-white);
}

@media print, (min-width: 768px) {
    .VAMListWithError {
        width: 20em;
    }
}

.VAMValSummary {
    color: var(--error);
}

.VAMValSummaryHeader {
    color: var(--error);
}

    .VAMValSummaryHeader TR {
        color: var(--error);
    }

.VAMValSummaryErrors {
    color: var(--error);
    margin-top: 6px;
}

.VAMValSummaryFooter {
    color: var(--error);
}

    .VAMValSummaryFooter TR {
        color: var(--error);
    }

.VAMRequiredFieldsDescription {
    font-size: 8pt;
    font-style: italic;
}

.VAMTextHiliteFields {
    background-color: #fcc;
}

.VAMNonTextHiliteFields {
    background-color: #fcc;
}

.VAMValSummaryAltRows {
    color: var(--error);
    background-color: lightblue;
}

.VAMMultiSegContainer {
    border-left: lightgrey thin inset;
    border-top: lightgrey thin inset;
    border-right: lightgrey thin inset;
    border-bottom: lightgrey thin inset;
    padding-left: 2px;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
}

.VAMMultiSegTextBox {
    border-left: whitesmoke thin solid;
    border-top: whitesmoke thin solid;
    border-right: whitesmoke thin solid;
    border-bottom: whitesmoke thin solid;
}

.radios.spaced td {
    padding-top: 9px;
    padding-bottom: 6px;
}

.radios.spaced .VAMFieldWithError:not([type='text']) {
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    vertical-align: baseline;
    box-shadow: none;
}

.radios.spaced.input-group_option label,
.radios.spaced.input-group_option label.VAMFieldWithError {
    padding-left: 1rem;
}

.input-prepend .VAMFieldWithError {
    width: 100%;
    padding-left: 2.85em;
    margin: 0;
}

/* PAGE INTRO TEXT

    .page-intro      Intro text for a page
                     [Module parent]

*/
.page-intro {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.4;
}

@media print, (min-width: 768px) {
    .page-intro {
        font-size: 1.8rem;
        margin: 2em auto 0;
    }
}

@media (min-width: 980px) {
    .page-intro {
        width: 90%;
    }
}

@media print {
    .page-intro {
        margin: 0 auto 2em;
    }
}

.page-intro p:last-child {
    margin-bottom: 0;
}

/*
   PRESS ROOM
    .press-list-container       A container for the list and the aside
                                [Module parent]

    .press-list                 The unordered list for press items
                                [Module parent]
    .press-list_item            The Press Item
                                [Child of .press-list]
    .press-list_item_title      The Title for the Press Item
                                [Child of .press-list_item]
    .press-list_item_date       The Date for the Press Item
                                [Child of .press-list_item]
*/
@media print, (min-width: 768px) {
    .press-list-container {
        margin-top: 6rem;
    }
}

.press-list {
    margin-top: 3rem;
    margin-left: 0;
    list-style: none;
}

.press-list_item {
    margin-bottom: 2.5rem;
    display: block;
}

a.press-list_item {
    text-decoration: none;
}

    a.press-list_item:hover {
        color: var(--text-warn);
    }

    a.press-list_item:focus {
        outline-offset: 1rem;
    }

.press-list_item_title {
    font-family: "museo-slab", "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin: .5rem 0;
}

@media (min-width: 980px) {
    .press-list_item_title {
        font-size: 2rem;
    }
}

a.press-list_item .press-list_item_title {
    color: var(--text-gray-35);
}

    a.press-list_item .press-list_item_title:hover {
        color: var(--text-info);
    }

a.press-list_item:focus .press-list_item_title {
    color: var(--text-info);
}

.press-list_item_date {
    margin-bottom: 0;
    color: var(--text-light-gray);
    font-size: 1.2rem;
}

/*
    RICH TEXT EDITOR IN UMBRACO GRID - Unordered or Ordered List

*/
.rte ul li, .rte ol li {
    padding-bottom: 0.7143em;
}

.rte ul ul, .rte ol ul,
.rte ul ol,
.rte ol ol {
    margin-top: 0.7143em;
    margin-left: 2rem;
}

@media print, (min-width: 768px) {
    .rte ul ul, .rte ol ul,
    .rte ul ol,
    .rte ol ol {
        margin-left: 4rem;
    }
}

.rte ul ul li:last-child, .rte ol ul li:last-child,
.rte ul ol li:last-child,
.rte ol ol li:last-child {
    padding-bottom: 0;
}

.rte ul {
    margin-left: 0;
}

    .rte ul li {
        position: relative;
        margin-left: 2rem;
    }

.rte ol {
    margin-left: 1.5rem;
}

.rte .check-mark-list {
    margin-left: .5rem;
}

/*links inside the rte that are not buttons */
.rte a:not([class*="-"]),
.page-intro a:not([class*="-"]) {
    text-decoration: none;
    border-bottom: 1px solid var(--border-gray-85);
}

    .rte a:not([class*="-"]):hover, .rte a:not([class*="-"]):focus, .rte a:not([class*="-"]):active,
    .page-intro a:not([class*="-"]):hover,
    .page-intro a:not([class*="-"]):focus,
    .page-intro a:not([class*="-"]):active {
        border-bottom-color: transparent;
    }

@media (min-width: 980px) {
    .rte a[href*="tel"] {
        border-bottom: none;
    }
}

.rte h3:not([class*="txt-"]), .rte .looks-like-h3:not([class*="txt-"]) {
    color: var(--text-primary);
}

/* 
    LINKS NO DECO

*/
.links-no-deco a {
    text-decoration: none;
}

/* TIMELINE 

     overides or additions to _global timeline
*/
/* Timeline Overrides for Public Site  */
.timeline ul {
    margin: 4rem 0 3rem 0;
    padding-left: .2rem;
}

.timeline_title {
    color: var(--text-gray) !important;
}

.timeline_item {
    margin: 0 0 0 -4.3rem;
}

.rte ul li.timeline_item, .timeline_item {
    padding: 0 0 2rem 4rem;
}

    .timeline_item:last-child {
        padding-bottom: 2rem;
    }

/* TEAM-BIO 
    These classes are used to control the display of the team biographies

    .team-bio-container Container for many team bios
                        [Module parent]
    .team-bio           Container for the entire team-bio
                        [Module parent]
    .team-bio_name      The name of the person
                        [Child of .team-bio]
    .team-bio_title     The job title of the person
                        [Child of .team-bio]
    .team-bio_email     The email of the person
                        [Child of .team-bio]
    .team-bio_photo     The portrait of the person
                        [Child of .team-bio]

*/
/* 
    Example markup:
            
    <div class="team-bio">
        <div class="team-bio_photo">
            <img src="@Url.StaticResource("content/assets/styleguidepublicsite","team-bio.jpg")" />
        </div>
        <div> @* needed for the flex box container *@
            <div class="team-bio_name">Matt Ruppe</div>
            <div class="team-bio_title">Investment Services Program Manager</div>
            <div class="team-bio_email">mruppe@uwcu.org</div>
            <p class="team-bio_quote">"Everyone needs a plan to be successful. Take control of your financial future"</p>
        </div>
    </div>
    <strong>Experience & Education</strong>
    <p>Matt is an investment professional who has worked in the industry since 1998 as a financial advisor, banker and regional sales manager. During that time, Matt has Candy canes tart pie marshmallow wafer. Powder ice cream carrot cake biscuit muffin cupcake. Jelly sesame snaps jelly beans pie. Gingerbread icing chocolate cake. Bonbon chocolate cake jelly sweet chocolate cake cotton candy marshmallow cotton candy donut. Cheesecake muffin danish sweet tiramisu toffee. Gingerbread gummi bears icing tiramisu fruitcake. Jujubes dragée lemon drops liquorice jelly beans toffee marzipan pastry.</p>
    <strong>Value-Driven Successes</strong>
    <p>Matt thrives on cotton candy caramels powder. Fruitcake halvah carrot cake pudding chocolate cake brownie. Biscuit apple pie soufflé. Candy caramels candy oat cake bonbon biscuit fruitcake. Oat cake cake biscuit carrot cake cake candy. Chocolate cake tiramisu tart jelly-o tiramisu biscuit. Toffee muffin tiramisu cotton candy brownie fruitcake cheesecake bonbon. Cotton candy sesame snaps donut marshmallow tootsie roll cookie.</p>

*/
/* team-bio Styles  */
.team-bio-container {
    margin-top: 3rem;
}

@media print, (min-width: 768px) {
    .team-bio-container {
        margin-top: 2rem;
    }
}

.team-bio {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media print, (min-width: 480px) {
    .team-bio {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

.team-bio_name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.8rem;
}

@media print, (min-width: 768px) {
    .team-bio_name {
        font-size: 1.8rem;
    }
}

.team-bio_title {
    font-weight: 700;
    line-height: 1.3;
}

.team-bio_email {
    padding: .5em 0 1em;
}

@media print, (min-width: 480px) {
    .team-bio_email {
        padding-top: .8em;
    }
}

.team-bio_photo {
    margin-bottom: 2rem;
}

@media print, (min-width: 480px) {
    .team-bio_photo {
        margin-right: 3rem;
    }
}

.team-bio_photo img {
    max-width: 150px;
    height: 100%;
}

/* FEATURE BLOCK

    .feature-block                      A container for a single feature
                                        [Child of .feature-block-container]

    .feature-block_title                A title for each individual block
                                        [Child of .feature-block]

    .feature-block_text                 A text in the center of the feature block
                                        [Child of .feature-block]
       

Example Markup:
    
<div class="row">

    @*Product Feature Box*@
    <div class="col-lg-6 feature-block">				
        <h3 class="feature-block_title">Mobile App</h3>
		<div class="feature-block_text">
			One-tap access to Mobile Banking. Install the app on your iPhone, iPad, Android Phone or Android tablet.
		</div>
        <div>
            <a href="/save-invest/" class="feature-block_button button button-reversed xsmall">Learn More</a>
        </div>
    </div>

    @*Rates Feature Box*@
    <div class="col-lg-6 feature-block">				
        <h3 class="feature-block_title">Current Rates</h3>
        <div class="feature-block_text">
            <div>   					
                <div><strong>1.03%</strong>APY* 60 Mo. IRA Certificate</div>
                <div><strong>8.75%</strong>APR* Visa Platinum Credit Card</div>
            </div>
        </div>
        <div>
            <a href="/rates/save-invest/" class="button-reversed xsmall">View More Rates</a>
        </div>
    </div>

</div>
    
*/
.feature-block {
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--text-gray);
    margin: 4rem 2rem;
}

    .feature-block:last-of-type {
        border-top: 1px solid var(--border-gray-85);
        padding-top: 4rem;
        margin-top: 0;
    }

@media print, (min-width: 980px) {
    .feature-block {
        padding-top: 3rem;
        padding-bottom: 3rem;
        margin: 3rem 0;
    }

        .feature-block:last-of-type {
            border-top: none;
            border-left: 1px solid var(--border-gray-85);
            padding-top: 3rem;
            margin-top: 3rem;
        }
}

@media print {
    .feature-block {
        width: 50%;
        page-break-inside: avoid;
    }
}

.feature-block_title {
    font-size: 2.2rem;
    font-weight: 500;
}

.feature-block_text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0 auto 1.5rem;
}

@media (min-width: 480px) {
    .feature-block_text {
        max-width: 75%;
    }
}

@media (min-width: 768px) {
    .feature-block_text {
        max-width: 60%;
    }
}

@media print, (min-width: 980px) {
    .feature-block_text {
        max-width: 100%;
    }
}

/*
    VIDEO CONTENT

    .video-content      Wrapper for the YouTube iFrame
                        [Module Parent]

    .video-play         Class added with JS; blurs image and fade video in



*/
.video-content {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

    .video-content iframe,
    .video-content object,
    .video-content embed {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 100%;
        max-width: 28rem;
    }

@media (min-width: 768px) {
    .video-content iframe,
    .video-content object,
    .video-content embed {
        max-width: 39.1rem;
    }
}

@media (min-width: 980px) {
    .video-content iframe,
    .video-content object,
    .video-content embed {
        max-width: none;
    }
}

.hero .video-content iframe,
.hero .video-content object,
.hero .video-content embed {
    max-width: 32rem;
}

@media (min-width: 768px) {
    .hero .video-content iframe,
    .hero .video-content object,
    .hero .video-content embed {
        max-width: 44.4rem;
    }
}

@media (min-width: 980px) {
    .hero .video-content iframe,
    .hero .video-content object,
    .hero .video-content embed {
        max-width: 60.4rem;
    }
}

.video-play img {
    filter: blur(2rem);
    transition: all 0.4s ease-out;
}

.video-play .video-content {
    animation: fadeinvideo .4s ease-out;
}

@keyframes fadeinvideo {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* VIDEO BUTTON

        .video-button   A "Watch Video" button
                        [Module parent; Extends .button-reversed]

*/
.video-button .icon-play {
    display: inline-block;
    width: 1.5em;
}

    .video-button .icon-play:before {
        position: absolute;
        top: -1.3rem;
        left: .4rem;
        font-size: 24px;
    }

/* SEARCH 
    These classes are used to control the display of the search boxes for the public site

    .header-search             Container for the expanded search box
    .header-search_icon        The icon to click to toggle the flyout visibility
    .header-search_flyout      The actual flyout containing the search box
    .shadowed                  shadow element to be added to the icon and search container

*/
/* 
    Example markup:
      @*Desktop search icon- header*@
                <li class="basic-item js-SearchToggler header-search">
                    <a href="javascript:void(0);" class="small mt1 pvm prm" role="button">
                        <i class="icon-search header-search_icon"></i>
                    </a>

                    <div class="header-search_flyout bg-faint-gray shadowed">
                        <form action="../search/Search" method="get" novalidate="novalidate">
                            <div class="input-append double full-width">
                                <input type="text" value="" name="Query" id="Query" class="input-text input-append_input header-search_input" placeholder="Search..." role="search">
                                @*<a href="javascript:void(0);" role="button" class="input-append_button js-input-search-clear mr5">
                                        <i class="icon-x"></i>
                                    </a>*@
                                <a href="../search/search" role="button" class="input-append_button button-notabutton">
                                    <i class="icon-search"></i>
                                </a>
                            </div>
                        </form>
                        <div class="txt-xsmall mt1"><a class="txt-link button-notabutton" href="@Url.Content("PageNotFound")">Browse Help Topics</a></div>
                    </div>

                </li>
*/
/* Search Styles  */
.header-search_flyout {
    z-index: 9900;
    padding: 15px 20px;
    width: 400px;
    position: absolute;
    right: 0px;
    top: 50px;
    display: none;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

.header-search_icon {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.25s linear;
}

    .header-search_icon.open {
        transform: rotate(90deg);
        transition: transform 0.25s linear;
    }

.shadowed.header-search, .shadowed.header-search_flyout {
    box-shadow: 0 2px 2px var(--box-shadow-black-opacity-20);
}

/*
    DESKTOP NAV

    .desktop-nav                            Wrapper for the public site desktop nav
                                            [Module Parent]

    .desktop-nav_item                       Top level items for the nav
                                            can be .open and .selected-section
                                            [Child of .desktop-nav]

    .desktop-nav_item_link                  Text for the top level items
                                            when opened has a decorative line and animates
                                            [Child of .desktop-nav_item]

    .desktop-nav_submenu                    The subnavigation/megamenu for each first level nav item
                                            [Child of .desktop-nav]

    .desktop-nav_submenu_list               The subnavigation (second level nav) items                           
                                            [Child of .desktop-nav_submenu]

    .desktop-nav_submenu_list_title         The title for the submenu group
                                            [Child of .desktop-nav_submenu_item]

    .desktop-nav_submenu_list_item          The submen list items (third level nav) items                           
                                            [Child of .desktop-nav_submenu_list]

    a.desktop-nav_submenu_list_item_link    The links (third level nav)                          
                                            [Child of .desktop-nav_submenu_list_item]

    .desktop-nav_submenu_list_item_link_text   The text for the link (third level nav)                          
                                            [Child of .desktop-nav_submenu_list_item_link]

*/
/* Desktop Nav*/
.desktop-nav {
    box-shadow: 0 1px 2px var(--box-shadow-black-opacity-35);
    background-color: var(--bg-gray-34);
}

    .desktop-nav > .item-container {
        margin-bottom: 2rem;
        background-color: var(--bg-gray-34);
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        border: none;
        height: 2.75em;
    }

        .desktop-nav > .item-container .basic-item {
            border-top-width: 0;
        }

.desktop-nav_item {
    padding: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    /* note: javascript moved the :focus to the li (not on the anchor) so the submenu doesn't open when focused */
}

    .desktop-nav_item:focus {
        outline: 1px dotted var(--focus-outline-white-opacity-70);
        outline-offset: -2px;
        background-color: var(--bg-gray-29);
    }

        .desktop-nav_item:focus .desktop-nav_item_link.open-section {
            outline-offset: -2px;
            outline: 1px dotted var(--focus-outline);
        }

/* Desktop Nav Item Text - Text for the top level items */
.desktop-nav_item_link {
    display: block;
    width: 100%;
    height: 100%;
    padding: .5em 2em .625em 2em;
    font-weight: 500;
    border-top: 2px solid var(--border-gray-34);
    border-bottom: none;
}

a.desktop-nav_item_link {
    text-decoration: none;
    color: var(--text-white);
}

    a.desktop-nav_item_link:hover, a.desktop-nav_item_link:active, a.desktop-nav_item_link.active {
        color: var(--text-white);
        border-top-color: var(--border-gray-29);
        outline: none;
        border-bottom: none;
    }

    a.desktop-nav_item_link.selected-section {
        background-color: var(--bg-gray-24);
        color: var(--text-white);
        border-top-color: var(--bg-gray-24);
    }

    a.desktop-nav_item_link.open-section {
        background-color: var(--bg-white);
        color: var(--text-gray);
    }

/* Submenu */
.desktop-nav_submenu {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    background-color: var(--text-white);
    padding: 20px 10px 20px 20px;
    box-shadow: 0 2px 2px var(--box-shadow-black-opacity-20);
    position: fixed;
    left: 0;
    right: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*Submenu Item*/
.desktop-nav_submenu_list {
    text-align: left;
    font-size: 1.4rem;
    font-weight: 400;
    padding: 0 30px 20px 0px;
}

.desktop-nav_submenu_list_title {
    font-size: 1.6rem;
    font-weight: 500;
    padding-bottom: 5px;
}

.desktop-nav_submenu_list_item {
    font-size: 1.4rem;
    width: 100%;
}

a.desktop-nav_submenu_list_item_link {
    color: var(--text-gray);
    text-decoration: none;
    padding: 6px 5px 6px 10px;
    display: block;
}

    a.desktop-nav_submenu_list_item_link:hover, a.desktop-nav_submenu_list_item_link:active, a.desktop-nav_submenu_list_item_link:focus, a.desktop-nav_submenu_list_item_link.active {
        color: var(--text-link);
    }

        a.desktop-nav_submenu_list_item_link:hover .desktop-nav_submenu_list_item_link_text, a.desktop-nav_submenu_list_item_link:active .desktop-nav_submenu_list_item_link_text, a.desktop-nav_submenu_list_item_link:focus .desktop-nav_submenu_list_item_link_text, a.desktop-nav_submenu_list_item_link.active .desktop-nav_submenu_list_item_link_text {
            border-bottom: 1px solid var(--border-gray-87);
        }

    a.desktop-nav_submenu_list_item_link:focus {
        border-bottom: none;
    }

    a.desktop-nav_submenu_list_item_link.selected-page .desktop-nav_submenu_list_item_link_text {
        padding-bottom: 1px;
        border-bottom: 2px solid var(--border-primary);
    }

/*
    MOBILE NAV

    .mobile-menu-icon               Classes and animations for the hamburger menu turning into
                                    an X for the mobile experience

    .mobile-nav                     Wrapper for the public site mobile nav
                                    [Module Parent]

    .mobile-nav_item                Supplementary items for the nav
                                    [Child of .mobile-nav]

    .mobile-nav_item_link           Link for the supplementary nav items
                                    [Child of .mobile-nav_item]

    .mobile-nav_item_link_text      Text for the supplementary nav items
                                    Red underline for when .selected-page class is added to parent
                                    [Child of .mobile-nav_item_link]

    .nav-level1                     First level of navigation
                                    [Module Parent]

    .nav-level1_item                The container for a level 1 item and its children
                                    [Child of .nav-level1]

    .nav-level1_item_link           The text and clickable area for the level 1 item                        
                                    [Child of .mobile-nav_submenu]

    .nav-level2                     Second level of navigation
                                    [Module Parent]

    .nav-level2_item                The container for a level 2 item and its children
                                    [Child of .nav-level1]

    .nav-level2_item_link           The text and clickable area for the level 2 item                        
                                    [Child of .mobile-nav_submenu]


    .nav-level3                     Third level of navigation
                                    [Module Parent]

    .nav-level3_item                The container for a level 3 item and its children
                                    [Child of .nav-level1]

    .nav-level3_item_link           The text and clickable area for the level 3 item                        
                                    [Child of .mobile-nav_submenu]


*/
.mobile-menu-icon {
    width: 26px;
    height: 19px;
    position: relative;
    transform: translate3d(0, 0, 0) rotate(0deg);
    transition: transform 0.2s ease-out;
    cursor: pointer;
}

    .mobile-menu-icon span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: var(--text-gray-34);
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
        transition: transform 0.2s ease-out, opacity 0.1s ease-out 0.2s;
    }

        .mobile-menu-icon span:nth-child(1) {
            top: 0px;
        }

        .mobile-menu-icon span:nth-child(2), .mobile-menu-icon span:nth-child(3) {
            top: 8px;
        }

        .mobile-menu-icon span:nth-child(4) {
            top: 16px;
        }

        .mobile-menu-icon span:nth-child(1), .mobile-menu-icon span:nth-child(4) {
            transition: all 0.3s;
        }

.menu-open .mobile-menu-icon span:nth-child(1), .menu-open .mobile-menu-icon span:nth-child(4) {
    transition: all .1s;
    top: 8px;
    width: 0%;
    opacity: 0;
    left: 50%;
}

.menu-open .mobile-menu-icon span:nth-child(2) {
    transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open .mobile-menu-icon span:nth-child(3) {
    transform: translate3d(0, 0, 0) rotate(-45deg);
}

.mobile-nav {
    display: none;
    padding-top: 6rem;
    background-color: var(--bg-white);
}

.menu-open .mobile-nav {
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav_item {
    font-size: 1.4rem;
    padding: 0;
}

    .mobile-nav_item.basic-item {
        border-color: var(--border-gray-87);
    }

.mobile-nav_item_link {
    display: block;
    text-decoration: none;
    color: var(--text-gray);
    font-weight: 500;
    padding: 1.1em 2em 1em .9286em;
}

.selected-page .mobile-nav_item_link_text {
    padding-bottom: 2px;
    border-bottom: 3px solid var(--border-primary);
}

/* ICONS (expand/collapse) */
.nav-level2_item_link.has-icon-right,
.nav-level1_item_link.has-icon-right {
    padding-right: 30px;
}

    .nav-level2_item_link.has-icon-right > .icon-right,
    .nav-level1_item_link.has-icon-right > .icon-right {
        position: absolute;
        top: 20px;
        right: 20px;
        transform: rotate(0deg);
        transition: transform 0.25s linear;
    }

        .nav-level2_item_link.has-icon-right > .icon-right.mobile-nav-open,
        .nav-level1_item_link.has-icon-right > .icon-right.mobile-nav-open {
            top: 17px;
            transform: rotate(180deg);
            transition: transform 0.25s linear;
        }

/* Level 1 (top level) nav */
.nav-level1 {
    margin-bottom: 2rem;
    border-bottom: 5px solid var(--border-gray-87);
    border-color: var(--border-gray-87);
    background-color: var(--bg-white);
}

.item-container .nav-level1_item {
    border-color: var(--border-gray-87);
}

.nav-level1_item_link.basic-item {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-gray);
    text-decoration: none;
    background-color: var(--bg-white);
}

.item-container > li:not(.basic-item) > .nav-level1_item_link.basic-item {
    border-color: var(--border-gray-87);
    background-color: var(--bg-white);
}

.hover a.nav-level1_item_link.basic-item:hover, a.nav-level1_item_link.basic-item:hover, a.nav-level1_item_link.basic-item:active {
    background-color: var(--bg-white);
}

a.nav-level1_item_link.basic-item:focus {
    outline-offset: 2px;
}

a.nav-level1_item_link.basic-item.selected-section .selected-indicator {
    padding-bottom: 2px;
    border-bottom: 3px solid var(--border-primary);
}

/* Level 2 (mid level) nav */
.nav-level2 {
    display: none;
    max-width: 100%;
    border-color: var(--border-gray-87);
    background-color: var(--bg-faint-gray);
}

.open > .nav-level2 {
    display: block;
}

.item-container .nav-level2_item {
    font-size: 1.4rem;
    border-color: var(--border-gray-87);
    background-color: var(--bg-faint-gray);
}

.nav-level2_item_link.basic-item {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
}

.item-container > li:not(.basic-item) > .nav-level2_item_link.basic-item {
    border-color: var(--border-gray-87);
    padding-left: 40px;
}

.hover a.nav-level2_item_link.basic-item:hover, a.nav-level2_item_link.basic-item:hover {
    background-color: var(--bg-faint-gray);
}

a.nav-level2_item_link.basic-item:focus {
    outline-offset: 2px;
}

/* Level 3 (final level) nav */
.item-container.nav-level3 {
    display: none;
    max-width: 100%;
    border-color: var(--border-gray-87);
    background-color: var(--bg-light-gray);
}

.nav-open > .item-container.nav-level3 {
    display: block;
}

.item-container .nav-level3_item {
    border-color: var(--border-gray-87);
    background-color: var(--bg-light-gray);
}

.nav-level3_item:first-child {
    padding-top: 1em;
}

.nav-level3_item:last-child {
    padding-bottom: 1em;
}

.nav-level3_item_link.basic-item {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-gray);
    text-decoration: none;
}

.item-container > li:not(.basic-item) > .nav-level3_item_link.basic-item {
    border: none;
    padding: .6em 1.2em .6em 60px;
}

.hover a.nav-level3_item_link.basic-item:hover, a.nav-level3_item_link.basic-item:hover {
    background-color: var(--bg-light-gray);
}

a.nav-level3_item_link.basic-item:focus {
    outline-offset: 2px;
}

a.nav-level3_item_link.basic-item.selected-page {
    color: var(--text-primary);
    font-weight: 500;
}

/* 
    FOOTER NAV

    .footer-nav                     The footer navigation
                                    [Module Parent]

    .footer-nav_item                Items to the right of search on DESKTOP
                                    Items such as Seminars, Budget Health, Calculators, Careers, etc.
                                    [Child of .footer-nav]

    .footer-nav_item_text           Text for items to the right of search on DESKTOP 
                                    [Child of .footer-nav_item]

*/
/* Footer Nav Item Container */
.footer-nav > .item-container {
    background-color: var(--bg-white);
    border-color: var(--border-gray-85);
    border-bottom-width: 4px;
    border-top-width: 4px;
    margin-bottom: .5rem;
}

@media (min-width: 980px) {
    .footer-nav .item-container {
        border: none;
    }
}

/* Footer Nav Item - Desktop Items such as Seminars, Budget Health, Calculators, Careers, etc.*/
.footer-nav_item {
    font-size: 1.4rem;
    padding: 0;
}

.footer-nav .item-container .footer-nav_item {
    border: none;
}

/* Footer Nav Item Text - Desktop Items such as Seminars, Budget Health, Calculators, Careers, etc.*/
.footer-nav_item_text {
    display: block;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-decoration: none;
    padding: 1.1em;
}

.footer-nav .basic-item:last-child .footer-nav_item_text {
    margin-right: -1.1em;
}

a.footer-nav_item_text {
    color: var(--text-gray-20);
    text-decoration: none;
}

    a.footer-nav_item_text:hover, a.footer-nav_item_text:active, a.footer-nav_item_text:focus, a.footer-nav_item_text.active {
        color: var(--text-link);
        background-color: transparent;
    }

/* ALERT BANNER

    .alert-banner           Banner used for special messaging, such as outages or important messages
                            [Module parent]

    .alert-banner_text      Styling for the text inside the alert banner

*/
.alert-banner {
    padding: 3rem 0;
    background-color: var(--bg-gray-93c);
    text-align: center;
}

.alert-banner_text {
    max-width: 1100px;
    text-align: center;
    margin: 0 auto;
    padding: 0 2rem;
}

.alert-banner p:last-child {
    margin-bottom: 0;
}

/*
 *  Owl Carousel - Core
    Code from: https://owlcarousel2.github.io/OwlCarousel2/
 */
.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1;
}

    .owl-carousel .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        -moz-backface-visibility: hidden;
        /* fix firefox animation glitch */
    }

        .owl-carousel .owl-stage:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        /* fix for flashing background */
        -webkit-transform: translate3d(0px, 0px, 0px);
    }

    .owl-carousel .owl-wrapper,
    .owl-carousel .owl-item {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
    }

    .owl-carousel .owl-item {
        position: relative;
        min-height: 1px;
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

        .owl-carousel .owl-item img {
            display: block;
            width: 100%;
        }

    .owl-carousel .owl-nav.disabled,
    .owl-carousel .owl-dots.disabled {
        display: none;
    }

    .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next,
    .owl-carousel .owl-dot {
        cursor: pointer;
        cursor: hand;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .owl-carousel.owl-loaded {
        display: block;
    }

    .owl-carousel.owl-loading {
        opacity: 0;
        display: block;
    }

    .owl-carousel.owl-hidden {
        opacity: 0;
    }

    .owl-carousel.owl-refresh .owl-item {
        visibility: hidden;
    }

    .owl-carousel.owl-drag .owl-item {
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .owl-carousel.owl-grab {
        cursor: move;
        cursor: grab;
    }

    .owl-carousel.owl-rtl {
        direction: rtl;
    }

        .owl-carousel.owl-rtl .owl-item {
            float: right;
        }

/* No Js */
.no-js .owl-carousel {
    display: block;
}

/*
 *  Owl Carousel - Animate Plugin
    Code from: https://owlcarousel2.github.io/OwlCarousel2/

 */
.owl-carousel .animated {
    animation-duration: 1000ms;
    animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
    z-index: 0;
}

.owl-carousel .owl-animated-out {
    z-index: 1;
}

.owl-carousel .fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/*
 *  UWCU - added fadeIn in addition ot fadeOut

 */
.owl-carousel .fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*
 * 	Owl Carousel - Auto Height Plugin
    Code from: https://owlcarousel2.github.io/OwlCarousel2/
 */
.owl-height {
    transition: height 500ms ease-in-out;
}

/*
 * 	Owl Carousel - Lazy Load Plugin
    Code from: https://owlcarousel2.github.io/OwlCarousel2/
 */
.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease;
}

.owl-carousel .owl-item img.owl-lazy {
    transform-style: preserve-3d;
}

/*
 * 	Owl Carousel - Video Plugin
    Code from: https://owlcarousel2.github.io/OwlCarousel2/
 */
.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: var(--bg-black);
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url("owl.video.play.png") no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    transition: transform 100ms ease;
}

    .owl-carousel .owl-video-play-icon:hover {
        transform: scale(1.3, 1.3);
    }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
    display: none;
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}

/*
    Code from: https://owlcarousel2.github.io/OwlCarousel2/
    
    Customized by UWCU

*/
.owl-theme, .owl-theme-reversed {
    /*.owl-nav {
        margin-top: 1rem;
        text-align: center;
        -webkit-tap-highlight-color: transparent;

        [class*='owl-'] {
            color: $carousel-nav-color;
            font-size: $carousel-nav-font-size;
            margin: .5rem;
            padding: .4rem .4rem;
            background: $carousel-nav-background;
            display: inline-block;
            cursor: pointer;
            border-radius: .3rem;

            &:hover {
                background: $carousel-nav-background-hover;
                color: $carousel-nav-color-hover;
                text-decoration: none;
            }
        }

        .disabled {
            opacity: 0.5;
            cursor: default;
        }
    }*/
}

    .owl-theme .owl-nav.disabled + .owl-dots, .owl-theme-reversed .owl-nav.disabled + .owl-dots {
        margin-top: 1rem;
    }

    .owl-theme .owl-dots, .owl-theme-reversed .owl-dots {
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

        .owl-theme .owl-dots .owl-dot, .owl-theme-reversed .owl-dots .owl-dot {
            display: inline-block;
            zoom: 1;
            *display: inline;
        }

            .owl-theme .owl-dots .owl-dot span, .owl-theme-reversed .owl-dots .owl-dot span {
                width: 1.4rem;
                height: 1.4rem;
                margin: .5rem 1.2rem;
                display: block;
                -webkit-backface-visibility: visible;
                transition: opacity 200ms ease;
                border-radius: 2.8rem;
            }

            .owl-theme .owl-dots .owl-dot.active span, .owl-theme-reversed .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span, .owl-theme-reversed .owl-dots .owl-dot:hover span {
                background: var(--bg-gray-51);
            }

    .owl-theme .owl-stage-outer:focus {
        outline: 1px dotted var(--focus-outline);
        outline-offset: 5px;
    }

    .owl-theme .owl-dots .owl-dot span {
        border: 2px solid var(--bg-gray-51);
        background: transparent;
    }

    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: var(--bg-gray-51);
    }

    .owl-theme .owl-dots .owl-dot:focus {
        outline: 1px dotted var(--focus-outline);
    }

    .owl-theme-reversed .owl-dots .owl-dot span {
        border: 2px solid var(--bg-white-opacity-95);
        background: transparent;
    }

    .owl-theme-reversed .owl-dots .owl-dot.active span, .owl-theme-reversed .owl-dots .owl-dot:hover span {
        background: var(--bg-white-opacity-95);
    }

    .owl-theme-reversed .owl-dots .owl-dot:focus {
        outline: 1px dotted var(--focus-outline-white-opacity-70);
    }

.carousel-arrow {
    position: relative;
    margin: 2rem 0 4rem;
    height: 156px;
}

@media print {
    .carousel-arrow {
        margin: 0 0 4rem;
        height: 12.6rem;
    }

        .carousel-arrow .owl-stage {
            transform: none !important;
            width: 100% !important;
        }

        .carousel-arrow .owl-item.cloned {
            display: none !important;
        }

        .carousel-arrow .owl-item,
        .carousel-arrow .owl-item.active {
            width: 33% !important;
        }
}

.carousel-arrow .owl-carousel {
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (min-width: 768px) {
    .carousel-arrow .owl-carousel {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}

@media print {
    .carousel-arrow .owl-carousel {
        padding: 0;
    }
}

.carousel-arrow .owl-item {
    padding-left: .5em;
    padding-right: .5em;
}

@media (min-width: 1260px) {
    .carousel-arrow .owl-item {
        padding-left: 1em;
        padding-right: 1em;
    }
}

.carousel-arrow .owl-item img {
    max-width: 248px;
    max-height: 156px;
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast;
}

@media print {
    .carousel-arrow .owl-item img {
        max-width: 200px;
    }
}

.carousel-arrow_button {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 900;
}

@media print {
    .carousel-arrow_button {
        display: none;
    }
}

.carousel-arrow_button.left {
    left: 0;
}

@media (min-width: 768px) {
    .carousel-arrow_button.left {
        left: 2rem;
    }
}

.carousel-arrow_button.right {
    right: 0;
}

@media (min-width: 768px) {
    .carousel-arrow_button.right {
        right: 2rem;
    }
}

.carousel-arrow_button [class*="icon-"] {
    color: var(--text-gray-51);
}

.carousel-arrow_button .xlarge[class*="icon-"]::before {
    margin: -1rem;
}

@media (min-width: 768px) {
    .carousel-arrow_button .xlarge[class*="icon-"]::before {
        margin: -2.4rem;
        font-size: 8rem;
    }
}

/*
    CAROUSEL HERO - 2021 Leaf Design

    .carousel-hero-container        The Carousel Hero
                                    [Container]

    .carousel-hero                  The Carousel Hero
                                    [Module Parent]

    .carousel-hero_img              The Carousel Hero Image
                                    [Child of .carousel-hero]

    .carousel-hero_content          The Content for the carousel the title, buttons and nav
                                    [Child of .carousel-hero]

    .carousel-hero_title            The title for the individual slide in the carousel
                                    [Child of .carousel-hero]

    .carousel-hero_subtitle         The subtitle for the individual slide in the carousel
                                    [Child of .carousel-hero]

    // image crop sizes --> 550x365, 980x265, 768x230


*/
.carousel-hero-container {
    height: auto;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-gray-96);
}

@media (min-width: 980px) {
    .carousel-hero-container {
        height: 42rem;
    }
}

.carousel-hero-container .owl-carousel {
    background: var(--bg-white);
    max-width: 1100px;
    margin: 0 auto;
    height: auto;
}

@media (min-width: 980px) {
    .carousel-hero-container .owl-carousel {
        border-bottom-right-radius: 100px;
        height: 42rem;
    }
}

.carousel-hero-container .owl-item .item {
    overflow: hidden;
    position: relative;
}

.carousel-hero-container .owl-carousel .owl-item:not(.active) {
    opacity: 0;
}

.carousel-hero-container .owl-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

@media print {
    .carousel-hero-container .owl-dots {
        display: none !important;
    }
}

.carousel-hero-container .owl-theme .owl-stage-outer:focus {
    outline-offset: -5px;
}

@media print {
    .carousel-hero-container {
        height: 38rem;
        background-color: var(--white);
    }

        .carousel-hero-container .owl-stage {
            transform: none !important;
            width: 100% !important;
        }

        .carousel-hero-container .owl-item.cloned {
            display: none !important;
        }

        .carousel-hero-container .owl-item,
        .carousel-hero-container .owl-item.active {
            width: 100% !important;
        }
}

.carousel-hero {
    background-color: transparent;
    position: relative;
    overflow: hidden;
    height: auto;
    margin: 30px 2rem 6rem;
}

@media (min-width: 768px) {
    .carousel-hero {
        margin: 30px 5rem 6rem;
    }
}

@media (min-width: 980px) {
    .carousel-hero {
        height: 42rem;
        margin: 0;
    }
}

@media print {
    .carousel-hero {
        max-width: 100%;
        margin: 30px 15px 10px;
    }
}

.carousel-hero_img {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: 0 auto;
    object-fit: cover;
    height: 230px;
    border-bottom-right-radius: 85px;
    background: var(--bg-white);
}

@media (min-width: 768px) {
    .carousel-hero_img {
        height: 265px;
        border-bottom-right-radius: 110px;
    }
}

@media (min-width: 980px) {
    .carousel-hero_img {
        height: 365px;
        position: absolute;
        width: 50%;
        max-width: 50%;
        min-width: 50%;
        border-bottom-right-radius: 100px;
    }
}

.carousel-hero_content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 980px) {
    .carousel-hero_content {
        margin-left: 50%;
        width: 50%;
        height: 36.5rem;
        padding: 0 5rem;
    }
}

.carousel-hero_title {
    font-size: 2.8rem;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1;
    margin: 0 0 2.5rem;
}

@media (min-width: 768px) {
    .carousel-hero_title {
        font-size: 3.8rem;
    }
}

.carousel-hero_subtitle {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.4;
    color: var(--text-gray);
    margin-bottom: 1.5em;
}

@media (min-width: 768px) {
    .carousel-hero_subtitle {
        font-size: 1.8rem;
    }
}

.carousel-general {
    position: relative;
    margin: 2rem 0 4rem;
    height: 100%;
}

@media print {
    .carousel-general {
        margin: 0 0 4rem;
        height: 12.6rem;
    }

        .carousel-general .owl-stage {
            transform: none !important;
            width: 100% !important;
        }

        .carousel-general .owl-item.cloned {
            display: none !important;
        }

        .carousel-general .owl-item,
        .carousel-general .owl-item.active {
            width: 33% !important;
        }
}

.carousel-general .owl-carousel {
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (min-width: 768px) {
    .carousel-general .owl-carousel {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}

@media print {
    .carousel-general .owl-carousel {
        padding: 0;
    }
}

.carousel-general .owl-item {
    padding-left: .5em;
    padding-right: .5em;
}

@media (min-width: 1260px) {
    .carousel-general .owl-item {
        padding-left: 1em;
        padding-right: 1em;
    }
}

.carousel-general .owl-item img {
    max-width: 250px;
    max-height: 250px;
    width: auto;
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast;
}

@media (min-width: 768px) {
    .carousel-general .owl-item img {
        max-width: 350px;
        max-height: 350px;
    }
}

@media print {
    .carousel-general .owl-item img {
        max-width: 200px;
    }
}

.carousel-arrow_button {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 900;
}

@media print {
    .carousel-arrow_button {
        display: none;
    }
}

.carousel-arrow_button.left {
    left: 0;
}

@media (min-width: 768px) {
    .carousel-arrow_button.left {
        left: 2rem;
    }
}

.carousel-arrow_button.right {
    right: 0;
}

@media (min-width: 768px) {
    .carousel-arrow_button.right {
        right: 2rem;
    }
}

.carousel-arrow_button [class*="icon-"] {
    color: var(--text-gray-51);
}

.carousel-arrow_button .xlarge[class*="icon-"]::before {
    margin: -1rem;
}

@media (min-width: 768px) {
    .carousel-arrow_button .xlarge[class*="icon-"]::before {
        margin: -2.4rem;
        font-size: 8rem;
    }
}

/* _publicsite.scss

    Purpose:        Styles for Public Site Template, including Header, Footer, Nav
                    (all of the elements that surround the page content)

*/
/* TABLE OF CONTENTS 

    - PAGE CONTAINER
    - HEADER
    - HEADER NAV
    - FOOTER
    - FOOTER NAV
    - TAGLINE
    - SOCIAL ICONS
    - COMPLIANCE LOGOS
*/
body {
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', Arial, Helvetica, sans-serif;
}

.page-container {
    margin: 6rem auto 0;
}

@media (min-width: 980px) {
    .page-container {
        margin: 13.8rem auto 0;
    }
}

@media print {
    .page-container {
        margin: 0 auto;
    }
}

/*
    HEADER

    .header-container               Container for header which includes the header and the header-nav

    .header                         Container for the logo, login buttons, desktop utilites and btn-group    
                                    [Module Parent]

    .header_mobile-menu             Mobile Menu button on the left of the header; opens the menu
                                    [Child of .header]

    .header_mobile-login            Mobile login button on the right of the header; opens the login dropdown
                                    [Child of .header]

    .header_mobile-login_text       Text for the Login Button
                                    [Child of .header_mobile-login]

    .header_logo                    UWCU logo
                                    [Child of .header]

    .header_logo_image              UWCU logo image 
                                    [Child of .header_logo]

    .header_utility-nav             Utility links (Branches & ATMs, Contact Us, Help, Apply & Login Button) for LG+ Screens 
                                    [Child of .header]

    
*/
/* Header Container*/
.header-container {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    background-color: var(--bg-white);
    z-index: 9800;
}

@media (min-width: 980px) {
    .header-container {
        height: 9.6rem;
    }
}

.header-container.menu-open {
    z-index: 9900;
}

@media (min-width: 980px) {
    .header-container.menu-open {
        background-color: var(--bg-info);
    }
}

/* Header */
.header {
    width: 100%;
    position: fixed;
    max-width: 1100px;
    height: 6rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    background-color: var(--bg-white);
    box-shadow: 0 1px 2px var(--box-shadow-black-opacity-35);
    z-index: 9800;
    margin: 0 auto;
}

@media (min-width: 980px) {
    .header {
        position: relative;
        height: 9.6rem;
        box-shadow: none;
    }
}

/* Header Mobile Menu Button on XS, SM & MD  */
.header_mobile-menu {
    text-decoration: none;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    padding: .7em .1em .7em 1em;
}

@media (min-width: 480px) {
    .header_mobile-menu {
        padding-right: 1em;
    }
}

.header_mobile-menu .icon-menu {
    color: var(--text-gray-34);
    position: relative;
    top: 3px;
}

.menu-open .header_mobile-menu .icon-menu {
    display: none;
    opacity: 0;
}

.header_mobile-menu .icon-x {
    color: var(--text-gray-34);
    margin-top: .5em;
    display: none;
}

.menu-open .header_mobile-menu .icon-x {
    display: block;
}

/* Header Mobile Login Button on XS, SM & MD */
.header_mobile-login {
    color: var(--text-white);
    text-align: center;
    padding: 0 .6em 0 0;
    line-height: normal;
    transition: opacity ease-out 0.2s;
    z-index: 9800;
    text-decoration: none;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}

.hover .header_mobile-login:focus {
    outline: none;
}

    .hover .header_mobile-login:focus .header_mobile-login_text {
        outline: 1px dotted var(--focus-outline-white-opacity-70);
        outline-offset: -2px;
    }

.header_mobile-login_text.button-primary {
    font-weight: 700;
}

.login-open .header_mobile-login_text {
    display: none;
}

.header_mobile-login .icon-x {
    color: var(--text-info);
    width: 3.875em;
    display: none;
    text-align: right;
    margin-top: .5em;
}

.login-open .header_mobile-login .icon-x {
    display: block;
}

/* Header Logo */
.header_logo {
    text-decoration: none;
    padding: 0 .2em 0 .1em;
    max-width: 172px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    margin-left: .75em;
    width: 120px;
}

@media (min-width: 360px) {
    .header_logo {
        margin-left: 1em;
    }
}

@media (min-width: 980px) {
    .header_logo {
        max-width: 190px;
        -ms-flex-positive: 1;
        flex-grow: 1;
        padding-left: .625em;
        padding-right: .625em;
        width: auto;
    }
}

.header_logo img, .header_logo_image {
    max-height: 60px;
}

@media (min-width: 980px) {
    .header_logo img, .header_logo_image {
        max-height: 96px;
    }
}

/*
    DESKTOP NAV

    .header_utility-nav      Utility nav used in the header
*/
/* Header Utilites on LG+ */
.header_utility-nav {
    display: none;
}

@media (min-width: 980px) {
    .header_utility-nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -ms-flex-pack: end;
        justify-content: flex-end;
        border: 0 none;
        min-height: 100%;
        padding: 2.2rem 0;
    }
}

.header_utility-nav .basic-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 .75em;
    padding: 0 2em;
    font-size: 1.4rem;
    font-weight: 500;
    border: 0;
}

@media (min-width: 980px) {
    .header_utility-nav .basic-item {
        padding: 0 1.2em;
        font-size: 1.4rem;
    }
}

.header_utility-nav .basic-item a:not([class*="button-"]) {
    text-decoration: none;
    padding: .5em;
    color: var(--text-gray);
}

    .header_utility-nav .basic-item a:not([class*="button-"]):hover,
    .header_utility-nav .basic-item a:not([class*="button-"]):focus,
    .header_utility-nav .basic-item a:not([class*="button-"]):active,
    .header_utility-nav .basic-item a:not([class*="button-"]).active {
        color: var(--text-link);
    }

.header_utility-nav .basic-item.deco-left {
    border-left: 1px solid var(--border-gray-85);
}

.header_utility-nav .button-primary {
    font-weight: 700;
    line-height: 1.5;
}

/* Login Form */
.login-form {
    display: none;
}

.tagline {
    image-rendering: -webkit-optimize-contrast;
    max-height: 18px;
}

/* 
    FOOTER

    .footer             Container for the entire footer section
                        [Module parent]

    .footer_disclaimer  Disclaimer Text
                        [Child of .footer]
*/
@media print {
    .footer {
        background-color: var(--white) !important;
        border-top: 2px solid var(--border-light-gray);
        font-size: 1.1rem !important;
        padding: 0 !important;
        margin-top: 1em;
    }
}

@media print {
    .footer_disclaimer {
        font-size: 8px;
    }
}

@media print {
    .footer_disclaimer p {
        margin-bottom: 1rem;
    }
}

/* 
    Boxed Text in Footer

    .footer-boxed-text          Text boxed in the footer, used in the Umbraco back office
                                [Module parent]
*/
.footer-boxed-text {
    display: block;
    text-align: center;
    background-color: var(--bg-white);
    border: 1px solid var(--border-gray-90);
    padding: .5rem;
    width: 100%;
}

@media print, (min-width: 480px) {
    .footer-boxed-text {
        width: 80%;
        max-width: 450px;
        margin: 0 auto;
    }
}

/*
    FOOTER ICONS & LOGOS
    .footer-social              Container for the social icons
                                [Module parent]
    .footer-social_item         The individual links for social
                                [Child of .footer-social]
    .icon-facebook
    .icon-linkedin
    .icon-youtube
    .logos-compliance 
    .app-store
    .play-store
*/
.footer-social {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: center;
    justify-content: center;
}

@media (min-width: 980px) {
    .footer-social {
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}

.footer-social_item {
    height: 4.6rem;
}

a.footer-social_item {
    color: var(--text-light-gray);
}

    a.footer-social_item:hover {
        color: var(--text-link);
    }

.footer-social_item [class*="icon-"] {
    display: block;
}

.footer-social_item .icon-facebook,
.footer-social_item .icon-instagram,
.footer-social_item .icon-linkedin,
.footer-social_item .icon-facebook,
.footer-social_item .icon-twitter,
.footer-social_item .icon-tiktok {
    padding: 7px 8px;
}

.footer-social_item .icon-youtube {
    padding: 7px 0 8px 8px;
}

.logos-compliance {
    image-rendering: -webkit-optimize-contrast;
    max-height: 24px;
}

@media print, (min-width: 768px) {
    .logos-compliance {
        max-height: 30px;
    }
}

.app-store,
.play-store {
    max-height: 38px;
    margin-top: 10px;
    margin-bottom: 10px;
    image-rendering: -webkit-optimize-contrast;
}

/*   
    .header-print
    .container-print
*/
@media print {
    .header-print {
        border-bottom: 2px solid var(--border-light-gray);
        margin-bottom: 1em;
        padding-bottom: 1em;
    }

        .header-print .logo-horizontal {
            max-height: 45px;
        }

    [class*="button-"] {
        display: none;
    }
}

@media print {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media print {
    .row {
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

@media print {
    [class*="col-"] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.grecaptcha-badge {
    visibility: hidden;
}

/*  
    .input-select is applied directly to the <select> element in the public site forms, so repeat the rules here
    (as opposed to _global which uses .input-select select {...} )
 */
.input-select {
    color: var(--text-gray);
    line-height: normal;
    vertical-align: middle;
    border: 1px solid var(--border-gray-80);
    outline: 0;
    margin: 0.2143em 0;
    padding: 0.445em;
    border-radius: .2143em;
    box-shadow: inset 0 0 1px var(--box-shadow-no-opacity);
    background: var(--bg-white);
    width: 100%;
}

@media (min-width: 768px) {
    .input-select {
        width: 20em;
    }
}

/* CUSTOM CSS STYLES FOR FROLA EDITOR */
.red {
    color: #d60032;
}

/* CSS FOR SPEEDBUMP POPUP */
.speedbump-popup {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

    .speedbump-popup .speedbump-message {
        background-color: rgb(255, 255, 255);
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
        max-width: 600px;
    }

.loan-officers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.officer-card {
    background: white;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

@media (max-width: 900px) {
    .officer-card {
        width: calc((100% - 40px) / 2); /* Two cards per row on smaller screens */
        max-width: 50%;
        flex: 0 0 50%;
    }
}

@media (max-width: 600px) {
    .officer-card {
        width: 100%; /* Single card per row on narrow screens */
        max-width: 100%;
        flex: 0 0 100%;
    }
}

.three-tile-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 35px; /* Spacing between items */
    justify-content: space-between;
}

.three-tile-item {
    flex: 1 1 calc(33.333% - 35px); /* Each item takes 1/3 of the container with spacing */
    box-sizing: border-box;
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    .three-tile-item {
        flex: 1 1 calc(50% - 16px); /* 2 items per row */
    }
}

@media (max-width: 480px) {
    .three-tile-item {
        flex: 1 1 100%; /* 1 item per row */
    }
}

.chart-title-toc-link {
    cursor: pointer;
}

.accordion div.accordion-item-answer {
    max-height: 0; /* Ensures it starts fully collapsed */
    overflow: hidden; /* Prevents any content from being visible outside max-height */
    transition: max-height 0.3s ease-out;
}

img.fr-dib {
    margin: 5px auto;
    display: block;
    float: none;
    vertical-align: top;
    object-fit: contain; 
}

.fr-fic.fr-dib.fr-fil {
    /*left aligned*/
    margin-left: 0;
    text-align: left;
}

.fr-fic fr-dib {
    /*center aligned*/
    min-width: 300px;
}

.fr-fic.fr-dib.fr-fir {
    /*right aligned*/
    margin-right: 0;
    text-align: right;
}