basscss.css

/*

  BASSCSS

  Part reset, part boilerplate, part framework, all minimal.

  BASSCSS is a small reset and collection of simple type and layout
  classes that can be used as the basis for any web project.
  Use it out of the box or as a base for a larger SASS project.


  Contents:
  1. Reset
  2. Typography
     a. Default Font Stack
     b. Base Type Scale
     c. Responsive Type Scale
     d. Utilities
  3. Layout
     a. Margins
     b. Padding
     c. Display
     d. Utilities


  Made with love by Jxnblk

*/
body, h1, h2, h3, h4, h5, h6, dl, ol, ul, p,
button, input, select, textarea {
  margin: 0; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%; }

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
  display: block; }

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.5;
  font-weight: 400; }

h1, .h1 {
  font-size: 2rem;
  line-height: 1.25; }

h2, .h2 {
  font-size: 1.5rem;
  line-height: 1.25; }

h3, h4, h5, h6, dl, ol, ul, p, .p {
  font-size: 1.125rem; }

small, .small {
  font-size: .875rem; }

@media (min-width: 768px) {
  .responsive .h1, .responsive.h1 {
    font-size: 4rem; }
  .responsive .h2, .responsive.h2 {
    font-size: 2rem; }
  .responsive .p, .responsive.p {
    font-size: 1.25rem; }
  .responsive .small, .responsive.small {
    font-size: 1rem; } }
@media (min-width: 1024px) {
  .responsive .h1, .responsive.h1 {
    font-size: 6rem; }
  .responsive .h2, .responsive.h2 {
    font-size: 3rem; } }

strong, .bold {
  font-weight: bold; }

.regular {
  font-weight: normal; }

.caps {
  text-transform: uppercase;
  letter-spacing: .2em; }

.center {
  text-align: center; }

.right-align {
  text-align: right; }

.type-margins h1, .type-margins .h1 {
  margin-bottom: 1rem; }
.type-margins h2, .type-margins .h2 {
  margin-bottom: 1rem; }
.type-margins h3, .type-margins h4, .type-margins h5, .type-margins h6, .type-margins p, .type-margins dl, .type-margins ol, .type-margins ul {
  margin-bottom: 1rem; }

.m1 {
  margin: 1rem; }

.mt1 {
  margin-top: 1rem; }

.mr1 {
  margin-right: 1rem; }

.mb1 {
  margin-bottom: 1rem; }

.ml1 {
  margin-left: 1rem; }

.m2 {
  margin: 2rem; }

.mt2 {
  margin-top: 2rem; }

.mr2 {
  margin-right: 2rem; }

.mb2 {
  margin-bottom: 2rem; }

.ml2 {
  margin-left: 2rem; }

.m3 {
  margin: 3rem; }

.mt3 {
  margin-top: 3rem; }

.mr3 {
  margin-right: 3rem; }

.mb3 {
  margin-bottom: 3rem; }

.ml3 {
  margin-left: 3rem; }

.m4 {
  margin: 4rem; }

.mt4 {
  margin-top: 4rem; }

.mr4 {
  margin-right: 4rem; }

.mb4 {
  margin-bottom: 4rem; }

.ml4 {
  margin-left: 4rem; }

.mxa {
  margin-right: auto;
  margin-left: auto; }

.p1 {
  padding: 1rem; }

.px1 {
  padding-right: 1rem;
  padding-left: 1rem; }

.py1 {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.p2 {
  padding: 2rem; }

.px2 {
  padding-right: 2rem;
  padding-left: 2rem; }

.py2 {
  padding-top: 2rem;
  padding-bottom: 2rem; }

.p3 {
  padding: 3rem; }

.px3 {
  padding-right: 3rem;
  padding-left: 3rem; }

.py3 {
  padding-top: 3rem;
  padding-bottom: 3rem; }

.p4 {
  padding: 4rem; }

.px4 {
  padding-right: 4rem;
  padding-left: 4rem; }

.py4 {
  padding-top: 4rem;
  padding-bottom: 4rem; }

.inline {
  display: inline; }

.block {
  display: block; }

.inline-block {
  display: inline-block; }

.clearfix {
  overflow: hidden; }

.left {
  float: left; }

.right {
  float: right; }

.fit {
  max-width: 100%; }