/* page grid system */

/* grid 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;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
}

/* Grid - 12 Columns
----------------------------------------------------------------------------------------------------*/
.container1 .grid_1 {
    width:6.333%;
}

.container1 .grid_2 {
    width:14.667%;
}

.container1 .grid_3 {
    width:23.0%;
}

.container1 .grid_4 {
    width:31.333%;
}

.container1 .grid_5 {
    width:39.667%;
}

.container1 .grid_6 {
    width:48.0%;
}

.container1 .grid_7 {
    width:56.333%;
}

.container1 .grid_8 {
    width:64.667%;
}

.container1 .grid_9 {
    width:73.0%;
}

.container1 .grid_10 {
    width:81.333%;
}

.container1 .grid_11 {
    width:89.667%;
}

.container1 .grid_12 {
    width:98.0%;
}


/* for 768px or less */
@media screen and (max-width: 768px) {
/* Grid */
[class^="grid_"]{
	margin-bottom: 10px;
} 
.container1 {
   margin-bottom: 0px;
}
.container1 .grid_8 {
    width:48.0%;
}
	.container1 .grid_1 {
    width:23.0%;
}

.container1 .grid_2 {
    width:31.333%;
}

.container1 .grid_3 {
    width:98.0%;
}

.container1 .grid_4 {
    width:48.0%;
}

.container1 .grid_5,
.container1 .grid_6,
.container1 .grid_7,
.container1 .grid_9,
.container1 .grid_10,
.container1 .grid_11,
.container1 .grid_12 {
    width:98.0%;
}


}

/* for 480px or less */
@media screen and (max-width: 480px) {

.container1 .grid_1,
.container1 .grid_2,
.container1 .grid_3,
.container1 .grid_4,
.container1 .grid_5,
.container1 .grid_6,
.container1 .grid_7,
.container1 .grid_8,
.container1 .grid_9,
.container1 .grid_10,
.container1 .grid_11,
.container1 .grid_12 {
    width:98.0%;
}

}