.section {
    display: block; position: relative;
    margin: 0; 
    padding: $section-padding 0;
    // background: $white;
    text-align: center;
    
	font-size: $font-size-base;
	.corset, .container { background: inherit; }
	
    
    &.z, &.zindex, &.z-index { z-index: 1; }
    
    
    &.image {
        &.fixed { background-attachment: fixed; /* position: static; */ z-index: 88; }
        
        background-color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url('http://lorempixel.com/g/1200/500/nature/');
		
		// &.fixed { 
		//     background: transparent image-url('magic/bgs/hdr_landsberger.jpg') no-repeat center center fixed; 
		//     background-size: cover; 
		// }
		
		.corset, .container { background: transparent; }
    }
    
    &.noise {
        .corset, .container { background: transparent; }
    }
    
    
    // 
	//   Header Section
	// 
	&.head {
		z-index: 2;
		background: $section-head-background;
		padding: $section-head-padding 0;
		h1, h2, .h1, .h2 {
			margin: 0; padding: 0;
			line-height: $section-head-line-height;
			font-size: $section-head-font-size;
			color: $brand-color;
			text-align: left;
			small { color: $section-head-small-color; }
		}
		@include all_form_elements { background: $section-head-input-bg; }
	}
	
    
	// 
	//   Sections with shine
	// 
    &.shine-top {
        z-index: 1;
        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 {
        z-index: 1;
        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) );
        }
    }
    

	// 
	//   Border Stylez
	// 
    &.hard-top {
        border-top: solid 1px $main-border-color;
        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	&.hard-bottom {
        border-bottom: solid 1px rgba(255,255,255,.75);
        @include box-shadow( inset 0 -1px 1px 0 $main-border-color );
    }
	&.hard-top.hard-bottom {
		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
	}
	
	&.dotted-top {
        border-top: dotted 2px $gray-light;
        @include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	&.dotted-bottom {
        border-bottom: dotted 2px $gray-light;
        @include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
    }
	&.dotted-top, &.dotted-bottom {
		@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
	}
	
	// 
	//   Section Sizes
	// 
	&.section-xs, &.sctn-xs, &.compact { padding-top: $section-xs-padding; padding-bottom: $section-xs-padding; }
	&.section-sm, &.sctn-sm, &.flatted, &.tight { padding-top: $section-sm-padding; padding-bottom: $section-sm-padding; }
	
	&.section-lg, &.sctn-lg, &.fat { padding-top: $section-lg-padding; padding-bottom: $section-lg-padding; }
	&.section-xl, &.sctn-xl, &.fatter { padding-top: $section-xl-padding; padding-bottom: $section-xl-padding; }
	&.section-xxl, &.sctn-xxl { padding-top: $section-xxl-padding; padding-bottom: $section-xxl-padding; }
	
	&.flat { padding-top: 0; padding-bottom: 0; }
	&.flat-top { padding-top: 0; }
    &.flat-bottom { padding-bottom: 0; }
	
	
	// 
	//   Section Colors
	// 
	background: $section-background;
	@include all_form_elements { background: $section-input-bg; }
	
    &.dark {
		background: $section-dark-background;
		.three-previews .preview { border-color: $main-border-color; }
		@include all_form_elements { background: $section-dark-input-bg; }
    }
    &.black {
		background: #333;
		color: #fff;
		.three-previews .preview { border-color: $main-border-color; }
		@include all_form_elements { background: $section-dark-input-bg; }
    }
	&.bright {
		background: $section-bright-background;
		@include all_form_elements { background: $section-bright-input-bg; }
	}
	&.brand { 
		background: $section-brand-background; 
		@include all_form_elements { background: $section-brand-input-bg; }
	}
	&.soft { 
		background: $section-soft-background; 
		@include all_form_elements { background: $section-soft-input-bg; }
	}
    &.blank { background: transparent; }
    
    &.one { 
		background: $section-one-background; 
		@include all_form_elements { background: $section-one-input-bg; }
	}
	&.two { 
		background: $section-two-background; 
		@include all_form_elements { background: $section-two-input-bg; }
	}
	&.three { 
		background: $section-three-background; 
		@include all_form_elements { background: $section-three-input-bg; }
	}
    
	
	// 
	//   Speech Section
	// 
	&.speech {
        &:after {
            display: block; position: absolute; content: "";
            margin: 0; padding: 0;
            width: 0; height: 0;
            border: solid 10px transparent;
            border-right:  solid 10px $section-background;
            border-bottom: solid 10px $section-background;
            bottom: -8px;
            left: 50%;
            margin-left: -8px;
            @include rotation( 45 );
            z-index: 99;
        }
        &.dark:after {
            border-right:  solid 10px $section-dark-background;
            border-bottom: solid 10px $section-dark-background;
        }
        &.bright:after {
            border-right:  solid 10px $section-bright-background;
            border-bottom: solid 10px $section-bright-background;
        }
        &.brand:after {
            border-right:  solid 10px $section-brand-background;
            border-bottom: solid 10px $section-brand-background;
        }
        &.soft:after {
            border-right:  solid 10px $section-soft-background;
            border-bottom: solid 10px $section-soft-background;
        }
        
        &.one:after {
            border-right:  solid 10px $section-one-background;
            border-bottom: solid 10px $section-one-background;
        }
        &.two:after {
            border-right:  solid 10px $section-two-background;
            border-bottom: solid 10px $section-two-background;
        }
        &.three:after {
            border-right:  solid 10px $section-three-background;
            border-bottom: solid 10px $section-three-background;
        }
    }
	
	
	// 
	//   Rotated Sections
	// 
	&.rotated {
	    z-index: 99;
	    &:after, &:before {
            display: none; position: absolute; content: "";
            margin: 0; padding: 0;
            height: $section-padding * 1.4;
            left: -10%; right: -10%;
            z-index: -1;
            background: inherit;
        }
        &:before { top: -1 * $section-padding / 2; }
        &:after { bottom: -1 * $section-padding / 2; }
        
        &.top-left, &.top-right, &.both-left, &.both-right {
            &:before { display: block; }
        }
        &.bottom-left, &.bottom-right, &.both-left, &.both-right {
            &:after { display: block; }
        }
        
        
        &.top-left, &.both-left {
            &:before { @include rotation( 2 ); }
        }
        &.top-right, &.both-right {
            &:before { @include rotation( -2 ); }
        }
        &.bottom-left, &.both-left {
            &:after { @include rotation( 2 ); }
        }
        &.bottom-right, &.both-right {
            &:after { @include rotation( -2 ); }
        }
        
        
        
        // &.top-right:before { @include rotation( -2 ); }
        // &.bottom-right:after { @include rotation( -2 ); }
        
	}
	
}





@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%;
		}
		
		
		
		
		// kill margin of child elements, to avoid unwanted sizing
		&, & > .corset, & > .container {
			@if $section-reset-child-spacing == true {
				& > * {
					&:first-child { margin-top: 0; }
					&:last-child { margin-bottom: 0; }
				}
			}
			@if $section-reset-row-child-spacing == true {
				& > *, & > .row, & > .row > *, & > .row > * > * {
					&: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; }
			}
			@if $section-reset-table-child-spacing == true {
				& > .layout-table > * > *, & > .inline_table > * > * {
					&:first-child { margin-top: 0; }
					&:last-child { margin-bottom: 0; }
				}
			}
		}
		
		
	}
	
}

@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%;
		}
	}
	
}