/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
    position:relative;
}

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

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF SIX  */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 82.5%;
}

.span_4_of_6 {
    width: 65%;
}

.span_3_of_6 {
    width: 47.5%;
}

.span_2_of_6 {
    width: 30%;
}

.span_1_of_6 {
    width: 12.5%;
}

/*  GRID OF FIVE  */
.span_5_of_5 {
    width: 100%;
}

.span_4_of_5 {
    width: 78.8%;
    margin:0 0 0 6%;
}

.span_3_of_5 {
    width: 57.5%;
    margin:0 0 0 6%;
}

.span_2_of_5 {
    width: 36%;
    margin:0 0 0 6%;
}

.span_1_of_5 {
    width: 15%;
    margin:0 0 0 6%;
}
    .span_4_of_5.offset_1,.span_4_of_5.offset_1:first-child,.span_3_of_5.offset_1,.span_3_of_5.offset_1:first-child{
        margin-left:21%;
    }



/*  GRID OF THREE  */
.span_1_of_3 {
    width: 26%;
    margin-left:10.5%;
}

.span_2_of_3 {
    width: 62.5%;
    margin-left:10.5%;
}
    .span_2_of_3_offset_1,.span_2_of_3_offset_1:first-child {
        width: 62.5%;
        margin-left:37.5%;
    }

.span_3_of_3 {
    width: 100%;
    margin-left:0;
}



/*  offsets OF SIX  */

.span_5_of_6_offset_1, .span_5_of_6_offset_1:first-child {
    width: 82.5%;
    margin-left:17.5%;
}

.span_4_of_6_offset_2,.span_4_of_6_offset_2:first-child {
    width: 65%;
    margin-left:35%;
}

.span_3_of_6_offset_3,.span_3_of_6_offset_3:first-child {
    width: 47.5%;
    margin-left: 52.5%;
}

.span_2_of_6_offset_4,.span_2_of_6_offset_4:first-child {
    width: 30%;
    margin-left:70%;
}

.span_1_of_6_offset_5,.span_1_of_6_offset_5:first-child {
    width: 12.5%;
    margin-left: 87.5%;
}
    .offset_1,.offset_1:first-child{
        margin-left:17.5%;
    }

 /*special .two-by-two-grid grid*/

 /*.two-by-two-grid .span_3_of_6{
    margin-left:0;
 }
 .two-by-two-grid .gutter{
    width:5%;
    margin:0;
    padding:0;
    background: url(../images/white.png) center top repeat-y;
 }*/

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 767px) {
    .col {  margin: 1% 0 1% 0%; }
    .offset_1, .offset_1:first-child{margin-left: 0;}
    .span_1_of_3,.span_2_of_3{width: 100%;}
    .span_1_of_5, .span_2_of_5, .span_3_of_5, .span_4_of_5, .span_5_of_5{ width: 100%; }
    .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
    .span_2_of_3_offset_1, .span_2_of_3_offset_1:first-child,.span_5_of_6_offset_1, .span_5_of_6_offset_1:first-child,.span_4_of_6_offset_2,.span_3_of_6_offset_3,.span_2_of_6_offset_4,.span_1_of_6_offset_5,.span_2_of_6_offset_4, .span_2_of_6_offset_4:first-child{width:100%;margin:1% 0% 1% 0%;}
}