/*
960px + - 24 columns 4.16%
768px - 959px - 24 columns 32px
480px - 767px - 24 columns 20px
479px and less - 24 columns 10px
*/

/* common styles */
body, .container { margin: 0 auto; padding: 0; position:relative;}
.container .c1,
.container .c2,
.container .c3,
.container .c4,
.container .c5,
.container .c6,
.container .c7,
.container .c8,
.container .c9,
.container .c10,
.container .c11,
.container .c12,
.container .c13,
.container .c14,
.container .c15,
.container .c16,
.container .c17,
.container .c18,
.container .c19,
.container .c20,
.container .c21,
.container .c22,
.container .c23,
.container .c24 { float: left; display: inline; margin-left: 0px; margin-right: 0px; }
.row { margin-bottom: 20px; }


	body,	.container 		{ width: 100%; }
    .container .c1	 	{ width: 4.16%; }
    .container .c2	 	{ width: 8.32%; }
    .container .c3	 	{ width: 12.48%; }
    .container .c4	 	{ width: 16.64%; }
    .container .c5	 	{ width: 20.8%; }
    .container .c6	 	{ width: 24.96%; }
    .container .c7	 	{ width: 29.12%; }
    .container .c8	 	{ width: 33.28%; }
    .container .c9	 	{ width: 37.44%; }
    .container .c10	 	{ width: 41.6%; }
    .container .c11	 	{ width: 45.76%; }
    .container .c12	 	{ width: 50%; }
    .container .c13	 	{ width: 54.16%; }
    .container .c14	 	{ width: 58.32%; }
    .container .c15	 	{ width: 62.48%; }
    .container .c16	 	{ width: 66.64%; }
    .container .c17	 	{ width: 70.8%; }
    .container .c18	 	{ width: 74.96%; }
    .container .c19	 	{ width: 79.12%; }
    .container .c20	 	{ width: 83.28%; }
    .container .c21	 	{ width: 87.44%; }
    .container .c22	 	{ width: 91.6%; }
    .container .c23	 	{ width: 95.76%; }
    .container .c24	 	{ width: 100%; }
         
	.container .half 	{ width: 50%; }
	.container .third	{ width: 32%; }
	.container .quarter	{ width: 24%; }

	.container .p1		{ padding-left: 4.16%; }
	.container .p2		{ padding-left: 8.32%; }
	.container .p3		{ padding-left: 12.48%; }
	.container .p4		{ padding-left: 16.64%; }
	.container .p5		{ padding-left: 20.8%; }
	.container .p6		{ padding-left: 25%; }
	.container .p7		{ padding-left: 29.16%; }
	.container .p8		{ padding-left: 33.32%; }
	.container .p9		{ padding-left: 37.48%; }
	.container .p10		{ padding-left: 41.64%; }
	.container .p11		{ padding-left: 45.8%; }
	.container .p12		{ padding-left: 50%; }
	.container .p13		{ padding-left: 54.16%; }
	.container .p14		{ padding-left: 58.32%; }
	.container .p15		{ padding-left: 62.48%; }
	.container .p16		{ padding-left: 66.64%; }
	.container .p17		{ padding-left: 70.8%; }
	.container .p18		{ padding-left: 75%; }
	.container .p19		{ padding-left: 79.16%; }
	.container .p20		{ padding-left: 83.32%; }
	.container .p21		{ padding-left: 87.48%; }
	.container .p22		{ padding-left: 91.64%; }
	.container .p23		{ padding-left: 95.8%; }
	.container .p24		{ padding-left: 100%; }



/*@media only screen and (max-width: 479px) {
  .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c19, .c20, .c21, .c22, .c23, .c24 {
    width: 90% !important;
    padding-left: 4.16% !important;
    margin-bottom: 20px;
    overflow-x: hidden;
  }

}*/

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }