</div>

</div>

<section id="HowMadeWorks">

  <header><h1>GREAT DESIGN DIRECT FROM THE MAKERS</h1></header>

  <a href="#" id="HowMadeWorksTitle">How Made.com works <span class="chevron">»</span></a>

​

<article id="draw">

<span class="closebutton" id="close_drawer"></span>

​

    <div id="slide_one" class="HowMadeWorksSlide">

        <h4 id="slideOne_title">a designer chair typically sells for</h4>

        <span class="price-dashed" id="slideOne_left"></span>        

            <p id="slideOne_price">£1,200</p>        

        <span class="price-dashed" id="slideOne_right"></span>

        <p id="slideOne_copy">It looks and feels beautiful. But it only costs £200 to make. That's a 500% mark up.</p>

        <a id="slideOne_btns" class="btns" title="" href="#"><span class="button_label"> We do it differently <span class="chevron">»</span></span></a>

    </div>

</div>

 </div>

​

    <div id="slide_two" class="HowMadeWorksSlide">

        <h4 id="slideTwo_title">THE HIGH STREET MODEL</h4>

        <h4 id="slideTwo_title_hide">THE MADE.COM APPROACH</h4>

        <p id="slideTwo_copy">Everyone in the chain adds a cost, which you end up paying for</p>

        <p id="slideTwo_copy_hide">We cut out unnecessary costs and connect you to the makers</p>

​

            <div class="items" id="item1">

                <div class="copy">

                    <p> Design &amp; production</p>

                    <p class="price">£200</p>

                </div>

                <div id="hover_item1">

                    <p>First off is drawing up the design and getting it made</p>

                </div>

            </div>

            <div class="items" id="item2">

                <div class="copy">

                    <p>Importers</p>

                    <p class="price">£300</p>

                </div>

                <div id="hover_item2">

                    <p>Agents take a cut for bringing it into the country</p>

                </div>

            </div>

            <div class="items" id="item3">

                <div class="copy">

                    <p>Wholesalers</p>

                    <p class="price">£500</p>

                </div>

                <div id="hover_item3">

                    <p>Wholesalers make a profit by buying and selling in bulk</p>

                </div>

            </div>

            <div class="items" id="item4">

                <div class="copy">

                    <p>High street stores</p>

                    <p class="price">£800</p>

                </div>

                <div id="hover_item4">

                    <p>Rents and running costs add one last bump to the price</p>

                </div>

            </div>

            <div class="items" id="item5">

                <div class="copy">

                    <span id="cross_out"></span>

                    <p>Final high street price</p>

                    <p class="price">£1,200</p>

                    <p id="hidden">Made.com price</p>

                    <p class="price">£350</p>

                </div>

                <div id="hover_item5">

                    <p></p>

                </div>

            </div>

            <span id="dashed"></span>

​

        <a id="slideTwo_btns" class="btns largebtn" title="" href="#"><span class="button_label">We do it differently <span class="chevron">»</span></span></a>

        <a id="slideTwo_btns_hide" class="btns largebtn" title="" href="#"><span class="button_label">Start shopping now <span class="chevron">»</span></span></a>

    </div>

​

</article>

​

</section>