/*  SECTIONS  */
.section
{
    clear: both;

    margin: 0;
    padding: 0;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1%;
}
.col:first-child { margin-left: 3%; }



/*  GROUPING  */
.group:before,
.group:after
{
    display: table; 

    content: '';
}
.group:after
{
    clear: both;
}
.group
{
    zoom: 1; /* For IE 6/7 */
}
/*  GRID OF TWO */
.span_2_of_2
{
    width: 94%;
}
.span_1_of_2
{
    width: 46.49%;
}

/*  GRID OF THREE */
.span_3_of_3
{
    width: 94%;
}
.span_2_of_3
{
    width: 60.6%;
}
.span_1_of_3
{
    width: 30.3%;
}

/*  GRID OF four*/
.span_4_of_4
{
    width: 94%;
}
.span_3_of_4
{
    width: 69.73%;
}

.span_2_of_4
{
    width: 46.49%;
}
.span_1_of_4
{
    width: 22.72%;
}

/* GRID OF SIX  */


.span_6_of_6 {
    width: 94%;
}

.span_5_of_6 {
    width: 78.15%;
}

.span_4_of_6 {
    width: 62.32%;
}

.span_3_of_6 {
    width: 46.49%;
}

.span_2_of_6 {
    width: 30.66%;
}

.span_1_of_6 {
    width: 14.83%;
}





/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col
    {
        margin: 1% 0 1% 0;
    }

    .span_2_of_2,
    .span_1_of_2
    {
        width: 100%;
    }
}



/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_6_of_6 {
        width: 100%; 
    }
    .span_5_of_6 {
        width: 100%; 
    }
    .span_4_of_6 {
        width: 100%; 
    }
    .span_3_of_6 {
        width: 100%; 
    }
    .span_2_of_6 {
        width: 100%; 
    }
    .span_1_of_6 {
        width: 100%; 
    }
}