*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behavior on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.wrapper{width:80%;margin:0px auto;} /*main container for the most wide*/

/* Targets all elements */
[class*='grid-'] {
	vertical-align:top;
  float: left;
  overflow: hidden;
}

/* Floats last ".grid-" to the right */
/*[class*='grid-']:last-of-type {
  padding-right: 0.2%;
  float: right;
}*/

/* Clearfix */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Main Widths */
.grid-1  {width: 100%;}
.grid-2  {width: 50%;}
.grid-3  {width: 33.33%;}
.grid-4  {width: 25%;}
.grid-5  {width: 20%;}
.grid-6  {width: 16.6666666667%;}
.grid-7  {width: 14.2857142857%;}
.grid-8  {width: 12.5%;}
.grid-9  {width: 11.1111111111%;}
.grid-10 {width: 10%;}
.grid-11 {width: 9.09090909091%;}
.grid-12 {width: 8.33%;}

/*video*/
.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,  
.video object,  
.video embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*responsive image*/
img{
	max-width: 100%;
	height: auto;
}
img.not-fluid{max-width:none;}
@media \0screen {
	img{
		width: auto; /* for ie 8 */
	}
}
/*responsive background*/
.bg-img{
	background-size:100%;
	-moz-background-size:100%;
	-webkit-background-size:100%;
	-o-background-size:100%;
	background-position:50% 50%;
	background-repeat:no-repeat;
}

/*word breaking or not*/
.break-word{word-wrap:break-word;}
.unbreak-word{white-space:nowrap;}

/* Landscape mobile & down
===============================*/
@media only screen and (max-width: 600px) {
  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7,
  .grid-8,
  .grid-9,
  .grid-10,
  .grid-11,
  .grid-12 {
    width: 100%;
  }

  /*.row .grid-4:nth-child(2) {
    float: right;
  }*/

  .row .grid-4:nth-child(3) {
    clear: both;
    float: left;
  }

  /*.row .grid-4:nth-child(4) {
    float: right;
  }*/
}

/* Mobile to Tablet Portrait
===============================*/
@media only screen and (min-width: 601px) and (max-width: 800px) {
	.grid-2,
	.grid-3{
		width:100%;
	}
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-7,
	.grid-8{
		width:50%;
	}
	.grid-9{
		width:33.33%;
	}
	.grid-10,
	.grid-11,
	.grid-12{
		width:25%;
	}
	.grid-5:first-child,
	.grid-7:first-child{
		width:100%;
	}
	.grid-10:first-child,
	.grid-10:nth-child(2),
	.grid-11:first-child{
		width:50%;
	}/*
	.grid-2,
	.grid-3,
	.grid-4:nth-child(even),
	.grid-5:nth-child(odd),
	.grid-6:nth-child(even),
	.grid-7:nth-child(odd),
	.grid-8:nth-child(even),
	.grid-9:nth-child(3n-1),
	.grid-10:nth-child(2),
	.grid-10:nth-child(6),
	.grid-11:nth-child(3),
	.grid-11:nth-child(7),
	.grid-12:nth-child(4n-1){
		float:right;
		padding-right: 0.2%;
	}*/
}

/* Landscape Tablet to Desktop
===============================*/
@media only screen and (min-width: 801px) and (max-width: 1300px) {
	.grid-5,
	.grid-6,
	.grid-9{
		width:33.33%;
	}
	.grid-7,
	.grid-8,
	.grid-11{
		width:25%;
	}
	.grid-10{
		width:20%;
	}
	.grid-12{
		width:20%;
	}
	.grid-5:first-child,
	.grid-5:nth-child(2),
	.grid-11:first-child,
	.grid-7:nth-child(2){
		width:50%;
	}
	.grid-12:first-child,
	.grid-12:nth-child(5),
	.grid-12:nth-child(9){
		width:40%;
	}/*
	.grid-5:nth-child(2),
	.grid-6:nth-child(3),
	.grid-7:nth-child(3),
	.grid-8:nth-child(4),
	.grid-9:nth-child(3),
	.grid-9:nth-child(6),
	.grid-10:nth-child(5),
	.grid-11:nth-child(3),
	.grid-11:nth-child(7),
	.grid-12:nth-child(4),
	.grid-12:nth-child(8){
		float:right;
		padding-right: 0.2%;
	}*/
}