/* 
[Table of contents]

01.BASE GRID
02.CLEARING
03.MISC
------------------------------------------------*/

/* ........................................................... [01.BASE GRID] */

.container { border-bottom: 4px solid #262626; position: relative; font-family: Helvetica, Arial, sans-serif; margin: 0 auto; padding: 0; width: 980px; }
.container.fluid { width: 92%; }
.row { margin-bottom: 20px; }

.container .zero,
.container .one,
.container .two,
.container .three,
.container .four,
.container .five,
.container .six,
.container .seven,
.container .eight,
.container .nine,
.container .ten,
.container .eleven,
.container .twelve { float: left; display: inline; position:relative; }

.container .one     { width: 50px;  }
.container .two     { width: 140px; }
.container .three   { width: 205px; border-top: 6px solid rgba(252, 252, 252, 0); border-left: 20px solid rgba(252, 252, 252, 0); margin-left: 0px;}
.container .four    { width: 315px;}
.container .five    { width: 420px;}
.container .six     { }
.container .seven   { width: 540px; }
.container .eight   { width: 649px; border-bottom: 3px solid #262626; border-right: 1px solid #d9d9d9; margin-left: 0px;}
.container .nine    { width: 700px; }
.container .ten     { width: 780px; }
.container .eleven  { width: 860px; }
.container .twelve  { border: 10px; }

/* Offsets */

.container .offset-one     { padding-left: 80px;  }
.container .offset-two     { padding-left: 160px; }
.container .offset-three   { padding-left: 240px; }
.container .offset-four    { padding-left: 320px; }
.container .offset-five    { padding-left: 400px; }
.container .offset-six     { padding-left: 480px; }
.container .offset-seven   { padding-left: 560px; }
.container .offset-eight   { padding-left: 640px; }
.container .offset-nine    { padding-left: 720px; }
.container .offset-ten     { padding-left: 800px; }
.container .offset-eleven  { padding-left: 880px; }

/* Fluid Grid */

.fluid.container .one,
.fluid.container .two,
.fluid.container .three,
.fluid.container .four,
.fluid.container .five,
.fluid.container .six,
.fluid.container .seven,
.fluid.container .eight,
.fluid.container .nine,
.fluid.container .ten,
.fluid.container .eleven,
.fluid.container .twelve {
	margin-left: 1%;
	margin-right: 1%;
}

.fluid.container .one    { width: 6.333%; }
.fluid.container .two    { width: 14.666%; }
.fluid.container .three  { width: 23%; }
.fluid.container .four   { width: 31.333%; }
.fluid.container .five   { width: 39.666%; }
.fluid.container .six    { width: 48%; }
.fluid.container .seven  { width: 56.333%; }
.fluid.container .eight  { width: 64.666%; }
.fluid.container .nine   { width: 73%; }
.fluid.container .ten    { width: 81.333%; }
.fluid.container .eleven { width: 89.666%; }
.fluid.container .twelve { width: 98%; }

/* Offsets */

.fluid.container .offset-one    { padding-left: 8.333%; }
.fluid.container .offset-two    { padding-left: 16.666%; }
.fluid.container .offset-three  { padding-left: 25%; }
.fluid.container .offset-four   { padding-left: 33.333%; }
.fluid.container .offset-five   { padding-left: 41.666%; }
.fluid.container .offset-six    { padding-left: 50%; }
.fluid.container .offset-seven  { padding-left: 58.333%; }
.fluid.container .offset-eight  { padding-left: 66.666%; }
.fluid.container .offset-nine   { padding-left: 75%; }
.fluid.container .offset-ten    { padding-left: 83.333%; }
.fluid.container .offset-eleven { padding-left: 91.666%; }

/* Remove margins */

.fluid.container .alpha, .container .alpha  {
  padding-left:0;  
  padding-bottom: 8px;
}
.fluid.container .omega, .container .omega  { padding-right:0; padding-top: 10px;}

/* ........................................................... [02.CLEARING] */

/* Self Clearing */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested.container , or wrap each row of.container 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; }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* ........................................................... [03.MISC] */

.hidden { display: none; visibility: hidden; }

.visible-phone { display: none; }

.visible-tablet { display: none; }

.hidden-desktop { display: none; }
