/*  ==========================================================================
    04. GRID
    ========================================================================== */




.g-container                { width: 100%; max-width: 1020px; margin: 0 auto; text-align: center; }

.g  {  display: block; width: 100%; text-rendering: optimizespeed; }

/*.opera:-o-prefocus, .g   { word-spacing: -0.43em; }*/

.g-1, .g-2, .g-3, .g-4, .g-5, .g-6, .g-7, .g-8, .g-9, .g-10, .g-11, .g-12, .g-15, .g-inner, .g-full
    {
        display: inline-block;
        zoom: 1;
        padding-left: 10px;
        padding-right: 10px;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
        position: relative;
        text-align: left;
        margin-right: -4px;
    }

    .g, .g.g-1, .g.g-2, .g.g-3, .g.g-4, .g.g-5, .g.g-6, .g.g-7, .g.g-8, .g.g-9, .g.g-10, .g.g-11, .g.g-12, .g.g-15, .g.g-inner, .g.g-full {
        padding-left: 0; padding-right: 0;
        /*margin-right: 0;*/
        /*letter-spacing: -0.31em;*/
    }

    .g > *                  { /*letter-spacing: normal; word-spacing: normal;*/ }

.g--center                  { margin-left: auto; margin-right: auto; text-align: center; } /* apply only to .g (parent) element */


/* ALL RESOLUTIONS */
.g-1                        { width: 8.3333333%;  }
.g-2                        { width: 16.6666667%; }
.g-3                        { width: 25%;         }
.g-4                        { width: 33.3333333%; }
.g-5                        { width: 41.6666667%; }
.g-6                        { width: 50%;         }
.g-7                        { width: 58.3333333%; }
.g-8                        { width: 66.6666667%; }
.g-9                        { width: 75%;         }
.g-10                       { width: 83.3333333%; }
.g-11                       { width: 91.6666667%; }
.g-12                       { width: 100%; display: block; clear: both; }
.g-full                     { width: 100%; display: block; clear: both; }

.g-11 .g-1                  { width: 9.090909091%; }
.g-11 .g-2                  { width: 18.18181818%; }
.g-11 .g-3                  { width: 27.27272727%; }
.g-11 .g-4                  { width: 36.36363636%; }
.g-11 .g-5                  { width: 45.45454545%; }
.g-11 .g-6                  { width: 54.54545455%; }
.g-11 .g-7                  { width: 63.63636364%; }
.g-11 .g-8                  { width: 72.72727273%; }
.g-11 .g-9                  { width: 81.81818182%; }
.g-11 .g-10                 { width: 90.90909091%; }
.g-11 .g-11                 { width: 100%; display: block; clear: both; }

.g-10 .g-1                  { width: 10%; }
.g-10 .g-2                  { width: 20%; }
.g-10 .g-3                  { width: 30%; }
.g-10 .g-4                  { width: 40%; }
.g-10 .g-5                  { width: 50%; }
.g-10 .g-6                  { width: 60%; }
.g-10 .g-7                  { width: 70%; }
.g-10 .g-8                  { width: 80%; }
.g-10 .g-9                  { width: 90%; }
.g-10 .g-10                 { width: 100%; display: block; clear: both; }

.g-9 .g-1                   { width: 11.11111111%; }
.g-9 .g-2                   { width: 22.22222222%; }
.g-9 .g-3                   { width: 33.33333333%; }
.g-9 .g-4                   { width: 44.44444444%; }
.g-9 .g-5                   { width: 55.55555556%; }
.g-9 .g-6                   { width: 66.66666667%; }
.g-9 .g-7                   { width: 77.77777778%; }
.g-9 .g-8                   { width: 88.88888889%; }
.g-9 .g-9                   { width: 100%; display: block; clear: both; }

