/* #Base 1200 Grid
================================================== */

	.wrap 																			{ width: 960px; }
	.container                                  { position: relative; width: 908px; margin: 0 auto;}
    .row                                        { padding-bottom: 10px; padding-top: 10px; }
	
	.column-01,
    .column-02,
    .column-03,
    .column-04,
    .column-05,
    .column-06,
    .column-07,
    .column-08,
    .column-09,
    .column-10,
    .column-11,
    .column-12,
    .column-13,
    .column-14,
    .column-15,
	.column-16,
	.column-17,
	.column-18,
	.column-19,
	.column-20,
	.column-21,
	.column-22,
	.column-23,
	.column-24									{ float: left; }
    

    /* Base Grid */
  .column-01									{ width: 37px; }
  .column-02									{ width: 74px; }
  .column-03									{ width: 111px; }
  .column-04									{ width: 148px; }
  .column-05									{ width: 185px; }
  .column-06									{ width: 222px; }
  .column-07									{ width: 259px; }
  .column-08									{ width: 296px; }
  .column-09									{ width: 333px; }
  .column-10									{ width: 370px;	}
  .column-11									{ width: 407px; }
  .column-12									{ width: 444px; }
  .column-13									{ width: 481px; }
  .column-14									{ width: 518px; }
  .column-15									{ width: 555px;	}
	.column-16									{ width: 592px; }
	.column-17									{ width: 629px; }
	.column-18									{ width: 666px; }
	.column-19									{ width: 703px; }
	.column-20									{ width: 740px; }
	.column-21									{ width: 777px; }
	.column-22									{ width: 814px; }
	.column-23									{ width: 851px; }
	.column-24									{ width: 888px; }

  /* Offsets */
  .offset-01									{ padding-left: 37px; }
  .offset-02									{ padding-left: 74px; }
  .offset-03									{ padding-left: 111px; }
  .offset-04									{ padding-left: 148px; }
  .offset-05									{ padding-left: 185px; }
  .offset-06									{ padding-left: 222px; }
  .offset-07									{ padding-left: 259px; }
  .offset-08									{ padding-left: 296px; }
  .offset-09									{ padding-left: 333px; }
  .offset-10									{ padding-left: 370px; }	
  .offset-11									{ padding-left: 407px; }
  .offset-12									{ padding-left: 444px; }
  .offset-13									{ padding-left: 481px; }
  .offset-14									{ padding-left: 518px; }
  .offset-15									{ padding-left: 555px; }
	.offset-16									{ padding-left: 592px; }
	.offset-17									{ padding-left: 629px; }
	.offset-18									{ padding-left: 666px; }
	.offset-19									{ padding-left: 703px; }
	.offset-20									{ padding-left: 740px; }
	.offset-21									{ padding-left: 777px; }
	.offset-22									{ padding-left: 814px; }
	.offset-23									{ padding-left: 851px; }





/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 999px) {
	
	.wrap																				{ width: 740px;}
	.container                                  { width: 740px; }
    
	
	/* Base Grid */
	.column-01									{ width: 30px; }
	.column-02									{ width: 60px; }
	.column-03									{ width: 90px; }
	.column-04									{ width: 120px; }
	.column-05									{ width: 150px; }
	.column-06									{ width: 180px; }
	.column-07									{ width: 210px; }
	.column-08									{ width: 240px; }
	.column-09									{ width: 270px; }
	.column-10									{ width: 300px; }
	.column-11									{ width: 330px; }
	.column-12									{ width: 360px; }
	.column-13									{ width: 390px; }
	.column-14									{ width: 420px; }
	.column-15									{ width: 450px; }
	.column-16									{ width: 480px; }
	.column-17									{ width: 510px; }
	.column-18									{ width: 540px; }
	.column-19									{ width: 570px; }
	.column-20									{ width: 600px; }
	.column-21									{ width: 630px; }
	.column-22									{ width: 660px; }
	.column-23									{ width: 690px; }
	.column-24									{ width: 720px; }

	/* Offsets */
	.offset-01									{ padding-left: 30px; }
	.offset-02									{ padding-left: 60px; }
	.offset-03									{ padding-left: 90px; }
	.offset-04									{ padding-left: 120px; }
	.offset-05									{ padding-left: 150px; }
	.offset-06									{ padding-left: 180px; }
	.offset-07									{ padding-left: 210px; }
	.offset-08									{ padding-left: 240px; }
	.offset-09									{ padding-left: 270px; }
	.offset-10									{ padding-left: 300px; }
	.offset-11									{ padding-left: 330px; }
	.offset-12									{ padding-left: 360px; }
	.offset-13									{ padding-left: 390px; }
	.offset-14									{ padding-left: 420px; }
	.offset-15									{ padding-left: 450px; }
	.offset-16									{ padding-left: 480px; }
	.offset-17									{ padding-left: 510px; }
	.offset-18									{ padding-left: 540px; }
	.offset-19									{ padding-left: 570px; }
	.offset-20									{ padding-left: 600px; }
	.offset-21									{ padding-left: 630px; }
	.offset-22									{ padding-left: 660px; }
	.offset-23									{ padding-left: 690px; }
}


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .wrap { width: 300px;}
				.container { width: 290px; padding-left: 0; }
        .container .columns,
        .container .column { margin: 0; }

        .column										{ margin-left: 0px; }
		.column:first-child							{ margin-left: 0; }
	
		/* Base Grid */
		.column-01,
		.column-02,
		.column-03,
		.column-04,
		.column-05,
		.column-06,
		.column-07,
		.column-08,
		.column-09,
		.column-10,
		.column-11,
		.column-12,
		.column-13,
		.column-14,
		.column-15,
		.column-16,
		.column-17,
		.column-18,
		.column-19,
		.column-20,
		.column-21,
		.column-22,
		.column-23,
		.column-24									{ width: 276px; padding-left: 0; }
	
		/* Offsets */
		.offset-01,
		.offset-02,
		.offset-03,
		.offset-04,
		.offset-05,
		.offset-06,
		.offset-07,
		.offset-08,
		.offset-09,
		.offset-10,
		.offset-11,
		.offset-12,
		.offset-13,
		.offset-14,
		.offset-15,
		.offset-16,
		.offset-17,
		.offset-18,
		.offset-19,
		.offset-20,
		.offset-21,
		.offset-22,
    	.offset-23               					{ padding-left: 0px; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .wrap {width: 420px;}
		.container { width: 410px; }
        .container .columns,
        .container .column { margin: 0; }

        /* Base Grid */
		.column-01,
		.column-02,
		.column-03,
		.column-04,
		.column-05,
		.column-06,
		.column-07,
		.column-08,
		.column-09,
		.column-10,
		.column-11,
		.column-12,
		.column-13,
		.column-14,
		.column-15,
		.column-16,
		.column-17,
		.column-18,
		.column-19,
		.column-20,
		.column-21,
		.column-22,
		.column-23,
		.column-24									{ width: 396px; }
    }


/* #Clearing
================================================== */

    /* 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;
	  line-height: 0.1;
      width: 0;
      height: 0;
    }