The function for the Fly Out on Desktop and Landscape Tablet views is that once it has been launched, the user can select the arrow icon and it will collapse all content to the right. What remains is the Fly Out Tab that gives the ability to re-launch by selecting the arrow icon again. The Fly Out will appear using a slide function from left to right. The user also has the option of selecting the close icon which will cancel their view of the Fly Out completely.

Fly Out Title heading- PT Sans Bold, 20px, #000000 (Black)

Sub-heading text- PT Sans Bold, 16px, #000000 (Black)

Informational text- PT Sans Regular, 16px, #333333 (Gray 7)

Always present the user with the checkbox that allows them to opt out of the instructions. The section icon is followed with the Header and then the body copy. A rule separates the content with the on-page buttons.

Fly Out Title heading- PT Sans Bold, 20px, #000000 (Black)

Sub-heading text- PT Sans Bold 16px, #000000 (Black)

Informational text- PT Sans Regular 16px #333333 (Gray 7)

Fly Out background blue- #c3ebf7 (Primary 5)

Left blue accent line- #9eddf0 (Secondary 14), 2px width, 100% height

Collapse icons- #8da9b1 (Secondary 15), fa-chevron-right, fa-chevron-left

Close icon- #9fbdc6 (Secondary 16), fa-close

2px width left blue accent line, #9eddf0 (Secondary 14)

2px height bottom blue accent line, #­9eddf0 (Secondary 14)

Fly Out background blue- #c3ebf7 (Primary 5)

120px width by 55px height (including accent lines)

Collapse icons- #8da9b1 (Secondary 15), fa-chevron-right, fa-chevron-left