Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="cream">
	<svg class="logo-main" xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700"><defs><style>.cls-blue{fill:#003B63;}.cls-2{fill:#ee393b;}</style></defs><title>WCUS-2019-Light-Blue-Red</title><g id="Text"><path class="cls-blue" d="M148.11,422.51a1.5,1.5,0,0,0,.62,2,1.46,1.46,0,0,0,.7.18,1.51,1.51,0,0,0,1.33-.79c22.18-41.5,53-79.54,86.63-107.1,37.5-30.68,76.61-46.92,113.1-46.95h.11c36.25,0,75.19,16.1,112.6,46.55,33.51,27.27,64.29,64.94,86.67,106.07a1.5,1.5,0,1,0,2.63-1.43c-22.56-41.47-53.6-79.46-87.41-107-37.95-30.89-77.54-47.22-114.49-47.22h-.11c-37.2,0-77,16.5-115,47.63C201.51,342.32,170.48,380.67,148.11,422.51Z"/><path class="cls-blue" d="M533.32,457.56a1.5,1.5,0,1,0,2.78-1.13c-2.78-6.86-5.86-13.64-9.17-20.13-23.54-46.2-46.86-80.81-71.3-105.8-32.45-33.19-67.82-50-105.14-50-86.72,0-141.93,88.81-175.92,155.62-3.56,7-6.86,14.32-9.82,21.79a1.52,1.52,0,0,0,.84,2,1.58,1.58,0,0,0,.56.1,1.5,1.5,0,0,0,1.39-.95c2.92-7.38,6.19-14.62,9.7-21.53,33.63-66.1,88.18-154,173.25-154,36.48,0,71.13,16.52,103,49.1,24.23,24.78,47.38,59.15,70.78,105.07C527.52,444.08,530.57,450.77,533.32,457.56Z"/><path class="cls-2" d="M243.06,562.54a237.07,237.07,0,0,1-94.73-336.06,1.5,1.5,0,1,0-2.55-1.58A240,240,0,0,0,241.7,565.22a1.5,1.5,0,1,0,1.36-2.68Z"/><path class="cls-2" d="M560.71,236a1.5,1.5,0,1,0-2.64,1.44A237.07,237.07,0,0,1,454.11,564a1.5,1.5,0,0,0,.66,2.85,1.55,1.55,0,0,0,.66-.15A240.15,240.15,0,0,0,560.71,236Z"/><path class="cls-2" d="M361.47,351.5a3,3,0,0,0,0-5.69,14.53,14.53,0,0,1-9.18-9.19,3,3,0,0,0-5.7,0,14.55,14.55,0,0,1-9.18,9.19,3,3,0,0,0,0,5.69,14.57,14.57,0,0,1,9.18,9.19,3,3,0,0,0,2.85,2.05h0a3,3,0,0,0,2.85-2.05A14.55,14.55,0,0,1,361.47,351.5Zm-12,8.24a17.46,17.46,0,0,0-11.09-11.08,17.49,17.49,0,0,0,11.09-11.09,17.47,17.47,0,0,0,11.09,11.09A17.43,17.43,0,0,0,349.44,359.74Z"/><path class="cls-2" d="M246,219.66A3,3,0,0,0,248,222.5a30.2,30.2,0,0,1,19.07,19.08,3,3,0,0,0,2.85,2h0a3,3,0,0,0,2.85-2,30.2,30.2,0,0,1,19.07-19.08,3,3,0,0,0,0-5.69,30.2,30.2,0,0,1-19.07-19.08,3,3,0,0,0-5.7,0A30.2,30.2,0,0,1,248,216.81,3,3,0,0,0,246,219.66Zm24-21a33.05,33.05,0,0,0,21,21,33,33,0,0,0-21,21,33.06,33.06,0,0,0-21-21A33.1,33.1,0,0,0,269.94,198.68Z"/><path class="cls-2" d="M445.41,241.81a3,3,0,0,0,0,5.69,14.57,14.57,0,0,1,9.18,9.19,3,3,0,0,0,2.85,2.05h0a3,3,0,0,0,2.85-2.05,14.55,14.55,0,0,1,9.18-9.19,3,3,0,0,0,0-5.69,14.53,14.53,0,0,1-9.18-9.19,3,3,0,0,0-5.7,0A14.55,14.55,0,0,1,445.41,241.81Zm12-8.24a17.47,17.47,0,0,0,11.09,11.09,17.43,17.43,0,0,0-11.09,11.08,17.46,17.46,0,0,0-11.09-11.08A17.49,17.49,0,0,0,457.44,233.57Z"/><path class="cls-2" d="M362.5,198H374v11.5a1.5,1.5,0,0,0,3,0V198h10.5a1.5,1.5,0,0,0,0-3H377V184.5a1.5,1.5,0,0,0-3,0V195H362.5a1.5,1.5,0,0,0,0,3Z"/><path class="cls-2" d="M187.5,268a1.5,1.5,0,0,0-1.5,1.5V280H174.5a1.5,1.5,0,0,0,0,3H186v11.5a1.5,1.5,0,0,0,3,0V283h10.5a1.5,1.5,0,0,0,0-3H189V269.5A1.5,1.5,0,0,0,187.5,268Z"/><path class="cls-2" d="M524.26,273a1.49,1.49,0,0,0-2.12,0l-7.78,7.77L506.59,273a1.5,1.5,0,1,0-2.12,2.12l7.77,7.77-7.77,7.78a1.5,1.5,0,0,0,1.06,2.56,1.51,1.51,0,0,0,1.06-.44l7.77-7.78,7.78,7.78a1.49,1.49,0,0,0,1.06.44,1.5,1.5,0,0,0,1.06-2.56l-7.78-7.78,7.78-7.77A1.51,1.51,0,0,0,524.26,273Z"/><path class="cls-2" d="M470.5,502.73a1.5,1.5,0,0,0,1.5-1.5v-11.5h10.5a1.5,1.5,0,0,0,0-3H472v-10.5a1.5,1.5,0,0,0-3,0v10.5H457.5a1.5,1.5,0,0,0,0,3H469v11.5A1.5,1.5,0,0,0,470.5,502.73Z"/><path class="cls-2" d="M243.26,478.57a1.49,1.49,0,0,0-2.12,0l-7.78,7.77-7.77-7.77a1.5,1.5,0,0,0-2.12,2.12l7.77,7.78-7.77,7.77a1.5,1.5,0,0,0,1.06,2.56,1.51,1.51,0,0,0,1.06-.44l7.77-7.77,7.78,7.77a1.49,1.49,0,0,0,1.06.44,1.5,1.5,0,0,0,1.06-2.56l-7.78-7.77,7.78-7.78A1.51,1.51,0,0,0,243.26,478.57Z"/><path class="cls-blue" d="M145.11,195.16l34.6,19.55c3,1.69,4.45.71,5.95-.87l3.93-4.12c1.5-1.57,1.65-3.11,0-5.39l-13-18.52.09-.09,19,12.22c2.34,1.53,3.83,1.36,5.33-.21l3.63-3.8c1.5-1.57,2.37-3,.58-6l-21-33.82c-1.65-2.63-3.3-1.91-4.63-.52l-3.93,4.12c-1.5,1.58-1.65,3.12,0,5.39l14,19.81-.08.09L169.76,169.4c-2.89-2-4.23-1-5.73.55l-3.36,3.52c-1.5,1.57-2.42,3-.41,5.8l14.42,20-.09.09L154.3,185.61c-2.34-1.62-3.83-1.45-5.34.13l-4.55,4.77C143.09,191.9,142.41,193.63,145.11,195.16Z"/><path class="cls-blue" d="M237.69,170.32c11.69-7.26,12.34-19.33,5.05-31.08-5.4-8.7-16.32-17.81-30.08-9.28s-10.45,22.38-5,31.08C214.9,172.78,226,177.57,237.69,170.32Zm-20-32.25c4.94-3.07,9.76.19,14.45,7.75s5.45,13,.39,16.18-9.69-.09-14.32-7.54S212.74,141.14,217.69,138.07Z"/><path class="cls-blue" d="M264.48,150.51a3.46,3.46,0,0,0,4.77,2.4l4.68-1.55a3.47,3.47,0,0,0,2.39-4.78l-4-12.15,5.53-1.83,9,10.76c1.88,2.21,3.3,2.61,5.42,1.91l6.44-2.14c1.7-.56,3-1.8,1-4l-12.43-13.48a12.76,12.76,0,0,0,2.87-13.5c-2.9-8.74-10.32-11.2-22.17-7.27l-13.18,4.37a3.47,3.47,0,0,0-2.4,4.78Zm7-36c2.37-.79,5.63-1.33,6.94,2.62s-2.07,5.74-4.5,6.55l-4.74,1.57-3-9Z"/><path class="cls-blue" d="M312.12,136.39a3.45,3.45,0,0,0,4.08,3.44l12.05-1c14.67-1.27,22.42-10.48,21.1-25.72C348.07,98.21,339.41,91.7,324.81,93l-12.56,1.09a3.46,3.46,0,0,0-3.44,4.08Zm14.12-32.82c6.57-.57,10.06,3.37,10.71,11,.67,7.78-2,13-9,13.56l-4,.34L321.84,104Z"/><path class="cls-blue" d="M381,140.81c7.48,1.09,14.51.29,19.71-7.94,1-1.73,1.42-3.55-1.58-4.69l-4.84-1.87c-2.76-1-3.53.27-5,2.06a6.82,6.82,0,0,1-6.44,2.49c-4.87-.7-7.06-5.23-5.62-15.17,1.28-8.87,4.88-12.74,9.76-12a6.13,6.13,0,0,1,5.15,3.72c1,2.15,1.29,3.62,4.34,3.54l4.67-.1c3.3,0,3.45-2,3.08-3.88-1.55-7.6-6.77-11.72-15.58-13-12.41-1.8-21.64,5.2-23.78,20C362.59,129.36,368.81,139.05,381,140.81Z"/><path class="cls-blue" d="M411,145.93l5.3,2.08c2,.79,3.51.34,5.11-2l3.66-5.3,11.56,4.52-.86,6.4c-.35,2.82.38,4.14,2.4,4.93l5.67,2.22c1.73.67,3.59.65,3.89-2.4l3.72-40.06a4.58,4.58,0,0,0-3.14-5.14L440,107.94a4.6,4.6,0,0,0-5.8,1.65l-24.47,31.94C407.88,144,409.24,145.26,411,145.93ZM440.14,119l.12,0L438,134.94l-7.09-2.78Z"/><path class="cls-blue" d="M459.06,166.77l3.2,2.35c1.65,1.21,3.31,1.87,5.28-.82l14.94-20.38.1.07-9.65,24.43c-1,2.58-.6,4.08,1.15,5.36l3.05,2.23c1.75,1.29,3.3,1.23,5.46-.52L503,162.93l.11.08L488.13,183.4c-2,2.68-.84,4.06.82,5.27l3.2,2.35c1.65,1.21,3.31,1.87,5.28-.81l22.69-31a3.45,3.45,0,0,0-.81-5.27L512,148.58c-1.76-1.28-3.31-1.23-5.51.49l-21.51,17-.1-.08,10-25.44c1-2.59.61-4.08-1.15-5.37l-7.48-5.48a3.47,3.47,0,0,0-5.28.81l-22.69,31C456.28,164.18,457.41,165.56,459.06,166.77Z"/><path class="cls-blue" d="M506.45,205.83l3.12,3.81c1.3,1.59,2.74,2.64,5.31.54l9.07-7.42,3.73,4.56c6.89,8.42,15.26,11.08,23.44,4.4,7.77-6.36,7.88-14.22-.06-23.93l-9-11a3.47,3.47,0,0,0-5.32-.53L507,200.51C504.41,202.62,505.16,204.24,506.45,205.83Zm33.21-15.91,3.89,4.76c2.06,2.52,2.09,5.39-.33,7.38-3.13,2.55-5.85,1.64-7.72-.64l-4-4.86Z"/><path class="cls-blue" d="M306,560.76l-4.74-1.35c-2-.56-3.75-.61-4.66,2.59l-6.93,24.25c-1.35,4.74-4.8,6.55-9.11,5.32s-5.78-4.45-4.43-9.19l6.93-24.24c.91-3.2-.63-4.11-2.6-4.67l-4.8-1.37c-2-.56-3.75-.61-4.67,2.59l-6.25,21.91c-3.54,12.37-.8,20.74,12.8,24.62s21.26-1.51,24.8-13.88l6.26-21.91C309.52,562.23,308,561.33,306,560.76Z"/><path class="cls-blue" d="M336.59,598.78l-4.41-.25a3.46,3.46,0,0,0-4,3.55L328,606a3.46,3.46,0,0,0,3.55,4l4.41.26a3.46,3.46,0,0,0,4-3.55l.23-3.9A3.46,3.46,0,0,0,336.59,598.78Z"/><path class="cls-blue" d="M377.86,575.22c-.33-2.22,1.61-3.93,4.15-4.3a7,7,0,0,1,5.35,1.21c2,1.45,2.61,2.78,5.85,1.07l3.24-1.7c2.83-1.46,2.18-3.24.92-4.73-4.15-4.89-9.78-6.19-17.06-5.11-9.49,1.4-15.66,7.81-14.54,15.41,2.65,17.92,25.49,8.72,26.7,16.88.4,2.72-2,4.44-5.29,4.93a7.4,7.4,0,0,1-6.7-2c-1.67-1.69-2-3.33-5.18-1.76l-4.4,2.14c-2.66,1.3-2.39,3.14-1.3,4.79,4.2,6.11,10.38,7.65,18.17,6.5,10.7-1.59,17.42-7.76,16-17.25C401.23,574,379,582.94,377.86,575.22Z"/><path class="cls-blue" d="M442.46,585.27a3.47,3.47,0,0,0-4.86-2.22l-4.14,1.54a3.46,3.46,0,0,0-2.22,4.86l1.36,3.66a3.47,3.47,0,0,0,4.86,2.22l4.13-1.54a3.47,3.47,0,0,0,2.23-4.86Z"/><path class="cls-2" d="M309.88,497.68h-9.5l6.23-6.62a18.71,18.71,0,0,0,3.17-4.31,9.32,9.32,0,0,0,.93-4.12,6.28,6.28,0,0,0-2.21-5,8.86,8.86,0,0,0-5.92-1.87,12.89,12.89,0,0,0-4.25.74,12.32,12.32,0,0,0-3.71,2,2.38,2.38,0,0,0-.63.75,2.13,2.13,0,0,0-.2.94,2.17,2.17,0,0,0,.45,1.37,1.32,1.32,0,0,0,1.06.57,1.71,1.71,0,0,0,.72-.16,5.27,5.27,0,0,0,.72-.41,14.33,14.33,0,0,1,2.79-1.53,7.68,7.68,0,0,1,2.87-.56,4,4,0,0,1,2.77.9,3.34,3.34,0,0,1,1,2.59,6,6,0,0,1-.7,2.75,14.29,14.29,0,0,1-2.22,3.05l-8.2,8.82a2.69,2.69,0,0,0-.83,1.94,1.92,1.92,0,0,0,.54,1.39,2,2,0,0,0,1.47.55h13.68c1.44,0,2.16-.63,2.16-1.9S311.32,497.68,309.88,497.68Z"/><path class="cls-2" d="M332.31,475.72a7.94,7.94,0,0,0-6.88,3.33q-2.37,3.33-2.37,9.67t2.37,9.7a8.76,8.76,0,0,0,13.76,0q2.37-3.34,2.37-9.68t-2.37-9.67A7.94,7.94,0,0,0,332.31,475.72Zm3.57,20.14a3.95,3.95,0,0,1-7.13,0q-1.12-2.25-1.12-7.14c0-3.27.37-5.64,1.12-7.13a4,4,0,0,1,7.13,0q1.11,2.22,1.11,7.15T335.88,495.86Z"/><path class="cls-2" d="M371.23,499.52c0-1.23-.72-1.84-2.16-1.84h-3.78V478.17a2.27,2.27,0,0,0-.62-1.69,2.16,2.16,0,0,0-1.62-.61,4,4,0,0,0-2.05.64L355.42,480a1.8,1.8,0,0,0-.93,1.62A2.22,2.22,0,0,0,355,483a1.59,1.59,0,0,0,1.28.65,1.92,1.92,0,0,0,.9-.29l3.45-2.13v16.42H356.9c-1.47,0-2.2.61-2.2,1.84s.73,1.9,2.2,1.9h12.17C370.51,501.42,371.23,500.79,371.23,499.52Z"/><path class="cls-2" d="M390.27,498a9.69,9.69,0,0,1-5.33-2.09,4.65,4.65,0,0,0-.79-.41,2,2,0,0,0-.68-.13,1.35,1.35,0,0,0-1.07.56,2.07,2.07,0,0,0-.45,1.35,2,2,0,0,0,.2.92,2.69,2.69,0,0,0,.67.77,10.71,10.71,0,0,0,3.51,2,12.24,12.24,0,0,0,4.12.74,9.06,9.06,0,0,0,5.38-1.62,10.09,10.09,0,0,0,3.51-4.66,19.13,19.13,0,0,0,1.23-7.18q0-6.06-2.61-9.31a9,9,0,0,0-7.44-3.26,8.77,8.77,0,0,0-4.37,1.08,7.83,7.83,0,0,0-3,3,8.67,8.67,0,0,0-1.09,4.37,8.86,8.86,0,0,0,1,4.23,7.07,7.07,0,0,0,2.75,2.88,7.92,7.92,0,0,0,4,1,7.25,7.25,0,0,0,3.71-1,6.14,6.14,0,0,0,2.48-2.57,13.24,13.24,0,0,1-1.58,6.82A4.66,4.66,0,0,1,390.27,498ZM394,487.37a4.34,4.34,0,0,1-3.26,1.27,4.09,4.09,0,0,1-3.16-1.26,4.63,4.63,0,0,1-1.19-3.34,4.72,4.72,0,0,1,1.19-3.37,4.11,4.11,0,0,1,3.16-1.28,4.35,4.35,0,0,1,3.26,1.28,4.62,4.62,0,0,1,1.24,3.37A4.56,4.56,0,0,1,394,487.37Z"/><path class="cls-2" d="M252.19,422.52a28.75,28.75,0,0,0-5.2-1.6,14.82,14.82,0,0,1-4.29-1.48,2.53,2.53,0,0,1-1.26-2.27,3.19,3.19,0,0,1,1.42-2.75,6.68,6.68,0,0,1,3.87-1,9.71,9.71,0,0,1,3.41.52,12.42,12.42,0,0,1,2.86,1.6,4.22,4.22,0,0,0,.81.4,2,2,0,0,0,.66.11,1.35,1.35,0,0,0,1.07-.56,2,2,0,0,0,.45-1.32,2.06,2.06,0,0,0-.2-.95,2.69,2.69,0,0,0-.67-.77,13.9,13.9,0,0,0-13.44-1.75,8.34,8.34,0,0,0-3.51,2.75,6.72,6.72,0,0,0-1.26,4,6,6,0,0,0,1,3.56,7.31,7.31,0,0,0,3,2.31,25.61,25.61,0,0,0,5.15,1.58,17.53,17.53,0,0,1,4.37,1.42,2.32,2.32,0,0,1,1.32,2.11,3,3,0,0,1-1.41,2.68,7.37,7.37,0,0,1-4,.92,13.27,13.27,0,0,1-3.74-.5,10.94,10.94,0,0,1-3.24-1.62,2.91,2.91,0,0,0-1.48-.51,1.33,1.33,0,0,0-1.06.56,2,2,0,0,0-.45,1.32,2,2,0,0,0,.83,1.72,11.49,11.49,0,0,0,4,2,18.28,18.28,0,0,0,5.24.74,13.1,13.1,0,0,0,5.17-1,8,8,0,0,0,3.49-2.66,6.51,6.51,0,0,0,1.24-3.94,5.39,5.39,0,0,0-1.06-3.42A7.78,7.78,0,0,0,252.19,422.52Z"/><path class="cls-2" d="M274.58,435a2.31,2.31,0,0,0,1.71.63,2.17,2.17,0,0,0,2.3-2.3V413.86h6.56c1.44,0,2.16-.63,2.16-1.91s-.72-1.91-2.16-1.91H267.4c-1.44,0-2.16.64-2.16,1.91s.72,1.91,2.16,1.91H274V433.3A2.23,2.23,0,0,0,274.58,435Z"/><path class="cls-2" d="M295.44,431a2.86,2.86,0,0,0,0,3.86,2.75,2.75,0,0,0,3.82,0,2.86,2.86,0,0,0,0-3.86,2.75,2.75,0,0,0-3.82,0Z"/><path class="cls-2" d="M344.91,431.61H334.79V412.17a2.25,2.25,0,0,0-.63-1.67,2.31,2.31,0,0,0-1.71-.63,2.17,2.17,0,0,0-2.3,2.3v21.09a2.16,2.16,0,0,0,.57,1.59,2.22,2.22,0,0,0,1.62.57h12.57c1.44,0,2.16-.63,2.16-1.9S346.35,431.61,344.91,431.61Z"/><path class="cls-2" d="M374.41,411.3a13.89,13.89,0,0,0-12.87,0,10.56,10.56,0,0,0-4.2,4.52,17,17,0,0,0,0,13.81,10.6,10.6,0,0,0,4.19,4.54,13.79,13.79,0,0,0,12.82,0,10.68,10.68,0,0,0,4.2-4.54,17,17,0,0,0,0-13.81A10.55,10.55,0,0,0,374.41,411.3Zm-1,18.33a7.42,7.42,0,0,1-10.95,0q-2-2.42-2-6.91t2-6.9a7.47,7.47,0,0,1,10.95,0c1.3,1.6,2,3.9,2,6.9S374.74,428,373.44,429.63Z"/><path class="cls-2" d="M411.43,409.87a2.19,2.19,0,0,0-1.65.63,2.27,2.27,0,0,0-.61,1.67v13.25a7.07,7.07,0,0,1-1.55,4.93,5.81,5.81,0,0,1-4.5,1.69,5.89,5.89,0,0,1-4.54-1.67,7.08,7.08,0,0,1-1.55-4.95V412.17a2.27,2.27,0,0,0-.61-1.67,2.49,2.49,0,0,0-3.31,0,2.27,2.27,0,0,0-.61,1.67v13q0,5.18,2.7,7.88t7.92,2.7q5.17,0,7.88-2.72t2.7-7.86v-13a2.27,2.27,0,0,0-.61-1.67A2.21,2.21,0,0,0,411.43,409.87Z"/><path class="cls-2" d="M431.59,433.3V412.17a2.25,2.25,0,0,0-.63-1.67,2.31,2.31,0,0,0-1.71-.63,2.17,2.17,0,0,0-2.3,2.3V433.3a2.31,2.31,0,0,0,.63,1.69,2.24,2.24,0,0,0,1.67.65A2.28,2.28,0,0,0,431,435,2.31,2.31,0,0,0,431.59,433.3Z"/><path class="cls-2" d="M458.93,434.79a8.08,8.08,0,0,0,3.5-2.66,6.57,6.57,0,0,0,1.24-3.94,5.45,5.45,0,0,0-1.06-3.42,7.78,7.78,0,0,0-3.06-2.25,28.89,28.89,0,0,0-5.21-1.6,14.84,14.84,0,0,1-4.28-1.48,2.53,2.53,0,0,1-1.26-2.27,3.16,3.16,0,0,1,1.42-2.75,6.68,6.68,0,0,1,3.87-1,9.61,9.61,0,0,1,3.4.52,12.26,12.26,0,0,1,2.87,1.6,4.22,4.22,0,0,0,.81.4,2,2,0,0,0,.66.11,1.33,1.33,0,0,0,1.06-.56,2,2,0,0,0,.45-1.32,2.06,2.06,0,0,0-.19-.95,2.86,2.86,0,0,0-.67-.77A13.92,13.92,0,0,0,449,410.71a8.34,8.34,0,0,0-3.51,2.75,6.72,6.72,0,0,0-1.26,4,6,6,0,0,0,1,3.56,7.24,7.24,0,0,0,3,2.31,25.61,25.61,0,0,0,5.15,1.58,17.53,17.53,0,0,1,4.37,1.42,2.32,2.32,0,0,1,1.32,2.11,3,3,0,0,1-1.41,2.68,7.37,7.37,0,0,1-4,.92,13.22,13.22,0,0,1-3.74-.5,10.94,10.94,0,0,1-3.24-1.62,2.94,2.94,0,0,0-1.48-.51,1.33,1.33,0,0,0-1.06.56,2,2,0,0,0-.45,1.32,2,2,0,0,0,.83,1.72,11.49,11.49,0,0,0,4,2,18.23,18.23,0,0,0,5.24.74A13,13,0,0,0,458.93,434.79Z"/></g></svg>
	<h1>Styleguide</h1>
	<span>Updated April 10th, 2019</span>
