UNPKG

atomic-css

Version:

2,646 lines (1,924 loc) 43.3 kB
.relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .br0 { border-radius: 0; } .br1 { border-radius: 0.125rem; } .br2 { border-radius: 0.25rem; } .br3 { border-radius: 0.5rem; } .br4 { border-radius: 1rem; } .br-100 { border-radius: 100%; } .br-pill { border-radius: 9999px; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ba { border-style: solid; border-width: 1px; } .bt { border-top-style: solid; border-top-width: 1px; } .br { border-right-style: solid; border-right-width: 1px; } .bb { border-bottom-style: solid; border-bottom-width: 1px; } .bl { border-left-style: solid; border-left-width: 1px; } .bn { border-style: none; border-width: 0; } .bw0 { border-width: 0; } .bw1 { border-width: 0.125rem; } .bw2 { border-width: 0.25rem; } .bw3 { border-width: 0.5rem; } .bw4 { border-width: 1rem; } .bw5 { border-width: 2rem; } .bt-0 { border-top-width: 0; } .br-0 { border-right-width: 0; } .bb-0 { border-bottom-width: 0; } .bl-0 { border-left-width: 0; } .shadow-1 { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); } .shadow-2 { box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); } .shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2); } .shadow-4 { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2); } .shadow-5 { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); } .ttc { text-transform: capitalize; } .ttl { text-transform: lowercase; } .ttu { text-transform: uppercase; } .ttn { text-transform: none; } .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } .i { font-style: italic; } .fs-normal { font-style: normal; } .small-caps { font-variant: small-caps; } .text-shadow-1 { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .text-shadow-2 { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); } .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw3 { font-weight: 300; } .fw4 { font-weight: 400; } .fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .fw9 { font-weight: 900; } .tracked { letter-spacing: 0.1em; } .tracked-tight { letter-spacing: -0.05em; } .tracked-mega { letter-spacing: 0.25em; } .lh-solid { line-height: 1; } .lh-title { line-height: 1.25; } .lh-copy { line-height: 1.5; } .list { list-style-type: none; } .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .o-100 { opacity: 1; } .o-90 { opacity: 0.9; } .o-80 { opacity: 0.8; } .o-70 { opacity: 0.7; } .o-60 { opacity: 0.6; } .o-50 { opacity: 0.5; } .o-40 { opacity: 0.4; } .o-30 { opacity: 0.3; } .o-20 { opacity: 0.2; } .o-10 { opacity: 0.1; } .o-05 { opacity: 0.05; } .o-025 { opacity: 0.025; } .o-0 { opacity: 0; } .v-base { vertical-align: baseline; } .v-mid { vertical-align: middle; } .v-top { vertical-align: top; } .v-btm { vertical-align: bottom; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-max { z-index: 2147483647; } .z-inherit { z-index: inherit; } .z-initial { z-index: initial; } .z-unset { z-index: unset; } .center { margin-right: auto; margin-left: auto; } .pointer { cursor: pointer; } .pointer:hover { cursor: pointer; } .flex-center { display: flex; justify-content: center; align-items: center; } .dn { display: none; } @media screen and (min-width: 30em) { .dn-ns { display: none; } } .di { display: inline; } @media screen and (min-width: 30em) { .di-ns { display: inline; } } .db { display: block; } @media screen and (min-width: 30em) { .db-ns { display: block; } } .did { display: inline-block; } @media screen and (min-width: 30em) { .did-ns { display: inline-block; } } .flex { display: flex; } .inline-flex { display: inline-flex; } /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none { flex: none; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-baseline { align-self: baseline; } .self-stretch { align-self: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-center { align-content: center; } .content-between { align-content: space-between; } .content-around { align-content: space-around; } .content-stretch { align-content: stretch; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-last { order: 99999; } @media screen and (min-width: 30em) { .flex-ns { display: flex; } .inline-flex-ns { display: inline-flex; } .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-ns { flex: none; } .flex-column-ns { flex-direction: column; } .flex-row-ns { flex-direction: row; } .flex-column-reverse-ns { flex-direction: column-reverse; } .flex-row-reverse-ns { flex-direction: row-reverse; } .flex-wrap-ns { flex-wrap: wrap; } .items-start-ns { align-items: flex-start; } .items-end-ns { align-items: flex-end; } .items-center-ns { align-items: center; } .items-baseline-ns { align-items: baseline; } .items-stretch-ns { align-items: stretch; } .self-start-ns { align-self: flex-start; } .self-end-ns { align-self: flex-end; } .self-center-ns { align-self: center; } .self-baseline-ns { align-self: baseline; } .self-stretch-ns { align-self: stretch; } .justify-start-ns { justify-content: flex-start; } .justify-end-ns { justify-content: flex-end; } .justify-center-ns { justify-content: center; } .justify-between-ns { justify-content: space-between; } .justify-around-ns { justify-content: space-around; } .content-start-ns { align-content: flex-start; } .content-end-ns { align-content: flex-end; } .content-center-ns { align-content: center; } .content-between-ns { align-content: space-between; } .content-around-ns { align-content: space-around; } .content-stretch-ns { align-content: stretch; } .order-0-ns { order: 0; } .order-1-ns { order: 1; } .order-2-ns { order: 2; } .order-3-ns { order: 3; } .order-4-ns { order: 4; } .order-5-ns { order: 5; } .order-6-ns { order: 6; } .order-7-ns { order: 7; } .order-8-ns { order: 8; } .order-last-ns { order: 99999; } } .h0 { height: 1rem; } @media screen and (min-width: 30em) { .h0-ns { height: 1rem; } } .h1 { height: 2rem; } @media screen and (min-width: 30em) { .h1-ns { height: 2rem; } } .h2 { height: 4rem; } @media screen and (min-width: 30em) { .h2-ns { height: 4rem; } } .h3 { height: 8rem; } @media screen and (min-width: 30em) { .h3-ns { height: 8rem; } } .h4 { height: 16rem; } @media screen and (min-width: 30em) { .h4-ns { height: 16rem; } } .h5 { height: 32rem; } @media screen and (min-width: 30em) { .h5-ns { height: 32rem; } } .h6 { height: 48rem; } @media screen and (min-width: 30em) { .h6-ns { height: 48rem; } } .h7 { height: 64rem; } @media screen and (min-width: 30em) { .h7-ns { height: 64rem; } } .h8 { height: 96rem; } @media screen and (min-width: 30em) { .h8-ns { height: 96rem; } } .h-25 { height: 25%; } @media screen and (min-width: 30em) { .h-25-ns { height: 25%; } } .h-50 { height: 50%; } @media screen and (min-width: 30em) { .h-50-ns { height: 50%; } } .h-75 { height: 75%; } @media screen and (min-width: 30em) { .h-75-ns { height: 75%; } } .h-100 { height: 100%; } @media screen and (min-width: 30em) { .h-100-ns { height: 100%; } } .h-v25 { height: 25vh; } @media screen and (min-width: 30em) { .h-v25-ns { height: 25vh; } } .h-v50 { height: 50vh; } @media screen and (min-width: 30em) { .h-v50-ns { height: 50vh; } } .h-v75 { height: 75vh; } @media screen and (min-width: 30em) { .h-v75-ns { height: 75vh; } } .h-v100 { height: 100vh; } @media screen and (min-width: 30em) { .h-v100-ns { height: 100vh; } } .h-auto { height: auto; } @media screen and (min-width: 30em) { .h-auto-ns { height: auto; } } .h-inherit { height: inherit; } @media screen and (min-width: 30em) { .h-inherit-ns { height: inherit; } } .mw0 { max-width: 1rem; } @media screen and (min-width: 30em) { .mw0-ns { max-width: 1rem; } } .mw1 { max-width: 2rem; } @media screen and (min-width: 30em) { .mw1-ns { max-width: 2rem; } } .mw2 { max-width: 4rem; } @media screen and (min-width: 30em) { .mw2-ns { max-width: 4rem; } } .mw3 { max-width: 8rem; } @media screen and (min-width: 30em) { .mw3-ns { max-width: 8rem; } } .mw4 { max-width: 16rem; } @media screen and (min-width: 30em) { .mw4-ns { max-width: 16rem; } } .mw5 { max-width: 32rem; } @media screen and (min-width: 30em) { .mw5-ns { max-width: 32rem; } } .mw6 { max-width: 48rem; } @media screen and (min-width: 30em) { .mw6-ns { max-width: 48rem; } } .mw7 { max-width: 64rem; } @media screen and (min-width: 30em) { .mw7-ns { max-width: 64rem; } } .mw8 { max-width: 96rem; } @media screen and (min-width: 30em) { .mw8-ns { max-width: 96rem; } } .mw-none { max-width: none; } @media screen and (min-width: 30em) { .mw-none-ns { max-width: none; } } .mw-100 { max-width: 100%; } @media screen and (min-width: 30em) { .mw-100-ns { max-width: 100%; } } .mw-measure { max-width: 20rem; } @media screen and (min-width: 30em) { .mw-measure-ns { max-width: 20rem; } } .mw-measure-narrow { max-width: 30rem; } @media screen and (min-width: 30em) { .mw-measure-narrow-ns { max-width: 30rem; } } .mw-measure-wide { max-width: 34rem; } @media screen and (min-width: 30em) { .mw-measure-wide-ns { max-width: 34rem; } } .w0 { width: 1rem; } @media screen and (min-width: 30em) { .w0-ns { width: 1rem; } } .w1 { width: 2rem; } @media screen and (min-width: 30em) { .w1-ns { width: 2rem; } } .w2 { width: 4rem; } @media screen and (min-width: 30em) { .w2-ns { width: 4rem; } } .w3 { width: 8rem; } @media screen and (min-width: 30em) { .w3-ns { width: 8rem; } } .w4 { width: 16rem; } @media screen and (min-width: 30em) { .w4-ns { width: 16rem; } } .w5 { width: 32rem; } @media screen and (min-width: 30em) { .w5-ns { width: 32rem; } } .w6 { width: 48rem; } @media screen and (min-width: 30em) { .w6-ns { width: 48rem; } } .w7 { width: 64rem; } @media screen and (min-width: 30em) { .w7-ns { width: 64rem; } } .w8 { width: 96rem; } @media screen and (min-width: 30em) { .w8-ns { width: 96rem; } } .w-measure { width: 30rem; } @media screen and (min-width: 30em) { .w-measure-ns { width: 30rem; } } .w-measure-wide { width: 34rem; } @media screen and (min-width: 30em) { .w-measure-wide-ns { width: 34rem; } } .w-measure-narrow { width: 20rem; } @media screen and (min-width: 30em) { .w-measure-narrow-ns { width: 20rem; } } .w-10 { width: 10%; } @media screen and (min-width: 30em) { .w-10-ns { width: 10%; } } .w-20 { width: 20%; } @media screen and (min-width: 30em) { .w-20-ns { width: 20%; } } .w-25 { width: 25%; } @media screen and (min-width: 30em) { .w-25-ns { width: 25%; } } .w-30 { width: 30%; } @media screen and (min-width: 30em) { .w-30-ns { width: 30%; } } .w-40 { width: 40%; } @media screen and (min-width: 30em) { .w-40-ns { width: 40%; } } .w-50 { width: 50%; } @media screen and (min-width: 30em) { .w-50-ns { width: 50%; } } .w-60 { width: 60%; } @media screen and (min-width: 30em) { .w-60-ns { width: 60%; } } .w-70 { width: 70%; } @media screen and (min-width: 30em) { .w-70-ns { width: 70%; } } .w-75 { width: 75%; } @media screen and (min-width: 30em) { .w-75-ns { width: 75%; } } .w-80 { width: 80%; } @media screen and (min-width: 30em) { .w-80-ns { width: 80%; } } .w-90 { width: 90%; } @media screen and (min-width: 30em) { .w-90-ns { width: 90%; } } .w-100 { width: 100%; } @media screen and (min-width: 30em) { .w-100-ns { width: 100%; } } .w-third { width: 33.33333%; } @media screen and (min-width: 30em) { .w-third-ns { width: 33.33333%; } } .w-two-thirds { width: 66.66667%; } @media screen and (min-width: 30em) { .w-two-thirds-ns { width: 66.66667%; } } .w-auto { width: auto; } @media screen and (min-width: 30em) { .w-auto-ns { width: auto; } } .black-0 { color: #000; } .black-1 { color: #111; } .black-2 { color: #333; } .black-3 { color: #555; } .white-0 { color: #fff; } .white-1 { color: #f4f4f4; } .white-2 { color: #eee; } .white-3 { color: #fff; } .transparent { color: transparent; } .black-90 { color: rgba(0, 0, 0, 0.9); } .black-80 { color: rgba(0, 0, 0, 0.8); } .black-70 { color: rgba(0, 0, 0, 0.7); } .black-60 { color: rgba(0, 0, 0, 0.6); } .black-50 { color: rgba(0, 0, 0, 0.5); } .black-40 { color: rgba(0, 0, 0, 0.4); } .black-30 { color: rgba(0, 0, 0, 0.3); } .black-20 { color: rgba(0, 0, 0, 0.2); } .black-10 { color: rgba(0, 0, 0, 0.1); } .white-90 { color: rgba(255, 255, 255, 0.9); } .white-80 { color: rgba(255, 255, 255, 0.8); } .white-70 { color: rgba(255, 255, 255, 0.7); } .white-60 { color: rgba(255, 255, 255, 0.6); } .white-50 { color: rgba(255, 255, 255, 0.5); } .white-40 { color: rgba(255, 255, 255, 0.4); } .white-30 { color: rgba(255, 255, 255, 0.3); } .white-20 { color: rgba(255, 255, 255, 0.2); } .white-10 { color: rgba(255, 255, 255, 0.1); } .bg-black-0 { background-color: #000; } .bg-black-1 { background-color: #111; } .bg-black-2 { background-color: #333; } .bg-black-3 { background-color: #555; } .bg-white-0 { background-color: #fff; } .bg-white-1 { background-color: #f4f4f4; } .bg-white-2 { background-color: #eee; } .bg-white-3 { background-color: #fff; } .bg-transparent { background-color: transparent; } .bg-black-90 { background-color: rgba(0, 0, 0, 0.9); } .bg-black-80 { background-color: rgba(0, 0, 0, 0.8); } .bg-black-70 { background-color: rgba(0, 0, 0, 0.7); } .bg-black-60 { background-color: rgba(0, 0, 0, 0.6); } .bg-black-50 { background-color: rgba(0, 0, 0, 0.5); } .bg-black-40 { background-color: rgba(0, 0, 0, 0.4); } .bg-black-30 { background-color: rgba(0, 0, 0, 0.3); } .bg-black-20 { background-color: rgba(0, 0, 0, 0.2); } .bg-black-10 { background-color: rgba(0, 0, 0, 0.1); } .bg-white-90 { background-color: rgba(255, 255, 255, 0.9); } .bg-white-80 { background-color: rgba(255, 255, 255, 0.8); } .bg-white-70 { background-color: rgba(255, 255, 255, 0.7); } .bg-white-60 { background-color: rgba(255, 255, 255, 0.6); } .bg-white-50 { background-color: rgba(255, 255, 255, 0.5); } .bg-white-40 { background-color: rgba(255, 255, 255, 0.4); } .bg-white-30 { background-color: rgba(255, 255, 255, 0.3); } .bg-white-20 { background-color: rgba(255, 255, 255, 0.2); } .bg-white-10 { background-color: rgba(255, 255, 255, 0.1); } .b--black-0 { border-color: #000; } .b--black-1 { border-color: #111; } .b--black-2 { border-color: #333; } .b--black-3 { border-color: #555; } .b--white-0 { border-color: #fff; } .b--white-1 { border-color: #f4f4f4; } .b--white-2 { border-color: #eee; } .b--white-3 { border-color: #fff; } .b--transparent { border-color: transparent; } .b--black-90 { border-color: rgba(0, 0, 0, 0.9); } .b--black-80 { border-color: rgba(0, 0, 0, 0.8); } .b--black-70 { border-color: rgba(0, 0, 0, 0.7); } .b--black-60 { border-color: rgba(0, 0, 0, 0.6); } .b--black-50 { border-color: rgba(0, 0, 0, 0.5); } .b--black-40 { border-color: rgba(0, 0, 0, 0.4); } .b--black-30 { border-color: rgba(0, 0, 0, 0.3); } .b--black-20 { border-color: rgba(0, 0, 0, 0.2); } .b--black-10 { border-color: rgba(0, 0, 0, 0.1); } .b--white-90 { border-color: rgba(255, 255, 255, 0.9); } .b--white-80 { border-color: rgba(255, 255, 255, 0.8); } .b--white-70 { border-color: rgba(255, 255, 255, 0.7); } .b--white-60 { border-color: rgba(255, 255, 255, 0.6); } .b--white-50 { border-color: rgba(255, 255, 255, 0.5); } .b--white-40 { border-color: rgba(255, 255, 255, 0.4); } .b--white-30 { border-color: rgba(255, 255, 255, 0.3); } .b--white-20 { border-color: rgba(255, 255, 255, 0.2); } .b--white-10 { border-color: rgba(255, 255, 255, 0.1); } .pan { padding: 0; } @media screen and (min-width: 30em) { .pan-ns { padding: 0; } } .pa-5 { padding: 0.328rem; } @media screen and (min-width: 30em) { .pa-5-ns { padding: 0.328rem; } } .pa-4 { padding: 0.41rem; } @media screen and (min-width: 30em) { .pa-4-ns { padding: 0.41rem; } } .pa-3 { padding: 0.512rem; } @media screen and (min-width: 30em) { .pa-3-ns { padding: 0.512rem; } } .pa-2 { padding: 0.64rem; } @media screen and (min-width: 30em) { .pa-2-ns { padding: 0.64rem; } } .pa-1 { padding: 0.8rem; } @media screen and (min-width: 30em) { .pa-1-ns { padding: 0.8rem; } } .pa0 { padding: 1rem; } @media screen and (min-width: 30em) { .pa0-ns { padding: 1rem; } } .pa1 { padding: 1.618rem; } @media screen and (min-width: 30em) { .pa1-ns { padding: 1.618rem; } } .pa2 { padding: 2.618rem; } @media screen and (min-width: 30em) { .pa2-ns { padding: 2.618rem; } } .pa3 { padding: 4.236rem; } @media screen and (min-width: 30em) { .pa3-ns { padding: 4.236rem; } } .pa4 { padding: 6.854rem; } @media screen and (min-width: 30em) { .pa4-ns { padding: 6.854rem; } } .pa5 { padding: 11.089rem; } @media screen and (min-width: 30em) { .pa5-ns { padding: 11.089rem; } } .pln { padding-left: 0; } @media screen and (min-width: 30em) { .pln-ns { padding-left: 0; } } .pl-5 { padding-left: 0.328rem; } @media screen and (min-width: 30em) { .pl-5-ns { padding-left: 0.328rem; } } .pl-4 { padding-left: 0.41rem; } @media screen and (min-width: 30em) { .pl-4-ns { padding-left: 0.41rem; } } .pl-3 { padding-left: 0.512rem; } @media screen and (min-width: 30em) { .pl-3-ns { padding-left: 0.512rem; } } .pl-2 { padding-left: 0.64rem; } @media screen and (min-width: 30em) { .pl-2-ns { padding-left: 0.64rem; } } .pl-1 { padding-left: 0.8rem; } @media screen and (min-width: 30em) { .pl-1-ns { padding-left: 0.8rem; } } .pl0 { padding-left: 1rem; } @media screen and (min-width: 30em) { .pl0-ns { padding-left: 1rem; } } .pl1 { padding-left: 1.618rem; } @media screen and (min-width: 30em) { .pl1-ns { padding-left: 1.618rem; } } .pl2 { padding-left: 2.618rem; } @media screen and (min-width: 30em) { .pl2-ns { padding-left: 2.618rem; } } .pl3 { padding-left: 4.236rem; } @media screen and (min-width: 30em) { .pl3-ns { padding-left: 4.236rem; } } .pl4 { padding-left: 6.854rem; } @media screen and (min-width: 30em) { .pl4-ns { padding-left: 6.854rem; } } .pl5 { padding-left: 11.089rem; } @media screen and (min-width: 30em) { .pl5-ns { padding-left: 11.089rem; } } .prn { padding-right: 0; } @media screen and (min-width: 30em) { .prn-ns { padding-right: 0; } } .pr-5 { padding-right: 0.328rem; } @media screen and (min-width: 30em) { .pr-5-ns { padding-right: 0.328rem; } } .pr-4 { padding-right: 0.41rem; } @media screen and (min-width: 30em) { .pr-4-ns { padding-right: 0.41rem; } } .pr-3 { padding-right: 0.512rem; } @media screen and (min-width: 30em) { .pr-3-ns { padding-right: 0.512rem; } } .pr-2 { padding-right: 0.64rem; } @media screen and (min-width: 30em) { .pr-2-ns { padding-right: 0.64rem; } } .pr-1 { padding-right: 0.8rem; } @media screen and (min-width: 30em) { .pr-1-ns { padding-right: 0.8rem; } } .pr0 { padding-right: 1rem; } @media screen and (min-width: 30em) { .pr0-ns { padding-right: 1rem; } } .pr1 { padding-right: 1.618rem; } @media screen and (min-width: 30em) { .pr1-ns { padding-right: 1.618rem; } } .pr2 { padding-right: 2.618rem; } @media screen and (min-width: 30em) { .pr2-ns { padding-right: 2.618rem; } } .pr3 { padding-right: 4.236rem; } @media screen and (min-width: 30em) { .pr3-ns { padding-right: 4.236rem; } } .pr4 { padding-right: 6.854rem; } @media screen and (min-width: 30em) { .pr4-ns { padding-right: 6.854rem; } } .pr5 { padding-right: 11.089rem; } @media screen and (min-width: 30em) { .pr5-ns { padding-right: 11.089rem; } } .ptn { padding-top: 0; } @media screen and (min-width: 30em) { .ptn-ns { padding-top: 0; } } .pt-5 { padding-top: 0.328rem; } @media screen and (min-width: 30em) { .pt-5-ns { padding-top: 0.328rem; } } .pt-4 { padding-top: 0.41rem; } @media screen and (min-width: 30em) { .pt-4-ns { padding-top: 0.41rem; } } .pt-3 { padding-top: 0.512rem; } @media screen and (min-width: 30em) { .pt-3-ns { padding-top: 0.512rem; } } .pt-2 { padding-top: 0.64rem; } @media screen and (min-width: 30em) { .pt-2-ns { padding-top: 0.64rem; } } .pt-1 { padding-top: 0.8rem; } @media screen and (min-width: 30em) { .pt-1-ns { padding-top: 0.8rem; } } .pt0 { padding-top: 1rem; } @media screen and (min-width: 30em) { .pt0-ns { padding-top: 1rem; } } .pt1 { padding-top: 1.618rem; } @media screen and (min-width: 30em) { .pt1-ns { padding-top: 1.618rem; } } .pt2 { padding-top: 2.618rem; } @media screen and (min-width: 30em) { .pt2-ns { padding-top: 2.618rem; } } .pt3 { padding-top: 4.236rem; } @media screen and (min-width: 30em) { .pt3-ns { padding-top: 4.236rem; } } .pt4 { padding-top: 6.854rem; } @media screen and (min-width: 30em) { .pt4-ns { padding-top: 6.854rem; } } .pt5 { padding-top: 11.089rem; } @media screen and (min-width: 30em) { .pt5-ns { padding-top: 11.089rem; } } .pbn { padding-bottom: 0; } @media screen and (min-width: 30em) { .pbn-ns { padding-bottom: 0; } } .pb-5 { padding-bottom: 0.328rem; } @media screen and (min-width: 30em) { .pb-5-ns { padding-bottom: 0.328rem; } } .pb-4 { padding-bottom: 0.41rem; } @media screen and (min-width: 30em) { .pb-4-ns { padding-bottom: 0.41rem; } } .pb-3 { padding-bottom: 0.512rem; } @media screen and (min-width: 30em) { .pb-3-ns { padding-bottom: 0.512rem; } } .pb-2 { padding-bottom: 0.64rem; } @media screen and (min-width: 30em) { .pb-2-ns { padding-bottom: 0.64rem; } } .pb-1 { padding-bottom: 0.8rem; } @media screen and (min-width: 30em) { .pb-1-ns { padding-bottom: 0.8rem; } } .pb0 { padding-bottom: 1rem; } @media screen and (min-width: 30em) { .pb0-ns { padding-bottom: 1rem; } } .pb1 { padding-bottom: 1.618rem; } @media screen and (min-width: 30em) { .pb1-ns { padding-bottom: 1.618rem; } } .pb2 { padding-bottom: 2.618rem; } @media screen and (min-width: 30em) { .pb2-ns { padding-bottom: 2.618rem; } } .pb3 { padding-bottom: 4.236rem; } @media screen and (min-width: 30em) { .pb3-ns { padding-bottom: 4.236rem; } } .pb4 { padding-bottom: 6.854rem; } @media screen and (min-width: 30em) { .pb4-ns { padding-bottom: 6.854rem; } } .pb5 { padding-bottom: 11.089rem; } @media screen and (min-width: 30em) { .pb5-ns { padding-bottom: 11.089rem; } } .phn { padding-left: 0; padding-right: 0; } @media screen and (min-width: 30em) { .phn-ns { padding-left: 0; padding-right: 0; } } .ph-5 { padding-left: 0.328rem; padding-right: 0.328rem; } @media screen and (min-width: 30em) { .ph-5-ns { padding-left: 0.328rem; padding-right: 0.328rem; } } .ph-4 { padding-left: 0.41rem; padding-right: 0.41rem; } @media screen and (min-width: 30em) { .ph-4-ns { padding-left: 0.41rem; padding-right: 0.41rem; } } .ph-3 { padding-left: 0.512rem; padding-right: 0.512rem; } @media screen and (min-width: 30em) { .ph-3-ns { padding-left: 0.512rem; padding-right: 0.512rem; } } .ph-2 { padding-left: 0.64rem; padding-right: 0.64rem; } @media screen and (min-width: 30em) { .ph-2-ns { padding-left: 0.64rem; padding-right: 0.64rem; } } .ph-1 { padding-left: 0.8rem; padding-right: 0.8rem; } @media screen and (min-width: 30em) { .ph-1-ns { padding-left: 0.8rem; padding-right: 0.8rem; } } .ph0 { padding-left: 1rem; padding-right: 1rem; } @media screen and (min-width: 30em) { .ph0-ns { padding-left: 1rem; padding-right: 1rem; } } .ph1 { padding-left: 1.618rem; padding-right: 1.618rem; } @media screen and (min-width: 30em) { .ph1-ns { padding-left: 1.618rem; padding-right: 1.618rem; } } .ph2 { padding-left: 2.618rem; padding-right: 2.618rem; } @media screen and (min-width: 30em) { .ph2-ns { padding-left: 2.618rem; padding-right: 2.618rem; } } .ph3 { padding-left: 4.236rem; padding-right: 4.236rem; } @media screen and (min-width: 30em) { .ph3-ns { padding-left: 4.236rem; padding-right: 4.236rem; } } .ph4 { padding-left: 6.854rem; padding-right: 6.854rem; } @media screen and (min-width: 30em) { .ph4-ns { padding-left: 6.854rem; padding-right: 6.854rem; } } .ph5 { padding-left: 11.089rem; padding-right: 11.089rem; } @media screen and (min-width: 30em) { .ph5-ns { padding-left: 11.089rem; padding-right: 11.089rem; } } .pvn { padding-top: 0; padding-bottom: 0; } @media screen and (min-width: 30em) { .pvn-ns { padding-top: 0; padding-bottom: 0; } } .pv-5 { padding-top: 0.328rem; padding-bottom: 0.328rem; } @media screen and (min-width: 30em) { .pv-5-ns { padding-top: 0.328rem; padding-bottom: 0.328rem; } } .pv-4 { padding-top: 0.41rem; padding-bottom: 0.41rem; } @media screen and (min-width: 30em) { .pv-4-ns { padding-top: 0.41rem; padding-bottom: 0.41rem; } } .pv-3 { padding-top: 0.512rem; padding-bottom: 0.512rem; } @media screen and (min-width: 30em) { .pv-3-ns { padding-top: 0.512rem; padding-bottom: 0.512rem; } } .pv-2 { padding-top: 0.64rem; padding-bottom: 0.64rem; } @media screen and (min-width: 30em) { .pv-2-ns { padding-top: 0.64rem; padding-bottom: 0.64rem; } } .pv-1 { padding-top: 0.8rem; padding-bottom: 0.8rem; } @media screen and (min-width: 30em) { .pv-1-ns { padding-top: 0.8rem; padding-bottom: 0.8rem; } } .pv0 { padding-top: 1rem; padding-bottom: 1rem; } @media screen and (min-width: 30em) { .pv0-ns { padding-top: 1rem; padding-bottom: 1rem; } } .pv1 { padding-top: 1.618rem; padding-bottom: 1.618rem; } @media screen and (min-width: 30em) { .pv1-ns { padding-top: 1.618rem; padding-bottom: 1.618rem; } } .pv2 { padding-top: 2.618rem; padding-bottom: 2.618rem; } @media screen and (min-width: 30em) { .pv2-ns { padding-top: 2.618rem; padding-bottom: 2.618rem; } } .pv3 { padding-top: 4.236rem; padding-bottom: 4.236rem; } @media screen and (min-width: 30em) { .pv3-ns { padding-top: 4.236rem; padding-bottom: 4.236rem; } } .pv4 { padding-top: 6.854rem; padding-bottom: 6.854rem; } @media screen and (min-width: 30em) { .pv4-ns { padding-top: 6.854rem; padding-bottom: 6.854rem; } } .pv5 { padding-top: 11.089rem; padding-bottom: 11.089rem; } @media screen and (min-width: 30em) { .pv5-ns { padding-top: 11.089rem; padding-bottom: 11.089rem; } } .man { margin: 0; } @media screen and (min-width: 30em) { .man-ns { margin: 0; } } .ma-5 { margin: 0.328rem; } @media screen and (min-width: 30em) { .ma-5-ns { margin: 0.328rem; } } .ma-4 { margin: 0.41rem; } @media screen and (min-width: 30em) { .ma-4-ns { margin: 0.41rem; } } .ma-3 { margin: 0.512rem; } @media screen and (min-width: 30em) { .ma-3-ns { margin: 0.512rem; } } .ma-2 { margin: 0.64rem; } @media screen and (min-width: 30em) { .ma-2-ns { margin: 0.64rem; } } .ma-1 { margin: 0.8rem; } @media screen and (min-width: 30em) { .ma-1-ns { margin: 0.8rem; } } .ma0 { margin: 1rem; } @media screen and (min-width: 30em) { .ma0-ns { margin: 1rem; } } .ma1 { margin: 1.618rem; } @media screen and (min-width: 30em) { .ma1-ns { margin: 1.618rem; } } .ma2 { margin: 2.618rem; } @media screen and (min-width: 30em) { .ma2-ns { margin: 2.618rem; } } .ma3 { margin: 4.236rem; } @media screen and (min-width: 30em) { .ma3-ns { margin: 4.236rem; } } .ma4 { margin: 6.854rem; } @media screen and (min-width: 30em) { .ma4-ns { margin: 6.854rem; } } .ma5 { margin: 11.089rem; } @media screen and (min-width: 30em) { .ma5-ns { margin: 11.089rem; } } .mln { margin-left: 0; } @media screen and (min-width: 30em) { .mln-ns { margin-left: 0; } } .ml-5 { margin-left: 0.328rem; } @media screen and (min-width: 30em) { .ml-5-ns { margin-left: 0.328rem; } } .ml-4 { margin-left: 0.41rem; } @media screen and (min-width: 30em) { .ml-4-ns { margin-left: 0.41rem; } } .ml-3 { margin-left: 0.512rem; } @media screen and (min-width: 30em) { .ml-3-ns { margin-left: 0.512rem; } } .ml-2 { margin-left: 0.64rem; } @media screen and (min-width: 30em) { .ml-2-ns { margin-left: 0.64rem; } } .ml-1 { margin-left: 0.8rem; } @media screen and (min-width: 30em) { .ml-1-ns { margin-left: 0.8rem; } } .ml0 { margin-left: 1rem; } @media screen and (min-width: 30em) { .ml0-ns { margin-left: 1rem; } } .ml1 { margin-left: 1.618rem; } @media screen and (min-width: 30em) { .ml1-ns { margin-left: 1.618rem; } } .ml2 { margin-left: 2.618rem; } @media screen and (min-width: 30em) { .ml2-ns { margin-left: 2.618rem; } } .ml3 { margin-left: 4.236rem; } @media screen and (min-width: 30em) { .ml3-ns { margin-left: 4.236rem; } } .ml4 { margin-left: 6.854rem; } @media screen and (min-width: 30em) { .ml4-ns { margin-left: 6.854rem; } } .ml5 { margin-left: 11.089rem; } @media screen and (min-width: 30em) { .ml5-ns { margin-left: 11.089rem; } } .mrn { margin-right: 0; } @media screen and (min-width: 30em) { .mrn-ns { margin-right: 0; } } .mr-5 { margin-right: 0.328rem; } @media screen and (min-width: 30em) { .mr-5-ns { margin-right: 0.328rem; } } .mr-4 { margin-right: 0.41rem; } @media screen and (min-width: 30em) { .mr-4-ns { margin-right: 0.41rem; } } .mr-3 { margin-right: 0.512rem; } @media screen and (min-width: 30em) { .mr-3-ns { margin-right: 0.512rem; } } .mr-2 { margin-right: 0.64rem; } @media screen and (min-width: 30em) { .mr-2-ns { margin-right: 0.64rem; } } .mr-1 { margin-right: 0.8rem; } @media screen and (min-width: 30em) { .mr-1-ns { margin-right: 0.8rem; } } .mr0 { margin-right: 1rem; } @media screen and (min-width: 30em) { .mr0-ns { margin-right: 1rem; } } .mr1 { margin-right: 1.618rem; } @media screen and (min-width: 30em) { .mr1-ns { margin-right: 1.618rem; } } .mr2 { margin-right: 2.618rem; } @media screen and (min-width: 30em) { .mr2-ns { margin-right: 2.618rem; } } .mr3 { margin-right: 4.236rem; } @media screen and (min-width: 30em) { .mr3-ns { margin-right: 4.236rem; } } .mr4 { margin-right: 6.854rem; } @media screen and (min-width: 30em) { .mr4-ns { margin-right: 6.854rem; } } .mr5 { margin-right: 11.089rem; } @media screen and (min-width: 30em) { .mr5-ns { margin-right: 11.089rem; } } .mtn { margin-top: 0; } @media screen and (min-width: 30em) { .mtn-ns { margin-top: 0; } } .mt-5 { margin-top: 0.328rem; } @media screen and (min-width: 30em) { .mt-5-ns { margin-top: 0.328rem; } } .mt-4 { margin-top: 0.41rem; } @media screen and (min-width: 30em) { .mt-4-ns { margin-top: 0.41rem; } } .mt-3 { margin-top: 0.512rem; } @media screen and (min-width: 30em) { .mt-3-ns { margin-top: 0.512rem; } } .mt-2 { margin-top: 0.64rem; } @media screen and (min-width: 30em) { .mt-2-ns { margin-top: 0.64rem; } } .mt-1 { margin-top: 0.8rem; } @media screen and (min-width: 30em) { .mt-1-ns { margin-top: 0.8rem; } } .mt0 { margin-top: 1rem; } @media screen and (min-width: 30em) { .mt0-ns { margin-top: 1rem; } } .mt1 { margin-top: 1.618rem; } @media screen and (min-width: 30em) { .mt1-ns { margin-top: 1.618rem; } } .mt2 { margin-top: 2.618rem; } @media screen and (min-width: 30em) { .mt2-ns { margin-top: 2.618rem; } } .mt3 { margin-top: 4.236rem; } @media screen and (min-width: 30em) { .mt3-ns { margin-top: 4.236rem; } } .mt4 { margin-top: 6.854rem; } @media screen and (min-width: 30em) { .mt4-ns { margin-top: 6.854rem; } } .mt5 { margin-top: 11.089rem; } @media screen and (min-width: 30em) { .mt5-ns { margin-top: 11.089rem; } } .mbn { margin-bottom: 0; } @media screen and (min-width: 30em) { .mbn-ns { margin-bottom: 0; } } .mb-5 { margin-bottom: 0.328rem; } @media screen and (min-width: 30em) { .mb-5-ns { margin-bottom: 0.328rem; } } .mb-4 { margin-bottom: 0.41rem; } @media screen and (min-width: 30em) { .mb-4-ns { margin-bottom: 0.41rem; } } .mb-3 { margin-bottom: 0.512rem; } @media screen and (min-width: 30em) { .mb-3-ns { margin-bottom: 0.512rem; } } .mb-2 { margin-bottom: 0.64rem; } @media screen and (min-width: 30em) { .mb-2-ns { margin-bottom: 0.64rem; } } .mb-1 { margin-bottom: 0.8rem; } @media screen and (min-width: 30em) { .mb-1-ns { margin-bottom: 0.8rem; } } .mb0 { margin-bottom: 1rem; } @media screen and (min-width: 30em) { .mb0-ns { margin-bottom: 1rem; } } .mb1 { margin-bottom: 1.618rem; } @media screen and (min-width: 30em) { .mb1-ns { margin-bottom: 1.618rem; } } .mb2 { margin-bottom: 2.618rem; } @media screen and (min-width: 30em) { .mb2-ns { margin-bottom: 2.618rem; } } .mb3 { margin-bottom: 4.236rem; } @media screen and (min-width: 30em) { .mb3-ns { margin-bottom: 4.236rem; } } .mb4 { margin-bottom: 6.854rem; } @media screen and (min-width: 30em) { .mb4-ns { margin-bottom: 6.854rem; } } .mb5 { margin-bottom: 11.089rem; } @media screen and (min-width: 30em) { .mb5-ns { margin-bottom: 11.089rem; } } .mhn { margin-left: 0; margin-right: 0; } @media screen and (min-width: 30em) { .mhn-ns { margin-left: 0; margin-right: 0; } } .mh-5 { margin-left: 0.328rem; margin-right: 0.328rem; } @media screen and (min-width: 30em) { .mh-5-ns { margin-left: 0.328rem; margin-right: 0.328rem; } } .mh-4 { margin-left: 0.41rem; margin-right: 0.41rem; } @media screen and (min-width: 30em) { .mh-4-ns { margin-left: 0.41rem; margin-right: 0.41rem; } } .mh-3 { margin-left: 0.512rem; margin-right: 0.512rem; } @media screen and (min-width: 30em) { .mh-3-ns { margin-left: 0.512rem; margin-right: 0.512rem; } } .mh-2 { margin-left: 0.64rem; margin-right: 0.64rem; } @media screen and (min-width: 30em) { .mh-2-ns { margin-left: 0.64rem; margin-right: 0.64rem; } } .mh-1 { margin-left: 0.8rem; margin-right: 0.8rem; } @media screen and (min-width: 30em) { .mh-1-ns { margin-left: 0.8rem; margin-right: 0.8rem; } } .mh0 { margin-left: 1rem; margin-right: 1rem; } @media screen and (min-width: 30em) { .mh0-ns { margin-left: 1rem; margin-right: 1rem; } } .mh1 { margin-left: 1.618rem; margin-right: 1.618rem; } @media screen and (min-width: 30em) { .mh1-ns { margin-left: 1.618rem; margin-right: 1.618rem; } } .mh2 { margin-left: 2.618rem; margin-right: 2.618rem; } @media screen and (min-width: 30em) { .mh2-ns { margin-left: 2.618rem; margin-right: 2.618rem; } } .mh3 { margin-left: 4.236rem; margin-right: 4.236rem; } @media screen and (min-width: 30em) { .mh3-ns { margin-left: 4.236rem; margin-right: 4.236rem; } } .mh4 { margin-left: 6.854rem; margin-right: 6.854rem; } @media screen and (min-width: 30em) { .mh4-ns { margin-left: 6.854rem; margin-right: 6.854rem; } } .mh5 { margin-left: 11.089rem; margin-right: 11.089rem; } @media screen and (min-width: 30em) { .mh5-ns { margin-left: 11.089rem; margin-right: 11.089rem; } } .mvn { margin-top: 0; margin-bottom: 0; } @media screen and (min-width: 30em) { .mvn-ns { margin-top: 0; margin-bottom: 0; } } .mv-5 { margin-top: 0.328rem; margin-bottom: 0.328rem; } @media screen and (min-width: 30em) { .mv-5-ns { margin-top: 0.328rem; margin-bottom: 0.328rem; } } .mv-4 { margin-top: 0.41rem; margin-bottom: 0.41rem; } @media screen and (min-width: 30em) { .mv-4-ns { margin-top: 0.41rem; margin-bottom: 0.41rem; } } .mv-3 { margin-top: 0.512rem; margin-bottom: 0.512rem; } @media screen and (min-width: 30em) { .mv-3-ns { margin-top: 0.512rem; margin-bottom: 0.512rem; } } .mv-2 { margin-top: 0.64rem; margin-bottom: 0.64rem; } @media screen and (min-width: 30em) { .mv-2-ns { margin-top: 0.64rem; margin-bottom: 0.64rem; } } .mv-1 { margin-top: 0.8rem; margin-bottom: 0.8rem; } @media screen and (min-width: 30em) { .mv-1-ns { margin-top: 0.8rem; margin-bottom: 0.8rem; } } .mv0 { margin-top: 1rem; margin-bottom: 1rem; } @media screen and (min-width: 30em) { .mv0-ns { margin-top: 1rem; margin-bottom: 1rem; } } .mv1 { margin-top: 1.618rem; margin-bottom: 1.618rem; } @media screen and (min-width: 30em) { .mv1-ns { margin-top: 1.618rem; margin-bottom: 1.618rem; } } .mv2 { margin-top: 2.618rem; margin-bottom: 2.618rem; } @media screen and (min-width: 30em) { .mv2-ns { margin-top: 2.618rem; margin-bottom: 2.618rem; } } .mv3 { margin-top: 4.236rem; margin-bottom: 4.236rem; } @media screen and (min-width: 30em) { .mv3-ns { margin-top: 4.236rem; margin-bottom: 4.236rem; } } .mv4 { margin-top: 6.854rem; margin-bottom: 6.854rem; } @media screen and (min-width: 30em) { .mv4-ns { margin-top: 6.854rem; margin-bottom: 6.854rem; } } .mv5 { margin-top: 11.089rem; margin-bottom: 11.089rem; } @media screen and (min-width: 30em) { .mv5-ns { margin-top: 11.089rem; margin-bottom: 11.089rem; } } .tl { text-align: left; } @media screen and (min-width: 30em) { .tl-ns { text-align: left; } } .tr { text-align: right; } @media screen and (min-width: 30em) { .tr-ns { text-align: right; } } .tc { text-align: center; } @media screen and (min-width: 30em) { .tc-ns { text-align: center; } } .f-1 { font-size: 0.875rem; } @media screen and (min-width: 30em) { .f-1-ns { font-size: 0.875rem; } } .f0 { font-size: 1rem; } @media screen and (min-width: 30em) { .f0-ns { font-size: 1rem; } } .f1 { font-size: 1.25rem; } @media screen and (min-width: 30em) { .f1-ns { font-size: 1.25rem; } } .f2 { font-size: 1.5rem; } @media screen and (min-width: 30em) { .f2-ns { font-size: 1.5rem; } } .f3 { font-size: 2.25rem; } @media screen and (min-width: 30em) { .f3-ns { font-size: 2.25rem; } } .f4 { font-size: 3rem; } @media screen and (min-width: 30em) { .f4-ns { font-size: 3rem; } } .f5 { font-size: 5rem; } @media screen and (min-width: 30em) { .f5-ns { font-size: 5rem; } } .dim { opacity: 1; transition: opacity 0.15s ease-in; } .dim:hover, .dim:focus { opacity: 0.5; transition: opacity 0.15s ease-in; } .dim:active { opacity: 0.8; transition: opacity 0.15s ease-out; } .glow { transition: opacity 0.15s ease-in; } .glow:hover, .glow:focus { opacity: 1; transition: opacity 0.15s ease-in; } .underline-hover:hover, .underline-hover:focus { text-decoration: underline; } .lift { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .lift:hover, .lift:focus { transform: translateY(-2px); } /* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ .grow { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .grow:hover, .grow:focus { transform: scale(1.05); } .grow:active { transform: scale(0.9); } .grow-large { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-in-out; } .grow-large:hover, .grow-large:focus { transform: scale(1.2); } .grow-large:active { transform: scale(0.95); } /* Add shadow on hover. Performant box-shadow animation pattern from http://tobiasahlin.com/blog/how-to-animate-box-shadow/ */ .shadow-hover { cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } .bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color 0.15s ease-in-out; }