UNPKG

renderkit

Version:

Definitely the light way for start new front-end web projects.

2,456 lines (2,161 loc) 45.2 kB
/*! * RenderKit * Version 0.9.6-beta * github.com/matteobertoldo/renderkit * Licensed under MIT Open Source */ @import url("https://fonts.googleapis.com/css?family=Work+Sans:400,700|Josefin+Sans:400,400i,700|Abril+Fatface"); html { font-family: sans-serif; font-size: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; } *, ::before, ::after { -webkit-box-sizing: inherit; box-sizing: inherit; } body { font-family: "Work Sans", sans-serif; font-weight: normal; background-color: #ffffff; color: #666666; line-height: 1.15; margin: 0; } article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display: block; } abbr, blockquote, dd, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, li, ol, p, pre, ul { margin: 0; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } template, [hidden] { display: none; } a { background-color: transparent; color: #61afef; text-decoration: underline; } [data-whatinput="mouse"] a:focus, [data-whatinput="touch"] a:focus { outline: 0; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-family: inherit; font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #fff000; color: #000000; } q::before { content: '\201C'; } q::after { content: '\201D'; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img, video { max-width: 100%; height: auto; vertical-align: middle; } img, iframe { border: 0; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } pre { overflow: auto; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } svg { display: inline-block; vertical-align: middle; position: relative; top: -0.063em; width: 100%; height: 100%; fill: currentColor; } svg:not(:root) { overflow: hidden; } body, button, input, select, textarea { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: 'liga', 'kern'; font-feature-settings: 'liga', 'kern'; direction: ltr; } button, input, select, textarea { font-family: inherit; font-size: 100%; color: inherit; line-height: 1.15; margin: 0; } [data-whatinput="mouse"] button:focus, [data-whatinput="touch"] button:focus, [data-whatinput="mouse"] input:focus, [data-whatinput="touch"] input:focus, [data-whatinput="mouse"] select:focus, [data-whatinput="touch"] select:focus, [data-whatinput="mouse"] textarea:focus, [data-whatinput="touch"] textarea:focus { outline: 0; } button, input { overflow: visible; } select, button { text-transform: none; cursor: pointer; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.313em 0.625em 0.750em; } legend { display: table; max-width: 100%; white-space: normal; color: inherit; padding: 0; } input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid lightgray; border-radius: 0; } input[type="checkbox"], input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute !important; width: 1px; height: 1px; border: 0; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; margin: -1px; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { outline-offset: -2px; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; border: 1px solid lightgray; background-color: white; border-radius: 0; } input[type="reset"], input[type="submit"] { white-space: normal; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #666666; } select::-ms-expand { display: none; } select::-ms-value { color: currentColor; } textarea { overflow: auto; } table { border-collapse: collapse; border-spacing: 0; } @-ms-viewport { width: device-width; } @media print { *, ::after, ::before { text-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ''; } abbr[title]:after { content: " (" attr(title) ")"; } blockquote, pre, table { page-break-inside: avoid; } thead { display: table-header-group; } img, tr { page-break-inside: avoid; } img { max-width: 100%; } h2, h3, p { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .show-for-print { display: block !important; } .hide-for-print { display: none !important; } table.show-for-print { display: table !important; } thead.show-for-print { display: table-header-group !important; } tbody.show-for-print { display: table-row-group !important; } tr.show-for-print { display: table-row !important; } td.show-for-print { display: table-cell !important; } th.show-for-print { display: table-cell !important; } @page { margin: 0.5cm; } } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: inherit; font-weight: bold; text-transform: uppercase; color: #666666; } h1, .h1 { font-size: 1.5rem; line-height: 1.4; letter-spacing: normal; margin-top: 0; margin-bottom: 16px; } h2, .h2 { font-size: 1.25rem; line-height: 1.4; letter-spacing: normal; margin-top: 0; margin-bottom: 16px; } h3, .h3 { font-size: 1.1875rem; line-height: 1.4; letter-spacing: normal; margin-top: 0; margin-bottom: 16px; } h4, .h4 { font-size: 1.125rem; line-height: 1.4; letter-spacing: normal; margin-top: 0; margin-bottom: 16px; } h5, .h5 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: normal; margin-top: 0; margin-bottom: 16px; } h6, .h6 { font-size: 1rem; line-height: 1.4; letter-spacing: normal; margin-top: 0; margin-bottom: 16px; } @media print, only screen and (min-width: 641px) { h1, .h1 { font-size: 3rem; } h2, .h2 { font-size: 2.5rem; } h3, .h3 { font-size: 1.9375rem; } h4, .h4 { font-size: 1.5625rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1rem; } } p { font-family: "Josefin Sans", sans-serif; font-weight: normal; line-height: 1.4; letter-spacing: normal; text-transform: none; color: #666666; margin: 0; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } @media print, only screen and (min-width: 641px) { .medium-text-left { text-align: left; } .medium-text-right { text-align: right; } .medium-text-center { text-align: center; } .medium-text-justify { text-align: justify; } } @media print, only screen and (min-width: 1025px) { .large-text-left { text-align: left; } .large-text-right { text-align: right; } .large-text-center { text-align: center; } .large-text-justify { text-align: justify; } } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-ellipsis { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .invisible { visibility: hidden !important; } .hide { display: none !important; } .visuallyhidden, .show-for-sr, .show-on-focus { position: absolute !important; width: 1px; height: 1px; border: 0; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; margin: -1px; padding: 0; } .visuallyhidden-off, .show-on-focus:active, .show-on-focus:focus { position: static !important; width: auto; height: auto; border: initial; white-space: inherit; clip: none; overflow: inherit; margin: 0; } .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .no-touch { -webkit-touch-callout: none; -ms-touch-action: none; touch-action: none; } .no-text { font: 0/0 a; text-indent: 100%; white-space: nowrap; color: transparent; overflow: hidden; } .no-bullet { list-style-type: none; margin: 0; } .no-overflow { overflow: hidden; } .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-grab { cursor: -webkit-grab; cursor: grab; } .cursor-grabbing { cursor: -webkit-grabbing; cursor: grabbing; } @media only screen and (max-width: 640px) { .hide-for-small-only { display: none !important; } } @media only screen and (min-width: 641px) { .show-for-small-only { display: none !important; } } @media print, only screen and (min-width: 641px) { .hide-for-medium { display: none !important; } } @media only screen and (max-width: 640px) { .show-for-medium { display: none !important; } } @media only screen and (min-width: 641px) and (max-width: 1024px) { .hide-for-medium-only { display: none !important; } } @media only screen and (max-width: 640px), only screen and (min-width: 1025px) { .show-for-medium-only { display: none !important; } } @media print, only screen and (min-width: 1025px) { .hide-for-large { display: none !important; } } @media only screen and (max-width: 1024px) { .show-for-large { display: none !important; } } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .hide-for-large-only { display: none !important; } } @media only screen and (max-width: 1024px), only screen and (min-width: 1201px) { .show-for-large-only { display: none !important; } } .show-for-landscape, .hide-for-portrait { display: block !important; } @media only screen and (orientation: landscape) { .show-for-landscape, .hide-for-portrait { display: block !important; } } @media only screen and (orientation: portrait) { .show-for-landscape, .hide-for-portrait { display: none !important; } } .hide-for-landscape, .show-for-portrait { display: none; } @media only screen and (orientation: landscape) { .hide-for-landscape, .show-for-portrait { display: none !important; } } @media only screen and (orientation: portrait) { .hide-for-landscape, .show-for-portrait { display: block !important; } } .float-left { float: left; } .float-right { float: right; } .float-center { display: block; margin-left: auto; margin-right: auto; } .clearfix::before, .clearfix::after { content: ''; display: table; } .clearfix::after { clear: both; } .clear-both { clear: both; } .row { max-width: 1200px; margin-left: auto; margin-right: auto; } .row::before, .row::after { content: ''; display: table; } .row::after { clear: both; } .row.collapse > .column, .row.collapse > .columns { padding-right: 0; padding-left: 0; } .row .row { margin-left: -10px; margin-right: -10px; } @media print, only screen and (min-width: 641px) { .row .row { margin-left: -15px; margin-right: -15px; } } @media print, only screen and (min-width: 1025px) { .row .row { margin-left: -15px; margin-right: -15px; } } .row .row.collapse { margin-left: 0; margin-right: 0; } .row.expanded { max-width: none; } .row.expanded .row { margin-left: auto; margin-right: auto; } .row.gutter-small > .column, .row.gutter-small > .columns { padding-right: 10px; padding-left: 10px; } .row.gutter-medium > .column, .row.gutter-medium > .columns { padding-right: 15px; padding-left: 15px; } .column, .columns { width: 100%; float: left; padding-right: 10px; padding-left: 10px; } @media print, only screen and (min-width: 641px) { .column, .columns { padding-right: 15px; padding-left: 15px; } } .column:last-child:not(:first-child), .columns:last-child:not(:first-child) { float: right; } .column.end:last-child:last-child, .end.columns:last-child:last-child { float: left; } .column.row.row, .row.row.columns { float: none; } .row .column.row.row, .row .row.row.columns { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .small-1 { width: 8.33333%; } .small-push-1 { position: relative; left: 8.33333%; } .small-pull-1 { position: relative; left: -8.33333%; } .small-offset-0 { margin-left: 0%; } .small-2 { width: 16.66667%; } .small-push-2 { position: relative; left: 16.66667%; } .small-pull-2 { position: relative; left: -16.66667%; } .small-offset-1 { margin-left: 8.33333%; } .small-3 { width: 25%; } .small-push-3 { position: relative; left: 25%; } .small-pull-3 { position: relative; left: -25%; } .small-offset-2 { margin-left: 16.66667%; } .small-4 { width: 33.33333%; } .small-push-4 { position: relative; left: 33.33333%; } .small-pull-4 { position: relative; left: -33.33333%; } .small-offset-3 { margin-left: 25%; } .small-5 { width: 41.66667%; } .small-push-5 { position: relative; left: 41.66667%; } .small-pull-5 { position: relative; left: -41.66667%; } .small-offset-4 { margin-left: 33.33333%; } .small-6 { width: 50%; } .small-push-6 { position: relative; left: 50%; } .small-pull-6 { position: relative; left: -50%; } .small-offset-5 { margin-left: 41.66667%; } .small-7 { width: 58.33333%; } .small-push-7 { position: relative; left: 58.33333%; } .small-pull-7 { position: relative; left: -58.33333%; } .small-offset-6 { margin-left: 50%; } .small-8 { width: 66.66667%; } .small-push-8 { position: relative; left: 66.66667%; } .small-pull-8 { position: relative; left: -66.66667%; } .small-offset-7 { margin-left: 58.33333%; } .small-9 { width: 75%; } .small-push-9 { position: relative; left: 75%; } .small-pull-9 { position: relative; left: -75%; } .small-offset-8 { margin-left: 66.66667%; } .small-10 { width: 83.33333%; } .small-push-10 { position: relative; left: 83.33333%; } .small-pull-10 { position: relative; left: -83.33333%; } .small-offset-9 { margin-left: 75%; } .small-11 { width: 91.66667%; } .small-push-11 { position: relative; left: 91.66667%; } .small-pull-11 { position: relative; left: -91.66667%; } .small-offset-10 { margin-left: 83.33333%; } .small-12 { width: 100%; } .small-offset-11 { margin-left: 91.66667%; } .small-up-1 > .column, .small-up-1 > .columns { float: left; width: 100%; } .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) { clear: none; } .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) { clear: both; } .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child { float: left; } .small-up-2 > .column, .small-up-2 > .columns { float: left; width: 50%; } .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) { clear: none; } .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) { clear: both; } .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child { float: left; } .small-up-3 > .column, .small-up-3 > .columns { float: left; width: 33.33333%; } .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) { clear: none; } .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) { clear: both; } .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child { float: left; } .small-up-4 > .column, .small-up-4 > .columns { float: left; width: 25%; } .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) { clear: none; } .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) { clear: both; } .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child { float: left; } .small-up-5 > .column, .small-up-5 > .columns { float: left; width: 20%; } .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) { clear: none; } .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) { clear: both; } .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child { float: left; } .small-up-6 > .column, .small-up-6 > .columns { float: left; width: 16.66667%; } .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) { clear: none; } .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) { clear: both; } .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child { float: left; } .small-up-7 > .column, .small-up-7 > .columns { float: left; width: 14.28571%; } .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) { clear: none; } .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) { clear: both; } .small-up-7 > .column:last-child, .small-up-7 > .columns:last-child { float: left; } .small-up-8 > .column, .small-up-8 > .columns { float: left; width: 12.5%; } .small-up-8 > .column:nth-of-type(1n), .small-up-8 > .columns:nth-of-type(1n) { clear: none; } .small-up-8 > .column:nth-of-type(8n+1), .small-up-8 > .columns:nth-of-type(8n+1) { clear: both; } .small-up-8 > .column:last-child, .small-up-8 > .columns:last-child { float: left; } .small-collapse > .column, .small-collapse > .columns { padding-right: 0; padding-left: 0; } .small-collapse .row { margin-left: 0; margin-right: 0; } .expanded.row .small-collapse.row { margin-left: 0; margin-right: 0; } .small-uncollapse > .column, .small-uncollapse > .columns { padding-right: 10px; padding-left: 10px; } .small-centered { margin-left: auto; margin-right: auto; } .small-centered, .small-centered:last-child:not(:first-child) { float: none; clear: both; } .small-centered { margin-left: auto; margin-right: auto; } .small-centered, .small-centered:last-child:not(:first-child) { float: none; clear: both; } .small-uncentered, .small-push-0, .small-pull-0 { position: static; float: left; margin-left: 0; margin-right: 0; } .small-pull-0, .small-push-0, .small-uncentered { position: static; float: left; margin-left: 0; margin-right: 0; } @media print, only screen and (min-width: 641px) { .medium-1 { width: 8.33333%; } .medium-push-1 { position: relative; left: 8.33333%; } .medium-pull-1 { position: relative; left: -8.33333%; } .medium-offset-0 { margin-left: 0%; } .medium-2 { width: 16.66667%; } .medium-push-2 { position: relative; left: 16.66667%; } .medium-pull-2 { position: relative; left: -16.66667%; } .medium-offset-1 { margin-left: 8.33333%; } .medium-3 { width: 25%; } .medium-push-3 { position: relative; left: 25%; } .medium-pull-3 { position: relative; left: -25%; } .medium-offset-2 { margin-left: 16.66667%; } .medium-4 { width: 33.33333%; } .medium-push-4 { position: relative; left: 33.33333%; } .medium-pull-4 { position: relative; left: -33.33333%; } .medium-offset-3 { margin-left: 25%; } .medium-5 { width: 41.66667%; } .medium-push-5 { position: relative; left: 41.66667%; } .medium-pull-5 { position: relative; left: -41.66667%; } .medium-offset-4 { margin-left: 33.33333%; } .medium-6 { width: 50%; } .medium-push-6 { position: relative; left: 50%; } .medium-pull-6 { position: relative; left: -50%; } .medium-offset-5 { margin-left: 41.66667%; } .medium-7 { width: 58.33333%; } .medium-push-7 { position: relative; left: 58.33333%; } .medium-pull-7 { position: relative; left: -58.33333%; } .medium-offset-6 { margin-left: 50%; } .medium-8 { width: 66.66667%; } .medium-push-8 { position: relative; left: 66.66667%; } .medium-pull-8 { position: relative; left: -66.66667%; } .medium-offset-7 { margin-left: 58.33333%; } .medium-9 { width: 75%; } .medium-push-9 { position: relative; left: 75%; } .medium-pull-9 { position: relative; left: -75%; } .medium-offset-8 { margin-left: 66.66667%; } .medium-10 { width: 83.33333%; } .medium-push-10 { position: relative; left: 83.33333%; } .medium-pull-10 { position: relative; left: -83.33333%; } .medium-offset-9 { margin-left: 75%; } .medium-11 { width: 91.66667%; } .medium-push-11 { position: relative; left: 91.66667%; } .medium-pull-11 { position: relative; left: -91.66667%; } .medium-offset-10 { margin-left: 83.33333%; } .medium-12 { width: 100%; } .medium-offset-11 { margin-left: 91.66667%; } .medium-up-1 > .column, .medium-up-1 > .columns { float: left; width: 100%; } .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) { clear: none; } .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) { clear: both; } .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child { float: left; } .medium-up-2 > .column, .medium-up-2 > .columns { float: left; width: 50%; } .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) { clear: none; } .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) { clear: both; } .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child { float: left; } .medium-up-3 > .column, .medium-up-3 > .columns { float: left; width: 33.33333%; } .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) { clear: none; } .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) { clear: both; } .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child { float: left; } .medium-up-4 > .column, .medium-up-4 > .columns { float: left; width: 25%; } .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) { clear: none; } .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) { clear: both; } .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child { float: left; } .medium-up-5 > .column, .medium-up-5 > .columns { float: left; width: 20%; } .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) { clear: none; } .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) { clear: both; } .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child { float: left; } .medium-up-6 > .column, .medium-up-6 > .columns { float: left; width: 16.66667%; } .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) { clear: none; } .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) { clear: both; } .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child { float: left; } .medium-up-7 > .column, .medium-up-7 > .columns { float: left; width: 14.28571%; } .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) { clear: none; } .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) { clear: both; } .medium-up-7 > .column:last-child, .medium-up-7 > .columns:last-child { float: left; } .medium-up-8 > .column, .medium-up-8 > .columns { float: left; width: 12.5%; } .medium-up-8 > .column:nth-of-type(1n), .medium-up-8 > .columns:nth-of-type(1n) { clear: none; } .medium-up-8 > .column:nth-of-type(8n+1), .medium-up-8 > .columns:nth-of-type(8n+1) { clear: both; } .medium-up-8 > .column:last-child, .medium-up-8 > .columns:last-child { float: left; } .medium-collapse > .column, .medium-collapse > .columns { padding-right: 0; padding-left: 0; } .medium-collapse .row { margin-left: 0; margin-right: 0; } .expanded.row .medium-collapse.row { margin-left: 0; margin-right: 0; } .medium-uncollapse > .column, .medium-uncollapse > .columns { padding-right: 15px; padding-left: 15px; } .medium-centered { margin-left: auto; margin-right: auto; } .medium-centered, .medium-centered:last-child:not(:first-child) { float: none; clear: both; } .medium-centered { margin-left: auto; margin-right: auto; } .medium-centered, .medium-centered:last-child:not(:first-child) { float: none; clear: both; } .medium-uncentered, .medium-push-0, .medium-pull-0 { position: static; float: left; margin-left: 0; margin-right: 0; } .medium-pull-0, .medium-push-0, .medium-uncentered { position: static; float: left; margin-left: 0; margin-right: 0; } } @media print, only screen and (min-width: 1025px) { .large-1 { width: 8.33333%; } .large-push-1 { position: relative; left: 8.33333%; } .large-pull-1 { position: relative; left: -8.33333%; } .large-offset-0 { margin-left: 0%; } .large-2 { width: 16.66667%; } .large-push-2 { position: relative; left: 16.66667%; } .large-pull-2 { position: relative; left: -16.66667%; } .large-offset-1 { margin-left: 8.33333%; } .large-3 { width: 25%; } .large-push-3 { position: relative; left: 25%; } .large-pull-3 { position: relative; left: -25%; } .large-offset-2 { margin-left: 16.66667%; } .large-4 { width: 33.33333%; } .large-push-4 { position: relative; left: 33.33333%; } .large-pull-4 { position: relative; left: -33.33333%; } .large-offset-3 { margin-left: 25%; } .large-5 { width: 41.66667%; } .large-push-5 { position: relative; left: 41.66667%; } .large-pull-5 { position: relative; left: -41.66667%; } .large-offset-4 { margin-left: 33.33333%; } .large-6 { width: 50%; } .large-push-6 { position: relative; left: 50%; } .large-pull-6 { position: relative; left: -50%; } .large-offset-5 { margin-left: 41.66667%; } .large-7 { width: 58.33333%; } .large-push-7 { position: relative; left: 58.33333%; } .large-pull-7 { position: relative; left: -58.33333%; } .large-offset-6 { margin-left: 50%; } .large-8 { width: 66.66667%; } .large-push-8 { position: relative; left: 66.66667%; } .large-pull-8 { position: relative; left: -66.66667%; } .large-offset-7 { margin-left: 58.33333%; } .large-9 { width: 75%; } .large-push-9 { position: relative; left: 75%; } .large-pull-9 { position: relative; left: -75%; } .large-offset-8 { margin-left: 66.66667%; } .large-10 { width: 83.33333%; } .large-push-10 { position: relative; left: 83.33333%; } .large-pull-10 { position: relative; left: -83.33333%; } .large-offset-9 { margin-left: 75%; } .large-11 { width: 91.66667%; } .large-push-11 { position: relative; left: 91.66667%; } .large-pull-11 { position: relative; left: -91.66667%; } .large-offset-10 { margin-left: 83.33333%; } .large-12 { width: 100%; } .large-offset-11 { margin-left: 91.66667%; } .large-up-1 > .column, .large-up-1 > .columns { float: left; width: 100%; } .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) { clear: none; } .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) { clear: both; } .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child { float: left; } .large-up-2 > .column, .large-up-2 > .columns { float: left; width: 50%; } .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) { clear: none; } .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) { clear: both; } .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child { float: left; } .large-up-3 > .column, .large-up-3 > .columns { float: left; width: 33.33333%; } .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) { clear: none; } .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) { clear: both; } .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child { float: left; } .large-up-4 > .column, .large-up-4 > .columns { float: left; width: 25%; } .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) { clear: none; } .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) { clear: both; } .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child { float: left; } .large-up-5 > .column, .large-up-5 > .columns { float: left; width: 20%; } .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) { clear: none; } .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) { clear: both; } .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child { float: left; } .large-up-6 > .column, .large-up-6 > .columns { float: left; width: 16.66667%; } .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) { clear: none; } .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) { clear: both; } .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child { float: left; } .large-up-7 > .column, .large-up-7 > .columns { float: left; width: 14.28571%; } .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) { clear: none; } .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) { clear: both; } .large-up-7 > .column:last-child, .large-up-7 > .columns:last-child { float: left; } .large-up-8 > .column, .large-up-8 > .columns { float: left; width: 12.5%; } .large-up-8 > .column:nth-of-type(1n), .large-up-8 > .columns:nth-of-type(1n) { clear: none; } .large-up-8 > .column:nth-of-type(8n+1), .large-up-8 > .columns:nth-of-type(8n+1) { clear: both; } .large-up-8 > .column:last-child, .large-up-8 > .columns:last-child { float: left; } .large-collapse > .column, .large-collapse > .columns { padding-right: 0; padding-left: 0; } .large-collapse .row { margin-left: 0; margin-right: 0; } .expanded.row .large-collapse.row { margin-left: 0; margin-right: 0; } .large-uncollapse > .column, .large-uncollapse > .columns { padding-right: 15px; padding-left: 15px; } .large-centered { margin-left: auto; margin-right: auto; } .large-centered, .large-centered:last-child:not(:first-child) { float: none; clear: both; } .large-centered { margin-left: auto; margin-right: auto; } .large-centered, .large-centered:last-child:not(:first-child) { float: none; clear: both; } .large-uncentered, .large-push-0, .large-pull-0 { position: static; float: left; margin-left: 0; margin-right: 0; } .large-pull-0, .large-push-0, .large-uncentered { position: static; float: left; margin-left: 0; margin-right: 0; } } .column-block { margin-bottom: 20px; } .column-block > :last-child { margin-bottom: 0; } @media print, only screen and (min-width: 641px) { .column-block { margin-bottom: 30px; } .column-block > :last-child { margin-bottom: 0; } } input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea { display: block; width: 100%; height: 40px; font-family: "Josefin Sans", sans-serif; font-size: 0.875rem; letter-spacing: normal; text-transform: none; background-color: #efefef; color: #666666; border: 1px solid #d9d9d9; border-radius: 5px; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0); box-shadow: 0 0 6px rgba(0, 0, 0, 0); padding: 10px; -webkit-transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, text-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; -o-transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; } input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus { background-color: #efefef; border-color: #b2b2b2; -webkit-box-shadow: 0 0 6px rgba(102, 102, 102, 0.25); box-shadow: 0 0 6px rgba(102, 102, 102, 0.25); } input[type="email"]:hover:not(:focus):not([disabled]), input[type="password"]:hover:not(:focus):not([disabled]), input[type="search"]:hover:not(:focus):not([disabled]), input[type="tel"]:hover:not(:focus):not([disabled]), input[type="text"]:hover:not(:focus):not([disabled]), input[type="url"]:hover:not(:focus):not([disabled]), select:hover:not(:focus):not([disabled]), textarea:hover:not(:focus):not([disabled]) { background-color: #efefef; border-color: #b2b2b2; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0); box-shadow: 0 0 6px rgba(0, 0, 0, 0); } input[disabled], select[disabled], textarea[disabled] { color: inherit; opacity: 0.5; -webkit-box-shadow: none; box-shadow: none; cursor: not-allowed; } input:required, input:invalid, select:required, select:invalid, textarea:required, textarea:invalid { -webkit-box-shadow: none; box-shadow: none; } input.error, select.error, textarea.error { background-color: #f2c0c1; border-color: #c04649; -webkit-box-shadow: 0 0 6px rgba(192, 70, 73, 0.35); box-shadow: 0 0 6px rgba(192, 70, 73, 0.35); color: #666666; } input.error:hover:not(:focus):not([disabled]), input.error:focus, select.error:hover:not(:focus):not([disabled]), select.error:focus, textarea.error:hover:not(:focus):not([disabled]), textarea.error:focus { background-color: #f2c0c1; border-color: #c04649; -webkit-box-shadow: 0 0 6px rgba(192, 70, 73, 0.35); box-shadow: 0 0 6px rgba(192, 70, 73, 0.35); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-family: inherit; font-style: italic; text-transform: capitalize; color: #8c8c8c; opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-family: inherit; font-style: italic; text-transform: capitalize; color: #8c8c8c; opacity: 1; } input::-ms-input-placeholder, textarea::-ms-input-placeholder { font-family: inherit; font-style: italic; text-transform: capitalize; color: #8c8c8c; opacity: 1; } input::placeholder, textarea::placeholder { font-family: inherit; font-style: italic; text-transform: capitalize; color: #8c8c8c; opacity: 1; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { opacity: 0; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { opacity: 0; } input:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder { opacity: 0; } input:focus::placeholder, textarea:focus::placeholder { opacity: 0; } input.error::-webkit-input-placeholder, textarea.error::-webkit-input-placeholder { color: #c04649; opacity: 1; } input.error:-ms-input-placeholder, textarea.error:-ms-input-placeholder { color: #c04649; opacity: 1; } input.error::-ms-input-placeholder, textarea.error::-ms-input-placeholder { color: #c04649; opacity: 1; } input.error::placeholder, textarea.error::placeholder { color: #c04649; opacity: 1; } input.error:focus::-webkit-input-placeholder, textarea.error:focus::-webkit-input-placeholder { opacity: 0; } input.error:focus:-ms-input-placeholder, textarea.error:focus:-ms-input-placeholder { opacity: 0; } input.error:focus::-ms-input-placeholder, textarea.error:focus::-ms-input-placeholder { opacity: 0; } input.error:focus::placeholder, textarea.error:focus::placeholder { opacity: 0; } select { background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 32 19'><path fill='rgb%28140, 140, 140%29' d='M16,19.2L0,3.8L4.6,0L16,11.5L27.4,0L32,3.8L16,19.2z'/></svg>"); background-size: 10px; background-repeat: no-repeat; background-position: center right; background-origin: content-box; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #666666; } select[multiple] { background-image: none; height: auto; cursor: default; } textarea { height: 110px; resize: none; } .form-label { display: block; font-family: "Josefin Sans", sans-serif; font-size: 0.6875rem; letter-spacing: 0.03125rem; text-transform: uppercase; color: #8c8c8c; margin: 0 0 5px 0; } .form-label.error { color: #c04649; } .input-checkbox, .input-radio { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 24px; position: relative; padding-left: 34px; cursor: default; font-family: "Josefin Sans", sans-serif; font-size: 0.8125rem; text-transform: none; letter-spacing: 0.03125rem; color: #8c8c8c; margin: 0; } .input-checkbox::before, .input-checkbox::after, .input-radio::before, .input-radio::after { content: ''; position: absolute; } .input-checkbox::before, .input-radio::before { top: 0; left: 0; width: 24px; height: 24px; background-color: #efefef; border: 1px solid #d9d9d9; -webkit-transition: border-color 0.3s ease; -o-transition: border-color 0.3s ease; transition: border-color 0.3s ease; overflow: hidden; } .input-checkbox::after, .input-radio::after { -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; -o-transition: transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .input-checkbox::before { border-radius: 5px; } .input-checkbox::after { display: block; width: 0.375rem; height: 0.75rem; border: solid #8c8c8c; border-width: 0 3px 3px 0; top: 0.375rem; left: 0.5625rem; -webkit-transform: scale(0) rotate(45deg) translate(0); -ms-transform: scale(0) rotate(45deg) translate(0); transform: scale(0) rotate(45deg) translate(0); } input[type="checkbox"][disabled] + .input-checkbox { opacity: 0.5; cursor: not-allowed; } input[type="checkbox"]:checked + .input-checkbox::before { border-color: #b2b2b2; } input[type="checkbox"]:checked + .input-checkbox::after { -webkit-transform: scale(1) rotate(45deg) translate(0); -ms-transform: scale(1) rotate(45deg) translate(0); transform: scale(1) rotate(45deg) translate(0); } input[type="checkbox"]:focus:not(:checked) + .input-checkbox::before { border-color: #b2b2b2; } [data-whatinput="keyboard"] input[type="checkbox"]:focus + .input-checkbox::before { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; } input[type="checkbox"].error:not([disabled]) + .input-checkbox::before { border-color: #c04649; background-color: #f2c0c1; } input[type="checkbox"].error:focus:not(:checked) + .input-checkbox::before { border-color: #c04649; } .input-radio::before, .input-radio::after { border-radius: 50%; } .input-radio::after { top: 0.375rem; left: 0.375rem; width: 0.75rem; height: 0.75rem; background-color: #8c8c8c; -webkit-transform: scale(0) translate(0); -ms-transform: scale(0) translate(0); transform: scale(0) translate(0); } input[type="radio"][disabled] + .input-radio { opacity: 0.5; cursor: not-allowed; } input[type="radio"]:checked + .input-radio::before { border-color: #b2b2b2; } input[type="radio"]:checked + .input-radio::after { -webkit-transform: scale(1) translate(0); -ms-transform: scale(1) translate(0); transform: scale(1) translate(0); } input[type="radio"]:focus:not(:checked) + .input-radio::before { border-color: #b2b2b2; } [data-whatinput="keyboard"] input[type="radio"]:focus + .input-radio::before { outline: -webkit-focus-ring-color auto 5px; outline-offset: -2px; } input[type="radio"].error + .input-radio::before { border-color: #c04649; background-color: #f2c0c1; } input[type="radio"].error:focus:not(:checked) + .input-radio::before { border-color: #c04649; } .palette-color-primary { color: #666666; } .background-color-primary { background-color: #666666; } .palette-color-suvagrey { color: #8c8c8c; } .background-color-suvagrey { background-color: #8c8c8c; } .palette-color-darkgray { color: #b2b2b2; } .background-color-darkgray { background-color: #b2b2b2; } .palette-color-gainsboro { color: #d9d9d9; } .background-color-gainsboro { background-color: #d9d9d9; } .palette-color-whitesmoke { color: #efefef; } .background-color-whitesmoke { background-color: #efefef; } .palette-color-cornflowerblue { color: #61afef; } .background-color-cornflowerblue { background-color: #61afef; } .palette-color-sunset { color: #c04649; } .background-color-sunset { background-color: #c04649; } .palette-color-coralcandy { color: #f2c0c1; } .background-color-coralcandy { background-color: #f2c0c1; } .shape-arrow { display: block; width: 20px; height: 20px; border: solid #666666; border-width: 0 3px 3px 0; } .shape-arrow.down { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .shape-arrow.up { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .shape-arrow.right { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .shape-arrow.left { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .shape-checkmark { display: block; width: 10px; height: 20px; border: solid #666666; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .shape-cross { display: block; position: relative; width: 20px; height: 20px; border: 0; background: none; margin: 0; padding: 0; } .shape-cross::before, .shape-cross::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background-color: #666666; margin-top: -0.09375rem; } .shape-cross::before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .shape-cross::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }