/***********************************
The Box Grid -Version 2.0
Written by: Sean Stopnik
thelifemgmt@gmail.com
***********************************/

/* Reset */
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}


/* Rows */
* html .row {height: 1%;}
.row {display: block; width: 100%;}
.row .row {margin:0 -10px; width: auto;}
.row.with-spacing {margin-bottom: 40px;}
.row.with-less-spacing {margin-bottom: 20px;}
.row.with-more-spacing {margin-bottom: 60px;}
.row img {display: block; max-width: 100%; height: auto;}


/* Box Widths */
.box-1 {width: 6.25%;}
.box-2 {width:12.50%;}
.box-3 {width: 18.75%;}
.box-4 {width: 25%;}
.box-5 {width: 31.25%;}
.box-6 {width: 37.5%;}
.box-7 {width: 43.75%;}
.box-8 {width: 50%;}
.box-9 {width: 56.25%;}
.box-10 {width: 62.5%;}
.box-11 {width: 68.75%;}
.box-12 {width: 75%;}
.box-13 {width: 81.25%;}
.box-14 {width: 87.5%;}
.box-15 {width: 93.75%;}
.box-16 {width: 100%;}
.box-3.sixth {width: 16.66%;}
.box-4.fifth {width: 20%;}
.box-5.third{width: 33.33%;}
.box-10.two-third{width: 66.66%;}
.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8,
.box-9, .box-10, .box-11, .box-12, .box-13, .box-14, .box-15, .box-16,
.box-3.sixth, .box-4.fifth, .box-5.third, .box-10.two-third {
	float: left;
	padding: 0 10px;
}


/* Centering */
.row.centered {text-align: center;}
.row.centered div {float: none; display: inline-block; text-align: left; margin: 0 -2px;}


/* Clearing */
.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.row:before, .row:after {content: ""; display: block; height: 0; overflow: hidden; visibility: hidden;}
.row:after {clear: both;}


/* Container */
.container {position: relative; margin: 0 auto;}


/* IE6-7 Fix*/
.ie6 .row.row {width: 105%;}
.ie6 .box-1, .ie7 .box-1 {width: 40px;}
.ie6 .box-2, .ie7 .box-2 {width: 100px;}
.ie6 .box-3, .ie7 .box-3 {width: 160px;}
.ie6 .box-4, .ie7 .box-4 {width: 220px;}
.ie6 .box-5, .ie7 .box-5 {width: 280px;}
.ie6 .box-6, .ie7 .box-6 {width: 340px;}
.ie6 .box-7, .ie7 .box-7 {width: 400px;}
.ie6 .box-8, .ie7 .box-8 {width: 460px;}
.ie6 .box-9, .ie7 .box-9 {width: 520px;}
.ie6 .box-10, .ie7 .box-10 {width: 580px;}
.ie6 .box-11, .ie7 .box-11 {width: 640px;}
.ie6 .box-12, .ie7 .box-12 {width: 700px;}
.ie6 .box-13, .ie7 .box-13 {width: 760px;}
.ie6 .box-14, .ie7 .box-14 {width: 820px;}
.ie6 .box-15, .ie7 .box-15 {width: 880px;}
.ie6 .box-16, .ie7 .box-16 {width: 940px;}
.ie6 .box-3.sixth, .ie7 .box-3.sixth {width: 140px;}
.ie6 .box-4.fifth, .ie7 .box-4.fifth {width: 172px;}
.ie6 .box-5.third, .ie7 .box-5.third {width: 300px;}
.ie6 .box-10.two-third, .ie7 .box-10.two-third {width: 620px;}
.ie6 .box-1, .ie7 .box-1,
.ie6 .box-2, .ie7 .box-2,
.ie6 .box-3, .ie7 .box-3,
.ie6 .box-4, .ie7 .box-4,
.ie6 .box-5, .ie7 .box-5,
.ie6 .box-6, .ie7 .box-6,
.ie6 .box-7, .ie7 .box-7,
.ie6 .box-8, .ie7 .box-8,
.ie6 .box-9, .ie7 .box-9,
.ie6 .box-10, .ie7 .box-10,
.ie6 .box-11, .ie7 .box-11,
.ie6 .box-12, .ie7 .box-12,
.ie6 .box-13, .ie7 .box-13,
.ie6 .box-14, .ie7 .box-14,
.ie6 .box-15, .ie7 .box-15,
.ie6 .box-16, .ie7 .box-16,
.ie6 .box-3.sixth, .ie7 .box-3.sixth,
.ie6 .box-4.fifth, .ie7 .box-4.fifth,
.ie6 .box-5.third, .ie7 .box-5.third,
.ie6 .box-10.two-third, .ie7 .box-10.two-third {
  float: left;
  padding: 0 10px;
}
.ie6 .container, .ie7 .container, .ie8 .container {width: 960px;}


/* Media Queries */
/* Mobile */
@media only screen and (max-width: 599px), (max-device-width: 599px) {
	* {-webkit-text-size-adjust: none;}
	.container {width: 100%; padding: 0 10px; overflow: hidden;}
	.row {margin-bottom: 0 !important;}
	.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8,
	.box-9, .box-10, .box-11, .box-12, .box-13, .box-14, .box-15, .box-16,
	.box-3.sixth, .box-4.fifth, .box-5.third, .box-10.two-third {width: 100%; margin-bottom: 20px;}
}

/* Small Tablet */
@media only screen and (min-width: 600px) and (max-width: 767px) {
	* {-webkit-text-size-adjust: none;}
	.container {width: 100%; padding: 0 10px; overflow: hidden;}
	.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7,
	.box-9, .box-10, .box-11, .box-12, .box-13, .box-14, .box-15, .box-16 {width: 100%;}
	.box-8, .box-3.sixth, .box-4.fifth {width: 50%;}
}

/* iPad - Large Tablet */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	* {-webkit-text-size-adjust: none;}
	.container {width: 768px; padding: 0 10px; overflow: hidden;}
}

/* Normal Screen */
@media only screen and (min-width: 960px) and (max-width: 1599px) {
	.container {width: 960px;}
}

/* Large Screen */
@media only screen and (min-width: 1600px) {
	.container {width: 1200px;}
}