/*!
 *  Stunnplate Flex layout.css
 *  Version: 1
 *
 */
 /* 
 *  Last Updated: 06/11/15
 *  By: Adam
 *  
 *  Notes:
 *  Default flexbox style layput
 *
 * 
 */

/* ================================
	Default Layout Elements
   ================================ */


/* ===============
	Flex sticky footer
   =============== */

/*add to body*/
.stickyFootWrap {
  -js-display: flex;
  display: -ms-flexbox;
  -ms-flex-direction:column;
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column; 
	  -ms-flex-direction: column;
		  flex-direction: column;
  
}

/*add to the 'main element/section that you want the footer to clear'*/
.stickyFootMain {
  -webkit-flex: 1 0 auto;
	  -ms-flex: 1 0 auto;
		  flex: 1 0 auto;
  -ms-flex-positive:1;
  -ms-flex-negative:0;
  -ms-flex-preferred-size:auto;
  ms-flex:1;
}

/*add to all of the other section/elements on the page (including the footer) apart from the one the footer needs to clear*/
.stickyFootOther {-ms-flex:none; -webkit-flex:none; flex:none; display:block; width:100%; }


/* ===============
	Flex grid
   =============== */

.flex-parent {
  -js-display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-line-pack: stretch;
  -ms-flex-align:stretch;
  -webkit-align-items:stretch;
  align-items: stretch;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
	  justify-content: flex-start;

  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  padding:16px;

}

.ie11 .flex-parent {}

.ie10 .flex-parent {}

.ie9 .flex-parent {font-size:0;  vertical-align:middle;display:inline-block;}


.flex-parent .block {
  /*min-height:100px;*/
 
  -ms-flex:1 1 25%;
	  flex:1 1 25%;
 -webkit-flex:1 1 200px;
  padding:16px;
  /*border:32px  solid transparent;
  border-right:0;
  border-bottom:0;*/
  /*display:inline-block;*/
  box-sizing:border-box;
  min-width:200px;     /* Firefox 3.6 */  /* Safari 4? Chrome 6? */
  background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

/*.touch .flex-parent .block {
	-webkit-flex:1 1 200px;
}*/

.ie11 .flex-parent .block{
  -ms-flex-preferred-size:22%;
		  -webkit-flex-basis:22%;
		  flex-basis:22%;
}

.ie10 .flex-parent .block {
  -ms-flex-positive:1;
  -ms-flex-negative:1;
  -ms-flex-preferred-size:22%;
  /*flex-basis:22%;*/
	/*width:22%;*/
  display: inline-block;
}


.ie9 .flex-parent .block {
	width:25%;
  vertical-align:top;
  display:inline-block;
}
.ie9 .block { /*MG Changed this for specificity reasons (easier to override) */
	font-size:16px;
}


.flex-parent.right {
   -ms-flex-line-pack: end;
		   -webkit-align-content: flex-end;
		   align-content: flex-end;
		   -webkit-justify-content:flex-end;
			   -ms-flex-pack:end;
				   justify-content:flex-end;
}


.flex-parent.right .block{
   -webkit-flex:0 1 auto;
	   -ms-flex:0 1 auto;
		   flex:0 1 auto;
}





.bounds {
	width: 100%;
	margin: 0 auto;
	/*max-width: 1234px;*/
	max-width: 1364px;
}

/*replaces our table border-spacing where we're not using flex*/
.content-padding {padding:0 32px;}



/* ===============
	Column widths
   =============== */
.block.one {width:100%;}
.block.one-half { width: 50%; }
.block.one-third  { width: 33.33%; }
.block.two-third { width: 66.66%; }
.block.one-fourth { width: 25%;  empty-cells:show;}
.block.three-fourth { width: 75%; }


.block.aside {
	width:370px;
}

/* ===============
	ALL: IE Fixes
   =============== */



/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 1030px) {
   .flex-parent .block {
	 -webkit-flex:1 1 25%;
  }
}

/* ===============
	Maximal Width (above 1170px) - See Default
   =============== */


@media only screen and (max-width: 1170px) {

/* ====================
	WIDE: CSS3 Effects
   ==================== */



/* ============
	WIDE: Main
   ============ */

}

@media only screen and (max-width: 830px) { 
/* ====================
	Custom: To balance 2/3 1/3 width at smaller sizes
   ==================== */   



}


@media only screen and (max-width: 768px) {

/* ============
	INTERMEDIATE: Main
   ============ */



/* ====================
	Custom: To wrap 4 col to 2 col (handled with js)
   ==================== */



}


@media only screen and (max-width: 720px) {
 
}


@media only screen and (max-width: 630px) {
/* ====================
	Custom: To make 3 col to 1 col
   ==================== */


}


@media only screen and (max-width: 568px) {
 	.content-padding {padding:0 8px;}
}