.section {
    display: block; position: relative;
    margin: 0; 
    padding: 50px 0;
    // background: $white;
	background: $main-bg;
    text-align: center;
    z-index: 1;
	font-size: $font-size-base;
	.corset, .container { background: inherit; }
	
    
    // h1, h2, h3, h4, h5, h6, p {
    //     margin-bottom: 10px;
    // }
    
    &.shine-top {
        overflow: hidden;
        &:before {
            display: block; position: absolute; content: ""; z-index: 11;
            margin: 0; padding: 0;
            bottom: 100%; left: 10%; right: 10%; height: 100px;
            @include spezial_radius( 500px / 20px );
            @include box-shadow( 0 5px 20px 0 rgba(0,0,0,.23) );
        }
    }
    &.shine-bottom {
        overflow: hidden;
        &:after {
            display: block; position: absolute; content: ""; z-index: 11;
            margin: 0; padding: 0;
            top: 100%; left: 10%; right: 10%; height: 100px;
            @include spezial_radius( 500px / 20px );
            @include box-shadow( 0 -5px 20px 0 rgba(0,0,0,.23) );
        }
    }
    
    &.hard-top {
        border-top: solid 1px $main-border-color;
        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	
	&.dotted-top {
        border-top: dotted 2px $gray-light;
        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
    }
    
	
	&.compact { padding-top: 10px; padding-bottom: 10px; }
	
	&.flatted { padding-top: 30px; padding-bottom: 30px; }
	
    &.flat { padding-top: 0; padding-bottom: 0; }
	&.flat-top { padding-top: 0; }
    &.flat-bottom { padding-bottom: 0; }

	&.fat { padding-top: 80px; padding-bottom: 80px; }
	&.fatter { padding-top: 120px; padding-bottom: 120px; }
	
    
	@include all_form_elements { background: $white; }
	
    &.dark {
		background: $dark-bg;
		.three-previews .preview { border-color: $main-border-color; }
		@include all_form_elements { background: $white; }
    }
	&.bright {
		background: $bright-bg;
		@include all_form_elements { background: $main-bg; }
	}
	&.brand { 
		background: $brand-color; 
		@include all_form_elements { background: $white; }
	}
	&.soft { 
		background: $soft-bg; 
		@include all_form_elements { background: $white; }
	}
    &.blank { background: transparent; }

	&.head {
		z-index: 2;
		background: #fff;
		padding: 10px 0;
		h1, h2, .h1, .h2 {
			margin: 0; padding: 0;
			line-height: 30px;
			font-size: 20px;
			color: $brand-color;
			text-align: left;
			small { color: #999; }
		}
	}
	
	
	
	
	// kill margin of child elements, to avoid unwanted sizing
	&, & > .corset, & > .container {
		& > *, & > .row, & > .row > *, & > .row > * > *, & > .layout-table > * > *, & > .inline_table > * > * {
			&:first-child { margin-top: 0; }
			&:last-child { margin-bottom: 0; }
		}
		.row:first-child > * { margin-top: 0; padding-top: 0; }
		.row:last-child > * { margin-bottom: 0; padding-bottom: 0; }
	}
	
	
}










@media only screen and (min-width: 760px) {
	
	
	.section {
		.half, .btn.half, input.half, select.half, textarea.half {
			// margin: 0 auto 10px;
			@include horizontal-margin( auto );
			width: 50%;
		}
	}
	
}

@media only screen and (min-width: 1200px) {
	
	.section {
		.half, .btn.half, input.half, select.half, textarea.half {
			// margin: 0 auto 10px;
			@include horizontal-margin( auto );
			width: 40%;
		}
	}
	
}