/**
 * Profound Grid
 * 
 * Built in Sass (SCSS) this responsive/adaptive grid supports both fixed and fluid layouts, 
 * relative and fixed gutters, as well as your choice of semantic markup or generic '.grid-x' classes.
 * 
 * The biggest difference to other grid systems is the use of negative margins for column
 * placements, avoiding the subpixel rounding issues that usually break/uglify fluid layouts
 * in some browsers.
 * 
 * Nested columns are supported too, without having to reset the grid on each level. 
 *
 * Credits/Inspiration:
 * -------------------
 * Semantic Grid: http://www.semantic.gs
 * Susy: http://susy.oddbird.net
 * Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/
 *
 * @author Profound Creative Studio
 * @url http://www.profoundgrid.com
 * @url http://www.weareprofound.com 
 */
/**
 * Establish the grid-containing element.
 */
/**
 * Align an element to the grid.
 */
/**
 * Apply to any column to make it the last one of the current row.
 */
* {
  outline: none;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

article {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 80px;
}

#grid {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  pointer-events: none;
  z-index: 9001;
  overflow: visible !important;
}
#grid div {
  width: 85%;
  margin: 0 7.5%;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 5000px;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
#grid div div {
  float: left;
  margin-right: -100%;
  width: 6.5%;
  height: 100%;
  background: black;
}
#grid div div:nth-child(12n+1) {
  margin-left: 0%;
  margin-bottom: 2%;
  clear: both;
  overflow: hidden;
  *zoom: 1;
}
#grid div div:nth-child(12n+2) {
  margin-left: 8.5%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+3) {
  margin-left: 17%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+4) {
  margin-left: 25.5%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+5) {
  margin-left: 34%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+6) {
  margin-left: 42.5%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+7) {
  margin-left: 51%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+8) {
  margin-left: 59.5%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+9) {
  margin-left: 68%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+10) {
  margin-left: 76.5%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+11) {
  margin-left: 85%;
  margin-bottom: 2%;
  clear: none;
}
#grid div div:nth-child(12n+12) {
  margin-left: 93.5%;
  margin-bottom: 2%;
  clear: none;
}

.gridStyleOutlines #grid div {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.gridStyleOutlines #grid div div {
  background: none !important;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

#grid {
  margin-bottom: 0px;
  height: 0px;
}
#grid div {
  background: none;
}
#grid div div {
  background: black;
}


@media screen and (max-width: 719px) {
article {
  width: 85%;
  margin: 0 7.5%;
  overflow: hidden;
  *zoom: 1;
}
	
	
.row1 div, .row2 div, .row3 div, .row4 div, .row5 div, .row6 div {
  float: left;
  margin-right: -100%;
  width: 100%;
}
.row1 div:nth-child(1n+1), .row2 div:nth-child(1n+1), .row3 div:nth-child(1n+1), .row4 div:nth-child(1n+1), .row5 div:nth-child(1n+1), .row6 div:nth-child(1n+1) {
  margin-left: 0%;
  margin-bottom: 2%;
  clear: both;
  overflow: hidden;
  *zoom: 1;
}

.mobile-hidden{
	display:none;
}

.vertcent{
	position:relative;
	}
	
.leftbot{
	position:relative;
	}	

}

@media screen and (min-width: 720px) {
  article {
    width: 85%;
    margin: 0 7.5%;
    overflow: hidden;
    *zoom: 1;
  }

  .row1 div {
    float: left;
    margin-right: -100%;
    width: 15%;
  }
  .row1 div:nth-child(6n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row1 div:nth-child(6n+2) {
    margin-left: 17%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(6n+3) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(6n+4) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(6n+5) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(6n+6) {
    margin-left: 85%;
    margin-bottom: 2%;
    clear: none;
  }

  .row2 div {
    float: left;
    margin-right: -100%;
    width: 15%;
  }
  .row2 div:nth-child(6n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row2 div:nth-child(6n+2) {
    margin-left: 17%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+3) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+4) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+5) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+6) {
    margin-left: 85%;
    margin-bottom: 2%;
    clear: none;
  }

  .row3 div {
    float: left;
    margin-right: -100%;
    width: 32%;
  }
  .row3 div:nth-child(3n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row3 div:nth-child(3n+2) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row3 div:nth-child(3n+3) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }
  .row3 div.last {
    float: left;
    margin-right: -100%;
    width: 100%;
  }
  
  .row4{display:inline-block;}

  .row4 div {
    float: left;
    margin-right: -100%;
    width: 32%;
  }
  .row4 div:nth-child(3n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row4 div:nth-child(3n+2) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row4 div:nth-child(3n+3) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }

  .row6 div {
    float: left;
    margin-right: -100%;
    width: 49%;
  }
  .row6 div:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row6 div:nth-child(2n+2) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }

  .row12 div {
    float: left;
    margin-right: -100%;
    width: 100%;
  }
  
  /* Helper Class: Container */
.row {
  width: 85%;
  margin: 0 7.5%;
  clear:both;
  position:relative;
  display:inline-block;
}

