/* Table of Contents
==================================================
# Variables
# Container
# Desktop
# Laptop
# Tablet
# Mobile
# Display
# Pull
# Row
# Clearing */

/* # Variables
================================================== */
$sizes: (
  one: 10%,
  two: 20%,
  three: 30%,
  four: 40%,
  five: 50%,
  six: 60%,
  seven: 70%,
  eight: 80%,
  nine: 90%,
  ten: 100%,
  one-fourth: 25%,
  one-half: 50%,
  three-fourths: 75%,
  one-third: 33.33333%,
  two-thirds: 66.66666%
);

/* # Container
================================================== */
.container {
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: calc(100% - 20px);
}
.column,
.columns {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.column.alpha,
.columns.alpha {
  margin-left: 0;
  margin-right: 10px;
}
.column.omega,
.columns.omega {
  margin-left: 10px;
  margin-right: 0;
}
.column.alpha.omega,
.columns.alpha.omega {
  margin-left: 0;
  margin-right: 0;
}

/* # Desktop
================================================== */
@each $name, $size in $sizes {
  .#{$name}.column,
  .#{$name}.columns { width: calc(#{$size} - 20px); }
  .#{$name}.column.alpha,
  .#{$name}.column.omega,
  .#{$name}.columns.alpha,
  .#{$name}.columns.omega { width: calc(#{$size} - 10px); }
  .#{$name}.column.alpha.omega,
  .#{$name}.columns.alpha.omega { width: $size; }
  .offset-by-#{$name} { padding-left: $size; }
}
.hidden { display: none !important; }
.hidden-desktop { display: none !important; }
.visible { display: inherit !important; }
.visible-phone { display: none !important; }
.visible-tablet { display: none !important; }
.visible-laptop { display: none !important; }

/* # Laptop
================================================== */
@media only screen and (min-width: 960px) and (max-width: 1365px) {
  .hidden-desktop { display: inherit !important; }
  .hidden-laptop { display: none !important; }
  .visible-desktop { display: none !important ; }
  .visible-laptop { display: inherit !important; }
}

/* # Tablet
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .hidden-desktop { display: inherit !important; }
  .hidden-laptop { display: inherit !important; }
  .hidden-tablet { display: none !important; }
  .visible-desktop { display: none !important ; }
  .visible-laptop { display: none !important ; }
  .visible-tablet { display: inherit !important; }
}

/* # Mobile
================================================== */
@media only screen and (max-width: 767px) {
  @each $name, $size in $sizes {
    .#{$name}.column,
    .#{$name}.columns,
    .#{$name}.column.alpha,
    .#{$name}.column.omega,
    .#{$name}.columns.alpha,
    .#{$name}.columns.omega,
    .#{$name}.column.alpha.omega,
    .#{$name}.columns.alpha.omega, {
      margin: 0;
      width: 100%;
    }
    .offset-by-#{$name} { padding-left: 0; }
  }
  .hidden-desktop { display: inherit !important; }
  .hidden-laptop { display: inherit !important; }
  .hidden-phone { display: none !important; }
  .visible-desktop { display: none !important; }
  .visible-laptop { display: none !important; }
  .visible-phone { display: inherit !important; }
}

/* # Display
================================================== */
.display-block { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }
.display-table { display: table !important; }

/* # Pull
================================================== */
.pull-none { float: none; }
.pull-left { float: left; }
.pull-right { float: right; }

/* # Row
================================================== */
.row { margin-bottom: 20px; }
.row-small { margin-bottom: 10px; }
.row-medium { margin-bottom: 40px; }
.row-large { margin-bottom: 60px; }
@media only screen and (max-width: 767px) {
  .row-responsive { margin-bottom: 20px; }
  .row-responsive-small { margin-bottom: 10px; }
  .row-responsive-medium { margin-bottom: 40px; }
  .row-responsive-large { margin-bottom: 60px; }
}

/* # Clearing
================================================== */
.clear,
.clear:before,
.clear:after,
.clearfix:before,
.row:before,
.row-small:before,
.row-medium:before,
.row-large:before,
.row-responsive:before,
.row-responsive-small:before,
.row-responsive-medium:before,
.row-responsive-large:before,
.row:after,
.row-small:after,
.row-medium:after,
.row-large:after,
.row-responsive:after,
.row-responsive-small:after,
.row-responsive-medium:after,
.row-responsive-large:after,
.clearfix:after, {
  clear: both;
  content: '\0020';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
.clear,
.clearfix,
.row,
.row-small,
.row-medium,
.row-large,
.row-responsive,
.row-responsive-small,
.row-responsive-medium,
.row-responsive-large { zoom: 1; }