/*
Responsive 996px grid system ~ Grid CSS.
Copyright 2014, Josh Cope

12 Columns ~ Margin left: 3px ~ Margin right: 3px

Based on the 960.gs grid system - http://960.gs/
by Nathan Smith

Licensed under GPL and MIT
*/

/* =============================================================================
   Base 966px Grid
   ========================================================================== */
   
    body {min-width: 996px;}

    /* Container */
    .container_12 {
        margin-left: auto;
        margin-right: auto;
        width: 996px;
    }

    /* Global */
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
        display: inline;
        float: left;
        margin-left: 3px;
        margin-right: 3px;
        box-sizing: content-box;
    }

    .push_1, .pull_1,
    .push_2, .pull_2,
    .push_3, .pull_3,
    .push_4, .pull_4,
    .push_5, .pull_5,
    .push_6, .pull_6,
    .push_7, .pull_7,
    .push_8, .pull_8,
    .push_9, .pull_9,
    .push_10, .pull_10,
    .push_11, .pull_11 {
        position: relative;
    }

    /* Children (Alpha ~ First, Omega ~ Last) */
    .alpha {margin-left: 0;}
    .omega {margin-right: 0;}

    /* Base Grid */
    /*.container_12 .grid_1 {width: 57px;}
    .container_12 .grid_2 {width: 140px;}
    .container_12 .grid_3 {width: 223px;}
    .container_12 .grid_4 {width: 306px;}
    .container_12 .grid_5 {width: 389px;}
    .container_12 .grid_6 {width: 472px;}
    .container_12 .grid_7 {width: 555px;}
    .container_12 .grid_8 {width: 638px;}
    .container_12 .grid_9 {width: 721px;}
    .container_12 .grid_10 {width: 804px;}
    .container_12 .grid_11 {width: 887px;}
    .container_12 .grid_12 {width: 970px;}
    */

    .container_12 .grid_1 {width: 77px;}
    .container_12 .grid_2 {width: 160px;}
    .container_12 .grid_3 {width: 243px;}
    .container_12 .grid_4 {width: 326px;}
    .container_12 .grid_5 {width: 409px;}
    .container_12 .grid_6 {width: 492px;}
    .container_12 .grid_7 {width: 575px;}
    .container_12 .grid_8 {width: 658px;}
    .container_12 .grid_9 {width: 741px;}
    .container_12 .grid_10 {width: 824px;}
    .container_12 .grid_11 {width: 907px;}
    .container_12 .grid_12 {width: 990px;}

    /* Images & Other Objects */
    img, object, embed {  max-width: 100%;}
    img { height: auto; }


/* =============================================================================
   768px Grid
   ========================================================================== */

@media only screen and (min-width: 768px) and (max-width: 995px) {
    
    body {min-width: 768px;}

    /* Container | 768px */
    .container_12 {width: 768px;}

    /* Global | 768px */
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {margin-left: 3px;
        margin-right: 3px;}
        

    /* Base Grid | 768px */
    .container_12 .grid_1 {width: 58px;}
    .container_12 .grid_2 {width: 122px;}
    .container_12 .grid_3 {width: 186px;}
    .container_12 .grid_4 {width: 250px;}
    .container_12 .grid_5 {width: 314px;}
    .container_12 .grid_6 {width: 378px;}
    .container_12 .grid_7 {width: 442px;}
    .container_12 .grid_8 {width: 506px;}
    .container_12 .grid_9 {width: 570px;}
    .container_12 .grid_10 {width: 634px;}
    .container_12 .grid_11 {width: 698px;}
    .container_12 .grid_12 {width: 762px;}

    
    /* Children (Alpha ~ First, Omega ~ Last) | 768 */
    .alpha {margin-left: 0;}
    .omega {margin-right: 0;}
}


/* =============================================================================
   Less than 768px
   ========================================================================== */
   
