/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}

/* Container */

	body {
		/* min-width: (containers) */
		min-width: 1200px;
	}



	/* A container (and its padding) will not grow larger than this width. */
	$container-max-width: 1500px;

	/* The horizontal padding around containers. */
	$container-gutter: 20px;

	/* Main container class. */
	.container {
	  width: 100%;
	  max-width: $container-max-width;
	  padding-left:  $container-gutter;
	  padding-right: $container-gutter;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing:    border-box;
	  box-sizing:         border-box;
	  margin-left:  auto;
	  margin-right: auto;
	}

	.container-fluid{
		padding-left: 20px;
	}

	/* The spacing between columns. */
	$column-gutter-width: 4%;

	/* The number of columns in a row. */
	$num-columns: 12;

	/* Columns will stack on screens less than this wide. */
	$stack-width: 500px;

	/* Columns must be put in an element with the "row" class. */
	.row {
	  *zoom: 1;
		padding-left: 20px;

	  &:before, &:after {
	    display: table;
	    content: "";
	  }

	  &:after {
	    clear: both;
	  }
	}

	/* Inside a ".row", add ".spanX" elements to fill the grid, where X is the number of columns to span. */
	/* Add ".offsetX" to ".spanX" elements to skip X columns of empty space. */
	@for $i from 1 through $num-columns {
	  .span#{$i} {
	    float: right;
			padding-left: 20px;
			display: inline-block;
	    *zoom: 1;

	    &:before, &:after {
	      display: table;
	      content: "";
	    }
	    &:after {
	      clear: both;
	    }
	  }
	}

	@for $i from 1 through $num-columns {
	  .row > .span#{$i} {
	    width: (100% + $column-gutter-width) * ($i / $num-columns) - $column-gutter-width;
	    *width: (100% + $column-gutter-width) * ($i / $num-columns) - $column-gutter-width - 50% / ($stack-width / 1px);
	    margin-left: $column-gutter-width;
	    *margin-left: $column-gutter-width - 50% / ($stack-width / 1px);

	    &:first-child {
	      margin-left: 5%;
	    }
	  }
	}

	@for $i from 1 through $num-columns {
	  .row > .offset#{$i} {
	    margin-left: $column-gutter-width + (100% + $column-gutter-width) * ($i / $num-columns);
	    *margin-left: $column-gutter-width + (100% + $column-gutter-width) * ($i / $num-columns) - 50% / ($stack-width / 1px);

	    &:first-child {
	      margin-left: (100% + $column-gutter-width) * ($i / $num-columns);
	      *margin-left: (100% + $column-gutter-width) * ($i / $num-columns) - 50% / ($stack-width / 1px);
	    }
	  }
	}

	@for $i from 1 through $num-columns {
	  @for $j from 1 through ($i - 1) {
	    .span#{$i} > .span#{$j} {
	      $scale_factor: 100% / ((100% + $column-gutter-width) * ($i / $num-columns) - $column-gutter-width);
	      width: ((100% + $column-gutter-width) * ($j / $num-columns) - $column-gutter-width) * $scale_factor;
	      *width: ((100% + $column-gutter-width) * ($j / $num-columns) - $column-gutter-width) * $scale_factor - 50% / (($stack-width / 1px) * $num-columns / $i);
	      margin-left: $column-gutter-width * $scale_factor;
	      *margin-left: $column-gutter-width * $scale_factor - 50% / (($stack-width / 1px) * $num-columns / $i);

	      &:first-child {
	        margin-left: 0;
	      }
	    }
	  }
	}

	@for $i from 1 through $num-columns {
	  @for $j from 1 through ($i - 1) {
	    .span#{$i} > .offset#{$j} {
	      $scale_factor: 100% / ((100% + $column-gutter-width) * ($i / $num-columns) - $column-gutter-width);
	      margin-left: ($column-gutter-width + (100% + $column-gutter-width) * ($j / $num-columns)) * $scale_factor;
	      *margin-left: ($column-gutter-width + (100% + $column-gutter-width) * ($j / $num-columns)) * $scale_factor - 50% / (($stack-width / 1px) * $num-columns / $i);

	      &:first-child {
	        margin-left: (100% + $column-gutter-width) * ($j / $num-columns) * $scale_factor;
	        *margin-left: (100% + $column-gutter-width) * ($j / $num-columns) * $scale_factor - 50% / (($stack-width / 1px) * $num-columns / $i);
	      }
	    }
	  }
	}

	/* Stack the grid on small displays. */
	@media (max-width: ($stack-width - 1)) {
	  @for $i from 1 through $num-columns {
	    .span#{$i} {
	      margin-top: inherit;
	      margin-bottom: inherit;
	      float: none;

	      &:first-child {
	        margin-top: 0;
	      }

	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	  }

	  @for $i from 1 through $num-columns {
	    .row > .span#{$i} {
	      width: 100%;
	      *width: 100%;
	      margin-left: 0;
	      *margin-left: 0;
	    }
	  }

	  @for $i from 1 through $num-columns {
	    .row > .offset#{$i} {
	      margin-left: 0;
	      *margin-left: 0;

	      &:first-child {
	        margin-left: 0;
	        *margin-left: 0;
	      }
	    }
	  }

	  @for $i from 1 through $num-columns {
	    @for $j from 1 through ($i - 1) {
	      .span#{$i} > .span#{$j} {
	        width: 100%;
	        *width: 100%;
	        margin-left: 0;
	        *margin-left: 0;
	      }
	    }
	  }

	  @for $i from 1 through $num-columns {
	    @for $j from 1 through ($i - 1) {
	      .span#{$i} > .offset#{$j} {
	        margin-left: 0;
	        *margin-left: 0;

	        &:first-child {
	          margin-left: 0;
	          *margin-left: 0;
	        }
	      }
	    }
	  }
	}