/* Adaptive Scaffolding
 * Version 1.2
 *
 * Supported: IE 8+, Chrome, Firefox, Safari
 *
 * Responsive Breakpoints: 
 * 1200, 1150, 1100, 1050
 * 1000, 950, 900, 850
 * 800, 750, 700, 650
 * 600, 550, 500, 450, 400
 *
 */

/* ======================================== *
	Scaffolding
 * ======================================== *
 * 
 * Example:
 * <div id="header-wrapper" class="section-wrapper">
 *		<div id="header-container" class="section-container">
 *			<div id="header" class="section">
 *			</div>
 * 		</div>
 *	</div>
 *
 */

.section-wrapper {
	position: relative;
}

html.ie8 .section-wrapper {
	min-width: 980px;
}

.section-container {
	position: relative;
	margin: 0 auto;
	max-width: 1200px; 
	width: 100%;
}

html.ie8 .section-container {
	width: 980px;
	max-width: 980px;
}

@media screen and (min-width: 1600px) {
    .section-container {
        max-width: 90%;
    }
}

/* ======================================== *
	Rows
 * ======================================== *
 * 
 * Example:
 * <div id="row-name" class="row">
 *		<div id="row-name-cell-1" class="span-12">
 *			<div class="inner">
 *		</div>
 * 	</div>
 *		<div id="row-name-cell-2" class="span-12">
 *			<div class="inner">
 *			</div>
 * 		</div>
 *	</div>
 *
 */
.row {
	display: table;
	width: 100%;
	position: relative;
}

/* ======================================== *
	Cell Blocks
 * ======================================== */
.row > div {
	display: table-cell;
	vertical-align: top;
}

/* vertical aliging of cells */
.row > div.v-align-top    { vertical-align: top; }
.row > div.v-align-middle { vertical-align: middle; }
.row > div.v-align-bottom { vertical-align: bottom; }

/* ======================================== *
	Inner Cell Blocks
 * ======================================== */
.row > div > .inner {
	-webkit-box-sigin: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	padding: 0 25px;
}

/* if first or last class is defined, remove edge padding */
.row > div.first > .inner { padding-left: 0; }
.row > div.last  > .inner { padding-right: 0; }

/* First element in a collapsed row should not have padding */
.row > div:first-child { padding-top: 0 !important; }

/* nested rows dont have left and right padding */
.row > div > .inner .row > div:first-child > .inner { padding-left: 0;  }
.row > div > .inner .row > div:last-child > .inner  { padding-right: 0; }

/* ======================================== *
	Flex Cells
 * ======================================== */
.span-1  { width: 4.166666%;  }
.span-2  { width: 8.333333%;  }
.span-3  { width: 12.5%;      }  
.span-4  { width: 16.666666%; }
.span-5  { width: 20.833333%; }
.span-6  { width: 25%;        }    
.span-7  { width: 29.166666%; }
.span-8  { width: 33.333333%; }
.span-9  { width: 37.5%;      } 
.span-10 { width: 41.666666%; }
.span-11 { width: 45.833333%; }
.span-12 { width: 50%;        }
.span-13 { width: 54.166666%; }
.span-14 { width: 58.333333%; }
.span-15 { width: 62.5%;      }  
.span-16 { width: 66.666666%; }
.span-17 { width: 70.833333%; }
.span-18 { width: 75%;        }    
.span-19 { width: 79.166666%; }
.span-20 { width: 83.333333%; }
.span-21 { width: 87.5%;      } 
.span-22 { width: 91.666666%; }
.span-23 { width: 95.833333%; }
.span-24 { width: 100%;       }

.span-whole   { width: 100%;       }
.span-half    { width: 50%;        }
.span-third   { width: 33.333333%; }
.span-quarter { width: 25%;        }
.span-fifth   { width: 20%;        }


/* ======================================== *
	Static Cells
 * ======================================== */