@media only screen and (max-width: 767px) {
    
    body{min-width:0;}
    
    /* Container */
    .container_12 { margin:0 auto; width:456px; overflow:hidden; }
    
    /* Global */
    .container_12 .grid_1,
    .container_12 .grid_2,
    .container_12 .grid_3,
    .container_12 .grid_4,
    .container_12 .grid_5,
    .container_12 .grid_6,
    .container_12 .grid_7,
    .container_12 .grid_8,
    .container_12 .grid_9,
    .container_12 .grid_10,
    .container_12 .grid_11,
    .container_12 .grid_12  {
        width:416px;
        clear: both;
        float: none;
        margin-left: 0;
        margin-right: 0;
        display:inline-block;
        margin-left: 20px;
        margin-right: 20px;
        
        /* IE 6&7 */
        zoom:1;
        *display:inline;
    }
    
    /* Nested children need no padding */
    .grid_1  .grid_1,
    .grid_2  .grid_1, .grid_2  .grid_2,
    .grid_3  .grid_1, .grid_3  .grid_2, .grid_3  .grid_3,
    .grid_4  .grid_1, .grid_4  .grid_2, .grid_4  .grid_3, .grid_4  .grid_4,
    .grid_5  .grid_1, .grid_5  .grid_2, .grid_5  .grid_3, .grid_5  .grid_4, .grid_5  .grid_5,
    .grid_6  .grid_1, .grid_6  .grid_2, .grid_6  .grid_3, .grid_6  .grid_4, .grid_6  .grid_5, .grid_6  .grid_6,
    .grid_7  .grid_1, .grid_7  .grid_2, .grid_7  .grid_3, .grid_7  .grid_4, .grid_7  .grid_5, .grid_7  .grid_6, .grid_7  .grid_7,
    .grid_8  .grid_1, .grid_8  .grid_2, .grid_8  .grid_3, .grid_8  .grid_4, .grid_8  .grid_5, .grid_8  .grid_6, .grid_8  .grid_7, .grid_8  .grid_8,
    .grid_9  .grid_1, .grid_9  .grid_2, .grid_9  .grid_3, .grid_9  .grid_4, .grid_9  .grid_5, .grid_9  .grid_6, .grid_9  .grid_7, .grid_9  .grid_8, .grid_9  .grid_9,
    .grid_10  .grid_1, .grid_10  .grid_2, .grid_10  .grid_3, .grid_10  .grid_4, .grid_10  .grid_5, .grid_10  .grid_6, .grid_10  .grid_7, .grid_10  .grid_8, .grid_10  .grid_9, .grid_10  .grid_10,
    .grid_11  .grid_1, .grid_11  .grid_2, .grid_11  .grid_3, .grid_11  .grid_4, .grid_11  .grid_5, .grid_11  .grid_6, .grid_11  .grid_7, .grid_11  .grid_8, .grid_11  .grid_9, .grid_11  .grid_10, .grid_11  .grid_11,
    .grid_12  .grid_1, .grid_12  .grid_2, .grid_12  .grid_3, .grid_12  .grid_4, .grid_12  .grid_5, .grid_12  .grid_6, .grid_12  .grid_7, .grid_12  .grid_8, .grid_12  .grid_9, .grid_12  .grid_10, .grid_12  .grid_11, .grid_12  .grid_12 {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .container_12 .push_1, .container_12 .push_2,
    .container_12 .push_3, .container_12 .push_4, 
    .container_12 .push_5, .container_12 .push_6,
    .container_12 .push_7, .container_12 .push_8, 
    .container_12 .push_9, .container_12 .push_10,
    .container_12 .push_11  {
        left: 0;
    }
    .container_12 .pull_1, .container_12 .pull_2,
    .container_12 .pull_3, .container_12 .pull_4,
    .container_12 .pull_5, .container_12 .pull_6,
    .container_12 .pull_7, .container_12 .pull_8,
    .container_12 .pull_9, .container_12 .pull_10,
    .container_12 .pull_11  {
        left: 0;
    } 
}


/* =============================================================================
   Less than 480px
   ========================================================================== */
@media only screen and (max-width: 479px) {
    
    /* Container */
    
    .container_12 { width:300px;}
    
    /* Global */
    
    .container_12 .grid_1,
    .container_12 .grid_2,
    .container_12 .grid_3,
    .container_12 .grid_4,
    .container_12 .grid_5,
    .container_12 .grid_6,
    .container_12 .grid_7,
    .container_12 .grid_8,
    .container_12 .grid_9,
    .container_12 .grid_10,
    .container_12 .grid_11,
    .container_12 .grid_12  {
        width:260px;
    }

    /* make a holder */
    .container_12 .holder_8 {
        width: 260px;
    }
}