</section>

<section class="logos gray">
	<h2>Logos</h2>
	<span>WCUS 2019 has three main logos, each with a variety of different color options.</span>
	<div class="grid">
		<div class="grid-item">
			<h3>Primary Logo</h3>
			<div class="logo-container">
				<svg class="logo-primary" xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700"><defs><style>.cls-1{fill:#fff;}</style></defs><title>WCUS-2019-Dark-White</title><g id="Text"><path class="cls-1" d="M148.11,422.51a1.5,1.5,0,0,0,.62,2,1.46,1.46,0,0,0,.7.18,1.51,1.51,0,0,0,1.33-.79c22.18-41.5,53-79.54,86.63-107.1,37.5-30.68,76.61-46.92,113.1-46.95h.11c36.25,0,75.19,16.1,112.6,46.55,33.51,27.27,64.29,64.94,86.67,106.07a1.5,1.5,0,1,0,2.63-1.43c-22.56-41.47-53.6-79.46-87.41-107-37.95-30.89-77.54-47.22-114.49-47.22h-.11c-37.2,0-77,16.5-115,47.63C201.51,342.32,170.48,380.67,148.11,422.51Z"/><path class="cls-1" d="M533.32,457.56a1.5,1.5,0,1,0,2.78-1.13c-2.78-6.86-5.86-13.64-9.17-20.13-23.54-46.2-46.86-80.81-71.3-105.8-32.45-33.19-67.82-50-105.14-50-86.72,0-141.93,88.81-175.92,155.62-3.56,7-6.86,14.32-9.82,21.79a1.52,1.52,0,0,0,.84,2,1.58,1.58,0,0,0,.56.1,1.5,1.5,0,0,0,1.39-.95c2.92-7.38,6.19-14.62,9.7-21.53,33.63-66.1,88.18-154,173.25-154,36.48,0,71.13,16.52,103,49.1,24.23,24.78,47.38,59.15,70.78,105.07C527.52,444.08,530.57,450.77,533.32,457.56Z"/><path class="cls-1" d="M243.06,562.54a237.07,237.07,0,0,1-94.73-336.06,1.5,1.5,0,1,0-2.55-1.58A240,240,0,0,0,241.7,565.22a1.5,1.5,0,1,0,1.36-2.68Z"/><path class="cls-1" d="M560.71,236a1.5,1.5,0,1,0-2.64,1.44A237.07,237.07,0,0,1,454.11,564a1.5,1.5,0,0,0,.66,2.85,1.55,1.55,0,0,0,.66-.15A240.15,240.15,0,0,0,560.71,236Z"/><path class="cls-1" d="M361.47,351.5a3,3,0,0,0,0-5.69,14.53,14.53,0,0,1-9.18-9.19,3,3,0,0,0-5.7,0,14.55,14.55,0,0,1-9.18,9.19,3,3,0,0,0,0,5.69,14.57,14.57,0,0,1,9.18,9.19,3,3,0,0,0,2.85,2.05h0a3,3,0,0,0,2.85-2.05A14.55,14.55,0,0,1,361.47,351.5Zm-12,8.24a17.46,17.46,0,0,0-11.09-11.08,17.49,17.49,0,0,0,11.09-11.09,17.47,17.47,0,0,0,11.09,11.09A17.43,17.43,0,0,0,349.44,359.74Z"/><path class="cls-1" d="M246,219.66A3,3,0,0,0,248,222.5a30.2,30.2,0,0,1,19.07,19.08,3,3,0,0,0,2.85,2h0a3,3,0,0,0,2.85-2,30.2,30.2,0,0,1,19.07-19.08,3,3,0,0,0,0-5.69,30.2,30.2,0,0,1-19.07-19.08,3,3,0,0,0-5.7,0A30.2,30.2,0,0,1,248,216.81,3,3,0,0,0,246,219.66Zm24-21a33.05,33.05,0,0,0,21,21,33,33,0,0,0-21,21,33.06,33.06,0,0,0-21-21A33.1,33.1,0,0,0,269.94,198.68Z"/><path class="cls-1" d="M445.41,241.81a3,3,0,0,0,0,5.69,14.57,14.57,0,0,1,9.18,9.19,3,3,0,0,0,2.85,2.05h0a3,3,0,0,0,2.85-2.05,14.55,14.55,0,0,1,9.18-9.19,3,3,0,0,0,0-5.69,14.53,14.53,0,0,1-9.18-9.19,3,3,0,0,0-5.7,0A14.55,14.55,0,0,1,445.41,241.81Zm12-8.24a17.47,17.47,0,0,0,11.09,11.09,17.43,17.43,0,0,0-11.09,11.08,17.46,17.46,0,0,0-11.09-11.08A17.49,17.49,0,0,0,457.44,233.57Z"/><path class="cls-1" d="M362.5,198H374v11.5a1.5,1.5,0,0,0,3,0V198h10.5a1.5,1.5,0,0,0,0-3H377V184.5a1.5,1.5,0,0,0-3,0V195H362.5a1.5,1.5,0,0,0,0,3Z"/><path class="cls-1" d="M187.5,268a1.5,1.5,0,0,0-1.5,1.5V280H174.5a1.5,1.5,0,0,0,0,3H186v11.5a1.5,1.5,0,0,0,3,0V283h10.5a1.5,1.5,0,0,0,0-3H189V269.5A1.5,1.5,0,0,0,187.5,268Z"/><path class="cls-1" d="M524.26,273a1.49,1.49,0,0,0-2.12,0l-7.78,7.77L506.59,273a1.5,1.5,0,1,0-2.12,2.12l7.77,7.77-7.77,7.78a1.5,1.5,0,0,0,1.06,2.56,1.51,1.51,0,0,0,1.06-.44l7.77-7.78,7.78,7.78a1.49,1.49,0,0,0,1.06.44,1.5,1.5,0,0,0,1.06-2.56l-7.78-7.78,7.78-7.77A1.51,1.51,0,0,0,524.26,273Z"/><path class="cls-1" d="M470.5,502.73a1.5,1.5,0,0,0,1.5-1.5v-11.5h10.5a1.5,1.5,0,0,0,0-3H472v-10.5a1.5,1.5,0,0,0-3,0v10.5H457.5a1.5,1.5,0,0,0,0,3H469v11.5A1.5,1.5,0,0,0,470.5,502.73Z"/><path class="cls-1" d="M243.26,478.57a1.49,1.49,0,0,0-2.12,0l-7.78,7.77-7.77-7.77a1.5,1.5,0,0,0-2.12,2.12l7.77,7.78-7.77,7.77a1.5,1.5,0,0,0,1.06,2.56,1.51,1.51,0,0,0,1.06-.44l7.77-7.77,7.78,7.77a1.49,1.49,0,0,0,1.06.44,1.5,1.5,0,0,0,1.06-2.56l-7.78-7.77,7.78-7.78A1.51,1.51,0,0,0,243.26,478.57Z"/><path class="cls-1" d="M145.11,195.16l34.6,19.55c3,1.69,4.45.71,5.95-.87l3.93-4.12c1.5-1.57,1.65-3.11,0-5.39l-13-18.52.09-.09,19,12.22c2.34,1.53,3.83,1.36,5.33-.21l3.63-3.8c1.5-1.57,2.37-3,.58-6l-21-33.82c-1.65-2.63-3.3-1.91-4.63-.52l-3.93,4.12c-1.5,1.58-1.65,3.12,0,5.39l14,19.81-.08.09L169.76,169.4c-2.89-2-4.23-1-5.73.55l-3.36,3.52c-1.5,1.57-2.42,3-.41,5.8l14.42,20-.09.09L154.3,185.61c-2.34-1.62-3.83-1.45-5.34.13l-4.55,4.77C143.09,191.9,142.41,193.63,145.11,195.16Z"/><path class="cls-1" d="M237.69,170.32c11.69-7.26,12.34-19.33,5.05-31.08-5.4-8.7-16.32-17.81-30.08-9.28s-10.45,22.38-5,31.08C214.9,172.78,226,177.57,237.69,170.32Zm-20-32.25c4.94-3.07,9.76.19,14.45,7.75s5.45,13,.39,16.18-9.69-.09-14.32-7.54S212.74,141.14,217.69,138.07Z"/><path class="cls-1" d="M264.48,150.51a3.46,3.46,0,0,0,4.77,2.4l4.68-1.55a3.47,3.47,0,0,0,2.39-4.78l-4-12.15,5.53-1.83,9,10.76c1.88,2.21,3.3,2.61,5.42,1.91l6.44-2.14c1.7-.56,3-1.8,1-4l-12.43-13.48a12.76,12.76,0,0,0,2.87-13.5c-2.9-8.74-10.32-11.2-22.17-7.27l-13.18,4.37a3.47,3.47,0,0,0-2.4,4.78Zm7-36c2.37-.79,5.63-1.33,6.94,2.62s-2.07,5.74-4.5,6.55l-4.74,1.57-3-9Z"/><path class="cls-1" d="M312.12,136.39a3.45,3.45,0,0,0,4.08,3.44l12.05-1c14.67-1.27,22.42-10.48,21.1-25.72C348.07,98.21,339.41,91.7,324.81,93l-12.56,1.09a3.46,3.46,0,0,0-3.44,4.08Zm14.12-32.82c6.57-.57,10.06,3.37,10.71,11,.67,7.78-2,13-9,13.56l-4,.34L321.84,104Z"/><path class="cls-1" d="M381,140.81c7.48,1.09,14.51.29,19.71-7.94,1-1.73,1.42-3.55-1.58-4.69l-4.84-1.87c-2.76-1-3.53.27-5,2.06a6.82,6.82,0,0,1-6.44,2.49c-4.87-.7-7.06-5.23-5.62-15.17,1.28-8.87,4.88-12.74,9.76-12a6.13,6.13,0,0,1,5.15,3.72c1,2.15,1.29,3.62,4.34,3.54l4.67-.1c3.3,0,3.45-2,3.08-3.88-1.55-7.6-6.77-11.72-15.58-13-12.41-1.8-21.64,5.2-23.78,20C362.59,129.36,368.81,139.05,381,140.81Z"/><path class="cls-1" d="M411,145.93l5.3,2.08c2,.79,3.51.34,5.11-2l3.66-5.3,11.56,4.52-.86,6.4c-.35,2.82.38,4.14,2.4,4.93l5.67,2.22c1.73.67,3.59.65,3.89-2.4l3.72-40.06a4.58,4.58,0,0,0-3.14-5.14L440,107.94a4.6,4.6,0,0,0-5.8,1.65l-24.47,31.94C407.88,144,409.24,145.26,411,145.93ZM440.14,119l.12,0L438,134.94l-7.09-2.78Z"/><path class="cls-1" d="M459.06,166.77l3.2,2.35c1.65,1.21,3.31,1.87,5.28-.82l14.94-20.38.1.07-9.65,24.43c-1,2.58-.6,4.08,1.15,5.36l3.05,2.23c1.75,1.29,3.3,1.23,5.46-.52L503,162.93l.11.08L488.13,183.4c-2,2.68-.84,4.06.82,5.27l3.2,2.35c1.65,1.21,3.31,1.87,5.28-.81l22.69-31a3.45,3.45,0,0,0-.81-5.27L512,148.58c-1.76-1.28-3.31-1.23-5.51.49l-21.51,17-.1-.08,10-25.44c1-2.59.61-4.08-1.15-5.37l-7.48-5.48a3.47,3.47,0,0,0-5.28.81l-22.69,31C456.28,164.18,457.41,165.56,459.06,166.77Z"/><path class="cls-1" d="M506.45,205.83l3.12,3.81c1.3,1.59,2.74,2.64,5.31.54l9.07-7.42,3.73,4.56c6.89,8.42,15.26,11.08,23.44,4.4,7.77-6.36,7.88-14.22-.06-23.93l-9-11a3.47,3.47,0,0,0-5.32-.53L507,200.51C504.41,202.62,505.16,204.24,506.45,205.83Zm33.21-15.91,3.89,4.76c2.06,2.52,2.09,5.39-.33,7.38-3.13,2.55-5.85,1.64-7.72-.64l-4-4.86Z"/><path class="cls-1" d="M306,560.76l-4.74-1.35c-2-.56-3.75-.61-4.66,2.59l-6.93,24.25c-1.35,4.74-4.8,6.55-9.11,5.32s-5.78-4.45-4.43-9.19l6.93-24.24c.91-3.2-.63-4.11-2.6-4.67l-4.8-1.37c-2-.56-3.75-.61-4.67,2.59l-6.25,21.91c-3.54,12.37-.8,20.74,12.8,24.62s21.26-1.51,24.8-13.88l6.26-21.91C309.52,562.23,308,561.33,306,560.76Z"/><path class="cls-1" d="M336.59,598.78l-4.41-.25a3.46,3.46,0,0,0-4,3.55L328,606a3.46,3.46,0,0,0,3.55,4l4.41.26a3.46,3.46,0,0,0,4-3.55l.23-3.9A3.46,3.46,0,0,0,336.59,598.78Z"/><path class="cls-1" d="M377.86,575.22c-.33-2.22,1.61-3.93,4.15-4.3a7,7,0,0,1,5.35,1.21c2,1.45,2.61,2.78,5.85,1.07l3.24-1.7c2.83-1.46,2.18-3.24.92-4.73-4.15-4.89-9.78-6.19-17.06-5.11-9.49,1.4-15.66,7.81-14.54,15.41,2.65,17.92,25.49,8.72,26.7,16.88.4,2.72-2,4.44-5.29,4.93a7.4,7.4,0,0,1-6.7-2c-1.67-1.69-2-3.33-5.18-1.76l-4.4,2.14c-2.66,1.3-2.39,3.14-1.3,4.79,4.2,6.11,10.38,7.65,18.17,6.5,10.7-1.59,17.42-7.76,16-17.25C401.23,574,379,582.94,377.86,575.22Z"/><path class="cls-1" d="M442.46,585.27a3.47,3.47,0,0,0-4.86-2.22l-4.14,1.54a3.46,3.46,0,0,0-2.22,4.86l1.36,3.66a3.47,3.47,0,0,0,4.86,2.22l4.13-1.54a3.47,3.47,0,0,0,2.23-4.86Z"/><path class="cls-1" d="M309.88,497.68h-9.5l6.23-6.62a18.71,18.71,0,0,0,3.17-4.31,9.32,9.32,0,0,0,.93-4.12,6.28,6.28,0,0,0-2.21-5,8.86,8.86,0,0,0-5.92-1.87,12.89,12.89,0,0,0-4.25.74,12.32,12.32,0,0,0-3.71,2,2.38,2.38,0,0,0-.63.75,2.13,2.13,0,0,0-.2.94,2.17,2.17,0,0,0,.45,1.37,1.32,1.32,0,0,0,1.06.57,1.71,1.71,0,0,0,.72-.16,5.27,5.27,0,0,0,.72-.41,14.33,14.33,0,0,1,2.79-1.53,7.68,7.68,0,0,1,2.87-.56,4,4,0,0,1,2.77.9,3.34,3.34,0,0,1,1,2.59,6,6,0,0,1-.7,2.75,14.29,14.29,0,0,1-2.22,3.05l-8.2,8.82a2.69,2.69,0,0,0-.83,1.94,1.92,1.92,0,0,0,.54,1.39,2,2,0,0,0,1.47.55h13.68c1.44,0,2.16-.63,2.16-1.9S311.32,497.68,309.88,497.68Z"/><path class="cls-1" d="M332.31,475.72a7.94,7.94,0,0,0-6.88,3.33q-2.37,3.33-2.37,9.67t2.37,9.7a8.76,8.76,0,0,0,13.76,0q2.37-3.34,2.37-9.68t-2.37-9.67A7.94,7.94,0,0,0,332.31,475.72Zm3.57,20.14a3.95,3.95,0,0,1-7.13,0q-1.12-2.25-1.12-7.14c0-3.27.37-5.64,1.12-7.13a4,4,0,0,1,7.13,0q1.11,2.22,1.11,7.15T335.88,495.86Z"/><path class="cls-1" d="M371.23,499.52c0-1.23-.72-1.84-2.16-1.84h-3.78V478.17a2.27,2.27,0,0,0-.62-1.69,2.16,2.16,0,0,0-1.62-.61,4,4,0,0,0-2.05.64L355.42,480a1.8,1.8,0,0,0-.93,1.62A2.22,2.22,0,0,0,355,483a1.59,1.59,0,0,0,1.28.65,1.92,1.92,0,0,0,.9-.29l3.45-2.13v16.42H356.9c-1.47,0-2.2.61-2.2,1.84s.73,1.9,2.2,1.9h12.17C370.51,501.42,371.23,500.79,371.23,499.52Z"/><path class="cls-1" d="M390.27,498a9.69,9.69,0,0,1-5.33-2.09,4.65,4.65,0,0,0-.79-.41,2,2,0,0,0-.68-.13,1.35,1.35,0,0,0-1.07.56,2.07,2.07,0,0,0-.45,1.35,2,2,0,0,0,.2.92,2.69,2.69,0,0,0,.67.77,10.71,10.71,0,0,0,3.51,2,12.24,12.24,0,0,0,4.12.74,9.06,9.06,0,0,0,5.38-1.62,10.09,10.09,0,0,0,3.51-4.66,19.13,19.13,0,0,0,1.23-7.18q0-6.06-2.61-9.31a9,9,0,0,0-7.44-3.26,8.77,8.77,0,0,0-4.37,1.08,7.83,7.83,0,0,0-3,3,8.67,8.67,0,0,0-1.09,4.37,8.86,8.86,0,0,0,1,4.23,7.07,7.07,0,0,0,2.75,2.88,7.92,7.92,0,0,0,4,1,7.25,7.25,0,0,0,3.71-1,6.14,6.14,0,0,0,2.48-2.57,13.24,13.24,0,0,1-1.58,6.82A4.66,4.66,0,0,1,390.27,498ZM394,487.37a4.34,4.34,0,0,1-3.26,1.27,4.09,4.09,0,0,1-3.16-1.26,4.63,4.63,0,0,1-1.19-3.34,4.72,4.72,0,0,1,1.19-3.37,4.11,4.11,0,0,1,3.16-1.28,4.35,4.35,0,0,1,3.26,1.28,4.62,4.62,0,0,1,1.24,3.37A4.56,4.56,0,0,1,394,487.37Z"/><path class="cls-1" d="M252.19,422.52a28.75,28.75,0,0,0-5.2-1.6,14.82,14.82,0,0,1-4.29-1.48,2.53,2.53,0,0,1-1.26-2.27,3.19,3.19,0,0,1,1.42-2.75,6.68,6.68,0,0,1,3.87-1,9.71,9.71,0,0,1,3.41.52,12.42,12.42,0,0,1,2.86,1.6,4.22,4.22,0,0,0,.81.4,2,2,0,0,0,.66.11,1.35,1.35,0,0,0,1.07-.56,2,2,0,0,0,.45-1.32,2.06,2.06,0,0,0-.2-.95,2.69,2.69,0,0,0-.67-.77,13.9,13.9,0,0,0-13.44-1.75,8.34,8.34,0,0,0-3.51,2.75,6.72,6.72,0,0,0-1.26,4,6,6,0,0,0,1,3.56,7.31,7.31,0,0,0,3,2.31,25.61,25.61,0,0,0,5.15,1.58,17.53,17.53,0,0,1,4.37,1.42,2.32,2.32,0,0,1,1.32,2.11,3,3,0,0,1-1.41,2.68,7.37,7.37,0,0,1-4,.92,13.27,13.27,0,0,1-3.74-.5,10.94,10.94,0,0,1-3.24-1.62,2.91,2.91,0,0,0-1.48-.51,1.33,1.33,0,0,0-1.06.56,2,2,0,0,0-.45,1.32,2,2,0,0,0,.83,1.72,11.49,11.49,0,0,0,4,2,18.28,18.28,0,0,0,5.24.74,13.1,13.1,0,0,0,5.17-1,8,8,0,0,0,3.49-2.66,6.51,6.51,0,0,0,1.24-3.94,5.39,5.39,0,0,0-1.06-3.42A7.78,7.78,0,0,0,252.19,422.52Z"/><path class="cls-1" d="M274.58,435a2.31,2.31,0,0,0,1.71.63,2.17,2.17,0,0,0,2.3-2.3V413.86h6.56c1.44,0,2.16-.63,2.16-1.91s-.72-1.91-2.16-1.91H267.4c-1.44,0-2.16.64-2.16,1.91s.72,1.91,2.16,1.91H274V433.3A2.23,2.23,0,0,0,274.58,435Z"/><path class="cls-1" d="M295.44,431a2.86,2.86,0,0,0,0,3.86,2.75,2.75,0,0,0,3.82,0,2.86,2.86,0,0,0,0-3.86,2.75,2.75,0,0,0-3.82,0Z"/><path class="cls-1" d="M344.91,431.61H334.79V412.17a2.25,2.25,0,0,0-.63-1.67,2.31,2.31,0,0,0-1.71-.63,2.17,2.17,0,0,0-2.3,2.3v21.09a2.16,2.16,0,0,0,.57,1.59,2.22,2.22,0,0,0,1.62.57h12.57c1.44,0,2.16-.63,2.16-1.9S346.35,431.61,344.91,431.61Z"/><path class="cls-1" d="M374.41,411.3a13.89,13.89,0,0,0-12.87,0,10.56,10.56,0,0,0-4.2,4.52,17,17,0,0,0,0,13.81,10.6,10.6,0,0,0,4.19,4.54,13.79,13.79,0,0,0,12.82,0,10.68,10.68,0,0,0,4.2-4.54,17,17,0,0,0,0-13.81A10.55,10.55,0,0,0,374.41,411.3Zm-1,18.33a7.42,7.42,0,0,1-10.95,0q-2-2.42-2-6.91t2-6.9a7.47,7.47,0,0,1,10.95,0c1.3,1.6,2,3.9,2,6.9S374.74,428,373.44,429.63Z"/><path class="cls-1" d="M411.43,409.87a2.19,2.19,0,0,0-1.65.63,2.27,2.27,0,0,0-.61,1.67v13.25a7.07,7.07,0,0,1-1.55,4.93,5.81,5.81,0,0,1-4.5,1.69,5.89,5.89,0,0,1-4.54-1.67,7.08,7.08,0,0,1-1.55-4.95V412.17a2.27,2.27,0,0,0-.61-1.67,2.49,2.49,0,0,0-3.31,0,2.27,2.27,0,0,0-.61,1.67v13q0,5.18,2.7,7.88t7.92,2.7q5.17,0,7.88-2.72t2.7-7.86v-13a2.27,2.27,0,0,0-.61-1.67A2.21,2.21,0,0,0,411.43,409.87Z"/><path class="cls-1" d="M431.59,433.3V412.17a2.25,2.25,0,0,0-.63-1.67,2.31,2.31,0,0,0-1.71-.63,2.17,2.17,0,0,0-2.3,2.3V433.3a2.31,2.31,0,0,0,.63,1.69,2.24,2.24,0,0,0,1.67.65A2.28,2.28,0,0,0,431,435,2.31,2.31,0,0,0,431.59,433.3Z"/><path class="cls-1" d="M458.93,434.79a8.08,8.08,0,0,0,3.5-2.66,6.57,6.57,0,0,0,1.24-3.94,5.45,5.45,0,0,0-1.06-3.42,7.78,7.78,0,0,0-3.06-2.25,28.89,28.89,0,0,0-5.21-1.6,14.84,14.84,0,0,1-4.28-1.48,2.53,2.53,0,0,1-1.26-2.27,3.16,3.16,0,0,1,1.42-2.75,6.68,6.68,0,0,1,3.87-1,9.61,9.61,0,0,1,3.4.52,12.26,12.26,0,0,1,2.87,1.6,4.22,4.22,0,0,0,.81.4,2,2,0,0,0,.66.11,1.33,1.33,0,0,0,1.06-.56,2,2,0,0,0,.45-1.32,2.06,2.06,0,0,0-.19-.95,2.86,2.86,0,0,0-.67-.77A13.92,13.92,0,0,0,449,410.71a8.34,8.34,0,0,0-3.51,2.75,6.72,6.72,0,0,0-1.26,4,6,6,0,0,0,1,3.56,7.24,7.24,0,0,0,3,2.31,25.61,25.61,0,0,0,5.15,1.58,17.53,17.53,0,0,1,4.37,1.42,2.32,2.32,0,0,1,1.32,2.11,3,3,0,0,1-1.41,2.68,7.37,7.37,0,0,1-4,.92,13.22,13.22,0,0,1-3.74-.5,10.94,10.94,0,0,1-3.24-1.62,2.94,2.94,0,0,0-1.48-.51,1.33,1.33,0,0,0-1.06.56,2,2,0,0,0-.45,1.32,2,2,0,0,0,.83,1.72,11.49,11.49,0,0,0,4,2,18.23,18.23,0,0,0,5.24.74A13,13,0,0,0,458.93,434.79Z"/></g></svg>
			</div>
			<a href="https://drive.google.com/drive/u/3/folders/1ScWRD1Gk_sKG04dfs91dwl1MzUxH2hgE" target="_blank" class="button button-light">Download</a>
			<span>Used most of the time</span>
		</div>
		<div class="grid-item">
			<h3>Secondary Logo</h3>
			<div class="logo-container">
				<svg class="logo-secondary" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><defs><style>.cls-1{fill:#fff;}</style></defs><title>WCUS-2019-Small-Dark-White</title><g id="Text"><path class="cls-1" d="M472.12,127.88A243.41,243.41,0,0,0,127.88,472.12,243.41,243.41,0,0,0,472.12,127.88ZM465,465A233.4,233.4,0,1,1,135,135,233.4,233.4,0,1,1,465,465Z"/><path class="cls-1" d="M493.27,356.09c-29.34-36.42-59.33-65.64-89.12-86.85-36.24-25.81-71.24-38.89-104-38.89H300c-32.87,0-67.91,13.13-104.14,39-29.89,21.3-59.86,50.58-89.08,87a5,5,0,1,0,7.8,6.25C151.18,317,223.9,240.41,300,240.35h.09c30.67,0,63.71,12.46,98.23,37,29,20.69,58.36,49.28,87.14,85a5,5,0,1,0,7.78-6.27Z"/><path class="cls-1" d="M467.34,370.2c-24.5-36.26-48-63.27-71.83-82.59-30.59-24.8-62.72-37.37-95.49-37.37-77.72,0-132.9,69-167.64,121-4,6-8.06,12.32-12,18.85a5,5,0,0,0,1.66,6.87,4.84,4.84,0,0,0,2.6.73,5,5,0,0,0,4.27-2.39c3.92-6.41,7.9-12.63,11.83-18.5,33.47-50,86.4-116.51,159.33-116.51,55.23,0,105.76,36.72,159,115.56,4.09,6.06,8.23,12.48,12.29,19.08a5,5,0,1,0,8.52-5.24C475.73,382.92,471.52,376.38,467.34,370.2Z"/><path class="cls-1" d="M328.65,358.33a10,10,0,0,0,0-19A31.12,31.12,0,0,1,309,319.69a10,10,0,0,0-19,0,31.17,31.17,0,0,1-19.66,19.66,10,10,0,0,0,0,19A31.12,31.12,0,0,1,290,378a10,10,0,0,0,9.49,6.85h0A10,10,0,0,0,309,378,31.08,31.08,0,0,1,328.65,358.33ZM299.5,374.84a41,41,0,0,0-26-26,41,41,0,0,0,26-26,41,41,0,0,0,26,26A41,41,0,0,0,299.5,374.84Z"/><path class="cls-1" d="M116.41,249.67h10.18v10.19a5,5,0,0,0,10,0V249.67h9a5,5,0,0,0,0-10h-9v-9a5,5,0,0,0-10,0v9H116.41a5,5,0,0,0,0,10Z"/><path class="cls-1" d="M459.62,260.2a5,5,0,0,0,7.07,0l6.79-6.79,6.79,6.79a5,5,0,0,0,7.07,0,5,5,0,0,0,0-7.07l-6.79-6.79,6.79-6.79a5,5,0,0,0-7.07-7.07l-6.79,6.79-6.79-6.79a5,5,0,1,0-7.07,7.08l6.79,6.78-6.79,6.79A5,5,0,0,0,459.62,260.2Z"/><path class="cls-1" d="M150.34,170.91,192,203.21c3.59,2.8,5.71,1.79,8,0l5.95-4.66c2.27-1.78,2.76-3.77,1-7.07l-13.54-26.81.13-.11,22.64,19.7c2.78,2.46,4.77,2.52,7,.74l5.49-4.29c2.27-1.78,3.69-3.54,1.91-7.75l-21.07-48.42c-1.65-3.77-4-3.14-6-1.57l-6,4.66c-2.28,1.77-2.76,3.77-1,7.07l14.58,28.69-.13.1-23.42-21.66c-3.43-3.14-5.36-2.17-7.64-.39l-5.08,4c-2.27,1.78-3.75,3.48-1.64,7.55L188.36,182l-.14.11-24-22c-2.77-2.58-4.75-2.64-7-.86l-6.88,5.39C148.31,166.25,147.08,168.4,150.34,170.91Z"/><path class="cls-1" d="M278.59,165.11c9.89-1.6,18.48-5.4,21.79-17.89.61-2.59.38-5.05-3.87-5.3l-6.87-.44c-3.91-.23-4.36,1.74-5.53,4.59a9.06,9.06,0,0,1-7.16,5.72c-6.45,1.05-11-3.8-13.16-17-1.9-11.73,1.12-18.07,7.57-19.11a8.1,8.1,0,0,1,8,2.66c2.1,2.32,3.07,4.06,6.9,2.75l5.87-2c4.16-1.37,3.59-3.85,2.36-6.15-5-9-13.24-12.13-24.88-10.24-16.43,2.66-25.32,15.19-22.16,34.72C250.77,157.93,262.5,167.72,278.59,165.11Z"/><path class="cls-1" d="M341.5,169.75c17.88,5.69,28.26-1.16,33.43-17.42l9.17-28.81c1.34-4.2-.66-5.46-3.25-6.29l-6.23-2c-2.59-.83-4.95-1-6.29,3.25l-10.15,31.88c-2,6.23-6.63,8.49-12.29,6.69s-7.49-6.13-5.51-12.36l10.15-31.88c1.34-4.2-.67-5.46-3.25-6.29l-6.32-2c-2.58-.82-4.95-1-6.29,3.26l-9.17,28.8C320.33,152.85,323.62,164.06,341.5,169.75Z"/><path class="cls-1" d="M427.35,205.4c16.17-16.61-11.13-32.87-3.9-40.29,2.07-2.13,5.44-1.45,7.88.91a9.29,9.29,0,0,1,3,6.63c.1,3.3-.84,5,3.57,7l4.41,2c3.81,1.81,5.16-.31,5.73-2.84,1.81-8.31-1.35-15.29-8.34-22.1-9.13-8.89-20.85-10.23-28-2.93-16.76,17.22,11.32,33.89,3.68,41.74-2.54,2.61-6.28,1.46-9.45-1.62-2.73-2.66-3.73-5.65-3.29-8.66s1.91-4.77-2.32-6.87l-5.8-2.92c-3.51-1.76-5.22,0-6.09,2.48-3.06,9.35.29,17.11,7.77,24.39C406.55,212.41,418.47,214.53,427.35,205.4Z"/><path class="cls-1" d="M213.92,406.42c-8.37-6.9-16.66-8.08-24.19-3.71-2.31,1.36-3.94,3.07-1.22,6.51l2.24,2.83c3,3.78,4.6,2.49,7.56,1.54a6.5,6.5,0,0,1,6.75,1.32c3.12,2.57,3.44,5.89.6,9.32-4.76,5.78-14.37,3.3-24,2.74-7.21-.38-14.58.62-19.12,6.14l-2.62,3.18c-1.93,2.33-1.16,4.17.53,5.56L187,463.78c3.38,2.78,5.27,1.4,7-.67l1.55-1.88c1.71-2.08,2.7-4.21-.68-7l-15.63-12.89a7.65,7.65,0,0,1,5.61-1.91C193.59,439.67,209,444,218,433,224.94,424.65,224.5,415.13,213.92,406.42Z"/><path class="cls-1" d="M269,433.53c-14.91-3.47-24.8,6.39-29.27,25.56-4.73,20.31,1.11,31.94,15.12,35.2s24.38-4.59,29.11-24.9C288.44,450.22,283.92,437,269,433.53Zm-.28,32.31c-3,12.94-6.09,18-11.17,16.82s-5.6-7.09-2.58-20c3.24-13.93,6.36-18.81,11.36-17.65S272,451.92,268.74,465.84Z"/><path class="cls-1" d="M361.55,482.33c-.61-2.62-1.69-4.7-6-3.71l-4.67,1.09-9.84-42.44c-1-4.26-3.23-4.26-5.85-3.65l-2.62.61c-2.79.64-4.19,1.66-6.62,3.09l-6.6,3.94c-3.11,1.85-3.83,3.57-3.19,6.35l.42,1.81c.57,2.45,1.43,3.55,5.33,2.13l6.12-2.28,7.86,33.91-4.18,1c-4.25,1-4.32,3.33-3.71,6l.46,2c.61,2.62,1.69,4.7,5.95,3.71l23.84-5.52c4.26-1,4.32-3.34,3.71-6Z"/><path class="cls-1" d="M386,406.65c-11.36,9.35-12,21.84-4.34,31.12,7.91,9.61,17.57,10.38,25.95,3.48a19.74,19.74,0,0,0,7.24-13l.13-.11c7,10.24,4.58,16.16.3,19.69a17.91,17.91,0,0,1-6.88,3.69c-2.7.81-4.73,1.39-4,5.4l.53,3.16c.73,4.19,3.16,4.37,5.74,3.66a34.16,34.16,0,0,0,12.55-6.84c11.95-9.83,13.3-26.73-.54-43.55C411.42,399.69,397.63,397.09,386,406.65Zm17.85,22.23c-3.63,3-7.44,2.86-10.65-1-3.42-4.15-3.45-8.7.38-11.85,4.41-3.63,9.28-2.08,13.72,3.31C407.65,423,406.32,426.85,403.85,428.88Z"/></g></svg>
			</div>
			<a href="https://drive.google.com/drive/u/3/folders/12kC2ikXC7jNJWEGqetJ2nlmrpCDvOCrs" target="_blank" class="button button-light">Download</a>
			<span>Used when the logo must be tiny (like in the case of social network logos)</span>
		</div>
		<div class="grid-item">
			<h3>Tertiary Logo</h3>
			<div class="logo-container">
				<svg class="logo-secondary" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><defs><style>.cls-1{fill:#fff;}</style></defs><title>WCUS-2019-NoText-Dark-White</title><g id="Text"><path class="cls-1" d="M472.12,127.88A243.41,243.41,0,0,0,127.88,472.12,243.41,243.41,0,0,0,472.12,127.88ZM465,465A233.4,233.4,0,1,1,135,135,233.4,233.4,0,1,1,465,465Z"/><path class="cls-1" d="M493.27,356.09c-29.34-36.42-59.33-65.64-89.12-86.85-36.24-25.81-71.24-38.89-104-38.89H300c-32.87,0-67.91,13.13-104.14,39-29.89,21.3-59.86,50.58-89.08,87a5,5,0,1,0,7.8,6.25C151.18,317,223.9,240.41,300,240.35h.09c30.67,0,63.71,12.46,98.23,37,29,20.69,58.36,49.28,87.14,85a5,5,0,1,0,7.78-6.27Z"/><path class="cls-1" d="M467.34,370.2c-24.5-36.26-48-63.27-71.83-82.59-30.59-24.8-62.72-37.37-95.49-37.37-77.72,0-132.9,69-167.64,121-4,6-8.06,12.32-12,18.85a5,5,0,0,0,1.66,6.87,4.84,4.84,0,0,0,2.6.73,5,5,0,0,0,4.27-2.39c3.92-6.41,7.9-12.63,11.83-18.5,33.47-50,86.4-116.51,159.33-116.51,55.23,0,105.76,36.72,159,115.56,4.09,6.06,8.23,12.48,12.29,19.08a5,5,0,1,0,8.52-5.24C475.73,382.92,471.52,376.38,467.34,370.2Z"/><path class="cls-1" d="M294.05,130.36h10.19v10.19a5,5,0,0,0,10,0V130.36h9a5,5,0,0,0,0-10h-9v-9a5,5,0,0,0-10,0v9H294.05a5,5,0,1,0,0,10Z"/><path class="cls-1" d="M328.65,355.35A31.12,31.12,0,0,1,309,335.69a10,10,0,0,0-19,0,31.17,31.17,0,0,1-19.66,19.66,10,10,0,0,0,0,19A31.12,31.12,0,0,1,290,394a10,10,0,0,0,9.49,6.85h0A10,10,0,0,0,309,394a31.08,31.08,0,0,1,19.66-19.66,10,10,0,0,0,0-19ZM299.5,390.84a41,41,0,0,0-26-26,41,41,0,0,0,26-26,41,41,0,0,0,26,26A41,41,0,0,0,299.5,390.84Z"/><path class="cls-1" d="M395.25,442.2h-9v-9a5,5,0,0,0-10,0v9H366a5,5,0,0,0,0,10h10.19v10.19a5,5,0,0,0,10,0V452.2h9a5,5,0,0,0,0-10Z"/><path class="cls-1" d="M228,433.62a5,5,0,0,0-7.08,0l-6.78,6.78-6.79-6.78a5,5,0,1,0-7.07,7.07l6.79,6.78-6.79,6.79a5,5,0,1,0,7.07,7.07l6.79-6.78,6.78,6.78a5,5,0,0,0,7.08-7.07l-6.79-6.79,6.79-6.78A5,5,0,0,0,228,433.62Z"/><path class="cls-1" d="M183.25,185.91a28.78,28.78,0,0,1,18.17,18.16,10,10,0,0,0,9.49,6.85h0a10,10,0,0,0,9.49-6.85,28.74,28.74,0,0,1,18.16-18.16,10,10,0,0,0,0-19,28.74,28.74,0,0,1-18.16-18.16,10,10,0,0,0-19,0,28.78,28.78,0,0,1-18.17,18.16,10,10,0,0,0,0,19Zm27.66-34a38.62,38.62,0,0,0,24.51,24.51,38.6,38.6,0,0,0-24.51,24.5,38.63,38.63,0,0,0-24.51-24.5A38.64,38.64,0,0,0,210.91,151.91Z"/><path class="cls-1" d="M380.87,188.12a10.45,10.45,0,0,1,6.61,6.61,10,10,0,0,0,9.49,6.85h0a10,10,0,0,0,9.49-6.85,10.45,10.45,0,0,1,6.61-6.61,10,10,0,0,0,0-19,10.45,10.45,0,0,1-6.61-6.61,10,10,0,0,0-19,0,10.45,10.45,0,0,1-6.61,6.61,10,10,0,0,0,0,19ZM397,165.67a20.41,20.41,0,0,0,13,13,20.42,20.42,0,0,0-13,13,20.43,20.43,0,0,0-13-13A20.41,20.41,0,0,0,397,165.67Z"/><path class="cls-1" d="M116.41,249.67h10.18v10.19a5,5,0,0,0,10,0V249.67h9a5,5,0,0,0,0-10h-9v-9a5,5,0,0,0-10,0v9H116.41a5,5,0,0,0,0,10Z"/><path class="cls-1" d="M459.62,260.2a5,5,0,0,0,7.07,0l6.79-6.79,6.79,6.79a5,5,0,0,0,7.07,0,5,5,0,0,0,0-7.07l-6.79-6.79,6.79-6.79a5,5,0,0,0-7.07-7.07l-6.79,6.79-6.79-6.79a5,5,0,1,0-7.07,7.08l6.79,6.78-6.79,6.79A5,5,0,0,0,459.62,260.2Z"/></g></svg>
			</div>
			<a href="https://drive.google.com/drive/u/3/folders/1ZS948n19qnqkiYpWUUkWE-VxrpRw9k39" target="_blank" class="button button-light">Download</a>
			<span>Used very sparingly, and must by accompanied with the name of the conference.</span>
		</div>
	</div>
</section>

<section class="white colors">
	<div class="grid">
		<div class="grid-item blue">
			<span class="code">#003B63</span>
			<span class="code">rgb(0,59,99)</span>
		</div>
		<div class="grid-item red">
			<span class="code">#BD2B2E</span>
			<span class="code">rgb(189,43,46)</span>
		</div>
		<div class="grid-item gray">
			<span class="code">#303030</span>
			<span class="code">rgb(48,48,48)</span>
		</div>
		<div class="grid-item white">
			<span class="code">#FFFFFF</span>
			<span class="code">rgb(255,255,255)</span>
		</div>
		<div class="grid-item cream">
			<span class="code">#FFFFFA</span>
			<span class="code">rgb(255,255,250)</span>
		</div>
		<div class="grid-item light-brown">
			<span class="code">#9E8B7E</span>
			<span class="code">rgb(158,139,126)</span>
			<span class="warning">For non-text accents only</span>
		</div>
		<div class="grid-item light-blue">
			<span class="code">#7EA1B8</span>
			<span class="code">rgb(126,161,184)</span>
			<span class="warning">For non-text accents only</span>
		</div>
		<div class="grid-item light-red">
			<span class="code">#EE383B</span>
			<span class="code">rgb(238,56,59)</span>
			<span class="warning">For non-text accents only</span>
		</div>
		<div class="grid-item light-pink">
			<span class="code">#F98386</span>
			<span class="code">rgb(249,131,134)</span>
			<span class="warning">For non-text accents only</span>
		</div>
		<div class="grid-item brown">
			<span class="code">#747466</span>
			<span class="code">rgb(116,116,102)</span>
			<div class="warning">For secondary text</div>
		</div>
	</div>
</section>

<section class="red font">
	<div class="grid">
		<h2>Fonts</h2>
		<div class="grid-item">
			<h3>Headings</h3>
			<span class="font-headings">Nunito Black</span>
			<a href="https://fonts.google.com/specimen/Nunito?selection.family=Nunito:900,900i" target="_blank" class="button button-light">Download</a>
		</div>
		<div class="grid-item">
			<h3>Subheadings</h3>
			<span class="font-subheadings">Nunito Bold</span>
			<a href="https://fonts.google.com/specimen/Nunito?selection.family=Nunito:700,700i" target="_blank" class="button button-light">Download</a>
		</div>
		<div class="grid-item">
			<h3>Body Text</h3>
			<span class="font-body">Nunito Sans</span>
			<a href="https://fonts.google.com/specimen/Nunito+Sans" target="_blank" class="button button-light">Download</a>
		</div>
		<div class="grid-item footnote">
			<em>Note: In the logo, "WordCamp U.S." is set in Trade Gothic Next Heavy, but this font is reserved for that specific application only.</em>
		</div>
	</div>
</section>

<section class="design-elements blue">
	<div class="grid">
		<div class="grid-item cream">
			<h2>Buttons (Light Backgrounds)</h2>
			<a href="#" class="button">Red Button (Default)</a>
			<a href="#" class="button button-blue">Blue Button (Alternate)</a>
			<a href="#" class="button button-outline">Outline Button (Secondary)</a>
		</div>
		<div class="grid-item gray">
			<h2>Buttons (Dark Backgrounds)</h2>
			<a href="#" class="button button-light">Red Button (Light, Default)</a>
			<a href="#" class="button button-light button-blue">Blue Button (Light, Alternate)</a>
			<a href="#" class="button button-outline button-light">Outline Button (Light, Secondary)</a>
		</div>
	</div>
	<h2>Sparkles</h2>
	<span>These shapes should be used sparingly, but can help subtly reinforce the visual aesthetic. Consider using a mix of colors from the palette to add variety and rhythm.</span>
	<div class="grid">
		<div class="grid-item blue">
			<img src="https://cldup.com/p1YkTu_QhQ-3000x3000.png">
			<a href="https://cloudup.com/cmHV73UArNP" target="_blank" class="button button-light">Download SVGs</a>
			</svg>
		</div>
	</div>
</section>

<section class="footer gray">
	<a href="https://2019.us.wordcamp.org">2019.us.wordcamp.org</a>
	<span>Styleguide questions? Ping @kjellr or @melchoyce on WordPress.org</span>
	<a href="https://wordpress.org/">
		<img src="https://cldup.com/iy9mLGDEC6-3000x3000.png">
	</a>
</section>
              
            
!

CSS

              
                /*
 * Fonts
 */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700,700i|Nunito:700,700i,900,900i');

/*
 * Colors
 */
$white: #FFFFFF;
$cream: #FFFFFA;
$blue: #003B63;
$red: #BD2B2E;
$gray: #303030;
$brown: #747466;
$light-brown: #9E8B7E;
$light-blue: #7EA1B8;
$light-red: #EE383B;
$light-pink: #F98386;

.white {
	background-color: $white;
	color: $blue;
}

.cream {
	background-color: $cream;
	color: $blue;
}

.blue {
	background-color: $blue;
	color: $white;
}

.red {
	background-color: $red;
	color: $white;
}

.gray {
	background-color: $gray;
	color: $white;
}

.brown {
	background-color: $brown;
	color: $white;
}

.light-brown {
	background-color: $light-brown;
	color: $gray;
}

.light-blue {
	background-color: $light-blue;
	color: $gray;
}

.light-red {
	background-color: $light-red;
	color: $white;
}

.light-pink {
	background-color: $light-pink;
	color: $gray;
}

/*
 * General
 */
$padding: 1.5em;

body {
	padding: 0;
	margin: 0;
	font-family: 'Nunito Sans', sans-serif;
	box-sizing: border-box;
}

a {
	text-decoration: underline;

	&:hover {
		text-decoration: none;
	}
}

.code {
	font-family: Monaco, Courier;
	font-size: 0.8em;
	padding: 0.2em 0.4em;
	background: rgba(255,255,255,0.2);
	border-radius: 4px;
}

.warning {
	font-size: 0.8em;
}

.button {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	text-decoration: none;
	padding: $padding / 1.5;
	color: $white;
	background-color: $red;
	border-radius: 6px;
	transition: all 0.1s ease-in-out;

	&:hover,
	&:focus {
		color: $white;
		background-color: $gray;
	}

	&:focus {
		outline: 2px dotted $gray;
		outline-offset: 2px;
	}

	&:active {
		transform: translateY(1px);
	}

	&.button-blue {
		background-color: $blue;

		&:hover,
		&:focus {
			background-color: $gray;
		}
	}

	&.button-light {
		color: $red;
		background-color: $white;
		
		&:hover,
		&:focus {
			color: $red;
			background-color: rgba( $white, 0.9 );
		}

		&:focus {
			outline: 2px dotted rgba( $white, 0.9 );
		}

		&.button-blue {
			color: $blue;

			&:hover,
			&:focus {
				color: $blue;
			}
		}
	}

	&.button-outline {
		color: $red;
		background: transparent;
		border: 2px solid $red;
		border-radius: 6px;
		padding: calc( ( #{$padding} / 1.5 ) - 2px );

		&:hover,
		&:focus {
			color: $gray;
			border-color: $gray;
		}

		&.button-light {
			color: $white;
			border-color: $white;
			background: transparent;
			
			&:hover,
			&:focus {
				color: rgba( $white, 0.9 );
				border-color: rgba( $white, 0.9 );
				background: transparent;
			}
		}
	}
}

/*
 * Links
 */

a.link {
	color: $red;
	box-shadow: 0 2px 0 $red;
	text-decoration: none;
	transition: all 0.1s ease-in-out;

	&:hover,
	&:focus {
		color: $gray;
		box-shadow: 0 4px 0 $gray;
	}

	&:focus {
		outline: 2px dotted $gray;
		outline-offset: 2px;
	}

	&.link-light {
		color: $white;
		box-shadow: 0 2px 0 $white;

		&:hover,
		&:focus {
			color: $white;
			box-shadow: 0 4px 0 $white;
		}

		&:focus {
			outline: 2px dotted $white;
		}
	}
}

/*
 * Headings
 */
h1 {
	font-family: 'Nunito', sans-serif;
	font-weight: 900;
}

h2 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
}

h2 {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
}

/*
 * Logos
 */

.logo-main {
	width: 400px;
	height: 400px;
	max-width: 80%;
}

/*
 * Sections
 */
section {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: $padding;
	
	.grid {
		width: 100%;
		display: flex;
		flex-direction: column;

		@media screen and (min-width: 900px) {
			flex-direction: row;
		}
	}

	.grid-item {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		padding: $padding;

		span {
			text-align: center;
			max-width: 180px;
		}

		*:not(:last-child) {
			margin-bottom: $padding;
		}
	}
}

section.logos {

	> span {
		margin-bottom: $padding * 2;
	}

	.grid {
		@media screen and (min-width: 900px) {
			align-items: flex-start;
		}
	}

	.logo-container {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 80%;
		padding-bottom: $padding / 1.5;

		@media screen and (min-width: 900px) {
			height: 300px;
			padding-bottom: 0;
		}
	}

	.logo-primary {
		width: 300px;
		height: 300px;
	}

	.logo-secondary {
		width: 75px;
		height: 75px;
	}
}

section.colors {
	padding: 0;

	.grid {
		flex-direction: row;
		flex-wrap: wrap;
		min-height: 100vh;
	}

	.grid-item {
		flex-basis: 15%;
		min-height: 150px;
		display: flex;

		span:first-child {
			margin-bottom: $padding / 2;
		}
	}

}

section.font {

	.grid {
		flex-direction: column;
		max-width: 600px;
		padding-top: $padding * 3;
		padding-bottom: $padding * 3;
	}

	.grid-item {
		padding: 0;
		flex-direction: column;
		justify-content: initial;
		align-items: initial;

		span {
			max-width: none;
			text-align: left;
			margin-bottom: 1rem;
		}
	}

	.button {
		display: table;
		width: fit-content;
		margin-bottom: $padding * 1.5;
	}

	.font-headings {
		font-family: 'Nunito';
		font-weight: 900;
		font-size: 6em;
	}

	.font-subheadings {
		font-family: 'Nunito', sans-serif;
		font-weight: 700;
		font-size: 4em;
	}

	.font-body {
		font-size: 2em;
	}

	.footnote {
		margin-top: $padding * 1.5;
	}
}

section.design-elements { 
	padding: 0;
	justify-content: flex-start;

	> h2 {
		margin: ($padding * 2) auto ($padding / 2); 
	}

	> span {
		text-align: center;
		max-width: 480px;
	}

	.grid {
		text-align: center;

		.grid-item {
			padding: $padding * 2;
		}

		.grid-item > *:last-child { 
			margin-bottom: $padding; 
		}

		img {
			max-width: 900px;
			width: 100%;
		}

		.button, .link {
			margin-top: $padding;
		}
	}
}

section.footer {
	min-height: auto;
	padding-top: $padding * 2;
	padding-bottom: $padding * 2;

	a {
		color: $white;
		margin-bottom: $padding / 2;
	}

	img {
		padding-top: $padding;
		max-width: 80px;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console