css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
	<h1 class="title">cd<span class='title2'>pool</span> style guide</h1>
	<!-- Logo -->
	<h1 class="section-header">Logo</h1>
	<p class="lead">
		<strong class="accent-font"></strong> is used as our logo typeface while employing a mixed weighting of <strong>Regular</strong> & <strong>Bold</strong> on the respective sections of brand type.
		
	</p>
	<div class="row">
		<div class="col-xs-12 col-md-4"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
	<text transform="matrix(1 0 0 1 50.5391 335.7811)"><tspan x="0" y="0" class="st0 st1 st2">cd</tspan><tspan x="141.6" y="0" class="st0 st3 st2">pool</tspan></text>
	<g>
		<path class="st0" d="M158.1,218.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C160.1,217.8,159.2,218.8,158.1,218.8z"/>
		<path class="st0" d="M158.1,198.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C160.1,197.4,159.2,198.3,158.1,198.3z"/>
		<path class="st0" d="M193,218.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1H193c1.1,0,2.1,0.9,2.1,2.1v12.8
			C195,217.8,194.1,218.8,193,218.8z"/>
		<path class="st0" d="M193,198.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1H193c1.1,0,2.1,0.9,2.1,2.1v12.8
			C195,197.4,194.1,198.3,193,198.3z"/>
		<path class="st0" d="M193,177.9h-25.4c-1.1,0-2.1-0.9-2.1-2.1V163c0-1.1,0.9-2.1,2.1-2.1H193c1.1,0,2.1,0.9,2.1,2.1v12.8
			C195,177,194.1,177.9,193,177.9z"/>
		<path class="st0" d="M193,157.5h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1H193c1.1,0,2.1,0.9,2.1,2.1v12.8
			C195,156.6,194.1,157.5,193,157.5z"/>
		<path class="st0" d="M193,137h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1H193c1.1,0,2.1,0.9,2.1,2.1V135
			C195,136.1,194.1,137,193,137z"/>
		<path class="st0" d="M227.8,218.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C229.9,217.8,229,218.8,227.8,218.8z"/>
		<path class="st0" d="M227.8,198.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C229.9,197.4,229,198.3,227.8,198.3z"/>
		<path class="st0" d="M227.8,177.9h-25.4c-1.1,0-2.1-0.9-2.1-2.1V163c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C229.9,177,229,177.9,227.8,177.9z"/>
		<path class="st0" d="M227.8,157.5h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C229.9,156.6,229,157.5,227.8,157.5z"/>
		<path class="st0" d="M227.8,137h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1V135
			C229.9,136.1,229,137,227.8,137z"/>
		<path class="st0" d="M227.8,116.6h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C229.9,115.7,229,116.6,227.8,116.6z"/>
		<path class="st0" d="M227.8,96.2h-25.4c-1.1,0-2.1-0.9-2.1-2.1V81.3c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C229.9,95.3,229,96.2,227.8,96.2z"/>
		<path class="st0" d="M262.7,218.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C264.8,217.8,263.8,218.8,262.7,218.8z"/>
		<path class="st0" d="M262.7,198.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C264.8,197.4,263.8,198.3,262.7,198.3z"/>
		<path class="st0" d="M262.7,177.9h-25.4c-1.1,0-2.1-0.9-2.1-2.1V163c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C264.8,177,263.8,177.9,262.7,177.9z"/>
		<path class="st0" d="M262.7,157.5h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C264.8,156.6,263.8,157.5,262.7,157.5z"/>
		<path class="st0" d="M262.7,137h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1V135
			C264.8,136.1,263.8,137,262.7,137z"/>
		<path class="st0" d="M262.7,116.6h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C264.8,115.7,263.8,116.6,262.7,116.6z"/>
		<path class="st0" d="M297.6,218.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C299.6,217.8,298.7,218.8,297.6,218.8z"/>
		<path class="st0" d="M297.6,198.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C299.6,197.4,298.7,198.3,297.6,198.3z"/>
		<path class="st0" d="M297.6,177.9h-25.4c-1.1,0-2.1-0.9-2.1-2.1V163c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C299.6,177,298.7,177.9,297.6,177.9z"/>
		<path class="st0" d="M297.6,157.5h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C299.6,156.6,298.7,157.5,297.6,157.5z"/>
		<path class="st0" d="M332.5,218.8H307c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C334.5,217.8,333.6,218.8,332.5,218.8z"/>
		<path class="st0" d="M332.5,198.3H307c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C334.5,197.4,333.6,198.3,332.5,198.3z"/>
		<path class="st0" d="M332.5,177.9H307c-1.1,0-2.1-0.9-2.1-2.1V163c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C334.5,177,333.6,177.9,332.5,177.9z"/>
		<path class="st0" d="M367.3,218.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C369.4,217.8,368.5,218.8,367.3,218.8z"/>
	</g>
