/*
Slider

Multiple Sildes can be linked together using a Silder.
We use Slick behind the scenes to make the slider work.
Below is the configuration we use. Also check out the
<a href="http://kenwheeler.github.io/slick/" target="_blank">
Slick Docs</a>

<pre><code class="language-javascript">
$('.b-slider').slick({
    arrows: true,
    draggable: false,
    swipeToSlide: true,
    autoplay: true,
    autoplaySpeed: 3000,
    responsive: [
        {
            breakpoint: 800,
            settings: {
                draggable: true,
            }
        }
    ]
});
</code></pre>

Markup:
<!-- #fullwidth -->
<div class="b-slider slick">
    <section id="slide-id" class="b-slide m-purple">
        <header>
            <h4>Featured Project</h4>
        </header>
        <div class="row e-content">
            <div class="column medium-6">
                <h2 class="e-project-name">Project Title</h2>
                <h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
            </div>
            <div class="column medium-6">
                <p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
                <p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
            </div>
        </div>
        <div class="row e-content">
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
        </div>
    </section>
    <section id="slide-id" class="b-slide">
        <header>
            <h4>Featured Project</h4>
        </header>
        <div class="row e-content">
            <div class="column medium-6">
                <h2 class="e-project-name">Project Title</h2>
                <h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
            </div>
            <div class="column medium-6">
                <p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
                <p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
            </div>
        </div>
        <div class="row e-content">
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
        </div>
    </section>
    <section id="slide-id" class="b-slide m-teal">
        <header>
            <h4>From Our Blog</h4>
        </header>
        <div class="row e-content">
            <div class="column medium-6">
                <h2>Bloc title Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
                <h3><strong>By: </strong>Claudio Mendonca</h3>
            </div>
            <div class="column medium-6">
                <p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
                <p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
            </div>
        </div>
        <div class="row e-content">
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
        </div>
    </section>
    <section id="slide-id" class="b-slide m-orange">
        <header>
            <h4>Featured Project</h4>
        </header>
        <div class="row e-content">
            <div class="column medium-6">
                <h2 class="e-project-name">Project Title</h2>
                <h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
            </div>
            <div class="column medium-6">
                <p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
                <p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
            </div>
        </div>
        <div class="row e-content">
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
        </div>
    </section>
    <section id="slide-id" class="b-slide m-blue">
        <header>
            <h4>Featured Project</h4>
        </header>
        <div class="row e-content">
            <div class="column medium-6">
                <h2 class="e-project-name">Project Title</h2>
                <h3 class="e-question">Lorem ipsum dolor sit amet, consectetur adipisicing elit, enim adipisci dicta.</h3>
            </div>
            <div class="column medium-6">
                <p>Project description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
                <p>Project description Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Sint recusandae nostrum eos saepe officia vero illum fuga quae at, corporis unde quas sit adipisci neque doloremque fugiat possimus nisi minima.</p>
            </div>
        </div>
        <div class="row e-content">
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="./projects.html">All Projects<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
            <div class="column medium-6">
                <div class="e-action">
                    <a class="b-button m-naked" href="#">Find out more<i class="material-icons">arrow_forward</i></a>
                </div>
            </div>
        </div>
    </section>
</div>

.m-purple - $purple background
.m-blue - $blue background
.m-orange - $orange background
.m-teal - $teal background
.m-gray-25 - $gray-25 background
.m-gray-10 - $gray-10 background
.m-gray-15 - $gray-15 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-purple-40k - $purple-40k 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.6
*/
.b-slider {
    // Here we overwrite the styles from Slick.js
    // Keeping the default functionality of the NEXT and PREV buttons

    .slick-arrow {
        position: absolute;
        top: 45%;
        z-index: 1;
        background-color: transparent;
        border: 0;
        @include material-icons;
        color: transparent;

        &:before,
        &:after {
            color: $white_20;
            font-size: 60px;
            @include transition;
        }

        &:hover:before,
        &:hover:after {
            color: $white_60;
            @include transition;
        }
    }

    .slick-prev {
        left: 0;

        &:before {

            content: 'keyboard_arrow_left'
        }
    }

    .slick-next {
        right: 0;

        &:after {
            content: 'keyboard_arrow_right'
        }
    }
}