.g-8 .g-1                   { width: 12.5%; }
.g-8 .g-2                   { width: 25%; }
.g-8 .g-3                   { width: 37.5%; }
.g-8 .g-4                   { width: 50%; }
.g-8 .g-5                   { width: 62.5%; }
.g-8 .g-6                   { width: 75%; }
.g-8 .g-7                   { width: 87.5%; }
.g-8 .g-8                   { width: 100%; display: block; clear: both; }

.g-7 .g-1                   { width: 14.28571429%; }
.g-7 .g-2                   { width: 28.57142857%; }
.g-7 .g-3                   { width: 42.85714286%; }
.g-7 .g-4                   { width: 57.14285714%; }
.g-7 .g-5                   { width: 71.42857143%; }
.g-7 .g-6                   { width: 85.71428571%; }
.g-7 .g-7                   { width: 100%; display: block; clear: both; }

.g-6 .g-1                   { width: 16.66666667%; }
.g-6 .g-2                   { width: 33.33333333%; }
.g-6 .g-3                   { width: 50%; }
.g-6 .g-4                   { width: 66.66666667%; }
.g-6 .g-5                   { width: 83.33333333%; }
.g-6 .g-6                   { width: 100%; display: block; clear: both; }

.g-5 .g-1                   { width: 20%; }
.g-5 .g-2                   { width: 40%; }
.g-5 .g-3                   { width: 60%; }
.g-5 .g-4                   { width: 80%; }
.g-5 .g-5                   { width: 100%; display: block; clear: both; }

.g-4 .g-1                   { width: 25%; }
.g-4 .g-2                   { width: 50%; }
.g-4 .g-3                   { width: 75%; }
.g-4 .g-4                   { width: 100%; display: block; clear: both; }

.g-3 .g-1                   { width: 33.3333333%; }
.g-3 .g-2                   { width: 66.6666667%; }
.g-3 .g-3                   { width: 100%; display: block; clear: both; }

.g-2 .g-1                   { width: 50%; }
.g-2 .g-2                   { width: 100%; display: block; clear: both; }

.g-1 .g-1                   { width: 100%; display: block; clear: both; }



/*
    push grid columns
*/
.g-12 .g-offset-1           { margin-left: 8.3333333%;  }
.g-12 .g-offset-2           { margin-left: 16.6666667%; }
.g-12 .g-offset-3           { margin-left: 25%;         }
.g-12 .g-offset-4           { margin-left: 33.3333333%; }
.g-12 .g-offset-5           { margin-left: 41.6666667%; }
.g-12 .g-offset-6           { margin-left: 50%;         }
.g-12 .g-offset-7           { margin-left: 58.3333333%; }
.g-12 .g-offset-8           { margin-left: 66.6666667%; }
.g-12 .g-offset-9           { margin-left: 75%;         }
.g-12 .g-offset-10          { margin-left: 83.3333333%; }
.g-12 .g-offset-10          { margin-left: 91.6666667%; }

.g-11 .g-offset-1           { margin-left: 9.090909091%; }
.g-11 .g-offset-2           { margin-left: 18.18181818%; }
.g-11 .g-offset-3           { margin-left: 27.27272727%; }
.g-11 .g-offset-4           { margin-left: 36.36363636%; }
.g-11 .g-offset-5           { margin-left: 45.45454545%; }
.g-11 .g-offset-6           { margin-left: 54.54545455%; }
.g-11 .g-offset-7           { margin-left: 63.63636364%; }
.g-11 .g-offset-8           { margin-left: 72.72727273%; }
.g-11 .g-offset-9           { margin-left: 81.81818182%; }
.g-11 .g-offset-10          { margin-left: 90.90909091%; }

.g-10 .g-offset-1           { margin-left: 10%; }
.g-10 .g-offset-2           { margin-left: 20%; }
.g-10 .g-offset-3           { margin-left: 30%; }
.g-10 .g-offset-4           { margin-left: 40%; }
.g-10 .g-offset-5           { margin-left: 50%; }
.g-10 .g-offset-6           { margin-left: 60%; }
.g-10 .g-offset-7           { margin-left: 70%; }
.g-10 .g-offset-8           { margin-left: 80%; }
.g-10 .g-offset-9           { margin-left: 90%; }