</g>
</svg><div class="row" style="padding-top:10px;">
				<div class="col-xs-2 col-sm-3">
					<p class="label">Orientation:</p>
					<p class="label">Example:</p>
				</div>
				<div class="col-xs-10 col-sm-9" style="text-align: right;">
					<p class="">Portrait/Square</p>
					<p class="">Standard CDP Navy on transparent Base</p>
				</div>
			</div></div>
		
		
		<div class="col-xs-12 col-md-8 gradient"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1000 480" style="enable-background:new 0 0 100 400;" xml:space="preserve">
<style type="text/css">
	.basecolor{fill:#FFFFFF;}
	.st1{font-family:'Montserrat-Regular';}
	.st2{font-size:113.6233px;}
	.st3{font-family:'Montserrat-Bold';}
</style>
<g>
	<text transform="matrix(1 0 0 1 440.8372 286.1818)"><tspan x="0" y="0" class="basecolor st1 st2">cd</tspan><tspan x="141.6" y="0" class="basecolor st3 st2">pool</tspan></text>
	<g>
		<path class="basecolor" d="M187.7,318.1h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C189.8,317.2,188.8,318.1,187.7,318.1z"/>
		<path class="basecolor" d="M187.7,297.7h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C189.8,296.8,188.8,297.7,187.7,297.7z"/>
		<path class="basecolor" d="M222.6,318.1h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C224.6,317.2,223.7,318.1,222.6,318.1z"/>
		<path class="basecolor" d="M222.6,297.7h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C224.6,296.8,223.7,297.7,222.6,297.7z"/>
		<path class="basecolor" d="M222.6,277.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C224.6,276.3,223.7,277.3,222.6,277.3z"/>
		<path class="basecolor" d="M222.6,256.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C224.6,255.9,223.7,256.8,222.6,256.8z"/>
		<path class="basecolor" d="M222.6,236.4h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C224.6,235.5,223.7,236.4,222.6,236.4z"/>
		<path class="basecolor" d="M257.5,318.1H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,317.2,258.6,318.1,257.5,318.1z"/>
		<path class="basecolor" d="M257.5,297.7H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,296.8,258.6,297.7,257.5,297.7z"/>
		<path class="basecolor" d="M257.5,277.3H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,276.3,258.6,277.3,257.5,277.3z"/>
		<path class="basecolor" d="M257.5,256.8H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,255.9,258.6,256.8,257.5,256.8z"/>
		<path class="basecolor" d="M257.5,236.4H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,235.5,258.6,236.4,257.5,236.4z"/>
		<path class="basecolor" d="M257.5,216H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,215,258.6,216,257.5,216z"/>
		<path class="basecolor" d="M257.5,195.5H232c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C259.5,194.6,258.6,195.5,257.5,195.5z"/>
		<path class="basecolor" d="M292.3,318.1h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C294.4,317.2,293.5,318.1,292.3,318.1z"/>
		<path class="basecolor" d="M292.3,297.7h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C294.4,296.8,293.5,297.7,292.3,297.7z"/>
		<path class="basecolor" d="M292.3,277.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C294.4,276.3,293.5,277.3,292.3,277.3z"/>
		<path class="basecolor" d="M292.3,256.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C294.4,255.9,293.5,256.8,292.3,256.8z"/>
		<path class="basecolor" d="M292.3,236.4h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C294.4,235.5,293.5,236.4,292.3,236.4z"/>
		<path class="basecolor" d="M292.3,216h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C294.4,215,293.5,216,292.3,216z"/>
		<path class="basecolor" d="M327.2,318.1h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C329.3,317.2,328.3,318.1,327.2,318.1z"/>
		<path class="basecolor" d="M327.2,297.7h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C329.3,296.8,328.3,297.7,327.2,297.7z"/>
		<path class="basecolor" d="M327.2,277.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C329.3,276.3,328.3,277.3,327.2,277.3z"/>
		<path class="basecolor" d="M327.2,256.8h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C329.3,255.9,328.3,256.8,327.2,256.8z"/>
		<path class="basecolor" d="M362.1,318.1h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C364.1,317.2,363.2,318.1,362.1,318.1z"/>
		<path class="basecolor" d="M362.1,297.7h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C364.1,296.8,363.2,297.7,362.1,297.7z"/>
		<path class="basecolor" d="M362.1,277.3h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1h25.4c1.1,0,2.1,0.9,2.1,2.1v12.8
			C364.1,276.3,363.2,277.3,362.1,277.3z"/>
		<path class="basecolor" d="M397,318.1h-25.4c-1.1,0-2.1-0.9-2.1-2.1v-12.8c0-1.1,0.9-2.1,2.1-2.1H397c1.1,0,2.1,0.9,2.1,2.1v12.8
			C399,317.2,398.1,318.1,397,318.1z"/>
	</g>
</g>
</svg>
			<div class="row" style="padding-top:10px;">
				<div class="col-xs-2 col-sm-3">
					<p class="label">Orientation:</p>
					<p class="label">Example:</p>
				</div>
				<div class="col-xs-10 col-sm-9" style="text-align: right;">
					<p class="">Landscape/Widescreen</p>
					<p class=""><strong>Club Theme:</strong> linear-gradient(25deg,CDP Navy (Dark Tint) 0%, Prime Alt 60%);</p>
					<p class=""><strong>Mobile Theme:</strong> linear-gradient(25deg,CDP Navy 0%, CDP Navy (Light Tint) 60%);</p>
				</div>
			</div>
		</div>
	</div>
	<!-- Colors -->
	<h1 class="section-header">Colors</h1>
	<h2 class="section-subheader">Primary Colors</h2>
	<div class="row">
		<div class="col-xs-6 col-md-3 color color-primary">
			<div class="swatch"></div>

			<div class="row">
				<div class="col-xs-2 col-sm-3">
					<p class="label">Name:</p>
					<p class="label">RGB:</p>
					<p class="label">HSL:</p>
				</div>
				<div class="col-xs-10 col-sm-9">
					<p class="label label-color label-name"></p>
					<p class="label label-color label-rgb"></p>
					<p class="label label-color label-hsl"></p>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-md-3 color color-secondary">
			<div class="swatch"></div>

			<div class="row">
				<div class="col-xs-2 col-sm-3">
					<p class="label">Name:</p>
					<p class="label">RGB:</p>
					<p class="label">HSL:</p>
				</div>
				<div class="col-xs-10 col-sm-9">
					<p class="label label-color label-name"></p>
					<p class="label label-color label-rgb"></p>
					<p class="label label-color label-hsl"></p>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-md-3 color color-tertiary">
			<div class="swatch"></div>

			<div class="row">
				<div class="col-xs-2 col-sm-3">
					<p class="label">Name:</p>
					<p class="label">RGB:</p>
					<p class="label">HSL:</p>
				</div>
				<div class="col-xs-10 col-sm-9">
					<p class="label label-color label-name"></p>
					<p class="label label-color label-rgb"></p>
					<p class="label label-color label-hsl"></p>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-md-3 color color-accent">
			<div class="swatch"></div>

			<div class="row">
				<div class="col-xs-2 col-sm-3">
					<p class="label">Name:</p>
					<p class="label">RGB:</p>
					<p class="label">HSL:</p>
				</div>
				<div class="col-xs-10 col-sm-9">
					<p class="label label-color label-name"></p>
					<p class="label label-color label-rgb"></p>
					<p class="label label-color label-hsl"></p>
				</div>
			</div>
		</div>
	</div>

	<h2 class="section-subheader">Tints & Tones</h2>
	<p class="lead">
		These colors are lighter and darker variations of our main brand
		colors. These are especially helpful for hover states, illustrations,
		and other small variations.
	</p>

	<div class="row">
		<div class="col-sm-6 col-md-3 color-variations color-primary">
			<div class="row no-gutters">
				<div class="col-xs-4">
					<div class="swatch swatch-light"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-base"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-dark"></div>
				</div>
			</div>
		</div>        
		<div class="col-sm-6 col-md-3 color-variations color-secondary">
			<div class="row no-gutters">
				<div class="col-xs-4">
					<div class="swatch swatch-light"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-base"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-dark"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 color-variations color-tertiary">
			<div class="row no-gutters">
				<div class="col-xs-4">
					<div class="swatch swatch-light"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-base"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-dark"></div>
				</div>
			</div>
		</div>
		<div class="col-sm-6 col-md-3 color-variations color-accent">
			<div class="row no-gutters">
				<div class="col-xs-4">
					<div class="swatch swatch-light"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-base"></div>
				</div>
				<div class="col-xs-4">
					<div class="swatch swatch-dark"></div>
				</div>
			</div>
		</div>
	</div>

	<h2 class="section-subheader">Generated Colors</h2>
	<p class="lead">
		These colors are derived from combinations with other brand colors.
		These may be used as accents in illustrations and other design work,
		though they should not overpower our main brand colors. The official
		brand colors are displayed first for easy reference.
	</p>
	<div class="row">
		<div class="col-sm-6 col-md-3 mixed-colors color-primary">
			<h3 class="subheader"></h3>                
			<div class="swatch"></div>

			<div class="mixed-with-primary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-secondary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-tertiary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
			<div class="mixed-with-accent">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
		</div>
		<div class="col-sm-6 col-md-3 mixed-colors color-secondary">
			<h3 class="subheader"></h3>                
			<div class="swatch"></div>

			<div class="mixed-with-primary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-secondary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-tertiary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
			<div class="mixed-with-accent">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
		</div>
		<div class="col-sm-6 col-md-3 mixed-colors color-tertiary">
			<h3 class="subheader"></h3>                
			<div class="swatch"></div>

			<div class="mixed-with-primary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-secondary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-tertiary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
			<div class="mixed-with-accent">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
		</div>
		<div class="col-sm-6 col-md-3 mixed-colors color-accent">
			<h3 class="subheader"></h3>                
			<div class="swatch"></div>

			<div class="mixed-with-primary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-secondary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>		        
			<div class="mixed-with-tertiary">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
			<div class="mixed-with-accent">
				<h4 class="subheader"></h4>
				<div class="swatch swatch-small"></div>		            
			</div>
		</div>
	</div>

	<!-- Typography -->

	<h1 class="section-header" id="typography">Typography</h1>

	<p class="lead">
		<strong class="primary-font"></strong> is used as our primary reading typeface while our
		<strong class="accent-font"></strong> logo typeface is used (without logo styling) as an accent for headings
		and other special purposes.
	</p>

	<div class="type-specimen primary-font">
		<h2></h2>
		<h3>
			<span>Aa</span>
			<span>Bb</span>
			<span>Cc</span>
			<span>Dd</span>
			<span>012345679</span>
		</h3>
	</div>

	<div class="type-specimen accent-font">
		<h2></h2>
		<h3>
			<span>Aa</span>
			<span>Bb</span>
			<span>Cc</span>
			<span>Dd</span>
			<span>012345679</span>
		</h3>
	</div>


	<h2 class="section-subheader">Heading Samples</h2>

	<div class="heading-samples">
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">H1</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<h1>Where DJs
Get Their
Music</h1>
			</div>
		</div>
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">H2</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<h2>Amazingly few discotheques provide jukeboxes</h2>
			</div>
		</div>
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">H3</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<h3>A wizard’s job is to vex chumps quickly in fog</h3>
			</div>
		</div>
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">H4</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<h4>He told us a very exciting adventure story.</h4>
			</div>
		</div>
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">H5</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<h5>Microcomputer strains beneath each fair fossil.</h5>
			</div>
		</div>
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">H6</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<h6>The ninja defeats the wizard's shadow.</h6>
			</div>
		</div>
		<div class="row row-eq-height">
			<div class="col-xs-2 col-md-1">
				<p class="label">p</p>
			</div>
			<div class="col-xs-10 col-md-11">
				<p>By Jove, my quick study of lexicography won a prize! Painful zombies quickly watch a jinxed graveyard. Grumpy wizards make a toxic brew for the jovial queen. A quick movement of the enemy will jeopardize six gunboats. Jackie will budget for the most expensive zoology equipment. Jim quickly realized that the beautiful gowns are expensive, then a cop quizzed Mick Jagger’s ex-wives briefly.</p>
			</div>
		</div>		    
	</div>
</div>
            
          
!
            
              // ===============================
//   SCSS Variables 
// ===============================
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600');
// Main Color Variables

$neutral-color: #666;

$primary-color: #184573;
$primary-color-name: 'CDP Navy';

$secondary-color: #fff;
$secondary-color-name: 'Base White';

$tertiary-color: #8988bb;
$tertiary-color-name: 'Utility';

$accent-color: #331d3c;
$accent-color-name: 'Prime Alt';

// Variation Amounts
// Change these to affect the color variations

$lighten-amount: 8;
$light-saturate-amount: 10;

$darken-amount: 10;
$dark-saturate-amount: 20;

// How strong should the added color be in the Mixed Colors?
// Closer to 0% = closer to original base color

$mix-weight: 65%;

// Color Variable Maps

$colors: (
    primary: $primary-color,
    secondary: $secondary-color,
    tertiary: $tertiary-color,
    accent: $accent-color
);

$color-names: (
    primary: $primary-color-name,
    secondary: $secondary-color-name,
    tertiary: $tertiary-color-name,
    accent: $accent-color-name
);


// Use the variables from above and add them to the page

// In this function, $color-type and $color-value are just pretty names that refer to
// where those values are in the "map" above. $color-type refers to the stuff before
// the colon and $color-value refers to the stuff after (which point back to other Sass
// variables). $colors is the name of the map, though: we define a map elsewhere and then
// call it here by using the same name.

@each $color-type, $color-value in $colors {
    // Get the RGB values
    .color-#{$color-type} .label-rgb:before {
        content: '#{red($color-value)} / #{green($color-value)} / #{blue($color-value)}';
    }
    
    // Get the HSL values and round them
    .color-#{$color-type} .label-hsl:before {
        content: '#{round(hue($color-value))} / #{round(saturation($color-value))} / #{round(lightness($color-value))}';
    }
    
    // Set the swatch color
    .color-#{$color-type} .swatch {
        background: $color-value;
    }
    
    // Set the swatch color for the Light palette
    .color-#{$color-type} .swatch-light {
        background: lighten(saturate($color-value, $light-saturate-amount), $lighten-amount);
    }

    // Set the swatch color for the Dark palette
    .color-#{$color-type} .swatch-dark {
        background: darken(saturate($color-value, $dark-saturate-amount), $darken-amount);
    }
    
    .color-primary .mixed-with-#{$color-type} .swatch {
        background: mix($color-value, $primary-color, $mix-weight);
    }
    
    .color-secondary .mixed-with-#{$color-type} .swatch {
        background: mix($color-value, $secondary-color, $mix-weight);
    }
    
    .color-tertiary .mixed-with-#{$color-type} .swatch {
        background: mix($color-value, $tertiary-color, $mix-weight);
    }
    
    .color-accent .mixed-with-#{$color-type} .swatch {
        background: mix($color-value, $accent-color, $mix-weight);
    }
}

