beam.css

/*!
 * beam v1.0.0
 * (c) Copyright Luca Poldelmengo
 * https://github.com/pldg/beam
 * Licensed under MIT
 */

/*
 * The following parameters are customizable:
 *
 * - var(--vertical-space)
 * - var(--gutter)
 * - var(--vertical-space-xs)
 * - var(--gutter-xs)
 *
 * If you prefer a fixed vertical space and gutter use px instead of em
 */


/* CSS RESET
============ */
html {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*,
*:before,
*:after {
  line-height: 1;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
     -moz-box-sizing: inherit;
          box-sizing: inherit;
}


/* STRUCTURE
============ */
.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.row {
  padding-top: 1.25em; /* var(--vertical-space) */
  margin-left: -1.25em; /* Use var(--gutter) value */
} .row:first-child {
  padding-top: 0;
}
.row > * {
  display: inline-block;
  margin-right: -0.25em;
  vertical-align: top;
  text-align: left;
  padding-left: 1.25em; /* var(--gutter) */
} .row > * > *:first-child:before { /* To avoid collapse margin problems */
  display: table;
  content: "";
  visibility: hidden;
}
@media only screen and (max-width: 575px) {
  .container {
    width: 95%;
  }
  .row {
    margin-left: 0;
    padding-top: 0;
  }
  .row > * {
    margin-left: 0;
    padding-left: 0;
    padding-top: 0.9375em; /* var(--vertical-space-xs) */
  } .row:first-child > *:first-child {
    padding-top: 0;
  }
}


/* COLUMNS
========== */
.s12 {width: 100%;}
.s11 {width: 91.66666667%;}
.s10 {width: 83.33333333%;}
.s9  {width: 75%;}
.s8  {width: 66.66666667%;}
.s7  {width: 58.33333333%;}
.s6  {width: 50%;}
.s5  {width: 41.66666667%;}
.s4  {width: 33.33333333%;}
.s3  {width: 25%;}
.s2  {width: 16.66666667%;}
.s1  {width: 8.33333333%;}
@media only screen and (max-width: 575px) {
  .s12, .s11, .s10, .s9, .s8, .s7, .s6, .s5, .s4, .s3, .s2, .s1 {
    width: 100%;
  }
  .xs-12 {width: 100%;}
  .xs-11 {width: 91.66666667%;}
  .xs-10 {width: 83.33333333%;}
  .xs-9  {width: 75%;}
  .xs-8  {width: 66.66666667%;}
  .xs-7  {width: 58.33333333%;}
  .xs-6  {width: 50%;}
  .xs-5  {width: 41.66666667%;}
  .xs-4  {width: 33.33333333%;}
  .xs-3  {width: 25%;}
  .xs-2  {width: 16.66666667%;}
  .xs-1  {width: 8.33333333%;}
  .xs-12, .xs-11, .xs-10, .xs-9, .xs-8, .xs-7, .xs-6, .xs-5, .xs-4, .xs-3, .xs-2, .xs-1 {
    padding-left: 0.9375em; /* var(--gutter-xs) */
  }
  .xs-margin-fix {
    margin-left: -0.9375em; /* Use var(--gutter-xs) value and apply it to .xs-* parent .row */
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .sm-12 {width: 100%;}
  .sm-11 {width: 91.66666667%;}
  .sm-10 {width: 83.33333333%;}
  .sm-9  {width: 75%;}
  .sm-8  {width: 66.66666667%;}
  .sm-7  {width: 58.33333333%;}
  .sm-6  {width: 50%;}
  .sm-5  {width: 41.66666667%;}
  .sm-4  {width: 33.33333333%;}
  .sm-3  {width: 25%;}
  .sm-2  {width: 16.66666667%;}
  .sm-1  {width: 8.33333333%;}
}
@media (min-width: 768px) and (max-width: 991px) {
  .md-12 {width: 100%;}
  .md-11 {width: 91.66666667%;}
  .md-10 {width: 83.33333333%;}
  .md-9  {width: 75%;}
  .md-8  {width: 66.66666667%;}
  .md-7  {width: 58.33333333%;}
  .md-6  {width: 50%;}
  .md-5  {width: 41.66666667%;}
  .md-4  {width: 33.33333333%;}
  .md-3  {width: 25%;}
  .md-2  {width: 16.66666667%;}
  .md-1  {width: 8.33333333%;}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .lg-12 {width: 100%;}
  .lg-11 {width: 91.66666667%;}
  .lg-10 {width: 83.33333333%;}
  .lg-9  {width: 75%;}
  .lg-8  {width: 66.66666667%;}
  .lg-7  {width: 58.33333333%;}
  .lg-6  {width: 50%;}
  .lg-5  {width: 41.66666667%;}
  .lg-4  {width: 33.33333333%;}
  .lg-3  {width: 25%;}
  .lg-2  {width: 16.66666667%;}
  .lg-1  {width: 8.33333333%;}
}
@media (min-width: 1200px) {
  .xl-12 {width: 100%;}
  .xl-11 {width: 91.66666667%;}
  .xl-10 {width: 83.33333333%;}
  .xl-9  {width: 75%;}
  .xl-8  {width: 66.66666667%;}
  .xl-7  {width: 58.33333333%;}
  .xl-6  {width: 50%;}
  .xl-5  {width: 41.66666667%;}
  .xl-4  {width: 33.33333333%;}
  .xl-3  {width: 25%;}
  .xl-2  {width: 16.66666667%;}
  .xl-1  {width: 8.33333333%;}
}


/* OFFSETS
========== */
.off-12 {margin-left: 100%;}
.off-11 {margin-left: 91.66666667%;}
.off-10 {margin-left: 83.33333333%;}
.off-9  {margin-left: 75%;}
.off-8  {margin-left: 66.66666667%;}
.off-7  {margin-left: 58.33333333%;}
.off-6  {margin-left: 50%;}
.off-5  {margin-left: 41.66666667%;}
.off-4  {margin-left: 33.33333333%;}
.off-3  {margin-left: 25%;}
.off-2  {margin-left: 16.66666667%;}
.off-1  {margin-left: 8.33333333%;}
@media only screen and (max-width: 575px) {
  .off-12, .off-11, .off-10, .off-9, .off-8, .off-7, .off-6, .off-5, .off-4, .off-3, .off-2, .off-1 {
    margin-left: 0;
  }
  .off-12-xs {margin-left: 100%;}
  .off-11-xs {margin-left: 91.66666667%;}
  .off-10-xs {margin-left: 83.33333333%;}
  .off-9-xs  {margin-left: 75%;}
  .off-8-xs  {margin-left: 66.66666667%;}
  .off-7-xs  {margin-left: 58.33333333%;}
  .off-6-xs  {margin-left: 50%;}
  .off-5-xs  {margin-left: 41.66666667%;}
  .off-4-xs  {margin-left: 33.33333333%;}
  .off-3-xs  {margin-left: 25%;}
  .off-2-xs  {margin-left: 16.66666667%;}
  .off-1-xs  {margin-left: 8.33333333%;}
}
@media (min-width: 576px) and (max-width: 767px) {
  .off-12-sm {margin-left: 100%;}
  .off-10-sm {margin-left: 91.66666667%;}
  .off-11-sm {margin-left: 83.33333333%;}
  .off-9-sm  {margin-left: 75%;}
  .off-8-sm  {margin-left: 66.66666667%;}
  .off-7-sm  {margin-left: 58.33333333%;}
  .off-6-sm  {margin-left: 50%;}
  .off-5-sm  {margin-left: 41.66666667%;}
  .off-4-sm  {margin-left: 33.33333333%;}
  .off-3-sm  {margin-left: 25%;}
  .off-2-sm  {margin-left: 16.66666667%;}
  .off-1-sm  {margin-left: 8.33333333%;}
}
@media (min-width: 768px) and (max-width: 991px) {
  .off-12-md {margin-left: 100%;}
  .off-11-md {margin-left: 91.66666667%;}
  .off-10-md {margin-left: 83.33333333%;}
  .off-9-md  {margin-left: 75%;}
  .off-8-md  {margin-left: 66.66666667%;}
  .off-7-md  {margin-left: 58.33333333%;}
  .off-6-md  {margin-left: 50%;}
  .off-5-md  {margin-left: 41.66666667%;}
  .off-4-md  {margin-left: 33.33333333%;}
  .off-3-md  {margin-left: 25%;}
  .off-2-md  {margin-left: 16.66666667%;}
  .off-1-md  {margin-left: 8.33333333%;}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .off-12-lg {margin-left: 100%;}
  .off-11-lg {margin-left: 91.66666667%;}
  .off-10-lg {margin-left: 83.33333333%;}
  .off-9-lg  {margin-left: 75%;}
  .off-8-lg  {margin-left: 66.66666667%;}
  .off-7-lg  {margin-left: 58.33333333%;}
  .off-6-lg  {margin-left: 50%;}
  .off-5-lg  {margin-left: 41.66666667%;}
  .off-4-lg  {margin-left: 33.33333333%;}
  .off-3-lg  {margin-left: 25%;}
  .off-2-lg  {margin-left: 16.66666667%;}
  .off-1-lg  {margin-left: 8.33333333%;}
}
@media (min-width: 1200px) {
  .off-12-xl {margin-left: 100%;}
  .off-11-xl {margin-left: 91.66666667%;}
  .off-10-xl {margin-left: 83.33333333%;}
  .off-9-xl  {margin-left: 75%;}
  .off-8-xl  {margin-left: 66.66666667%;}
  .off-7-xl  {margin-left: 58.33333333%;}
  .off-6-xl  {margin-left: 50%;}
  .off-5-xl  {margin-left: 41.66666667%;}
  .off-4-xl  {margin-left: 33.33333333%;}
  .off-3-xl  {margin-left: 25%;}
  .off-2-xl  {margin-left: 16.66666667%;}
  .off-1-xl  {margin-left: 8.33333333%;}
}


/* COLLAPSE
=========== */
.collapse {
  padding-top: 0;
}
@media only screen and (max-width: 575px) {
  .collapse > * {
    padding-top: 0;
  } .collapse > *:first-child {
    padding-top: 0.9375em; /* Use var(--vertical-space-xs) value */
  }
  [class*="collapse"][class*="-xs"] > *:first-child {
    padding-top: 0;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  [class*="collapse"][class*="-sm"] {
    padding-top: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  [class*="collapse"][class*="-md"] {
    padding-top: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  [class*="collapse"][class*="-lg"] {
    padding-top: 0;
  }
}
@media (min-width: 1200px) {
  [class*="collapse"][class*="-xl"] {
    padding-top: 0;
  }
}


/* NO-GUTTERS
============= */
.no-gutters {
  margin-left: 0;
} .no-gutters > * {
  padding-left: 0;
}
@media only screen and (max-width: 575px) {
  [class*="no-gutters"][class*="-xs"] {
    margin-left: 0;
  } [class*="no-gutters"][class*="-xs"] > * {
    padding-left: 0;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  [class*="no-gutters"][class*="-sm"] {
    margin-left: 0;
  } [class*="no-gutters"][class*="-sm"] > * {
    padding-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  [class*="no-gutters"][class*="-md"] {
    margin-left: 0;
  } [class*="no-gutters"][class*="-md"] > * {
    padding-left: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  [class*="no-gutters"][class*="-lg"] {
    margin-left: 0;
  } [class*="no-gutters"][class*="-lg"] > * {
    padding-left: 0;
  }
}
@media (min-width: 1200px) {
  [class*="no-gutters"][class*="-xl"] {
    margin-left: 0;
  } [class*="no-gutters"][class*="-xl"] > * {
    padding-left: 0;
  }
}


/* CENTER
========= */
.row > *.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
} .row.center {
  text-align: center;
}
@media only screen and (max-width: 575px) {
  .row > *[class*="center"][class*="-xs"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
  } .row[class*="center"][class*="-xs"] {
    text-align: center;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .row > *[class*="center"][class*="-sm"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
  } .row[class*="center"][class*="-sm"] {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row > *[class*="center"][class*="-md"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
  } .row[class*="center"][class*="-md"] {
    text-align: center;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .row > *[class*="center"][class*="-lg"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
  } .row[class*="center"][class*="-lg"] {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .row > *[class*="center"][class*="-xl"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
  } .row[class*="center"][class*="-xl"] {
    text-align: center;
  }
}


/* MIDDLE & BOTTOM
================== */
.row > *.middle {
  vertical-align: middle;
}
.row > *.bottom {
  vertical-align: bottom;
}
@media only screen and (max-width: 575px) {
  .row > *[class*="middle"][class*="-xs"] {
    vertical-align: middle;
  }
  .row > *[class*="bottom"][class*="-xs"] {
    vertical-align: bottom;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .row > *[class*="middle"][class*="-sm"] {
    vertical-align: middle;
  }
  .row > *[class*="bottom"][class*="-sm"] {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row > *[class*="middle"][class*="-md"] {
    vertical-align: middle;
  }
  .row > *[class*="bottom"][class*="-md"] {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .row > *[class*="middle"][class*="-lg"] {
    vertical-align: middle;
  }
  .row > *[class*="bottom"][class*="-lg"] {
    vertical-align: bottom;
  }
}
@media (min-width: 1200px) {
  .row > *[class*="middle"][class*="-xl"] {
    vertical-align: middle;
  }
  .row > *[class*="bottom"][class*="-xl"] {
    vertical-align: bottom;
  }
}


/* FIRST & LAST
=============== */
.row > *.first {
  float: left;
  margin-right: 0;
}
.row > *.last {
  float: right;
  margin-right: 0;
}
@media only screen and (max-width: 575px) {
  .row > *[class*="first"][class*="-xs"] {
    float: left;
    margin-right: 0;
  }
  .row > *[class*="last"][class*="-xs"] {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .row > *[class*="first"][class*="-sm"] {
    float: left;
    margin-right: 0;
  }
  .row > *[class*="last"][class*="-sm"] {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row > *[class*="first"][class*="-md"] {
    float: left;
    margin-right: 0;
  }
  .row > *[class*="last"][class*="-md"] {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .row > *[class*="first"][class*="-lg"] {
    float: left;
    margin-right: 0;
  }
  .row > *[class*="last"][class*="-lg"] {
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .row > *[class*="first"][class*="-xl"] {
    float: left;
    margin-right: 0;
  }
  .row > *[class*="last"][class*="-xl"] {
    float: right;
    margin-right: 0;
  }
}


/* DELETE & HIDE
================ */
.delete {
  display: none;
} .row:first-child.delete + .row {
  margin-top: 0;
}
.hide {
  visibility: hidden;
}
@media only screen and (max-width: 575px) {
  [class*="delete"][class*="-xs"] {
    display: none;
  } .delete-xs + .row > *:first-child {
    margin-top: 0;
  }
  [class*="hide"][class*="-xs"] {
    visibility: hidden;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  [class*="delete"][class*="-sm"] {
    display: none;
  }
  [class*="hide"][class*="-sm"] {
    visibility: hidden;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  [class*="delete"][class*="-md"] {
    display: none;
  }
  [class*="hide"][class*="-md"] {
    visibility: hidden;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  [class*="delete"][class*="-lg"] {
    display: none;
  }
  [class*="hide"][class*="-lg"] {
    visibility: hidden;
  }
}
@media (min-width: 1200px) {
  [class*="delete"][class*="-xl"] {
    display: none;
  }
  [class*="hide"][class*="-xl"] {
    visibility: hidden;
  }
}