UNPKG

renderkit

Version:

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

2,672 lines (2,413 loc) 85.7 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: rtl; } 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; -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .clearfix::after { clear: both; } .clear-both { clear: both; } .grid-container { padding-right: 10px; padding-left: 10px; max-width: 1200px; margin: 0 auto; } @media print, only screen and (min-width: 641px) { .grid-container { padding-right: 15px; padding-left: 15px; } } .grid-container.fluid { padding-right: 10px; padding-left: 10px; max-width: 100%; margin: 0 auto; } @media print, only screen and (min-width: 641px) { .grid-container.fluid { padding-right: 15px; padding-left: 15px; } } .grid-container.full { padding-right: 0; padding-left: 0; max-width: 100%; margin: 0 auto; } .grid-x { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .cell { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; min-height: 0px; min-width: 0px; width: 100%; } .cell.auto { -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; } .cell.shrink { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .grid-x > .auto { width: auto; margin-left: 10px; margin-right: 10px; } .grid-x > .shrink { width: auto; margin-left: 10px; margin-right: 10px; } .grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } @media print, only screen and (min-width: 641px) { .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } @media print, only screen and (min-width: 1025px) { .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } .grid-x > .small-1 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 8.33333%; } .grid-x > .small-2 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.66667%; } .grid-x > .small-3 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .grid-x > .small-4 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333%; } .grid-x > .small-5 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 41.66667%; } .grid-x > .small-6 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .grid-x > .small-7 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 58.33333%; } .grid-x > .small-8 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 66.66667%; } .grid-x > .small-9 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 75%; } .grid-x > .small-10 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 83.33333%; } .grid-x > .small-11 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 91.66667%; } .grid-x > .small-12 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } @media print, only screen and (min-width: 641px) { .grid-x > .medium-auto { -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; width: auto; margin-left: 10px; margin-right: 10px; } .grid-x > .medium-shrink { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; margin-left: 10px; margin-right: 10px; } .grid-x > .medium-1 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 8.33333%; } .grid-x > .medium-2 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.66667%; } .grid-x > .medium-3 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .grid-x > .medium-4 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333%; } .grid-x > .medium-5 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 41.66667%; } .grid-x > .medium-6 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .grid-x > .medium-7 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 58.33333%; } .grid-x > .medium-8 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 66.66667%; } .grid-x > .medium-9 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 75%; } .grid-x > .medium-10 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 83.33333%; } .grid-x > .medium-11 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 91.66667%; } .grid-x > .medium-12 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } } @media print, only screen and (min-width: 1025px) { .grid-x > .large-auto { -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; width: auto; margin-left: 10px; margin-right: 10px; } .grid-x > .large-shrink { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; margin-left: 10px; margin-right: 10px; } .grid-x > .large-1 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 8.33333%; } .grid-x > .large-2 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.66667%; } .grid-x > .large-3 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 25%; } .grid-x > .large-4 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.33333%; } .grid-x > .large-5 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 41.66667%; } .grid-x > .large-6 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .grid-x > .large-7 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 58.33333%; } .grid-x > .large-8 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 66.66667%; } .grid-x > .large-9 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 75%; } .grid-x > .large-10 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 83.33333%; } .grid-x > .large-11 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 91.66667%; } .grid-x > .large-12 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } } .grid-margin-x:not(.grid-x) > .cell { width: auto; } .grid-margin-y:not(.grid-y) > .cell { height: auto; } .grid-margin-x { margin-left: -10px; margin-right: -10px; } @media print, only screen and (min-width: 641px) { .grid-margin-x { margin-left: -15px; margin-right: -15px; } } .grid-margin-x > .cell { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; } @media print, only screen and (min-width: 641px) { .grid-margin-x > .cell { width: calc(100% - 30px); margin-left: 15px; margin-right: 15px; } } .grid-margin-x > .auto { width: auto; margin-left: 10px; margin-right: 10px; } .grid-margin-x > .shrink { width: auto; margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-1 { width: calc(8.33333% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-2 { width: calc(16.66667% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-3 { width: calc(25% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-4 { width: calc(33.33333% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-5 { width: calc(41.66667% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-6 { width: calc(50% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-7 { width: calc(58.33333% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-8 { width: calc(66.66667% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-9 { width: calc(75% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-10 { width: calc(83.33333% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-11 { width: calc(91.66667% - 20px); margin-left: 10px; margin-right: 10px; } .grid-margin-x > .small-12 { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; } @media print, only screen and (min-width: 641px) { .grid-margin-x > .auto { width: auto; margin-left: 15px; margin-right: 15px; } .grid-margin-x > .shrink { width: auto; margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-1 { width: calc(8.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-2 { width: calc(16.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-3 { width: calc(25% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-4 { width: calc(33.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-5 { width: calc(41.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-6 { width: calc(50% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-7 { width: calc(58.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-8 { width: calc(66.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-9 { width: calc(75% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-10 { width: calc(83.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-11 { width: calc(91.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .small-12 { width: calc(100% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-auto { width: auto; margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-shrink { width: auto; margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-1 { width: calc(8.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-2 { width: calc(16.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-3 { width: calc(25% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-4 { width: calc(33.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-5 { width: calc(41.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-6 { width: calc(50% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-7 { width: calc(58.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-8 { width: calc(66.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-9 { width: calc(75% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-10 { width: calc(83.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-11 { width: calc(91.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .medium-12 { width: calc(100% - 30px); margin-left: 15px; margin-right: 15px; } } @media print, only screen and (min-width: 1025px) { .grid-margin-x > .large-auto { width: auto; margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-shrink { width: auto; margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-1 { width: calc(8.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-2 { width: calc(16.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-3 { width: calc(25% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-4 { width: calc(33.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-5 { width: calc(41.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-6 { width: calc(50% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-7 { width: calc(58.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-8 { width: calc(66.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-9 { width: calc(75% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-10 { width: calc(83.33333% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-11 { width: calc(91.66667% - 30px); margin-left: 15px; margin-right: 15px; } .grid-margin-x > .large-12 { width: calc(100% - 30px); margin-left: 15px; margin-right: 15px; } } .grid-padding-x .grid-padding-x { margin-right: -10px; margin-left: -10px; } @media print, only screen and (min-width: 641px) { .grid-padding-x .grid-padding-x { margin-right: -15px; margin-left: -15px; } } .grid-container:not(.full) > .grid-padding-x { margin-right: -10px; margin-left: -10px; } @media print, only screen and (min-width: 641px) { .grid-container:not(.full) > .grid-padding-x { margin-right: -15px; margin-left: -15px; } } .grid-padding-x > .cell { padding-right: 10px; padding-left: 10px; } @media print, only screen and (min-width: 641px) { .grid-padding-x > .cell { padding-right: 15px; padding-left: 15px; } } .small-up-1 > .cell { width: 100%; } .small-up-2 > .cell { width: 50%; } .small-up-3 > .cell { width: 33.33333%; } .small-up-4 > .cell { width: 25%; } .small-up-5 > .cell { width: 20%; } .small-up-6 > .cell { width: 16.66667%; } .small-up-7 > .cell { width: 14.28571%; } .small-up-8 > .cell { width: 12.5%; } @media print, only screen and (min-width: 641px) { .medium-up-1 > .cell { width: 100%; } .medium-up-2 > .cell { width: 50%; } .medium-up-3 > .cell { width: 33.33333%; } .medium-up-4 > .cell { width: 25%; } .medium-up-5 > .cell { width: 20%; } .medium-up-6 > .cell { width: 16.66667%; } .medium-up-7 > .cell { width: 14.28571%; } .medium-up-8 > .cell { width: 12.5%; } } @media print, only screen and (min-width: 1025px) { .large-up-1 > .cell { width: 100%; } .large-up-2 > .cell { width: 50%; } .large-up-3 > .cell { width: 33.33333%; } .large-up-4 > .cell { width: 25%; } .large-up-5 > .cell { width: 20%; } .large-up-6 > .cell { width: 16.66667%; } .large-up-7 > .cell { width: 14.28571%; } .large-up-8 > .cell { width: 12.5%; } } .grid-margin-x.small-up-1 > .cell { width: calc(100% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-2 > .cell { width: calc(50% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-3 > .cell { width: calc(33.33333% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-4 > .cell { width: calc(25% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-5 > .cell { width: calc(20% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-6 > .cell { width: calc(16.66667% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-7 > .cell { width: calc(14.28571% - 20px); margin-right: 10px; margin-left: 10px; } .grid-margin-x.small-up-8 > .cell { width: calc(12.5% - 20px); margin-right: 10px; margin-left: 10px; } @media print, only screen and (min-width: 641px) { .grid-margin-x.small-up-1 > .cell { width: calc(100% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-2 > .cell { width: calc(50% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-3 > .cell { width: calc(33.33333% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-4 > .cell { width: calc(25% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-5 > .cell { width: calc(20% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-6 > .cell { width: calc(16.66667% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-7 > .cell { width: calc(14.28571% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.small-up-8 > .cell { width: calc(12.5% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-1 > .cell { width: calc(100% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-2 > .cell { width: calc(50% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-3 > .cell { width: calc(33.33333% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-4 > .cell { width: calc(25% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-5 > .cell { width: calc(20% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-6 > .cell { width: calc(16.66667% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-7 > .cell { width: calc(14.28571% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.medium-up-8 > .cell { width: calc(12.5% - 30px); margin-right: 15px; margin-left: 15px; } } @media print, only screen and (min-width: 1025px) { .grid-margin-x.large-up-1 > .cell { width: calc(100% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-2 > .cell { width: calc(50% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-3 > .cell { width: calc(33.33333% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-4 > .cell { width: calc(25% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-5 > .cell { width: calc(20% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-6 > .cell { width: calc(16.66667% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-7 > .cell { width: calc(14.28571% - 30px); margin-right: 15px; margin-left: 15px; } .grid-margin-x.large-up-8 > .cell { width: calc(12.5% - 30px); margin-right: 15px; margin-left: 15px; } } .small-margin-collapse { margin-right: 0; margin-left: 0; } .small-margin-collapse > .cell { margin-right: 0; margin-left: 0; } .small-margin-collapse > .small-1 { width: 8.33333%; } .small-margin-collapse > .small-2 { width: 16.66667%; } .small-margin-collapse > .small-3 { width: 25%; } .small-margin-collapse > .small-4 { width: 33.33333%; } .small-margin-collapse > .small-5 { width: 41.66667%; } .small-margin-collapse > .small-6 { width: 50%; } .small-margin-collapse > .small-7 { width: 58.33333%; } .small-margin-collapse > .small-8 { width: 66.66667%; } .small-margin-collapse > .small-9 { width: 75%; } .small-margin-collapse > .small-10 { width: 83.33333%; } .small-margin-collapse > .small-11 { width: 91.66667%; } .small-margin-collapse > .small-12 { width: 100%; } @media print, only screen and (min-width: 641px) { .small-margin-collapse > .medium-1 { width: 8.33333%; } .small-margin-collapse > .medium-2 { width: 16.66667%; } .small-margin-collapse > .medium-3 { width: 25%; } .small-margin-collapse > .medium-4 { width: 33.33333%; } .small-margin-collapse > .medium-5 { width: 41.66667%; } .small-margin-collapse > .medium-6 { width: 50%; } .small-margin-collapse > .medium-7 { width: 58.33333%; } .small-margin-collapse > .medium-8 { width: 66.66667%; } .small-margin-collapse > .medium-9 { width: 75%; } .small-margin-collapse > .medium-10 { width: 83.33333%; } .small-margin-collapse > .medium-11 { width: 91.66667%; } .small-margin-collapse > .medium-12 { width: 100%; } } @media print, only screen and (min-width: 1025px) { .small-margin-collapse > .large-1 { width: 8.33333%; } .small-margin-collapse > .large-2 { width: 16.66667%; } .small-margin-collapse > .large-3 { width: 25%; } .small-margin-collapse > .large-4 { width: 33.33333%; } .small-margin-collapse > .large-5 { width: 41.66667%; } .small-margin-collapse > .large-6 { width: 50%; } .small-margin-collapse > .large-7 { width: 58.33333%; } .small-margin-collapse > .large-8 { width: 66.66667%; } .small-margin-collapse > .large-9 { width: 75%; } .small-margin-collapse > .large-10 { width: 83.33333%; } .small-margin-collapse > .large-11 { width: 91.66667%; } .small-margin-collapse > .large-12 { width: 100%; } } .small-padding-collapse { margin-right: 0; margin-left: 0; } .small-padding-collapse > .cell { padding-right: 0; padding-left: 0; } @media print, only screen and (min-width: 641px) { .medium-margin-collapse { margin-right: 0; margin-left: 0; } .medium-margin-collapse > .cell { margin-right: 0; margin-left: 0; } } @media print, only screen and (min-width: 641px) { .medium-margin-collapse > .small-1 { width: 8.33333%; } .medium-margin-collapse > .small-2 { width: 16.66667%; } .medium-margin-collapse > .small-3 { width: 25%; } .medium-margin-collapse > .small-4 { width: 33.33333%; } .medium-margin-collapse > .small-5 { width: 41.66667%; } .medium-margin-collapse > .small-6 { width: 50%; } .medium-margin-collapse > .small-7 { width: 58.33333%; } .medium-margin-collapse > .small-8 { width: 66.66667%; } .medium-margin-collapse > .small-9 { width: 75%; } .medium-margin-collapse > .small-10 { width: 83.33333%; } .medium-margin-collapse > .small-11 { width: 91.66667%; } .medium-margin-collapse > .small-12 { width: 100%; } } @media print, only screen and (min-width: 641px) { .medium-margin-collapse > .medium-1 { width: 8.33333%; } .medium-margin-collapse > .medium-2 { width: 16.66667%; } .medium-margin-collapse > .medium-3 { width: 25%; } .medium-margin-collapse > .medium-4 { width: 33.33333%; } .medium-margin-collapse > .medium-5 { width: 41.66667%; } .medium-margin-collapse > .medium-6 { width: 50%; } .medium-margin-collapse > .medium-7 { width: 58.33333%; } .medium-margin-collapse > .medium-8 { width: 66.66667%; } .medium-margin-collapse > .medium-9 { width: 75%; } .medium-margin-collapse > .medium-10 { width: 83.33333%; } .medium-margin-collapse > .medium-11 { width: 91.66667%; } .medium-margin-collapse > .medium-12 { width: 100%; } } @media print, only screen and (min-width: 1025px) { .medium-margin-collapse > .large-1 { width: 8.33333%; } .medium-margin-collapse > .large-2 { width: 16.66667%; } .medium-margin-collapse > .large-3 { width: 25%; } .medium-margin-collapse > .large-4 { width: 33.33333%; } .medium-margin-collapse > .large-5 { width: 41.66667%; } .medium-margin-collapse > .large-6 { width: 50%; } .medium-margin-collapse > .large-7 { width: 58.33333%; } .medium-margin-collapse > .large-8 { width: 66.66667%; } .medium-margin-collapse > .large-9 { width: 75%; } .medium-margin-collapse > .large-10 { width: 83.33333%; } .medium-margin-collapse > .large-11 { width: 91.66667%; } .medium-margin-collapse > .large-12 { width: 100%; } } @media print, only screen and (min-width: 641px) { .medium-padding-collapse { margin-right: 0; margin-left: 0; } .medium-padding-collapse > .cell { padding-right: 0; padding-left: 0; } } @media print, only screen and (min-width: 1025px) { .large-margin-collapse { margin-right: 0; margin-left: 0; } .large-margin-collapse > .cell { margin-right: 0; margin-left: 0; } } @media print, only screen and (min-width: 1025px) { .large-margin-collapse > .small-1 { width: 8.33333%; } .large-margin-collapse > .small-2 { width: 16.66667%; } .large-margin-collapse > .small-3 { width: 25%; } .large-margin-collapse > .small-4 { width: 33.33333%; } .large-margin-collapse > .small-5 { width: 41.66667%; } .large-margin-collapse > .small-6 { width: 50%; } .large-margin-collapse > .small-7 { width: 58.33333%; } .large-margin-collapse > .small-8 { width: 66.66667%; } .large-margin-collapse > .small-9 { width: 75%; } .large-margin-collapse > .small-10 { width: 83.33333%; } .large-margin-collapse > .small-11 { width: 91.66667%; } .large-margin-collapse > .small-12 { width: 100%; } } @media print, only screen and (min-width: 1025px) { .large-margin-collapse > .medium-1 { width: 8.33333%; } .large-margin-collapse > .medium-2 { width: 16.66667%; } .large-margin-collapse > .medium-3 { width: 25%; } .large-margin-collapse > .medium-4 { width: 33.33333%; } .large-margin-collapse > .medium-5 { width: 41.66667%; } .large-margin-collapse > .medium-6 { width: 50%; } .large-margin-collapse > .medium-7 { width: 58.33333%; } .large-margin-collapse > .medium-8 { width: 66.66667%; } .large-margin-collapse > .medium-9 { width: 75%; } .large-margin-collapse > .medium-10 { width: 83.33333%; } .large-margin-collapse > .medium-11 { width: 91.66667%; } .large-margin-collapse > .medium-12 { width: 100%; } } @media print, only screen and (min-width: 1025px) { .large-margin-collapse > .large-1 { width: 8.33333%; } .large-margin-collapse > .large-2 { width: 16.66667%; } .large-margin-collapse > .large-3 { width: 25%; } .large-margin-collapse > .large-4 { width: 33.33333%; } .large-margin-collapse > .large-5 { width: 41.66667%; } .large-margin-collapse > .large-6 { width: 50%; } .large-margin-collapse > .large-7 { width: 58.33333%; } .large-margin-collapse > .large-8 { width: 66.66667%; } .large-margin-collapse > .large-9 { width: 75%; } .large-margin-collapse > .large-10 { width: 83.33333%; } .large-margin-collapse > .large-11 { width: 91.66667%; } .large-margin-collapse > .large-12 { width: 100%; } } @media print, only screen and (min-width: 1025px) { .large-padding-collapse { margin-right: 0; margin-left: 0; } .large-padding-collapse > .cell { padding-right: 0; padding-left: 0; } } .small-offset-0 { margin-right: 0%; } .grid-margin-x > .small-offset-0 { margin-right: calc(0% + 10px); } .small-offset-1 { margin-right: 8.33333%; } .grid-margin-x > .small-offset-1 { margin-right: calc(8.33333% + 10px); } .small-offset-2 { margin-right: 16.66667%; } .grid-margin-x > .small-offset-2 { margin-right: calc(16.66667% + 10px); } .small-offset-3 { margin-right: 25%; } .grid-margin-x > .small-offset-3 { margin-right: calc(25% + 10px); } .small-offset-4 { margin-right: 33.33333%; } .grid-margin-x > .small-offset-4 { margin-right: calc(33.33333% + 10px); } .small-offset-5 { margin-right: 41.66667%; } .grid-margin-x > .small-offset-5 { margin-right: calc(41.66667% + 10px); } .small-offset-6 { margin-right: 50%; } .grid-margin-x > .small-offset-6 { margin-right: calc(50% + 10px); } .small-offset-7 { margin-right: 58.33333%; } .grid-margin-x > .small-offset-7 { margin-right: calc(58.33333% + 10px); } .small-offset-8 { margin-right: 66.66667%; } .grid-margin-x > .small-offset-8 { margin-right: calc(66.66667% + 10px); } .small-offset-9 { margin-right: 75%; } .grid-margin-x > .small-offset-9 { margin-right: calc(75% + 10px); } .small-offset-10 { margin-right: 83.33333%; } .grid-margin-x > .small-offset-10 { margin-right: calc(83.33333% + 10px); } .small-offset-11 { margin-right: 91.66667%; } .grid-margin-x > .small-offset-11 { margin-right: calc(91.66667% + 10px); } @media print, only screen and (min-width: 641px) { .medium-offset-0 { margin-right: 0%; } .grid-margin-x > .medium-offset-0 { margin-right: calc(0% + 15px); } .medium-offset-1 { margin-right: 8.33333%; } .grid-margin-x > .medium-offset-1 { margin-right: calc(8.33333% + 15px); } .medium-offset-2 { margin-right: 16.66667%; } .grid-margin-x > .medium-offset-2 { margin-right: calc(16.66667% + 15px); } .medium-offset-3 { margin-right: 25%; } .grid-margin-x > .medium-offset-3 { margin-right: calc(25% + 15px); } .medium-offset-4 { margin-right: 33.33333%; } .grid-margin-x > .medium-offset-4 { margin-right: calc(33.33333% + 15px); } .medium-offset-5 { margin-right: 41.66667%; } .grid-margin-x > .medium-offset-5 { margin-right: calc(41.66667% + 15px); } .medium-offset-6 { margin-right: 50%; } .grid-margin-x > .medium-offset-6 { margin-right: calc(50% + 15px); } .medium-offset-7 { margin-right: 58.33333%; } .grid-margin-x > .medium-offset-7 { margin-right: calc(58.33333% + 15px); } .medium-offset-8 { margin-right: 66.66667%; } .grid-margin-x > .medium-offset-8 { margin-right: calc(66.66667% + 15px); } .medium-offset-9 { margin-right: 75%; } .grid-margin-x > .medium-offset-9 { margin-right: calc(75% + 15px); } .medium-offset-10 { margin-right: 83.33333%; } .grid-margin-x > .medium-offset-10 { margin-right: calc(83.33333% + 15px); } .medium-offset-11 { margin-right: 91.66667%; } .grid-margin-x > .medium-offset-11 { margin-right: calc(91.66667% + 15px); } } @media print, only screen and (min-width: 1025px) { .large-offset-0 { margin-right: 0%; } .grid-margin-x > .large-offset-0 { margin-right: calc(0% + 15px); } .large-offset-1 { margin-right: 8.33333%; } .grid-margin-x > .large-offset-1 { margin-right: calc(8.33333% + 15px); } .large-offset-2 { margin-right: 16.66667%; } .grid-margin-x > .large-offset-2 { margin-right: calc(16.66667% + 15px); } .large-offset-3 { margin-right: 25%; } .grid-margin-x > .large-offset-3 { margin-right: calc(25% + 15px); } .large-offset-4 { margin-right: 33.33333%; } .grid-margin-x > .large-offset-4 { margin-right: calc(33.33333% + 15px); } .large-offset-5 { margin-right: 41.66667%; } .grid-margin-x > .large-offset-5 { margin-right: calc(41.66667% + 15px); } .large-offset-6 { margin-right: 50%; } .grid-margin-x > .large-offset-6 { margin-right: calc(50% + 15px); } .large-offset-7 { margin-right: 58.33333%; } .grid-margin-x > .large-offset-7 { margin-right: calc(58.33333% + 15px); } .large-offset-8 { margin-right: 66.66667%; } .grid-margin-x > .large-offset-8 { margin-right: calc(66.66667% + 15px); } .large-offset-9 { margin-right: 75%; } .grid-margin-x > .large-offset-9 { margin-right: calc(75% + 15px); } .large-offset-10 { margin-right: 83.33333%; } .grid-margin-x > .large-offset-10 { margin-right: calc(83.33333% + 15px); } .large-offset-11 { margin-right: 91.66667%; } .grid-margin-x > .large-offset-11 { margin-right: calc(91.66667% + 15px); } } .grid-y { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .grid-y > .cell { width: auto; max-width: none; } .grid-y > .auto { height: auto; margin-top: 15px; margin-bottom: 15px; } .grid-y > .shrink { height: auto; margin-top: 15px; margin-bottom: 15px; } .grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } @media print, only screen and (min-width: 641px) { .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } @media print, only screen and (min-width: 1025px) { .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 { -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; } } .grid-y > .small-1 { height: 8.33333%; } .grid-y > .small-2 { height: 16.66667%; } .grid-y > .small-3 { height: 25%; } .grid-y > .small-4 { height: 33.33333%; } .grid-y > .small-5 { height: 41.66667%; } .grid-y > .small-6 { height: 50%; } .grid-y > .small-7 { height: 58.33333%; } .grid-y > .small-8 { height: 66.66667%; } .grid-y > .small-9 { height: 75%; } .grid-y > .small-10 { height: 83.33333%; } .grid-y > .small-11 { height: 91.66667%; } .grid-y > .small-12 { height: 100%; } @media print, only screen and (min-width: 641px) { .grid-y > .medium-auto { -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; height: auto; margin-top: 15px; margin-bottom: 15px; } .grid-y > .medium-shrink { height: auto; margin-top: 15px; margin-bottom: 15px; } .grid-y > .medium-1 { height: 8.33333%; } .grid-y > .medium-2 { height: 16.66667%; } .grid-y > .medium-3 { height: 25%; } .grid-y > .medium-4 { height: 33.33333%; } .grid-y > .medium-5 { height: 41.66667%; } .grid-y > .medium-6 { height: 50%; } .grid-y > .medium-7 { height: 58.33333%; } .grid-y > .medium-8 { height: 66.66667%; } .grid-y > .medium-9 { height: 75%; } .grid-y > .medium-10 { height: 83.33333%; } .grid-y > .medium-11 { height: 91.66667%; } .grid-y > .medium-12 { height: 100%; } } @media print, only screen and (min-width: 1025px) { .grid-y > .large-auto { -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; height: auto; margin-top: 15px; margin-bottom: 15px; } .grid-y > .large-shrink { height: auto; margin-top: 15px; margin-bottom: 15px; } .grid-y > .large-1 { height: 8.33333%; } .grid-y > .large-2 { height: 16.66667%; } .grid-y > .large-3 { height: 25%; } .grid-y > .large-4 { height: 33.33333%; } .grid-y > .large-5 { height: 41.66667%; } .grid-y > .large-6 { height: 50%; } .grid-y > .large-7 { height: 58.33333%; } .grid-y > .large-8 { height: 66.66667%; } .grid-y > .large-9 { height: 75%; } .grid-y > .large-10 { height: 83.33333%; } .grid-y > .large-11 { height: 91.66667%; } .grid-y > .large-12 { height: 100%; } } .grid-padding-y .grid-padding-y { margin-top: -10px; margin-bottom: -10px; } @media print, only screen and (min-width: 6