Skip to content

Instantly share code, notes, and snippets.

@jukbot

jukbot/shared-style.html

Last active Jan 7, 2018
Embed
What would you like to do?
for review
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<dom-module id="shared-styles">
<template>
<style>
:host {
display: block;
}
/* Picnic CSS v6.4.0 */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background: transparent
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: bold
}
dfn {
font-style: italic
}
h1 {
font-size: 2em;
margin: 0.67em 0
}
mark {
background: #ff0;
color: #000
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
figure {
margin: 1em 40px
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code,
kbd,
pre,
samp {
font-family: monospace,
monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 0;
padding: 0
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: bold
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,
th {
padding: 0
}
* {
box-sizing: inherit
}
html,
body {
font-family: Arial,
Helvetica, sans-serif;
box-sizing: border-box;
height: 100%
}
body {
color: #111;
font-size: 1.1em;
line-height: 1.5;
background: #fff
}
main {
display: block
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: .6em 0
}
li {
margin: 0 0 .3em
}
a {
color: #0074d9;
text-decoration: none;
box-shadow: none;
transition: all 0.3s
}
code {
padding: .3em .6em;
font-size: .8em;
background: #f5f5f5
}
pre {
text-align: left;
padding: .3em .6em;
background: #f5f5f5;
border-radius: .2em
}
pre code {
padding: 0
}
blockquote {
padding: 0 0 0 1em;
margin: 0 0 0 .1em;
box-shadow: inset 5px 0 rgba(17, 17, 17, 0.3)
}
label {
cursor: pointer
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
margin: 0 .6em 0 0
}
i[class^="icon-"]:before,
i[class*="
icon-"]:before{margin:0}.label,[data-tooltip]:after,button,.button,[type=submit],.dropimage{display:inline-block;text-align:center;margin:0;padding:.3em
.9em;
vertical-align:middle;
background:#0074d9;
color:#fff;
border:0;
border-radius:.2em;
width:auto;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.success.label,
.success[data-tooltip]:after,
button.success,
.success.button,
.success[type=submit],
.success.dropimage {
background: #2ecc40
}
.warning.label,
.warning[data-tooltip]:after,
button.warning,
.warning.button,
.warning[type=submit],
.warning.dropimage {
background: #ff851b
}
.error.label,
.error[data-tooltip]:after,
button.error,
.error.button,
.error[type=submit],
.error.dropimage {
background: #ff4136
}
.pseudo.label,
.pseudo[data-tooltip]:after,
button.pseudo,
.pseudo.button,
.pseudo[type=submit],
.pseudo.dropimage {
background: transparent;
color: #111
}
.label,
[data-tooltip]:after {
font-size: .6em;
padding: .4em .6em;
margin-left: 1em;
line-height: 1
}
button,
.button,
[type=submit],
.dropimage {
margin: .3em 0;
cursor: pointer;
transition: all 0.3s;
border-radius: .2em;
height: auto;
box-shadow: 0 0 transparent inset
}
button:hover,
.button:hover,
[type=submit]:hover,
.dropimage:hover,
button:focus,
.button:focus,
[type=submit]:focus,
.dropimage:focus {
box-shadow: inset 0 0 0 99em rgba(255, 255, 255, 0.2);
border: 0
}
button.pseudo:hover,
.pseudo.button:hover,
.pseudo[type=submit]:hover,
.pseudo.dropimage:hover,
button.pseudo:focus,
.pseudo.button:focus,
.pseudo[type=submit]:focus,
.pseudo.dropimage:focus {
box-shadow: inset 0 0 0 99em rgba(17, 17, 17, 0.1)
}
button.active,
.active.button,
.active[type=submit],
.active.dropimage,
button:active,
.button:active,
[type=submit]:active,
.dropimage:active,
button.pseudo:active,
.pseudo.button:active,
.pseudo[type=submit]:active,
.pseudo.dropimage:active {
box-shadow: inset 0 0 0 99em rgba(17, 17, 17, 0.2)
}
button[disabled],
[disabled].button,
[disabled][type=submit],
[disabled].dropimage {
cursor: default;
box-shadow: none;
background: #bbb
}
:checked+.toggle,
:checked+.toggle:hover {
box-shadow: inset 0 0 0 99em rgba(17, 17, 17, 0.2)
}
[type]+.toggle {
padding: .3em .9em;
margin-right: 0
}
[type]+.toggle:after,
[type]+.toggle:before {
display: none
}
input,
textarea,
.select select {
line-height: 1.5;
margin: 0;
height: 2.1em;
padding: .3em .6em;
border: 1px solid #ccc;
background-color: #fff;
border-radius: .2em;
transition: all 0.3s;
width: 100%
}
input:focus,
textarea:focus,
.select select:focus {
border: 1px solid #0074d9;
outline: 0
}
textarea {
height: auto
}
[type=file],
[type=color] {
cursor: pointer
}
[type=file] {
height: auto
}
select {
background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=) no-repeat scroll 95% center/10px 15px;
background-position: calc(100% - 15px) center;
border: 1px solid #ccc;
border-radius: .2em;
cursor: pointer;
width: 100%;
height: 2.1em;
box-sizing: border-box;
padding: .3em .45em;
transition: all .3s;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none
}
select::-ms-expand {
display: none
}
select:focus,
select:active {
border: 1px solid #0074d9;
transition: outline 0s
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #111
}
select option {
font-size: inherit;
padding: .3em .45em
}
[type=radio],
[type=checkbox] {
opacity: 0;
width: 0;
position: absolute;
display: inline-block
}
[type=radio]+.checkable:hover:before,
[type=checkbox]+.checkable:hover:before,
[type=radio]:focus+.checkable:before,
[type=checkbox]:focus+.checkable:before {
border: 1px solid #0074d9
}
[type=radio]+.checkable,
[type=checkbox]+.checkable {
position: relative;
cursor: pointer;
padding-left: 1.5em;
margin-right: .6em
}
[type=radio]+.checkable:before,
[type=checkbox]+.checkable:before,
[type=radio]+.checkable:after,
[type=checkbox]+.checkable:after {
content: '';
position: absolute;
display: inline-block;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1em;
line-height: 1em;
color: transparent;
font-family: sans;
text-align: center;
box-sizing: border-box;
width: 1em;
height: 1em;
border-radius: 50%;
transition: all 0.3s
}
[type=radio]+.checkable:before,
[type=checkbox]+.checkable:before {
border: 1px solid #aaa
}
[type=radio]:checked+.checkable:after,
[type=checkbox]:checked+.checkable:after {
background: #555;
transform: scale(0.5) translateY(-100%)
}
[type=checkbox]+.checkable:before {
border-radius: .2em
}
[type=checkbox]+.checkable:after {
content: "✔";
background: none;
transform: scale(2) translateY(-25%);
visibility: hidden;
opacity: 0
}
[type=checkbox]:checked+.checkable:after {
color: #111;
background: none;
transform: translateY(-50%);
transition: all 0.3s;
visibility: visible;
opacity: 1
}
table {
text-align: left
}
td,
th {
padding: .3em 2.4em .3em .6em
}
th {
text-align: left;
font-weight: 900;
color: #fff;
background-color: #0074d9
}
.success th {
background-color: #2ecc40
}
.warning th {
background-color: #ff851b
}
.error th {
background-color: #ff4136
}
.dull th {
background-color: #aaa
}
tr:nth-child(even) {
background: rgba(0, 0, 0, 0.05)
}
.flex {
display: -ms-flexbox;
display: flex;
margin-left: -0.6em;
width: calc(100% + .6em);
flex-wrap: wrap;
transition: all .3s ease
}
.flex>* {
box-sizing: border-box;
flex: 1 1 auto;
padding-left: .6em;
padding-bottom: .6em
}
.flex[class*="one"]>*,
.flex[class*="two"]>*,
.flex[class*="three"]>*,
.flex[class*="four"]>*,
.flex[class*="five"]>*,
.flex[class*="six"]>*,
.flex[class*="seven"]>*,
.flex[class*="eight"]>*,
.flex[class*="nine"]>*,
.flex[class*="ten"]>*,
.flex[class*="eleven"]>*,
.flex[class*="twelve"]>* {
flex-grow: 0
}
.flex.grow>* {
flex-grow: 1
}
.center {
justify-content: center
}
.one>* {
width: 100%
}
.two>* {
width: 50%
}
.three>* {
width: 33.33333%
}
.four>* {
width: 25%
}
.five>* {
width: 20%
}
.six>* {
width: 16.66666%
}
.seven>* {
width: 14.28571%
}
.eight>* {
width: 12.5%
}
.nine>* {
width: 11.11111%
}
.ten>* {
width: 10%
}
.eleven>* {
width: 9.09091%
}
.twelve>* {
width: 8.33333%
}
@media all and (min-width: 500px) {
.one-500>* {
width: 100%
}
.two-500>* {
width: 50%
}
.three-500>* {
width: 33.33333%
}
.four-500>* {
width: 25%
}
.five-500>* {
width: 20%
}
.six-500>* {
width: 16.66666%
}
.seven-500>* {
width: 14.28571%
}
.eight-500>* {
width: 12.5%
}
.nine-500>* {
width: 11.11111%
}
.ten-500>* {
width: 10%
}
.eleven-500>* {
width: 9.09091%
}
.twelve-500>* {
width: 8.33333%
}
}
@media all and (min-width: 600px) {
.one-600>* {
width: 100%
}
.two-600>* {
width: 50%
}
.three-600>* {
width: 33.33333%
}
.four-600>* {
width: 25%
}
.five-600>* {
width: 20%
}
.six-600>* {
width: 16.66666%
}
.seven-600>* {
width: 14.28571%
}
.eight-600>* {
width: 12.5%
}
.nine-600>* {
width: 11.11111%
}
.ten-600>* {
width: 10%
}
.eleven-600>* {
width: 9.09091%
}
.twelve-600>* {
width: 8.33333%
}
}
@media all and (min-width: 700px) {
.one-700>* {
width: 100%
}
.two-700>* {
width: 50%
}
.three-700>* {
width: 33.33333%
}
.four-700>* {
width: 25%
}
.five-700>* {
width: 20%
}
.six-700>* {
width: 16.66666%
}
.seven-700>* {
width: 14.28571%
}
.eight-700>* {
width: 12.5%
}
.nine-700>* {
width: 11.11111%
}
.ten-700>* {
width: 10%
}
.eleven-700>* {
width: 9.09091%
}
.twelve-700>* {
width: 8.33333%
}
}
@media all and (min-width: 800px) {
.one-800>* {
width: 100%
}
.two-800>* {
width: 50%
}
.three-800>* {
width: 33.33333%
}
.four-800>* {
width: 25%
}
.five-800>* {
width: 20%
}
.six-800>* {
width: 16.66666%
}
.seven-800>* {
width: 14.28571%
}
.eight-800>* {
width: 12.5%
}
.nine-800>* {
width: 11.11111%
}
.ten-800>* {
width: 10%
}
.eleven-800>* {
width: 9.09091%
}
.twelve-800>* {
width: 8.33333%
}
}
@media all and (min-width: 900px) {
.one-900>* {
width: 100%
}
.two-900>* {
width: 50%
}
.three-900>* {
width: 33.33333%
}
.four-900>* {
width: 25%
}
.five-900>* {
width: 20%
}
.six-900>* {
width: 16.66666%
}
.seven-900>* {
width: 14.28571%
}
.eight-900>* {
width: 12.5%
}
.nine-900>* {
width: 11.11111%
}
.ten-900>* {
width: 10%
}
.eleven-900>* {
width: 9.09091%
}
.twelve-900>* {
width: 8.33333%
}
}
@media all and (min-width: 1000px) {
.one-1000>* {
width: 100%
}
.two-1000>* {
width: 50%
}
.three-1000>* {
width: 33.33333%
}
.four-1000>* {
width: 25%
}
.five-1000>* {
width: 20%
}
.six-1000>* {
width: 16.66666%
}
.seven-1000>* {
width: 14.28571%
}
.eight-1000>* {
width: 12.5%
}
.nine-1000>* {
width: 11.11111%
}
.ten-1000>* {
width: 10%
}
.eleven-1000>* {
width: 9.09091%
}
.twelve-1000>* {
width: 8.33333%
}
}
@media all and (min-width: 1100px) {
.one-1100>* {
width: 100%
}
.two-1100>* {
width: 50%
}
.three-1100>* {
width: 33.33333%
}
.four-1100>* {
width: 25%
}
.five-1100>* {
width: 20%
}
.six-1100>* {
width: 16.66666%
}
.seven-1100>* {
width: 14.28571%
}
.eight-1100>* {
width: 12.5%
}
.nine-1100>* {
width: 11.11111%
}
.ten-1100>* {
width: 10%
}
.eleven-1100>* {
width: 9.09091%
}
.twelve-1100>* {
width: 8.33333%
}
}
@media all and (min-width: 1200px) {
.one-1200>* {
width: 100%
}
.two-1200>* {
width: 50%
}
.three-1200>* {
width: 33.33333%
}
.four-1200>* {
width: 25%
}
.five-1200>* {
width: 20%
}
.six-1200>* {
width: 16.66666%
}
.seven-1200>* {
width: 14.28571%
}
.eight-1200>* {
width: 12.5%
}
.nine-1200>* {
width: 11.11111%
}
.ten-1200>* {
width: 10%
}
.eleven-1200>* {
width: 9.09091%
}
.twelve-1200>* {
width: 8.33333%
}
}
@media all and (min-width: 1300px) {
.one-1300>* {
width: 100%
}
.two-1300>* {
width: 50%
}
.three-1300>* {
width: 33.33333%
}
.four-1300>* {
width: 25%
}
.five-1300>* {
width: 20%
}
.six-1300>* {
width: 16.66666%
}
.seven-1300>* {
width: 14.28571%
}
.eight-1300>* {
width: 12.5%
}
.nine-1300>* {
width: 11.11111%
}
.ten-1300>* {
width: 10%
}
.eleven-1300>* {
width: 9.09091%
}
.twelve-1300>* {
width: 8.33333%
}
}
@media all and (min-width: 1400px) {
.one-1400>* {
width: 100%
}
.two-1400>* {
width: 50%
}
.three-1400>* {
width: 33.33333%
}
.four-1400>* {
width: 25%
}
.five-1400>* {
width: 20%
}
.six-1400>* {
width: 16.66666%
}
.seven-1400>* {
width: 14.28571%
}
.eight-1400>* {
width: 12.5%
}
.nine-1400>* {
width: 11.11111%
}
.ten-1400>* {
width: 10%
}
.eleven-1400>* {
width: 9.09091%
}
.twelve-1400>* {
width: 8.33333%
}
}
@media all and (min-width: 1500px) {
.one-1500>* {
width: 100%
}
.two-1500>* {
width: 50%
}
.three-1500>* {
width: 33.33333%
}
.four-1500>* {
width: 25%
}
.five-1500>* {
width: 20%
}
.six-1500>* {
width: 16.66666%
}
.seven-1500>* {
width: 14.28571%
}
.eight-1500>* {
width: 12.5%
}
.nine-1500>* {
width: 11.11111%
}
.ten-1500>* {
width: 10%
}
.eleven-1500>* {
width: 9.09091%
}
.twelve-1500>* {
width: 8.33333%
}
}
@media all and (min-width: 1600px) {
.one-1600>* {
width: 100%
}
.two-1600>* {
width: 50%
}
.three-1600>* {
width: 33.33333%
}
.four-1600>* {
width: 25%
}
.five-1600>* {
width: 20%
}
.six-1600>* {
width: 16.66666%
}
.seven-1600>* {
width: 14.28571%
}
.eight-1600>* {
width: 12.5%
}
.nine-1600>* {
width: 11.11111%
}
.ten-1600>* {
width: 10%
}
.eleven-1600>* {
width: 9.09091%
}
.twelve-1600>* {
width: 8.33333%
}
}
@media all and (min-width: 1700px) {
.one-1700>* {
width: 100%
}
.two-1700>* {
width: 50%
}
.three-1700>* {
width: 33.33333%
}
.four-1700>* {
width: 25%
}
.five-1700>* {
width: 20%
}
.six-1700>* {
width: 16.66666%
}
.seven-1700>* {
width: 14.28571%
}
.eight-1700>* {
width: 12.5%
}
.nine-1700>* {
width: 11.11111%
}
.ten-1700>* {
width: 10%
}
.eleven-1700>* {
width: 9.09091%
}
.twelve-1700>* {
width: 8.33333%
}
}
@media all and (min-width: 1800px) {
.one-1800>* {
width: 100%
}
.two-1800>* {
width: 50%
}
.three-1800>* {
width: 33.33333%
}
.four-1800>* {
width: 25%
}
.five-1800>* {
width: 20%
}
.six-1800>* {
width: 16.66666%
}
.seven-1800>* {
width: 14.28571%
}
.eight-1800>* {
width: 12.5%
}
.nine-1800>* {
width: 11.11111%
}
.ten-1800>* {
width: 10%
}
.eleven-1800>* {
width: 9.09091%
}
.twelve-1800>* {
width: 8.33333%
}
}
@media all and (min-width: 1900px) {
.one-1900>* {
width: 100%
}
.two-1900>* {
width: 50%
}
.three-1900>* {
width: 33.33333%
}
.four-1900>* {
width: 25%
}
.five-1900>* {
width: 20%
}
.six-1900>* {
width: 16.66666%
}
.seven-1900>* {
width: 14.28571%
}
.eight-1900>* {
width: 12.5%
}
.nine-1900>* {
width: 11.11111%
}
.ten-1900>* {
width: 10%
}
.eleven-1900>* {
width: 9.09091%
}
.twelve-1900>* {
width: 8.33333%
}
}
@media all and (min-width: 2000px) {
.one-2000>* {
width: 100%
}
.two-2000>* {
width: 50%
}
.three-2000>* {
width: 33.33333%
}
.four-2000>* {
width: 25%
}
.five-2000>* {
width: 20%
}
.six-2000>* {
width: 16.66666%
}
.seven-2000>* {
width: 14.28571%
}
.eight-2000>* {
width: 12.5%
}
.nine-2000>* {
width: 11.11111%
}
.ten-2000>* {
width: 10%
}
.eleven-2000>* {
width: 9.09091%
}
.twelve-2000>* {
width: 8.33333%
}
}
.full {
width: 100%
}
.half {
width: 50%
}
.third {
width: 33.33333%
}
.two-third {
width: 66.66666%
}
.fourth {
width: 25%
}
.three-fourth {
width: 75%
}
.fifth {
width: 20%
}
.two-fifth {
width: 40%
}
.three-fifth {
width: 60%
}
.four-fifth {
width: 80%
}
.sixth {
width: 16.66666%
}
.none {
display: none
}
@media all and (min-width: 500px) {
.full-500 {
width: 100%;
display: block
}
.half-500 {
width: 50%;
display: block
}
.third-500 {
width: 33.33333%;
display: block
}
.two-third-500 {
width: 66.66666%;
display: block
}
.fourth-500 {
width: 25%;
display: block
}
.three-fourth-500 {
width: 75%;
display: block
}
.fifth-500 {
width: 20%;
display: block
}
.two-fifth-500 {
width: 40%;
display: block
}
.three-fifth-500 {
width: 60%;
display: block
}
.four-fifth-500 {
width: 80%;
display: block
}
.sixth-500 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 600px) {
.full-600 {
width: 100%;
display: block
}
.half-600 {
width: 50%;
display: block
}
.third-600 {
width: 33.33333%;
display: block
}
.two-third-600 {
width: 66.66666%;
display: block
}
.fourth-600 {
width: 25%;
display: block
}
.three-fourth-600 {
width: 75%;
display: block
}
.fifth-600 {
width: 20%;
display: block
}
.two-fifth-600 {
width: 40%;
display: block
}
.three-fifth-600 {
width: 60%;
display: block
}
.four-fifth-600 {
width: 80%;
display: block
}
.sixth-600 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 700px) {
.full-700 {
width: 100%;
display: block
}
.half-700 {
width: 50%;
display: block
}
.third-700 {
width: 33.33333%;
display: block
}
.two-third-700 {
width: 66.66666%;
display: block
}
.fourth-700 {
width: 25%;
display: block
}
.three-fourth-700 {
width: 75%;
display: block
}
.fifth-700 {
width: 20%;
display: block
}
.two-fifth-700 {
width: 40%;
display: block
}
.three-fifth-700 {
width: 60%;
display: block
}
.four-fifth-700 {
width: 80%;
display: block
}
.sixth-700 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 800px) {
.full-800 {
width: 100%;
display: block
}
.half-800 {
width: 50%;
display: block
}
.third-800 {
width: 33.33333%;
display: block
}
.two-third-800 {
width: 66.66666%;
display: block
}
.fourth-800 {
width: 25%;
display: block
}
.three-fourth-800 {
width: 75%;
display: block
}
.fifth-800 {
width: 20%;
display: block
}
.two-fifth-800 {
width: 40%;
display: block
}
.three-fifth-800 {
width: 60%;
display: block
}
.four-fifth-800 {
width: 80%;
display: block
}
.sixth-800 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 900px) {
.full-900 {
width: 100%;
display: block
}
.half-900 {
width: 50%;
display: block
}
.third-900 {
width: 33.33333%;
display: block
}
.two-third-900 {
width: 66.66666%;
display: block
}
.fourth-900 {
width: 25%;
display: block
}
.three-fourth-900 {
width: 75%;
display: block
}
.fifth-900 {
width: 20%;
display: block
}
.two-fifth-900 {
width: 40%;
display: block
}
.three-fifth-900 {
width: 60%;
display: block
}
.four-fifth-900 {
width: 80%;
display: block
}
.sixth-900 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1000px) {
.full-1000 {
width: 100%;
display: block
}
.half-1000 {
width: 50%;
display: block
}
.third-1000 {
width: 33.33333%;
display: block
}
.two-third-1000 {
width: 66.66666%;
display: block
}
.fourth-1000 {
width: 25%;
display: block
}
.three-fourth-1000 {
width: 75%;
display: block
}
.fifth-1000 {
width: 20%;
display: block
}
.two-fifth-1000 {
width: 40%;
display: block
}
.three-fifth-1000 {
width: 60%;
display: block
}
.four-fifth-1000 {
width: 80%;
display: block
}
.sixth-1000 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1100px) {
.full-1100 {
width: 100%;
display: block
}
.half-1100 {
width: 50%;
display: block
}
.third-1100 {
width: 33.33333%;
display: block
}
.two-third-1100 {
width: 66.66666%;
display: block
}
.fourth-1100 {
width: 25%;
display: block
}
.three-fourth-1100 {
width: 75%;
display: block
}
.fifth-1100 {
width: 20%;
display: block
}
.two-fifth-1100 {
width: 40%;
display: block
}
.three-fifth-1100 {
width: 60%;
display: block
}
.four-fifth-1100 {
width: 80%;
display: block
}
.sixth-1100 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1200px) {
.full-1200 {
width: 100%;
display: block
}
.half-1200 {
width: 50%;
display: block
}
.third-1200 {
width: 33.33333%;
display: block
}
.two-third-1200 {
width: 66.66666%;
display: block
}
.fourth-1200 {
width: 25%;
display: block
}
.three-fourth-1200 {
width: 75%;
display: block
}
.fifth-1200 {
width: 20%;
display: block
}
.two-fifth-1200 {
width: 40%;
display: block
}
.three-fifth-1200 {
width: 60%;
display: block
}
.four-fifth-1200 {
width: 80%;
display: block
}
.sixth-1200 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1300px) {
.full-1300 {
width: 100%;
display: block
}
.half-1300 {
width: 50%;
display: block
}
.third-1300 {
width: 33.33333%;
display: block
}
.two-third-1300 {
width: 66.66666%;
display: block
}
.fourth-1300 {
width: 25%;
display: block
}
.three-fourth-1300 {
width: 75%;
display: block
}
.fifth-1300 {
width: 20%;
display: block
}
.two-fifth-1300 {
width: 40%;
display: block
}
.three-fifth-1300 {
width: 60%;
display: block
}
.four-fifth-1300 {
width: 80%;
display: block
}
.sixth-1300 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1400px) {
.full-1400 {
width: 100%;
display: block
}
.half-1400 {
width: 50%;
display: block
}
.third-1400 {
width: 33.33333%;
display: block
}
.two-third-1400 {
width: 66.66666%;
display: block
}
.fourth-1400 {
width: 25%;
display: block
}
.three-fourth-1400 {
width: 75%;
display: block
}
.fifth-1400 {
width: 20%;
display: block
}
.two-fifth-1400 {
width: 40%;
display: block
}
.three-fifth-1400 {
width: 60%;
display: block
}
.four-fifth-1400 {
width: 80%;
display: block
}
.sixth-1400 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1500px) {
.full-1500 {
width: 100%;
display: block
}
.half-1500 {
width: 50%;
display: block
}
.third-1500 {
width: 33.33333%;
display: block
}
.two-third-1500 {
width: 66.66666%;
display: block
}
.fourth-1500 {
width: 25%;
display: block
}
.three-fourth-1500 {
width: 75%;
display: block
}
.fifth-1500 {
width: 20%;
display: block
}
.two-fifth-1500 {
width: 40%;
display: block
}
.three-fifth-1500 {
width: 60%;
display: block
}
.four-fifth-1500 {
width: 80%;
display: block
}
.sixth-1500 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1600px) {
.full-1600 {
width: 100%;
display: block
}
.half-1600 {
width: 50%;
display: block
}
.third-1600 {
width: 33.33333%;
display: block
}
.two-third-1600 {
width: 66.66666%;
display: block
}
.fourth-1600 {
width: 25%;
display: block
}
.three-fourth-1600 {
width: 75%;
display: block
}
.fifth-1600 {
width: 20%;
display: block
}
.two-fifth-1600 {
width: 40%;
display: block
}
.three-fifth-1600 {
width: 60%;
display: block
}
.four-fifth-1600 {
width: 80%;
display: block
}
.sixth-1600 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1700px) {
.full-1700 {
width: 100%;
display: block
}
.half-1700 {
width: 50%;
display: block
}
.third-1700 {
width: 33.33333%;
display: block
}
.two-third-1700 {
width: 66.66666%;
display: block
}
.fourth-1700 {
width: 25%;
display: block
}
.three-fourth-1700 {
width: 75%;
display: block
}
.fifth-1700 {
width: 20%;
display: block
}
.two-fifth-1700 {
width: 40%;
display: block
}
.three-fifth-1700 {
width: 60%;
display: block
}
.four-fifth-1700 {
width: 80%;
display: block
}
.sixth-1700 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1800px) {
.full-1800 {
width: 100%;
display: block
}
.half-1800 {
width: 50%;
display: block
}
.third-1800 {
width: 33.33333%;
display: block
}
.two-third-1800 {
width: 66.66666%;
display: block
}
.fourth-1800 {
width: 25%;
display: block
}
.three-fourth-1800 {
width: 75%;
display: block
}
.fifth-1800 {
width: 20%;
display: block
}
.two-fifth-1800 {
width: 40%;
display: block
}
.three-fifth-1800 {
width: 60%;
display: block
}
.four-fifth-1800 {
width: 80%;
display: block
}
.sixth-1800 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 1900px) {
.full-1900 {
width: 100%;
display: block
}
.half-1900 {
width: 50%;
display: block
}
.third-1900 {
width: 33.33333%;
display: block
}
.two-third-1900 {
width: 66.66666%;
display: block
}
.fourth-1900 {
width: 25%;
display: block
}
.three-fourth-1900 {
width: 75%;
display: block
}
.fifth-1900 {
width: 20%;
display: block
}
.two-fifth-1900 {
width: 40%;
display: block
}
.three-fifth-1900 {
width: 60%;
display: block
}
.four-fifth-1900 {
width: 80%;
display: block
}
.sixth-1900 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 2000px) {
.full-2000 {
width: 100%;
display: block
}
.half-2000 {
width: 50%;
display: block
}
.third-2000 {
width: 33.33333%;
display: block
}
.two-third-2000 {
width: 66.66666%;
display: block
}
.fourth-2000 {
width: 25%;
display: block
}
.three-fourth-2000 {
width: 75%;
display: block
}
.fifth-2000 {
width: 20%;
display: block
}
.two-fifth-2000 {
width: 40%;
display: block
}
.three-fifth-2000 {
width: 60%;
display: block
}
.four-fifth-2000 {
width: 80%;
display: block
}
.sixth-2000 {
width: 16.66666%;
display: block
}
}
@media all and (min-width: 500px) {
.none-500 {
display: none
}
}
@media all and (min-width: 600px) {
.none-600 {
display: none
}
}
@media all and (min-width: 700px) {
.none-700 {
display: none
}
}
@media all and (min-width: 800px) {
.none-800 {
display: none
}
}
@media all and (min-width: 900px) {
.none-900 {
display: none
}
}
@media all and (min-width: 1000px) {
.none-1000 {
display: none
}
}
@media all and (min-width: 1100px) {
.none-1100 {
display: none
}
}
@media all and (min-width: 1200px) {
.none-1200 {
display: none
}
}
@media all and (min-width: 1300px) {
.none-1300 {
display: none
}
}
@media all and (min-width: 1400px) {
.none-1400 {
display: none
}
}
@media all and (min-width: 1500px) {
.none-1500 {
display: none
}
}
@media all and (min-width: 1600px) {
.none-1600 {
display: none
}
}
@media all and (min-width: 1700px) {
.none-1700 {
display: none
}
}
@media all and (min-width: 1800px) {
.none-1800 {
display: none
}
}
@media all and (min-width: 1900px) {
.none-1900 {
display: none
}
}
@media all and (min-width: 2000px) {
.none-2000 {
display: none
}
}
.off-none {
margin-left: 0
}
.off-half {
margin-left: 50%
}
.off-third {
margin-left: 33.33333%
}
.off-two-third {
margin-left: 66.66666%
}
.off-fourth {
margin-left: 25%
}
.off-three-fourth {
margin-left: 75%
}
.off-fifth {
margin-left: 20%
}
.off-two-fifth {
margin-left: 40%
}
.off-three-fifth {
margin-left: 60%
}
.off-four-fifth {
margin-left: 80%
}
.off-sixth {
margin-left: 16.66666%
}
@media all and (min-width: 500px) {
.off-none-500 {
margin-left: 0
}
.off-half-500 {
margin-left: 50%
}
.off-third-500 {
margin-left: 33.33333%
}
.off-two-third-500 {
margin-left: 66.66666%
}
.off-fourth-500 {
margin-left: 25%
}
.off-three-fourth-500 {
margin-left: 75%
}
.off-fifth-500 {
margin-left: 20%
}
.off-two-fifth-500 {
margin-left: 40%
}
.off-three-fifth-500 {
margin-left: 60%
}
.off-four-fifth-500 {
margin-left: 80%
}
.off-sixth-500 {
margin-left: 16.66666%
}
}
@media all and (min-width: 600px) {
.off-none-600 {
margin-left: 0
}
.off-half-600 {
margin-left: 50%
}
.off-third-600 {
margin-left: 33.33333%
}
.off-two-third-600 {
margin-left: 66.66666%
}
.off-fourth-600 {
margin-left: 25%
}
.off-three-fourth-600 {
margin-left: 75%
}
.off-fifth-600 {
margin-left: 20%
}
.off-two-fifth-600 {
margin-left: 40%
}
.off-three-fifth-600 {
margin-left: 60%
}
.off-four-fifth-600 {
margin-left: 80%
}
.off-sixth-600 {
margin-left: 16.66666%
}
}
@media all and (min-width: 700px) {
.off-none-700 {
margin-left: 0
}
.off-half-700 {
margin-left: 50%
}
.off-third-700 {
margin-left: 33.33333%
}
.off-two-third-700 {
margin-left: 66.66666%
}
.off-fourth-700 {
margin-left: 25%
}
.off-three-fourth-700 {
margin-left: 75%
}
.off-fifth-700 {
margin-left: 20%
}
.off-two-fifth-700 {
margin-left: 40%
}
.off-three-fifth-700 {
margin-left: 60%
}
.off-four-fifth-700 {
margin-left: 80%
}
.off-sixth-700 {
margin-left: 16.66666%
}
}
@media all and (min-width: 800px) {
.off-none-800 {
margin-left: 0
}
.off-half-800 {
margin-left: 50%
}
.off-third-800 {
margin-left: 33.33333%
}
.off-two-third-800 {
margin-left: 66.66666%
}
.off-fourth-800 {
margin-left: 25%
}
.off-three-fourth-800 {
margin-left: 75%
}
.off-fifth-800 {
margin-left: 20%
}
.off-two-fifth-800 {
margin-left: 40%
}
.off-three-fifth-800 {
margin-left: 60%
}
.off-four-fifth-800 {
margin-left: 80%
}
.off-sixth-800 {
margin-left: 16.66666%
}
}
@media all and (min-width: 900px) {
.off-none-900 {
margin-left: 0
}
.off-half-900 {
margin-left: 50%
}
.off-third-900 {
margin-left: 33.33333%
}
.off-two-third-900 {
margin-left: 66.66666%
}
.off-fourth-900 {
margin-left: 25%
}
.off-three-fourth-900 {
margin-left: 75%
}
.off-fifth-900 {
margin-left: 20%
}
.off-two-fifth-900 {
margin-left: 40%
}
.off-three-fifth-900 {
margin-left: 60%
}
.off-four-fifth-900 {
margin-left: 80%
}
.off-sixth-900 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1000px) {
.off-none-1000 {
margin-left: 0
}
.off-half-1000 {
margin-left: 50%
}
.off-third-1000 {
margin-left: 33.33333%
}
.off-two-third-1000 {
margin-left: 66.66666%
}
.off-fourth-1000 {
margin-left: 25%
}
.off-three-fourth-1000 {
margin-left: 75%
}
.off-fifth-1000 {
margin-left: 20%
}
.off-two-fifth-1000 {
margin-left: 40%
}
.off-three-fifth-1000 {
margin-left: 60%
}
.off-four-fifth-1000 {
margin-left: 80%
}
.off-sixth-1000 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1100px) {
.off-none-1100 {
margin-left: 0
}
.off-half-1100 {
margin-left: 50%
}
.off-third-1100 {
margin-left: 33.33333%
}
.off-two-third-1100 {
margin-left: 66.66666%
}
.off-fourth-1100 {
margin-left: 25%
}
.off-three-fourth-1100 {
margin-left: 75%
}
.off-fifth-1100 {
margin-left: 20%
}
.off-two-fifth-1100 {
margin-left: 40%
}
.off-three-fifth-1100 {
margin-left: 60%
}
.off-four-fifth-1100 {
margin-left: 80%
}
.off-sixth-1100 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1200px) {
.off-none-1200 {
margin-left: 0
}
.off-half-1200 {
margin-left: 50%
}
.off-third-1200 {
margin-left: 33.33333%
}
.off-two-third-1200 {
margin-left: 66.66666%
}
.off-fourth-1200 {
margin-left: 25%
}
.off-three-fourth-1200 {
margin-left: 75%
}
.off-fifth-1200 {
margin-left: 20%
}
.off-two-fifth-1200 {
margin-left: 40%
}
.off-three-fifth-1200 {
margin-left: 60%
}
.off-four-fifth-1200 {
margin-left: 80%
}
.off-sixth-1200 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1300px) {
.off-none-1300 {
margin-left: 0
}
.off-half-1300 {
margin-left: 50%
}
.off-third-1300 {
margin-left: 33.33333%
}
.off-two-third-1300 {
margin-left: 66.66666%
}
.off-fourth-1300 {
margin-left: 25%
}
.off-three-fourth-1300 {
margin-left: 75%
}
.off-fifth-1300 {
margin-left: 20%
}
.off-two-fifth-1300 {
margin-left: 40%
}
.off-three-fifth-1300 {
margin-left: 60%
}
.off-four-fifth-1300 {
margin-left: 80%
}
.off-sixth-1300 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1400px) {
.off-none-1400 {
margin-left: 0
}
.off-half-1400 {
margin-left: 50%
}
.off-third-1400 {
margin-left: 33.33333%
}
.off-two-third-1400 {
margin-left: 66.66666%
}
.off-fourth-1400 {
margin-left: 25%
}
.off-three-fourth-1400 {
margin-left: 75%
}
.off-fifth-1400 {
margin-left: 20%
}
.off-two-fifth-1400 {
margin-left: 40%
}
.off-three-fifth-1400 {
margin-left: 60%
}
.off-four-fifth-1400 {
margin-left: 80%
}
.off-sixth-1400 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1500px) {
.off-none-1500 {
margin-left: 0
}
.off-half-1500 {
margin-left: 50%
}
.off-third-1500 {
margin-left: 33.33333%
}
.off-two-third-1500 {
margin-left: 66.66666%
}
.off-fourth-1500 {
margin-left: 25%
}
.off-three-fourth-1500 {
margin-left: 75%
}
.off-fifth-1500 {
margin-left: 20%
}
.off-two-fifth-1500 {
margin-left: 40%
}
.off-three-fifth-1500 {
margin-left: 60%
}
.off-four-fifth-1500 {
margin-left: 80%
}
.off-sixth-1500 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1600px) {
.off-none-1600 {
margin-left: 0
}
.off-half-1600 {
margin-left: 50%
}
.off-third-1600 {
margin-left: 33.33333%
}
.off-two-third-1600 {
margin-left: 66.66666%
}
.off-fourth-1600 {
margin-left: 25%
}
.off-three-fourth-1600 {
margin-left: 75%
}
.off-fifth-1600 {
margin-left: 20%
}
.off-two-fifth-1600 {
margin-left: 40%
}
.off-three-fifth-1600 {
margin-left: 60%
}
.off-four-fifth-1600 {
margin-left: 80%
}
.off-sixth-1600 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1700px) {
.off-none-1700 {
margin-left: 0
}
.off-half-1700 {
margin-left: 50%
}
.off-third-1700 {
margin-left: 33.33333%
}
.off-two-third-1700 {
margin-left: 66.66666%
}
.off-fourth-1700 {
margin-left: 25%
}
.off-three-fourth-1700 {
margin-left: 75%
}
.off-fifth-1700 {
margin-left: 20%
}
.off-two-fifth-1700 {
margin-left: 40%
}
.off-three-fifth-1700 {
margin-left: 60%
}
.off-four-fifth-1700 {
margin-left: 80%
}
.off-sixth-1700 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1800px) {
.off-none-1800 {
margin-left: 0
}
.off-half-1800 {
margin-left: 50%
}
.off-third-1800 {
margin-left: 33.33333%
}
.off-two-third-1800 {
margin-left: 66.66666%
}
.off-fourth-1800 {
margin-left: 25%
}
.off-three-fourth-1800 {
margin-left: 75%
}
.off-fifth-1800 {
margin-left: 20%
}
.off-two-fifth-1800 {
margin-left: 40%
}
.off-three-fifth-1800 {
margin-left: 60%
}
.off-four-fifth-1800 {
margin-left: 80%
}
.off-sixth-1800 {
margin-left: 16.66666%
}
}
@media all and (min-width: 1900px) {
.off-none-1900 {
margin-left: 0
}
.off-half-1900 {
margin-left: 50%
}
.off-third-1900 {
margin-left: 33.33333%
}
.off-two-third-1900 {
margin-left: 66.66666%
}
.off-fourth-1900 {
margin-left: 25%
}
.off-three-fourth-1900 {
margin-left: 75%
}
.off-fifth-1900 {
margin-left: 20%
}
.off-two-fifth-1900 {
margin-left: 40%
}
.off-three-fifth-1900 {
margin-left: 60%
}
.off-four-fifth-1900 {
margin-left: 80%
}
.off-sixth-1900 {
margin-left: 16.66666%
}
}
@media all and (min-width: 2000px) {
.off-none-2000 {
margin-left: 0
}
.off-half-2000 {
margin-left: 50%
}
.off-third-2000 {
margin-left: 33.33333%
}
.off-two-third-2000 {
margin-left: 66.66666%
}
.off-fourth-2000 {
margin-left: 25%
}
.off-three-fourth-2000 {
margin-left: 75%
}
.off-fifth-2000 {
margin-left: 20%
}
.off-two-fifth-2000 {
margin-left: 40%
}
.off-three-fifth-2000 {
margin-left: 60%
}
.off-four-fifth-2000 {
margin-left: 80%
}
.off-sixth-2000 {
margin-left: 16.66666%
}
}
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3em;
padding: 0 .6em;
background: #fff;
box-shadow: 0 0 0.2em rgba(17, 17, 17, 0.2);
z-index: 10000;
transition: all .3s;
transform-style: preserve-3d
}
nav .brand,
nav .menu,
nav .burger {
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
nav .brand {
font-weight: 700;
float: left;
padding: 0 .6em;
max-width: 50%;
white-space: nowrap;
color: #111
}
nav .brand * {
vertical-align: middle
}
nav .logo {
height: 2em;
margin-right: .3em
}
nav .select::after {
height: calc(100% - 1px);
padding: 0;
line-height: 2.4em
}
nav .menu>* {
margin-right: .6em
}
nav .burger {
display: none
}
@media all and (max-width: 60em) {
nav .burger {
display: inline-block;
cursor: pointer;
bottom: -1000em;
margin: 0
}
nav .burger~.menu,
nav .show:checked~.burger {
position: fixed;
min-height: 100%;
width: 0;
overflow: hidden;
top: 0;
right: 0;
bottom: -1000em;
margin: 0;
background: #fff;
transition: all .3s ease;
transform: none
}
nav .burger~.menu {
z-index: 11
}
nav .show:checked~.burger {
color: transparent;
width: 100%;
border-radius: 0;
background: rgba(0, 0, 0, 0.2);
transition: all .3s ease
}
nav .show:checked~.menu {
width: 70%;
overflow: auto;
transition: all .3s ease;
height: 100vh
}
nav .burger~.menu>* {
display: block;
margin: .3em;
text-align: left;
max-width: calc(100% - .6em)
}
nav .burger~.menu>a {
padding: .3em .9em
}
}
.stack,
.stack .toggle {
margin-top: 0;
margin-bottom: 0;
display: block;
width: 100%;
text-align: left;
border-radius: 0
}
.stack:first-child,
.stack:first-child .toggle {
border-top-left-radius: .2em;
border-top-right-radius: .2em
}
.stack:last-child,
.stack:last-child .toggle {
border-bottom-left-radius: .2em;
border-bottom-right-radius: .2em
}
input.stack,
textarea.stack,
select.stack {
transition: border-bottom 0 ease 0;
border-bottom-width: 0
}
input.stack:last-child,
textarea.stack:last-child,
select.stack:last-child {
border-bottom-width: 1px
}
input.stack:focus+input,
input.stack:focus+textarea,
input.stack:focus+select,
textarea.stack:focus+input,
textarea.stack:focus+textarea,
textarea.stack:focus+select,
select.stack:focus+input,
select.stack:focus+textarea,
select.stack:focus+select {
border-top-color: #0074d9
}
.card,
.modal .overlay~* {
position: relative;
box-shadow: 0;
border-radius: .2em;
border: 1px solid #ccc;
overflow: hidden;
text-align: left;
background: #fff;
margin-bottom: .6em;
padding: 0;
transition: all .3s ease
}
.hidden.card,
.modal .overlay~.hidden,
:checked+.card,
.modal .overlay~ :checked+*,
.modal .overlay:checked+* {
font-size: 0;
padding: 0;
margin: 0;
border: 0
}
.card>*,
.modal .overlay~*>* {
max-width: 100%;
display: block
}
.card>*:last-child,
.modal .overlay~*>*:last-child {
margin-bottom: 0
}
.card header,
.modal .overlay~* header,
.card section,
.modal .overlay~* section,
.card>p,
.modal .overlay~*>p {
padding: .6em .8em
}
.card section,
.modal .overlay~* section {
padding: .6em .8em 0
}
.card hr,
.modal .overlay~* hr {
border: none;
height: 1px;
background-color: #eee
}
.card header,
.modal .overlay~* header {
font-weight: bold;
position: relative;
border-bottom: 1px solid #eee
}
.card header h1,
.modal .overlay~* header h1,
.card header h2,
.modal .overlay~* header h2,
.card header h3,
.modal .overlay~* header h3,
.card header h4,
.modal .overlay~* header h4,
.card header h5,
.modal .overlay~* header h5,
.card header h6,
.modal .overlay~* header h6 {
padding: 0;
margin: 0 2em 0 0;
line-height: 1;
display: inline-block;
vertical-align: text-bottom
}
.card header:last-child,
.modal .overlay~* header:last-child {
border-bottom: 0
}
.card footer,
.modal .overlay~* footer {
padding: .8em
}
.card p,
.modal .overlay~* p {
margin: .3em 0
}
.card p:first-child,
.modal .overlay~* p:first-child {
margin-top: 0
}
.card p:last-child,
.modal .overlay~* p:last-child {
margin-bottom: 0
}
.card>p,
.modal .overlay~*>p {
margin: 0;
padding-right: 2.5em
}
.card .close,
.modal .overlay~* .close {
position: absolute;
top: .4em