html, body, #body {
	height: 100%;
	// overflow-y: auto;
}


$fullpageBrightBG:    rgba(255,255,255,.42)     !default;
$fullpageDarkBG:      rgba(0,0,0,.23)           !default;


.fullpage-table, div.table {
	width: 100%;
	display: block;
	position: relative;
	& > .table-row, & > .tr {
		display: block;
		position: relative;
		& > * {
			display: block;
			position: relative;
		}
	}
  
  .header-cell, .footer-cell, .content-cell { 
    padding: 20px 0; 
    &.xs, &.flat { padding: 0; }
    &.sm { padding: 10px 0; }
    &.lg { padding: 30px 0; }
    &.xl { padding: 40px 0; }
    &.bright {  background: $fullpageBrightBG; }
    &.dark {    background: $fullpageDarkBG; }
  }
  
}




.fixed-table, .layout-table, .inline_table {
    display: block; position: relative;
	padding: 0; margin: 0;
    & > * {
        display: block; position: relative;
        padding: 0; margin: 0;
        vertical-align: top;
		&.top { vertical-align: top; }
		&.middle { vertical-align: middle; }
		&.bottom { vertical-align: bottom; }
		
    }
}


.inline_table {
	display: table;
	width: 100%;
	& > * {
		display: table-cell;
		border-collapse: separate;
		&.aside { width: 220px; }
		@for $i from 1 through 12 {
		  &.col-#{$i} { width: percentage(1 / 12 * $i); }
		}
	}
	&.middled > * { vertical-align: middle; }
	&.grid > * {
		padding: 0 #{$grid-gutter-width / 2};
		&:first-child { padding-left: 0; }
		&:last-child { padding-right: 0; }
	}
}




// basics/magic
// min-width: 750px
@include responsiveStep-sm {
	.fullpage-table {
		height: 100%;
		&.max-size { max-height: 800px; }
		display: table;
		top: 0; left: 0;
		// z-index: 1;
		& > .table-row {
			display: table-row;
			& > * {
				display: table-cell;
				vertical-align: middle;
			}
			&.top, &.top > * { vertical-align: top; }
			&.middle, &.middle > * { vertical-align: middle; }
			&.bottom, &.bottom > * { vertical-align: bottom; }
		}
		.fill { height: 100%; }
	}
	div.table {
		height: 100%;
		display: table;
		top: 0; left: 0;
		& > .tr, & > .row, & > .table-row {
			display: table-row;
			& > .td, & > .th, & > .cell {
				display: table-cell;
				vertical-align: middle;
				padding: 10px;
				&.top { vertical-align: top; }
				&.bottom { vertical-align: bottom; }
			}
		}
	}
	
	.fixed-table, .layout-table {
		display: table;
	    width: 100%;
		& > * {
	        display: table-cell;
	        border-collapse: separate;
			&.aside { width: 220px; }
			&.picture { width: 150px; }
			&.ten {     width: 10%; }
			&.twenty {  width: 20%; }
			&.thirty {  width: 30%; }
			&.fourty {  width: 40%; }
			&.fivty {   width: 50%; }
			&.sixty {   width: 60%; }
			&.seventy { width: 70%; }
			&.eighty {  width: 80%; }
			&.ninety {  width: 90%; }
			@for $i from 1 through 12 {
			  &.col-#{$i} { width: percentage(1 / 12 * $i); }
			}
	    }
		&.grid > * {
			padding: 0 #{$grid-gutter-width / 2};
			&:first-child { padding-left: 0; }
			&:last-child { padding-right: 0; }
		}
		&.middled > * { vertical-align: middle; }
	}
	
	.fixed-table {
	    table-layout:fixed;
	    & > * {
	        border-spacing: 10px;
	    }
		&.boxed { max-width: 750px; margin: 0 auto; }
	}

	
	
}

@include responsiveStep-md {
	.fixed-table {
		&.boxed { max-width: 970px; } 
	}
}

@include responsiveStep-lg {
	.fixed-table {
		&.boxed { max-width: 1170px; }
	}
}


.modal-content .fullpage-table {
	display: block;
	& > .table-row {
		display: block;
		& > * { display: block; }
	}
}


// min-width: 1400px
// @include responsiveStep-2 {
// 	.responsive-hero { 
// 		h1.loud { font-size: 80px; line-height: 90px; font-weight: 700; }
// 		p.loud { font-size: 30px; line-height: 40px; }
// 	}
// }