/*--------------------------------------------------------------------------
  1. Grid System
--------------------------------------------------------------------------*/
.container {
  position: relative;
}

/* Container */
.container {
  width: 960px;
  margin: 0 auto;
  /* Columns */

}
.container .column,
.container .columns {
  float: left;
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container .column.nest,
.container .columns.nest,
.container .column.nested,
.container .columns.nested {
  padding-left: 0;
  padding-right: 0;
}
.desktop-1 {
  width: 80px;
}
.desktop-2 {
  width: 160px;
}
.desktop-3 {
  width: 240px;
}
.desktop-4 {
  width: 320px;
}
.desktop-5 {
  width: 400px;
}
.desktop-6 {
  width: 480px;
}
.desktop-7 {
  width: 560px;
}
.desktop-8 {
  width: 640px;
}
.desktop-9 {
  width: 720px;
}
.desktop-10 {
  width: 800px;
}
.desktop-11 {
  width: 880px;
}
.desktop-12 {
  width: 960px;
}
.offset-1 {
  margin-left: 80px;
}
.offset-2 {
  margin-left: 160px;
}
.offset-3 {
  margin-left: 240px;
}
.offset-4 {
  margin-left: 320px;
}
.offset-5 {
  margin-left: 400px;
}
.offset-6 {
  margin-left: 480px;
}
.offset-7 {
  margin-left: 560px;
}
.offset-8 {
  margin-left: 640px;
}
.offset-9 {
  margin-left: 720px;
}
.offset-10 {
  margin-left: 800px;
}
.offset-11 {
  margin-left: 880px;
}
.pull-1 {
  right: 80px;
}
.pull-2 {
  right: 160px;
}
.pull-3 {
  right: 240px;
}
.pull-4 {
  right: 320px;
}
.pull-5 {
  right: 400px;
}
.pull-6 {
  right: 480px;
}
.pull-7 {
  right: 560px;
}
.pull-8 {
  right: 640px;
}
.pull-9 {
  right: 720px;
}
.pull-10 {
  right: 800px;
}
.pull-11 {
  right: 880px;
}
.push-1 {
  left: 80px;
}
.push-2 {
  left: 160px;
}
.push-3 {
  left: 240px;
}
.push-4 {
  left: 320px;
}
.push-5 {
  left: 400px;
}
.push-6 {
  left: 480px;
}
.push-7 {
  left: 560px;
}
.push-8 {
  left: 640px;
}
.push-9 {
  left: 720px;
}
.push-10 {
  left: 800px;
}
.push-11 {
  left: 880px;
}
/* Widescreen */
@media screen and (min-width: 1300px) {
  .container {
    width: 1200px;
  }
  .desktop-1 {
    width: 100px;
  }
  .desktop-2 {
    width: 200px;
  }
  .desktop-3 {
    width: 300px;
  }
  .desktop-4 {
    width: 400px;
  }
  .desktop-5 {
    width: 500px;
  }
  .desktop-6 {
    width: 600px;
  }
  .desktop-7 {
    width: 700px;
  }
  .desktop-8 {
    width: 800px;
  }
  .desktop-9 {
    width: 900px;
  }
  .desktop-10 {
    width: 1000px;
  }
  .desktop-11 {
    width: 1100px;
  }
  .desktop-12 {
    width: 1200px;
  }
  .offset-1 {
    margin-left: 100px;
  }
  .offset-2 {
    margin-left: 200px;
  }
  .offset-3 {
    margin-left: 300px;
  }
  .offset-4 {
    margin-left: 400px;
  }
  .offset-5 {
    margin-left: 500px;
  }
  .offset-6 {
    margin-left: 600px;
  }
  .offset-7 {
    margin-left: 700px;
  }
  .offset-8 {
    margin-left: 800px;
  }
  .offset-9 {
    margin-left: 900px;
  }
  .offset-10 {
    margin-left: 1000px;
  }
  .offset-11 {
    margin-left: 1100px;
  }
  .pull-1 {
    right: 100px;
  }
  .pull-2 {
    right: 200px;
  }
  .pull-3 {
    right: 300px;
  }
  .pull-4 {
    right: 400px;
  }
  .pull-5 {
    right: 500px;
  }
  .pull-6 {
    right: 600px;
  }
  .pull-7 {
    right: 700px;
  }
  .pull-8 {
    right: 800px;
  }
  .pull-9 {
    right: 900px;
  }
  .pull-10 {
    right: 1000px;
  }
  .pull-11 {
    right: 1100px;
  }
  .push-1 {
    left: 100px;
  }
  .push-2 {
    left: 200px;
  }
  .push-3 {
    left: 300px;
  }
  .push-4 {
    left: 400px;
  }
  .push-5 {
    left: 500px;
  }
  .push-6 {
    left: 600px;
  }
  .push-7 {
    left: 700px;
  }
  .push-8 {
    left: 800px;
  }
  .push-9 {
    left: 900px;
  }
  .push-10 {
    left: 1000px;
  }
  .push-11 {
    left: 1100px;
  }
}
/* Tablet */
@media screen and (min-width: 768px) and (max-width: 959px) {
  .container {
    width: 660px;
  }
  .desktop-1 {
    width: 55px;
  }
  .desktop-2 {
    width: 110px;
  }
  .desktop-3 {
    width: 165px;
  }
  .desktop-4 {
    width: 220px;
  }
  .desktop-5 {
    width: 275px;
  }
  .desktop-6 {
    width: 330px;
  }
  .desktop-7 {
    width: 385px;
  }
  .desktop-8 {
    width: 440px;
  }
  .desktop-9 {
    width: 495px;
  }
  .desktop-10 {
    width: 550px;
  }
  .desktop-11 {
    width: 605px;
  }
  .desktop-12 {
    width: 660px;
  }
  .tablet-1 {
    width: 55px;
  }
  .tablet-2 {
    width: 110px;
  }
  .tablet-3 {
    width: 165px;
  }
  .tablet-4 {
    width: 220px;
  }
  .tablet-5 {
    width: 275px;
  }
  .tablet-6 {
    width: 330px;
  }
  .tablet-7 {
    width: 385px;
  }
  .tablet-8 {
    width: 440px;
  }
  .tablet-9 {
    width: 495px;
  }
  .tablet-10 {
    width: 550px;
  }
  .tablet-11 {
    width: 605px;
  }
  .tablet-12 {
    width: 660px;
  }
  .offset-1 {
    margin-left: 55px;
  }
  .offset-2 {
    margin-left: 110px;
  }
  .offset-3 {
    margin-left: 165px;
  }
  .offset-4 {
    margin-left: 220px;
  }
  .offset-5 {
    margin-left: 275px;
  }
  .offset-6 {
    margin-left: 330px;
  }
  .offset-7 {
    margin-left: 385px;
  }
  .offset-8 {
    margin-left: 440px;
  }
  .offset-9 {
    margin-left: 495px;
  }
  .offset-10 {
    margin-left: 550px;
  }
  .offset-11 {
    margin-left: 605px;
  }
  .tablet-offset-0 {
    margin-left: 0px;
  }
  .tablet-offset-1 {
    margin-left: 55px;
  }
  .tablet-offset-2 {
    margin-left: 110px;
  }
  .tablet-offset-3 {
    margin-left: 165px;
  }
  .tablet-offset-4 {
    margin-left: 220px;
  }
  .tablet-offset-5 {
    margin-left: 275px;
  }
  .tablet-offset-6 {
    margin-left: 330px;
  }
  .tablet-offset-7 {
    margin-left: 385px;
  }
  .tablet-offset-8 {
    margin-left: 440px;
  }
  .tablet-offset-9 {
    margin-left: 495px;
  }
  .tablet-offset-10 {
    margin-left: 550px;
  }
  .tablet-offset-11 {
    margin-left: 605px;
  }
  .pull-1 {
    right: 55px;
  }
  .pull-2 {
    right: 110px;
  }
  .pull-3 {
    right: 165px;
  }
  .pull-4 {
    right: 220px;
  }
  .pull-5 {
    right: 275px;
  }
  .pull-6 {
    right: 330px;
  }
  .pull-7 {
    right: 385px;
  }
  .pull-8 {
    right: 440px;
  }
  .pull-9 {
    right: 495px;
  }
  .pull-10 {
    right: 550px;
  }
  .pull-11 {
    right: 605px;
  }
  .push-1 {
    left: 55px;
  }
  .push-2 {
    left: 110px;
  }
  .push-3 {
    left: 165px;
  }
  .push-4 {
    left: 220px;
  }
  .push-5 {
    left: 275px;
  }
  .push-6 {
    left: 330px;
  }
  .push-7 {
    left: 385px;
  }
  .push-8 {
    left: 440px;
  }
  .push-9 {
    left: 495px;
  }
  .push-10 {
    left: 550px;
  }
  .push-11 {
    left: 605px;
  }
  .tablet-pull-0 {
    right: 0px;
  }
  .tablet-pull-1 {
    right: 55px;
  }
  .tablet-pull-2 {
    right: 110px;
  }
  .tablet-pull-3 {
    right: 165px;
  }
  .tablet-pull-4 {
    right: 220px;
  }
  .tablet-pull-5 {
    right: 275px;
  }
  .tablet-pull-6 {
    right: 330px;
  }
  .tablet-pull-7 {
    right: 385px;
  }
  .tablet-pull-8 {
    right: 440px;
  }
  .tablet-pull-9 {
    right: 495px;
  }
  .tablet-pull-10 {
    right: 550px;
  }
  .tablet-pull-11 {
    right: 605px;
  }
  .tablet-push-0 {
    left: 0px;
  }
  .tablet-push-1 {
    left: 55px;
  }
  .tablet-push-2 {
    left: 110px;
  }
  .tablet-push-3 {
    left: 165px;
  }
  .tablet-push-4 {
    left: 220px;
  }
  .tablet-push-5 {
    left: 275px;
  }
  .tablet-push-6 {
    left: 330px;
  }
  .tablet-push-7 {
    left: 385px;
  }
  .tablet-push-8 {
    left: 440px;
  }
  .tablet-push-9 {
    left: 495px;
  }
  .tablet-push-10 {
    left: 550px;
  }
  .tablet-push-11 {
    left: 605px;
  }
}
/* Mobile - Portrait */
@media screen and (max-width: 767px) {
  .container {
    width: 340px;
  }
  .container .column,
  .container .columns {
    padding-left: 10px;
    padding-right: 10px;
  }
  .desktop-1,
  .tablet-1 {
    width: 340px;
  }
  .desktop-2,
  .tablet-2 {
    width: 340px;
  }
  .desktop-3,
  .tablet-3 {
    width: 340px;
  }
  .desktop-4,
  .tablet-4 {
    width: 340px;
  }
  .desktop-5,
  .tablet-5 {
    width: 340px;
  }
  .desktop-6,
  .tablet-6 {
    width: 340px;
  }
  .desktop-7,
  .tablet-7 {
    width: 340px;
  }
  .desktop-8,
  .tablet-8 {
    width: 340px;
  }
  .desktop-9,
  .tablet-9 {
    width: 340px;
  }
  .desktop-10,
  .tablet-10 {
    width: 340px;
  }
  .desktop-11,
  .tablet-11 {
    width: 340px;
  }
  .desktop-12,
  .tablet-12 {
    width: 340px;
  }
  .offset-1 {
    margin-left: 0;
  }
  .offset-2 {
    margin-left: 0;
  }
  .offset-3 {
    margin-left: 0;
  }
  .offset-4 {
    margin-left: 0;
  }
  .offset-5 {
    margin-left: 0;
  }
  .offset-6 {
    margin-left: 0;
  }
  .offset-7 {
    margin-left: 0;
  }
  .offset-8 {
    margin-left: 0;
  }
  .offset-9 {
    margin-left: 0;
  }
  .offset-10 {
    margin-left: 0;
  }
  .offset-11 {
    margin-left: 0;
  }
  .pull-1,
  .push-1,
  .tablet-pull-1,
  .tablet-push-1 {
    left: 0;
  }
  .pull-2,
  .push-2,
  .tablet-pull-2,
  .tablet-push-2 {
    left: 0;
  }
  .pull-3,
  .push-3,
  .tablet-pull-3,
  .tablet-push-3 {
    left: 0;
  }
  .pull-4,
  .push-4,
  .tablet-pull-4,
  .tablet-push-4 {
    left: 0;
  }
  .pull-5,
  .push-5,
  .tablet-pull-5,
  .tablet-push-5 {
    left: 0;
  }
  .pull-6,
  .push-6,
  .tablet-pull-6,
  .tablet-push-6 {
    left: 0;
  }
  .pull-7,
  .push-7,
  .tablet-pull-7,
  .tablet-push-7 {
    left: 0;
  }
  .pull-8,
  .push-8,
  .tablet-pull-8,
  .tablet-push-8 {
    left: 0;
  }
  .pull-9,
  .push-9,
  .tablet-pull-9,
  .tablet-push-9 {
    left: 0;
  }
  .pull-10,
  .push-10,
  .tablet-pull-10,
  .tablet-push-10 {
    left: 0;
  }
  .pull-11,
  .push-11,
  .tablet-pull-11,
  .tablet-push-11 {
    left: 0;
  }
  .mobile-one-fifth {
    width: 20%;
  }
  .mobile-one-fourth {
    width: 25%;
  }
  .mobile-one-third {
    width: 33.333333%;
  }
  .mobile-half {
    width: 50%;
  }
}
/* Mobile - Landscape */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 400px;
  }
  .desktop-1,
  .tablet-1 {
    width: 100%;
  }
  .desktop-2,
  .tablet-2 {
    width: 100%;
  }
  .desktop-3,
  .tablet-3 {
    width: 100%;
  }
  .desktop-4,
  .tablet-4 {
    width: 100%;
  }
  .desktop-5,
  .tablet-5 {
    width: 100%;
  }
  .desktop-6,
  .tablet-6 {
    width: 100%;
  }
  .desktop-7,
  .tablet-7 {
    width: 100%;
  }
  .desktop-8,
  .tablet-8 {
    width: 100%;
  }
  .desktop-9,
  .tablet-9 {
    width: 100%;
  }
  .desktop-10,
  .tablet-10 {
    width: 100%;
  }
  .desktop-11,
  .tablet-11 {
    width: 100%;
  }
  .desktop-12,
  .tablet-12 {
    width: 100%;
  }
  .mobile-one-fifth {
    width: 20%;
  }
  .mobile-one-fourth {
    width: 25%;
  }
  .mobile-one-third {
    width: 33.333333%;
  }
  .mobile-half {
    width: 50%;
  }
}
.show-on-widescreen,
.show-on-tablet,
.show-under-tablet,
.show-on-mobile {
  display: none !important;
}
/* Viewport-specific Visibility Classes */
@media screen and (min-width: 1300px) {
  .hide-on-widescreen {
    display: none !important;
  }
}
@media screen and (min-width: 960px) {
  .show-under-tablet {
    display: none !important;
  }
  .show-on-mobile {
    display: none !important;
  }
}
@media screen and (max-width: 959px) {
  .hide-under-tablet {
    display: none !important;
  }
  .show-under-tablet {
    display: block !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .hide-on-tablet {
    display: none !important;
  }
  .show-on-tablet {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
  .show-on-mobile {
    display: block !important;
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  
}
@media screen and (max-width: 479px) {
  
}





/*--------------------------------------------------------------------------
  TIER 1: MODERN LAPTOPS (Screens 1400px - 1799px)
  Adjusted: Container reduced to 1260px (was 1320px)
  Column Unit: 105px
--------------------------------------------------------------------------*/
@media screen and (min-width: 1400px) {
  .container { width: 1260px; }

  /* Columns (105px increments) */
  .desktop-1  { width: 105px; }
  .desktop-2  { width: 210px; }
  .desktop-3  { width: 315px; }
  .desktop-4  { width: 420px; }
  .desktop-5  { width: 525px; }
  .desktop-6  { width: 630px; }
  .desktop-7  { width: 735px; }
  .desktop-8  { width: 840px; }
  .desktop-9  { width: 945px; }
  .desktop-10 { width: 1050px; }
  .desktop-11 { width: 1155px; }
  .desktop-12 { width: 1260px; }

  /* Offsets */
  .offset-1   { margin-left: 105px; }
  .offset-2   { margin-left: 210px; }
  .offset-3   { margin-left: 315px; }
  .offset-4   { margin-left: 420px; }
  .offset-5   { margin-left: 525px; }
  .offset-6   { margin-left: 630px; }
  .offset-7   { margin-left: 735px; }
  .offset-8   { margin-left: 840px; }
  .offset-9   { margin-left: 945px; }
  .offset-10  { margin-left: 1050px; }
  .offset-11  { margin-left: 1155px; }
  
  /* Push/Pull */
  .push-1, .pull-1 { left: 105px; }
  .push-2, .pull-2 { left: 210px; }
}

/*--------------------------------------------------------------------------
  TIER 2: GIANT MONITORS (Screens 1800px+)
  Boosts Container to 1680px
  Column Unit: 140px
--------------------------------------------------------------------------*/
@media screen and (min-width: 1800px) {
  .container { width: 1680px; }

  /* Columns (140px increments) */
  .desktop-1  { width: 140px; }
  .desktop-2  { width: 280px; }
  .desktop-3  { width: 420px; }
  .desktop-4  { width: 560px; }
  .desktop-5  { width: 700px; }
  .desktop-6  { width: 840px; }
  .desktop-7  { width: 980px; }
  .desktop-8  { width: 1120px; }
  .desktop-9  { width: 1260px; }
  .desktop-10 { width: 1400px; }
  .desktop-11 { width: 1540px; }
  .desktop-12 { width: 1680px; }

  /* Offsets */
  .offset-1   { margin-left: 140px; }
  .offset-2   { margin-left: 280px; }
  .offset-3   { margin-left: 420px; }
  .offset-4   { margin-left: 560px; }
  .offset-5   { margin-left: 700px; }
  .offset-6   { margin-left: 840px; }
  .offset-7   { margin-left: 980px; }
  .offset-8   { margin-left: 1120px; }
  .offset-9   { margin-left: 1260px; }
  .offset-10  { margin-left: 1400px; }
  .offset-11  { margin-left: 1540px; }
  
  /* Push/Pull */
  .push-1, .pull-1 { left: 140px; }
  .push-2, .pull-2 { left: 280px; }
}


/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.row:after,
.clearfix:after {
  clear: both;
}
.row,
.clearfix {
  zoom: 1;
}
/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}