/* ===========================================
Custom Grid system 
12 column grid each column is 60px + 20px gutter 
target (60px) / context (960px) * 100 to get percent = result
=========================================== */
/* Global
===========================================*/
.grid-container {
  /*padding-left: 0.9375rem;
    padding-right: 0.9375rem;*/
  margin: 0 auto 0 auto;
}
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  width:100%;
}
* html .cf {
  height: 1%;
}
.cf {
  display: block;
  clear: both;
  display: table;
  width: 100%;
}
.left{
  float: left;
}
.right{
  float: right;
}
/* Grid >> IE Last Child Fix, Alpha = First Child & Omega = Last Child
----------------------------------------------------------------------------------------------------*/
.alpha {
  margin-left: 0;
}
.omega {
  margin-right: 0;
}
@media screen and  (min-width: 1px) and (max-width: 779px){
  .grid-container > [class^="grid-"] {
    min-height: 1px;    
    padding-left:2%;
    padding-right:2%;
  } 
  .no-padding {
    padding: 0;
  }
  .hide-mobile{
    display: none;
  }
}
@media screen and (min-width:780px){
  .hide-large{
    display: none;
  }
  /* Columns
  ===========================================*/
  .grid-container > [class^="grid-"] {
    float: left;
    min-height: 1px;
    padding: 0 1%;
    margin-left: 0;
    margin-right: 0;
    -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
     -o-transition: all  0.2s ease;
     -ms-transition: all 0.2s ease;
     transition: all 0.2s ease;
  }
  
    .grid-container > [class^="grid-"]:first-child{
    margin-left: 0;
  }
  .grid-container > [class^="grid-"]:last-child{
    /*float:right;*/
    margin-right:0;
    /*padding-right: 0;*/
  }
  /*.grid-container > [class^="grid-"]:last-child{
    float:right;
  }*/
  .grid-1 { 
    width:8.333%;
  }
  .grid-2{ 
    width:16.667%;
  }
  .grid-3{
    width:25.0%;
  }
  .grid-4 {
    width:33.333%;
  }
  .grid-5 {
    width:41.667%;
  }
  .grid-6 {
    width:50.0%;
  }
  .grid-7 {
    width:58.333%;
  }
  .grid-8 {
    width:66.667%;
  }
  .grid-9 {
    width:75.0%;
  }
  .grid-10 {
    width:83.333%;
  }
  .grid-11 {
    width:91.667%;
  }
  .grid-12 {
    width:100%;
  }
  .push-0 {
    position: relative;
    left: 0%;
    right: auto; }
  .pull-0 {
    position: relative;
    right: 0%;
    left: auto; }
  .push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }
  .pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }
  .push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }
  .pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }
  .push-3 {
    position: relative;
    left: 25%;
    right: auto; }
  .pull-3 {
    position: relative;
    right: 25%;
    left: auto; }
  .push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }
  .pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }
  .push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }
  .pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }
  .push-6 {
    position: relative;
    left: 50%;
    right: auto; }
  .pull-6 {
    position: relative;
    right: 50%;
    left: auto; }
  .push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }
  .pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }
  .push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }
  .pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }
  .push-9 {
    position: relative;
    left: 75%;
    right: auto; }
  .pull-9 {
    position: relative;
    right: 75%;
    left: auto; }
  .push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }
  .pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }
  .push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }
  .pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; 
  } 
  /* Clearfix
  ===========================================*/
  .cf:after,
  .grid-container:after{
    content:" ";
    display: table;
    clear: both;
  }
}
@media screen and (min-width:1000px){
  .grid-container{
    max-width: 1100px;
  }
}