/*
Divider

Dividers can be used to separate page sections and other page-level content.
Supports multiple colors.

Markup:
<!-- #fullwidth -->
<div class="b-page-section">
    <div class="row">
        <div class="column small-12">
            <p>Section of the page with info about cool things.</p>
        </div>
    </div>
</div>
<div class="b-divider">
    <h1>This is a divider with a big text</h1>
    <h2>Smaller title with more characteres and working as a tagline</h2>
</div>
<div class="b-page-section">
    <div class="row">
        <div class="column small-12">
            <p>This is the base divider, with <code>h1</code> and <code>h2</code> together, and center aligned.</p>
        </div>
    </div>
</div>
<div class="b-divider">
    <div class="row">
        <div class="column small-12">
            <h2>This is a divider with a big text</h2>
        </div>
    </div>
</div>
<div class="b-page-section">
    <div class="row">
        <div class="column small-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt itaque dolor ratione aspernatur nulla nemo, minima sit debitis at vel tenetur qui quod, aliquid suscipit atque, odit ipsam, commodi error!</p>
        </div>
    </div>
</div>
<div class="b-divider m-blue">
    <div class="row">
        <div class="column small-12">
            <p>This is a demonstration of the modifiers for background-color. You should use the <strong>.m-blue</strong> class to get this effect</p>
        </div>
    </div>
</div>

.m-blue - $blue background
.m-purple - $purple background
.m-teal - $teal background
.m-orange - $orange background
.m-purple-40k - $purple-40k background
.m-blue-20k - $blue-20k background
.m-gray-20 - $gray-20 background
.m-gray-30 - $gray-30 background
.m-gray-40 - $gray-40 background
.m-gray-50 - $gray-50 background
.m-gray-60 - $gray-60 background
.m-gray-70 - $gray-70 background
.m-gray-80 - $gray-80 background
.m-gray-90 - $gray-90 background
.m-black - $black background
.m-purple-20k - $purple-20k background
.m-orange-20k - $orange-20k background
.m-teal-20k - $teal-20k background
.m-blue-20k - $blue-20k background
.m-red - $red background
.m-green - $green background

Styleguide 3.4
*/
.b-divider {
    background-color: $black;
    padding-top: 20px;
    padding-bottom: 20px;
    line-height: 1.3;
    color: $white;

    :first-child { margin-top: 0; }
    :last-child { margin-bottom: 0; }

    h1 {
        text-transform: none;
        margin-bottom: 0;
        @include breakpoint($tablet) {
            font-size: 40px;
        }
    }

    h1 + h2 {
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: $white-40;
        text-transform: uppercase;
        @include breakpoint($tablet) { font-size: 22px; }
    }

    h2 {
        text-transform: none;
        font-weight: 100;
    }
}

.b-divider.m-purple { background-color: $purple; }
.b-divider.m-blue   { background-color: $blue; }
.b-divider.m-orange { background-color: $orange; }
.b-divider.m-teal   { background-color: $teal; }

.b-divider.m-purple-20k { background-color: $purple-20k; }
.b-divider.m-purple-40k { background-color: $purple-40k; }
.b-divider.m-blue-20k   { background-color: $blue-20k; }

.b-divider.m-gray-20 { background-color: $gray-20; }
.b-divider.m-gray-30 { background-color: $gray-30; }
.b-divider.m-gray-40 { background-color: $gray-40; }
.b-divider.m-gray-50 { background-color: $gray-50; }
.b-divider.m-gray-60 { background-color: $gray-60; }
.b-divider.m-gray-70 { background-color: $gray-70; }
.b-divider.m-gray-80 { background-color: $gray-80; }
.b-divider.m-gray-90 { background-color: $gray-90; }
.b-divider.m-black { background-color: $black; }

.b-divider.m-orange-20k { background-color: $orange-20k; }
.b-divider.m-teal-20k { background-color: $teal-20k; }
.b-divider.m-red { background-color: $red; }
.b-divider.m-green { background-color: $green; }