*, *:after, *:before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.grid:after { content:""; display:table; clear:both; }
.grid-col { float:left; }
.grid-pad { padding:15px; }
.grid-span-1 { width:100%; }
.grid-span-1-2 { width:50%; }
.grid-span-1-3 { width:33.33%; }
.grid-span-2-3 { width:66.66%; }
.grid-span-1-4 { width:25%; }
.grid-span-3-4 { width:75%; }
.grid-span-1-5 { width:20%; }
.grid-span-2-5 { width:40%; }
.grid-span-3-5 { width:60%; }
.grid-span-4-5 { width:80%; }
.grid-span-1-6 { width:16.66%; }
.grid-span-5-6 { width:83.33%; }
.grid-span-1-8 { width:12.5%; }
.grid-span-3-8 { width:37.5%; }

/* Tablet (Portrait) */
/* Note:Design for a width of 768px */
@media only screen and (min-width:768px) and (max-width:999px) {
}

/* Mobile (Portrait) */
/* Note:Design for a width of 320px */
@media only screen and (max-width:767px) {
.grid-col { width:100%; }
.grid-pad { padding:5px; }
}

/* Clear Fix */
.clear:after { content:""; display:table; clear:both; }