html { font-size: 62.5%; }

.list-unset { list-style: none; padding-left: 0; margin: 0; }

.pane { background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(43, 59, 93, 0.3); }

.pane > h1:first-child { margin-top: .67em; }

.pane-padding { padding: 2em; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proxima_nova_light-webfont.eot"); src: url("../fonts/proxima-nova/proxima_nova_light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proxima_nova_light-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proxima_nova_light-webfont.woff") format("woff"), url("../fonts/proxima-nova/proxima_nova_light-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proxima_nova_light-webfont.svg#proxima_novalight") format("svg"); font-weight: 300; font-style: normal; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-lightitalic-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-lightitalic-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-lightitalic-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-lightitalic-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-lightitalic-webfont.svg#proxima_novalight_italic") format("svg"); font-weight: 300; font-style: italic; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-reg-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-reg-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-reg-webfont.svg#proxima_nova_rgregular") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-regitalic-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-regitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-regitalic-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-regitalic-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-regitalic-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-regitalic-webfont.svg#proxima_novaregular_italic") format("svg"); font-weight: normal; font-style: italic; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-sbold-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-sbold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-sbold-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-sbold-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-sbold-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-sbold-webfont.svg#proxima_novasemibold") format("svg"); font-weight: 600; font-style: normal; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-sbolditalic-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-sbolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-sbolditalic-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-sbolditalic-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-sbolditalic-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-sbolditalic-webfont.svg#proxima_novasemibold_italic") format("svg"); font-weight: 600; font-style: italic; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-bold-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-bold-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-bold-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-bold-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-bold-webfont.svg#proxima_nova_rgbold") format("svg"); font-weight: bold; font-style: normal; }

@font-face { font-family: 'Proxima Nova'; src: url("../fonts/proxima-nova/proximanova-boldit-webfont.eot"); src: url("../fonts/proxima-nova/proximanova-boldit-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proxima-nova/proximanova-boldit-webfont.woff2") format("woff2"), url("../fonts/proxima-nova/proximanova-boldit-webfont.woff") format("woff"), url("../fonts/proxima-nova/proximanova-boldit-webfont.ttf") format("truetype"), url("../fonts/proxima-nova/proximanova-boldit-webfont.svg#proxima_nova_rgbold_italic") format("svg"); font-weight: bold; font-style: italic; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-l-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-l-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-l-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-l-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-l-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-l-webfont.svg#ubuntulight") format("svg"); font-weight: 300; font-style: normal; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-li-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-li-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-li-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-li-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-li-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-li-webfont.svg#ubuntulight_italic") format("svg"); font-weight: 300; font-style: italic; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-r-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-r-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-r-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-r-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-r-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-r-webfont.svg#ubunturegular") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-ri-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-ri-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-ri-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-ri-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-ri-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-ri-webfont.svg#ubuntuitalic") format("svg"); font-weight: normal; font-style: italic; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-m-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-m-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-m-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-m-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-m-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-m-webfont.svg#ubuntumedium") format("svg"); font-weight: 500; font-style: normal; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-mi-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-mi-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-mi-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-mi-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-mi-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-mi-webfont.svg#ubuntumedium_italic") format("svg"); font-weight: 500; font-style: italic; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-b-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-b-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-b-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-b-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-b-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-b-webfont.svg#ubuntubold") format("svg"); font-weight: bold; font-style: normal; }

@font-face { font-family: 'Ubuntu'; src: url("../fonts/ubuntu/ubuntu-bi-webfont.eot"); src: url("../fonts/ubuntu/ubuntu-bi-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu/ubuntu-bi-webfont.woff2") format("woff2"), url("../fonts/ubuntu/ubuntu-bi-webfont.woff") format("woff"), url("../fonts/ubuntu/ubuntu-bi-webfont.ttf") format("truetype"), url("../fonts/ubuntu/ubuntu-bi-webfont.svg#ubuntubold_italic") format("svg"); font-weight: bold; font-style: italic; }

/*
Buttons

Buttons, buttons, everywhere

Styleguide buttons
*/
/*
Regular buttons

You know, a button.

.active            - Active detail
.btn-primary				- Primary
.btn-warning				- Warning
.btn-disabled			- Disabled
.btn-bright				- Bright

Markup:
<a class="btn {{modifier_class}}">Button text</a>

Styleguide buttons.1
*/
.btn, form.form input.btn { background: #f8f8f8; border: none; border-radius: 3px; color: #3675b4; display: inline-block; font-size: .9em; font-weight: bold; line-height: 1.4; padding: .57em .9em; text-align: center; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 #d2d2d2, inset 0 -1px 0 #d2d2d2, inset 1px 0 0 #d2d2d2, inset -1px 0 0 #d2d2d2, inset 0 1px 2px rgba(255, 255, 255, 0.5); cursor: pointer; transition: color .2s linear; }

.btn:hover, form.form input.btn:hover { background: white; color: #3068a0; text-decoration: none; }

.btn:focus, form.form input.btn:focus { color: #1e4266; outline: none; }

.btn.active, .btn:active, form.form input.btn.active, form.form input.btn:active { background: whitesmoke; color: #3068a0; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3); position: relative; top: 1px; outline: none; }

.no-boxshadow .btn, .no-boxshadow form.form input.btn { border: 1px solid #d2d2d2; }

form.form input.btn { margin-top: 2px; }

/*
Inline buttons!

It's inline!

.btn-warning			- Warning
.btn-disabled			- Disabled

Markup:
<a class="inline-btn {{modifier_class}}">Inline button</a>

Styleguide buttons.2
*/
.inline-btn { color: #3675b4; cursor: pointer; background: none; border: 0; font-size: .8em; font-weight: normal; padding: 0; text-decoration: none; outline: none; transition: color .2s linear; }

.inline-btn i { margin: 0 5px 0 0; }

.inline-btn:hover { color: #3675b4; text-decoration: underline; }

.inline-btn:hover i { text-decoration: none; }

.inline-btn::-moz-focus-inner { border: 0; padding: 0; }

button.btn, button.inline-btn { margin: 0; }

.btn.btn-disabled, .btn.btn-disabled:hover, .btn.btn-disabled:active, .btn[disabled], form.form input.btn.btn-disabled, form.form input.btn.btn-disabled:hover, form.form input.btn.btn-disabled:active, form.form input.btn[disabled] { color: #7f7f7f; cursor: not-allowed; opacity: .65; box-shadow: none; pointer-events: none; position: static; }

.inline-btn.btn-disabled, .inline-btn.btn-disabled:hover, .inline-btn.btn-disabled:active, .inline-btn[disabled] { color: #b8b8b8; cursor: not-allowed; opacity: .65; pointer-events: none; }

.btn-large { font-size: 1.15em; border-radius: 5px; }

.btn-large [class^="icon-"] { margin-top: 1px; }

.btn-small { font-size: .7em; padding: .5em .7em; }

.btn-small [class^="icon-"] { margin-top: -1px; }

button.btn, input[type="submit"].btn { *padding-top: 2px; *padding-bottom: 2px; }

button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0; }

button.btn.large, input[type="submit"].btn.large { *padding-top: 7px; *padding-bottom: 7px; }

button.btn.small, input[type="submit"].btn.small { *padding-top: 3px; *padding-bottom: 3px; }

.btn-simple { background: #3675b4; border: none; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); color: #fff; cursor: pointer; font-size: 1em; margin: 0; outline: none; padding: .75em 1.3em; text-decoration: none; transition: background .1s; }

.btn-simple:hover { background: #1f75cb; color: #fff; }

.btn-simple:active { background: #2a5c8d; box-shadow: none; color: #fff; transform: translate(0, 1px); }

.btn-simple.btn-disabled, .btn-simple.btn-disabled:hover, .btn-simple.btn-disabled:active, .btn-simple[disabled] { background: #7f7f7f; cursor: not-allowed; opacity: .65; box-shadow: none; pointer-events: none; position: static; }

.btn-green { background: #00a46c; }

.btn-green:hover { background: #00be7d; }

.btn-green:active { background: #008b5b; }

.btn-inline { color: #3675b4; cursor: pointer; background: none; border: 0; padding: 0; text-decoration: underline; outline: none; transition: color .2s linear; }

.btn-inline:hover { color: #2a5c8d; }

.btn-inline.btn-dark-blue { color: #3675b4; }

.btn-inline.btn-dark-blue:hover { color: #2a5c8d; }

.btn-inline.btn-no-underline { text-decoration: none; }

.btn-simple.btn-fat { padding: 1em 3em; }

.btn-simple.btn-small { padding: .5em; font-size: .9em; }

.btn-warning, form.form input.btn-warning { color: #e74141; }

.btn-warning.btn-disabled:hover, form.form input.btn-warning.btn-disabled:hover { color: #e74141; }

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning:focus, form.form input.btn-warning:hover, form.form input.btn-warning:active, form.form input.btn-warning.active, form.form input.btn-warning:focus { color: #e42a2a; }

.btn-bright { color: #3675b4; }

.btn-bright:hover, .btn-bright:active, .btn-bright.active, .btn-bright:focus { color: #3068a0; }

.btn-bright.btn-warning { color: #e74141; }

.btn-bright.btn-warning:hover, .btn-bright.btn-warning:active, .btn-bright.btn-warning.active, .btn-bright.btn-warning:focus { color: #e42a2a; }

.btn.btn-disabled, .btn.btn-disabled:hover, .btn.btn-disabled:active, .btn[disabled], form.form input.btn.btn-disabled, form.form input.btn.btn-disabled:hover, form.form input.btn.btn-disabled:active, form.form input.btn[disabled] { background-color: #e6e6e6; cursor: not-allowed; }

.btn.btn-primary, form.form input.btn.btn-primary { background: #3675b4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 #2a5c8d, inset 0 -1px 0 #2a5c8d, inset 1px 0 0 #2a5c8d, inset -1px 0 0 #2a5c8d, inset 0 1px 2px rgba(255, 255, 255, 0.5); color: #f9f9f9; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); }

.btn.btn-primary:hover, form.form input.btn.btn-primary:hover { background: #3282d2; }

.btn.btn-primary:active, .btn.btn-primary.active, form.form input.btn.btn-primary:active, form.form input.btn.btn-primary.active { background: #2668ab; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3); }

body { background: white; color: black; font: 18px "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; }

.page { margin-top: 10em; }

h1 { font-size: 2em; margin: 0; }

.button-row { font-size: .75em; margin-top: 3em; }

.logo { background-image: url(https://i2.wp.com/v3.graffitisuite.com/wp-content/uploads/2015/09/logo_full1-e1443552114866.png?zoom=2&w=800&ssl=1); background-size: contain; background-repeat: no-repeat; display: block; height: 75px; width: 163px; margin: 5em auto 0; overflow: hidden; text-indent: 100%; white-space: nowrap; }

a { color: #3f96bd; }