/* #Variable Definitions
================================================== */
/* Universal */
.container {
  margin: 0 auto;
  max-width: 960px;
  width: 100%; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

.column {
  float: left;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 0; }

.row {
  display: inline-block;
  width: 100%;
  padding-left: 2.5%;
  padding-right: 2.5%; }

.column.full {
  width: 100%; }

.column.three-fourths {
  width: 100%; }

.column.two-thirds {
  width: 100%; }

.column.half {
  width: 100%; }

.column.third {
  width: 100%; }

.column.fourth {
  width: 100%; }

.column.flow-opposite {
  float: right; }

/* Small screens  (Mobile First) */
/* Medium screens */
@media (min-width: 768px) {
  .container {
    position: relative;
    top: 45%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); }

  .column {
    padding-bottom: 0em; }

  .column.full {
    width: 100%; }

  .column.three-fourths {
    width: 75%; }

  .column.two-thirds {
    width: 66.7%; }

  .column.half {
    width: 50%; }

  .column.third {
    width: 33.3%; }

  .column.fourth {
    width: 50%; }

  .column.flow-opposite {
    float: right; } }
/* Large screens */
@media (min-width: 960px) {
  .column.fourth {
    width: 25%; } }
/* Extra large screens */