.subrow {
	width:100%;
	clear:both;
    position:relative;
    display:inline-block;
	}

/* Helper Class: Columns */
.col1 {
  float: left;
  margin-right: -100%;
  width: 6.5%;
  position:relative;
}

.col2 {
  float: left;
  margin-right: -100%;
  width: 15%;
  position:relative;
}

.col3 {
  float: left;
  margin-right: -100%;
  width: 23.5%;
  position:relative;
}

.col4 {
  float: left;
  margin-right: -100%;
  width: 32%;
  position:relative;
}

.col5 {
  float: left;
  margin-right: -100%;
  width: 40.5%;
  position:relative;
}

.col6 {
  float: left;
  margin-right: -100%;
  width: 49%;
  position:relative;
}

.col7 {
  float: left;
  margin-right: -100%;
  width: 57.5%;
  position:relative;
}

.col8 {
  float: left;
  margin-right: -100%;
  width: 66%;
  position:relative;
}

.col9 {
  float: left;
  margin-right: -100%;
  width: 74.5%;
  position:relative;
}

.col10 {
  float: left;
  margin-right: -100%;
  width: 83%;
  position:relative;
}

.col11 {
  float: left;
  margin-right: -100%;
  width: 91.5%;
  position:relative;
}

.col12 {
  float: left;
  margin-right: -100%;
  width: 100%;
  position: relative;
}

/* Helper Class: Horizontal Position */
.push0 {
  margin-left: 0%;
}

.push1 {
  margin-left: 8.5%;
}

.push2 {
  margin-left: 17%;
}

.push3 {
  margin-left: 25.5%;
}

.push4 {
  margin-left: 34%;
}

.push5 {
  margin-left: 42.5%;
}

.push6 {
  margin-left: 51%;
}

.push7 {
  margin-left: 59.5%;
}

.push8 {
  margin-left: 68%;
}

.push9 {
  margin-left: 76.5%;
}

.push10 {
  margin-left: 85%;
}

.push11 {
  margin-left: 93.5%;
}

  
}
@media all and (min-width: 1026px) {
  article {
    width: 85%;
	max-width:1920px;
    margin: 0 7.5%;
    overflow: hidden;
    *zoom: 1;
  }

  .row1 div {
    float: left;
    margin-right: -100%;
    width: 6.5%;
  }
  .row1 div:nth-child(12n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row1 div:nth-child(12n+2) {
    margin-left: 8.5%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+3) {
    margin-left: 17%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+4) {
    margin-left: 25.5%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+5) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+6) {
    margin-left: 42.5%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+7) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+8) {
    margin-left: 59.5%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+9) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+10) {
    margin-left: 76.5%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+11) {
    margin-left: 85%;
    margin-bottom: 2%;
    clear: none;
  }
  .row1 div:nth-child(12n+12) {
    margin-left: 93.5%;
    margin-bottom: 2%;
    clear: none;
  }

  .row2 div {
    float: left;
    margin-right: -100%;
    width: 15%;
  }
  .row2 div:nth-child(6n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row2 div:nth-child(6n+2) {
    margin-left: 17%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+3) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+4) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+5) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }
  .row2 div:nth-child(6n+6) {
    margin-left: 85%;
    margin-bottom: 2%;
    clear: none;
  }

  .row3 div {
    float: left;
    margin-right: -100%;
    width: 23.5%;
  }
  .row3 div.last {
    float: left;
    margin-right: -100%;
    width: 23.5%;
  }
  .row3 div:nth-child(4n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row3 div:nth-child(4n+2) {
    margin-left: 25.5%;
    margin-bottom: 2%;
    clear: none;
  }
  .row3 div:nth-child(4n+3) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }
  .row3 div:nth-child(4n+4) {
    margin-left: 76.5%;
    margin-bottom: 2%;
    clear: none;
  }

  .row4 div {
    float: left;
    margin-right: -100%;
    width: 32%;
  }
  .row4 div:nth-child(3n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row4 div:nth-child(3n+2) {
    margin-left: 34%;
    margin-bottom: 2%;
    clear: none;
  }
  .row4 div:nth-child(3n+3) {
    margin-left: 68%;
    margin-bottom: 2%;
    clear: none;
  }

  .row6 div {
    float: left;
    margin-right: -100%;
    width: 49%;
  }
  .row6 div:nth-child(2n+1) {
    margin-left: 0%;
    margin-bottom: 2%;
    clear: both;
    overflow: hidden;
    *zoom: 1;
  }
  .row6 div:nth-child(2n+2) {
    margin-left: 51%;
    margin-bottom: 2%;
    clear: none;
  }

  .row12 div {
    float: left;
    margin-right: -100%;
    width: 100%;
  }
  
/* subgrids ? */  
  
.subgrid1 {
  margin: 0;
  width: 100%;
  margin: 0 0%;
  overflow: hidden;
  *zoom: 1;
  max-width: 2000px;
}

.vertcent{
  position: absolute;
  left: 0%;
  top: 50%;
  
  -moz-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
	}
	
.leftbot{
  position: absolute;
  left: 0%;
  bottom: 4%;
  
 }
 


}