.g-9 .g-offset-1            { margin-left: 11.11111111%; }
.g-9 .g-offset-2            { margin-left: 22.22222222%; }
.g-9 .g-offset-3            { margin-left: 33.33333333%; }
.g-9 .g-offset-4            { margin-left: 44.44444444%; }
.g-9 .g-offset-5            { margin-left: 55.55555556%; }
.g-9 .g-offset-6            { margin-left: 66.66666667%; }
.g-9 .g-offset-7            { margin-left: 77.77777778%; }
.g-9 .g-offset-8            { margin-left: 88.88888889%; }

.g-8 .g-offset-1            { margin-left: 12.5%; }
.g-8 .g-offset-2            { margin-left: 25%;   }
.g-8 .g-offset-3            { margin-left: 37.5%; }
.g-8 .g-offset-4            { margin-left: 50%;   }
.g-8 .g-offset-5            { margin-left: 62.5%; }
.g-8 .g-offset-6            { margin-left: 75%;   }
.g-8 .g-offset-7            { margin-left: 87.5%; }

.g-7 .g-offset-1            { margin-left: 14.28571429%; }
.g-7 .g-offset-2            { margin-left: 28.57142857%; }
.g-7 .g-offset-3            { margin-left: 42.85714286%; }
.g-7 .g-offset-4            { margin-left: 57.14285714%; }
.g-7 .g-offset-5            { margin-left: 71.42857143%; }
.g-7 .g-offset-6            { margin-left: 85.71428571%; }

.g-6 .g-offset-1            { margin-left: 16.66666667%; }
.g-6 .g-offset-2            { margin-left: 33.33333333%; }
.g-6 .g-offset-3            { margin-left: 50%;          }
.g-6 .g-offset-4            { margin-left: 66.66666667%; }
.g-6 .g-offset-5            { margin-left: 83.33333333%; }

.g-5 .g-offset-1            { margin-left: 20%; }
.g-5 .g-offset-2            { margin-left: 40%; }
.g-5 .g-offset-3            { margin-left: 60%; }
.g-5 .g-offset-4            { margin-left: 80%; }

.g-4 .g-offset-1            { margin-left: 25%; }
.g-4 .g-offset-2            { margin-left: 50%; }
.g-4 .g-offset-3            { margin-left: 75%; }

.g-3 .g-offset-1            { margin-left: 33.3333333%; }
.g-3 .g-offset-2            { margin-left: 66.6666667%; }

.g-2 .g-offset-1            { margin-left: 50%; }




/*
    RWD
    ==================================== */
    
/* SMALL */
@media screen and (max-width: 600px) {
    
    .g-wrapper    { min-width: 320px; padding-left: 0; padding-right: 0; }

    .g-12 .g-3    { width: 100%; display: block; clear: both; }
    .g-12 .g-6    { width: 100%; display: block; clear: both; }
    .g-12 .g-9    { width: 100%; display: block; clear: both; }

    .g-12 .g-4    { width: 100%; display: block; clear: both; }
    .g-12 .g-8    { width: 100%; display: block; clear: both; }
    
    .g-offset-1, .g-offset-2, .g-offset-3, .g-offset-4, .g-offset-5, .g-offset-6 { margin-left: 0 !important; width: 100% !important; }
}

/* MEDIUM */
@media screen and (min-width: 601px) and (max-width: 989px) {

    .g-12 .g-3    { width: 50%; }
    .g-12 .g-6    { width: 100%; }
    .g-12 .g-9    { width: 100%; display: block; clear: both; }

    .g-12 .g-4    { width: 50%; }
    .g-12 .g-8    { width: 100%; display: block; clear: both; }
}

/* LARGE, default resolution */
@media screen and (min-width: 990px) and (max-width: 1199px) {

}

/* XLARGE */
@media screen and (min-width: 1200px) {
    
}