/* Grid design: Pavel Kozlov http://pavelkozlov.com
     * Inspired by various grid solutions.
     * Doesn't require first, last, alpha, omega classes.  Perfect for image grids.
     * Easily adaptable to any purpose with minor recalculations.
     * 
     * TheGrid....
     * A digital frontier.
     * I tried to picture clusters of information as they moved through the computer.
     * What did they look like? Ships? motorcycles? Were the circuits like freeways?
     * I kept dreaming of a world I thought I'd never see. And then, one day...
     * TRON LEGACY
     *
     * 
     * HTML Structure:
     *  <section> (full browser width)
     *      <div class="bin"> (add class="bin" to limit width of the content area)
     *          <div class="g1">content...</div> (add class="g1" or as needed to specify columns)
     *       </div>
     *  </section>
     *
     *  Column variations:
     *  g1: Full width column
     *  g2: 2 columns side by side
     *  g3: 3 colums side by side
     *  g4: 4 columns side by side
     *  g5: 5 columns side by side
     *  g6: 6 columns side by side
     *  Component columns: g32, g43, g52, g53, g54, g65.
     *  
    */
    
    *, *:after, *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }
    
    .bin {
        max-width: 1140px; /*wide browsers*/
        min-width: 240px; /*vertical mobile */
        margin: 0 auto;
        position: relative;
        }
        
    .clear:after,
    .clear:before,
    .bin:after {
        content: "";
        display: table;
        clear: both;
        }
    
    [class*='col-'] {
        margin-right: 3.2%;
        margin-left: 0;
        float: left;
        display:block;
        }
        

    .wide {margin-right: 7%;}
    .narrow {margin-right: 1.5%;}
    .last {margin-right: 0;}

    
    
    .col-1 {width: auto; margin-right: 0} /* don't need to use col in this case */
    .col-2 {width: 48.4%}
    .col-3 {width: 31.19%}   .col-3.wide {width: 28.5%}   .col-3.narrow {width: 32.33%}
    .col-32 {width: 62.3%}
    .col-4 {width: 22.6%}    .col-4.wide {width: 19.75%} .col-4.narrow {width: 23.8%}
    
    
 
    .g1, /*1 col full width*/
    .g2, /*2col equal width*/
    .g3, .g32, /*3 col equal width*/
    .g4, .g43, /*4 col*/
    .g5, .g52, .g53, .g54, /*5 col*/
    .g6, .g64, .g65 /*6 col*/ {
        margin-left: 0;
        margin-right: 0;
        float: left;
        display: block;
        }
    
    
    
    .g1 { float: none; width: auto; clear: both;}
    .g2 { width: 49.7% }
    .g3 { width: 30.13333333% }
    .g32 { width: 63.46666664% }
    .g4 { width: 21.8% }
    .g43 { width: 71.8% }
    .g5 { width: 16.8% }
    .g52 { width: 36.8% }
    .g53 { width: 56.8% }
    .g54 { width: 76.8% }
    .g6 { width: 13.46666666% }
    .g65 { width: 80.1333334% }

    /* GRID END */
    
    .lt-ie8 .col-1 {width: 100%}
    .lt-ie8 .col-2 {width: 41.5%}

@media handheld, only screen and (max-width: 1240px) {
    .bin {
        width: auto;
        margin: 0 5%;
        position: relative;
        
        }
     .responsive 
     {width: 100%; height: auto}
}


@media handheld, only screen and (max-width: 1040px) {

       
}

@media handheld, only screen and (max-width: 820px) {
    
    /*col-4 become col2 */
    
    .bin { width: auto; float: none; margin: 0 10px; }    
    .col-4 {width: 48.4%}
    
    
    .g1, .g3, .g32, .g4, .g43, .g5, .g52, .g53, .g54, .g6, .g65 {
        width: auto;
        margin: 0;
        float:none;
        }
    .g2 {margin: 0 10px;}
}

@media handheld, only screen and (max-width: 640px) {
    .col-1, .col-2, .col-3, .col-4,
    .col-2.wide, .col-2.narrow, .col-3.wide, .col-3.narrow{
        width: auto;
        margin: 0;
        float: none;
        clear: both;
    }
    .g2 {
        width: auto;
        margin: 0;
        float: none;}
   
}