[!][@on minify]
[=content-]
<div class="centered-container">
    <div style="display: inline-flex;flex-direction: column;align-items: stretch;">
        [=order-]
            [=+ "Chavurah"]
            [=+ "Consultation"]
            [=+ "Kashrut"]
        [/]
        [f order i]
            [f servicepages service]
                [i service.title i equals]
                    <a class="servicelink">
                        <div class="serviceitem">
                            <span>[^service.title]</span>
                            <p>
                                [^service.quickdesc]
                            </p>
                        </div>
                    </a>
                [/]
            [/]
        [/]
    </div>
</div>
<style>
    .servicelink {
        text-decoration: none;
        color: black;
    }
    .serviceitem {
        background-color: white;
        border-radius: 20px 0px 20px 0px;
        padding: 20px;
        margin: 20px;
        text-align: left;
        box-shadow: 6px 6px 2px red;
        transition: box-shadow 0.5s;
        max-width: 1000px;
    }
    .serviceitem > span {
        font-size: 1.5em;
    }
    .serviceitem > p {
        border-left: 4px solid green;
        padding: 10px;
    }
    .serviceitem:hover {
        box-shadow: 3px 3px 0px red;
    }
</style>
[/]
[=title "Services"]
[#templates/default.html]