@each $color-type, $color-name-value in $color-names {
    // Get the color's name
    .color-#{$color-type} .label-name:before,
    .color-#{$color-type} h3.subheader:before {
        content: '#{$color-name-value}';
    }
}

// Main Typography Variables
// Because we are displaying this value on page, there are no quotes around font names

$primary-font: Open Sans;
$accent-font: Montserrat;

// Get the font names
// The quotes around the font names are there in case the font name has multiple words

strong.primary-font:before,
.type-specimen.primary-font h2:before {
    content: '#{$primary-font}';
}

strong.accent-font:before,
.type-specimen.accent-font h2:before{
    content: '#{$accent-font}';
}

// Font Stacks
// You may need to change your stack based on the fonts you choose

$primary-font-stack: '#{$primary-font}', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$accent-font-stack: '#{$accent-font}', serif;

// ===============================
//   Page Style 
// ===============================

body {
    padding-bottom: 30px;
    font-family: $primary-font-stack;
	background-color: #ddd;
}

.title {
	font-family: 'Montserrat', sans-serif;
	font-weight:500;
}

.title2 {
	font-family: 'Montserrat', sans-serif;
	font-weight:600!important;
}

h1.section-header {
    font-size: 3rem;
	font-family: 'Montserrat', sans-serif;
	font-weight:600!important;
    margin-top: 4rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid $neutral-color;
	
	
}

