.divider {
    display: block; position: relative;
	padding: 0;
    overflow: hidden;
    text-align: center;
    &, & > * { background: transparent; }
    & > * {
        position: relative;
        margin: 0 auto;
        // do not disturb button padding
        &:not(.btn) { padding: 0; }
        &:not(.btn-divided), &:not(.btn-splited) { display: block; display: inline-block; }
        &.btn-divided, &.btn-splited {
            max-width: 50%;
            margin: 0 auto;
        }
        &:before, &:after {
            display: block; position: absolute; content: "";
            margin: 0; padding: 0;
            top: 50%;
            width: 750px; // make it big to fill big screens as well
        }
        &:before { left: 100%; margin-left: $divider-horizontal-spacing; }
        &:after { right: 100%; margin-right: $divider-horizontal-spacing; }
    }
}

hr {
	display: block; position: relative;
	margin: 0; padding: 0;
	height: 0;
}


// margin
hr, .divider { @include vertical-margin( $divider-vertical-spacing ); }

// line-colors
hr, .divider > *:before, .divider > *:after {
    border: none;
	border-top: solid 1px $divider-top-color;
	border-bottom: solid 1px $divider-bottom-color;
}

// sizes
hr, .divider {
    
    &.half, &.tight { @include horizontal-margin( auto ); }
    &.half { width: 50%; }
    &.tight { width: 80%; }
    
    &.no-press { margin: 0; }
    &.no-press-top, &.no-top-press { margin-top: 0; }
    &.no-press-top, &.no-top-press { margin-bottom: 0; }
    
    &.half-press, &.press-half { @include vertical-margin( $divider-vertical-spacing / 2 ); }
    
    
}



.section {
	
	.divider & > * { background: $main-bg; }
	hr, .divider:after {
		border-top: solid 1px $main-border-color;
		border-bottom: solid 1px $white;
	}
	
	

    &.dark {
		.divider & > * { background: $dark-bg; }
		hr, .divider:after {
			border-top: solid 1px $gray;
			border-bottom: solid 1px $white;
		}
	}
	&.bright {
		.divider & > * { background: $bright-bg; }
		hr, .divider:after {
			border-top: solid 1px $main-border-color;
			border-bottom: solid 1px $white;
		}
	}
	&.brand {
		.divider & > * { background: $brand-bg; }
		hr, .divider:after {
			border-top: solid 1px $main-border-color;
			border-bottom: solid 1px $white;
		}
	}
	&.soft {
		.divider & > * { background: $soft-bg; }
		hr, .divider:after {
			border-top: solid 1px $main-border-color;
			border-bottom: solid 1px $white;
		}
	}
	
}