.span-1.static  > .inner { min-width: 50px;   }
.span-2.static  > .inner { min-width: 100px;  }
.span-3.static  > .inner { min-width: 150px;  }
.span-4.static  > .inner { min-width: 200px;  }
.span-5.static  > .inner { min-width: 250px;  }
.span-6.static  > .inner { min-width: 300px;  }
.span-7.static  > .inner { min-width: 350px;  }
.span-8.static  > .inner { min-width: 400px;  }
.span-9.static  > .inner { min-width: 450px;  }
.span-10.static > .inner { min-width: 500px;  }
.span-11.static > .inner { min-width: 550px;  }
.span-12.static > .inner { min-width: 600px;  }
.span-13.static > .inner { min-width: 650px;  }
.span-14.static > .inner { min-width: 700px;  }
.span-15.static > .inner { min-width: 750px;  }
.span-16.static > .inner { min-width: 800px;  }
.span-17.static > .inner { min-width: 850px;  }
.span-18.static > .inner { min-width: 900px;  }
.span-19.static > .inner { min-width: 950px;  }
.span-20.static > .inner { min-width: 1000px; }
.span-21.static > .inner { min-width: 1050px; }
.span-22.static > .inner { min-width: 1100px; }
.span-23.static > .inner { min-width: 1150px; }
.span-24.static > .inner { min-width: 1200px; }

.span-whole.static   > .inner { min-width: 1200px; }
.span-half.static    > .inner { min-width: 600px;  }
.span-third.static   > .inner { min-width: 400px;  }
.span-quarter.static > .inner { min-width: 300px;  }
.span-fifth.static   > .inner { min-width: 240px;  }


/* ======================================== *
	Minimum Cells
 * ======================================== */
.min-span-1  > .inner { min-width: 50px;   }
.min-span-2  > .inner { min-width: 100px;  }
.min-span-3  > .inner { min-width: 150px;  }
.min-span-4  > .inner { min-width: 200px;  }
.min-span-5  > .inner { min-width: 250px;  }
.min-span-6  > .inner { min-width: 300px;  }
.min-span-7  > .inner { min-width: 350px;  }
.min-span-8  > .inner { min-width: 400px;  }
.min-span-9  > .inner { min-width: 450px;  }
.min-span-10 > .inner { min-width: 500px;  }
.min-span-11 > .inner { min-width: 550px;  }
.min-span-12 > .inner { min-width: 600px;  }
.min-span-13 > .inner { min-width: 650px;  }
.min-span-14 > .inner { min-width: 700px;  }
.min-span-15 > .inner { min-width: 750px;  }
.min-span-16 > .inner { min-width: 800px;  }
.min-span-17 > .inner { min-width: 850px;  }
.min-span-18 > .inner { min-width: 900px;  }
.min-span-19 > .inner { min-width: 950px;  }
.min-span-20 > .inner { min-width: 1000px; }
.min-span-21 > .inner { min-width: 1050px; }
.min-span-22 > .inner { min-width: 1100px; }
.min-span-23 > .inner { min-width: 1150px; }
.min-span-24 > .inner { min-width: 1200px; }

.min-span-whole.static   > .inner { min-width: 1200px; }
.min-span-half.static    > .inner { min-width: 600px;  }
.min-span-third.static   > .inner { min-width: 400px;  }
.min-span-quarter.static > .inner { min-width: 300px;  }
.min-span-fifth.static   > .inner { min-width: 240px;  }


/* Dynamic Collapsing
 * 
 * Each row can be set to collapse at a breakpoint listed at the top of this file.
 *
 * Example:
 * <div id="row-name-cell-1" class="row collapse-1200">
 *
 */

/* ======================================== *
	Below 1200px
 * ======================================== */
