.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_inputs { background: $white; }
	
	.divider {
		
		span { background: $main-bg; }
	}
	hr {
		display: block; position: relative;
		margin: 10px 0; padding: 0;
		height: 0;
		border: none;
		border-top: solid 1px #ccc;
		border-bottom: solid 1px $white;
	}

    &.dark {
        background: $dark-bg;
		.divider span { background: $dark-bg; }
        .three-previews .preview { border-color: $main-border-color; }
		input.half, textarea.half, textarea { background: $white; }
		@include all_inputs {
			background: $white;
		}
    }
	&.bright {
		background: $white;
		.divider span { background: $white; }
		@include all_inputs { background: $main-bg; }
		textarea { background: $dark-bg; }
	}
	&.brand { 
		background: $brand-color; 
		.divider span { background: $brand-color; }
	}
    &.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; }
		}
	}
}










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

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