h2.section-subheader {
	font-family: 'Montserrat', sans-serif;
	font-weight:500!important;
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 5rem;
    
    h1 + & {
        margin-top: 2rem;
		
    }
}

.navbar-toggle .icon-bar {
    font-family: Arial, sans-serif;
    margin-bottom: 5px;
}

// ===============================
//   Style Guide Elements 
// ===============================

// Flexbox CSS to equalize column height

.row-eq-height {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display:         flex;
    
    & > div {
        position: relative;
        min-height: 30px;
    }
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
    
    & > [class^="col-"],
    & > [class*=" col-"] {
          padding-right: 0;
          padding-left: 0;
    }
}

// Side labels; a lot of Bootstrap overrides

.label {
    color: #000;
    white-space: normal;
    text-align: left;
    font-size: 1.5rem;
    border-radius: 0;
    display: block;
    padding: 0;
    
    &:empty {
        display: block;
    }
    
    .row-eq-height & {        
        vertical-align: middle;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .color & {
        color: #000;
        
        &.label-color {
            text-align: right;
            font-weight: normal;
        }
    }
}

// ===============================
//   Color Section
// ===============================

.swatch {
    width: 100%;
    height: 150px;
    margin-bottom: 2rem;
    
    &.swatch-small {
        height: 50px;
    }
}

.mixed-with-primary h4:before {
    content: 'Mixed with #{$mix-weight} #{$primary-color-name}';
}

.mixed-with-secondary h4:before {
    content: 'Mixed with #{$mix-weight} #{$secondary-color-name}';
}

.mixed-with-tertiary h4:before {
    content: 'Mixed with #{$mix-weight} #{$tertiary-color-name}';
}

.mixed-with-accent h4:before {
    content: 'Mixed with #{$mix-weight} #{$accent-color-name}';
}

// ===============================
//   Typography Section
// ===============================

.type-specimen {
    h2 {
        font-size: 7rem;
    }

    h3 {
        font-size: 5rem;
    }

    span:nth-of-type(1),
    span:nth-of-type(3){
        font-weight: bold;
    }

    span:nth-of-type(3),
    span:nth-of-type(4){
        font-style: italic;
    }
    
    span:nth-of-type(1) {
        color: $primary-color;
    }
    
    span:nth-of-type(2) {
        color: $secondary-color;
    }
    
    span:nth-of-type(3) {
        color: $tertiary-color;
    }
    
    span:nth-of-type(4) {
        color: $accent-color;
    }
    
    span:nth-of-type(5) {
        color: $neutral-color;
    }
    
    & ~ & {
        margin-top: 5rem;
    }
    
    &.primary-font {
        font-family: $primary-font-stack;
    }
    
    &.accent-font {
        font-family: $accent-font-stack;
    }
}

// Customize based on your own personal style

.heading-samples {
    h1 {
        font-family: $accent-font-stack;
        font-size: 5rem;
        color: white;
		text-shadow: 2px 2px rgba(60,60,60,0.7);
		background:$primary-color, 0.5;
		font-weight: 700;
    }
    
    h2, h3, h6 {
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    h3 {
        color: darken($tertiary-color, $darken-amount);
        font-family: $accent-font-stack;
        font-size: 2.75rem;
    }
    
    h4 {
        font-weight: bold;
        color: mix($accent-color, $tertiary-color, $mix-weight);
    }
    
    h5 {
        font-weight: bold;
    }
    
    p {
		font-family: $primary-font-stack;
        line-height: 160%;
		color:#000;
    }
	svg{background-color:white;}
	
	
	
}

.st0{fill:#144573;}
	.st1 {
		font-family:'Montserrat'!important;
		font-weight:500;
}
	.st2{font-size:113.6233px;}
	.st3{font-family:'Montserrat'!important;
		font-weight:600;}

.gradient{
	height:360px;
	background: linear-gradient(25deg, $primary-color 0%, $accent-color 50%, #062c52 25%, #16599e 75%);
	animation: Gradient 12s ease infinite;
	background-size: 400% 400%;
}



@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console