@media screen and (max-width: 1200px) {
	.row.collapse-1200 {
		display: block;
	}

	.row.collapse-1200 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-1200 > div > .inner {
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-1200 > div > .inner {
		padding: 0;
	}

	.hide-below-1200 {
		display: none !important;
	}
}

/* ======================================== *
	Below 1150px
 * ======================================== */
@media screen and (max-width: 1150px) {
	.row.collapse-1150 {
		display: block;
	}

	.row.collapse-1150 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-1150 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-1150 > div > .inner {
		padding: 0;
	}

	.hide-below-1150 {
		display: none !important;
	}
}

/* ======================================== *
	Below 1100px
 * ======================================== */
@media screen and (max-width: 1100px) {	
	.row.collapse-1100 {
		display: block;
	}

	.row.collapse-1100 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-1100 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-1100 > div > .inner {
		padding: 0;
	}

	.hide-below-1100 {
		display: none !important;
	}
}

/* ======================================== *
	Below 1050px
 * ======================================== */
@media screen and (max-width: 1050px) {
	.row.collapse-1050 {
		display: block;
	}

	.row.collapse-1050 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-1050 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-1050 > div > .inner {
		padding: 0;
	}

	.hide-below-1050 {
		display: none !important;
	}
}

/* ======================================== *
	Below 1000px
 * ======================================== */
@media screen and (max-width: 1000px) {	
	.row.collapse-1000 {
		display: block;
	}

	.row.collapse-1000 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-1000 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-1000 > div > .inner {
		padding: 0;
	}

	.hide-below-1000 {
		display: none !important;
	}
}

/* ======================================== *
	Below 950px
 * ======================================== */
@media screen and (max-width: 950px) {
	.row.collapse-950 {
		display: block;
	}

	.row.collapse-950 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-950 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-950 > div > .inner {
		padding: 0;
	}

	.hide-below-950 {
		display: none !important;
	}
}

/* ======================================== *
	Below 900px
 * ======================================== */
@media screen and (max-width: 900px) {
	.row.collapse-900 {
		display: block;
	}

	.row.collapse-900 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-900 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-900 > div > .inner {
		padding: 0;
	}

	.hide-below-900 {
		display: none !important;
	}
}

/* ======================================== *
	Below 850px
 * ======================================== */
@media screen and (max-width: 850px) {	
	.row.collapse-850 {
		display: block;
	}

	.row.collapse-850 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-850 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-850 > div > .inner {
		padding: 0;
	}

	.hide-below-850 {
		display: none !important;
	}
}


/* ======================================== *
	Below 800px
 * ======================================== */
@media screen and (max-width: 800px) {
	.row.collapse-800 {
		display: block;
	}

	.row.collapse-800 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-800 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-800 > div > .inner {
		padding: 0;
	}

	.hide-below-800 {
		display: none !important;
	}
}

/* ======================================== *
	Below 750px
 * ======================================== */
@media screen and (max-width: 750px) {
	.row.collapse-750 {
		display: block;
	}

	.row.collapse-750 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-750 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-750 > div > .inner {
		padding: 0;
	}

	.hide-below-750 {
		display: none !important;
	}
}

/* ======================================== *
	Below 700px
 * ======================================== */
@media screen and (max-width: 700px) {
	.row.collapse-700 {
		display: block;
	}

	.row.collapse-700 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-700 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-700 > div > .inner {
		padding: 0;
	}

	.hide-below-700 {
		display: none !important;
	}
}

/* ======================================== *
	Below 650px
 * ======================================== */
@media screen and (max-width: 650px) {
	.row.collapse-650 {
		display: block;
	}

	.row.collapse-650 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-650 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-650 > div > .inner {
		padding: 0;
	}

	.hide-below-650 {
		display: none !important;
	}
}

/* ======================================== *
	Below 600px
 * ======================================== */
@media screen and (max-width: 600px) {
	.row.collapse-600 {
		display: block;
	}

	.row.collapse-600 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-600 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-600 > div > .inner {
		padding: 0;
	}

	.hide-below-600 {
		display: none !important;
	}
}

/* ======================================== *
	Below 550px
 * ======================================== */
@media screen and (max-width: 550px) {
	.row.collapse-550 {
		display: block;
	}

	.row.collapse-550 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-550 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-550 > div > .inner {
		padding: 0;
	}

	.hide-below-550 {
		display: none !important;
	}
}

/* ======================================== *
	Below 500px
 * ======================================== */
@media screen and (max-width: 500px) {	
	.row.collapse-500 {
		display: block;
	}

	.row.collapse-500 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-500 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-500 > div > .inner {
		padding: 0;
	}

	.hide-below-500 {
		display: none !important;
	}
}

/* ======================================== *
	Below 450px
 * ======================================== */
@media screen and (max-width: 450px) {
	.row.collapse-450 {
		display: block;
	}

	.row.collapse-450 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-450 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-450 > div > .inner {
		padding: 0;
	}

	.hide-below-450 {
		display: none !important;
	}
}

/* ======================================== *
	Below 400px
 * ======================================== */
@media screen and (max-width: 400px) {
	.row.collapse-400 {
		display: block;
	}

	.row.collapse-400 > div {
		display: block;
		width: 100%;
		padding-top: 25px;
	}

	.row.collapse-400 > div > .inner { 
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none;
	}

	.row > div > .inner .row.collapse-400 > div > .inner {
		padding: 0;
	}

	.hide-below-400 {
		display: none !important;
	}
}