body {
/*  min-width: 1200px;*/
}
@media screen and (min-width: 800px)
{
.grid_1 { width: 5.5%; }
.grid_2 { width: 14%; }
.grid_3 { width: 22.5%; }
.grid_4 { width: 31%; }
.grid_5 { width: 39.5%; }
.grid_6 { width: 48%; }
.grid_7 { width: 56.5%; }
.grid_8 { width: 65%; }
.grid_9 { width: 73.5%; }
.grid_10 { width: 82%; }
.grid_11 { width: 90.5%; }
.grid_12 { width: 99%; margin: 0; }

}
----------------------------------------------------------------------------------------------------*/
/* Responsive Resets
-------------------------------------------------------------- */
@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}

html {
  overflow-y: auto;
}

img,
audio,
video,
canvas {
  max-width: 100%;
}


-------------------------------------------------------------- */
.container_12 {
  /*
    The `max-width` property is the width governer. I dare you to experiment
    with setting this larger, something like 1280px.
  */
	max-width: 1280px;
	width:92%;
	margin:0px auto;
	position: relative;
}

.row {
  clear: both;
}


@media screen and (min-width: 480px) {
  container_12 {
    width: 98%;
  }

  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12,
 {
		float: none;
		width: 99%;

    margin:0 1.515151515152% 1em;
  }

  .gallery .grid_unit,
  .grid_half {

    margin: 0 1.515151515152% 1em;
  }

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		float: none;
		width: 99%;
	}

}

@media screen and (min-width: 640px) {


  .content-pad-right {
    padding-right: 4%; 
  }

  .content-pad-left {
    padding-left: 4%;
  }

}


.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: 10px;
	margin-right: 4px;
}



.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12 {
	position:relative;
}


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}








/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/



/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}