{% import 'Front/Default/macro.html.twig' as m %}
<!DOCTYPE html>
<html lang="{{ app.request.locale|replace({'_':'-'}) }}">
    <head>
        <meta charset="utf-8">
        <title>Fondation CGénial - GUI</title>

        {# Meta content #}
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        {# Favicons #}
        {# @see http://realfavicongenerator.net/ #}
        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}?v=2017" />
        <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}?v=2017">
        <link rel="icon" type="image/png" href="{{ asset('favicon-cgenial icon-32x32.png') }}?v=2017" sizes="32x32">
        <link rel="icon" type="image/png" href="{{ asset('favicon-cgenial icon-16x16.png') }}?v=2017" sizes="16x16">
        <link rel="manifest" href="{{ asset('manifest.json') }}?v=2017">
        <link rel="mask-icon" href="{{ asset('safari-pinned-tab.svg') }}?v=2017" color="#5bbad5">
        <meta name="theme-color" content="#ffffff">

        {# CSS files #}
        <link media="all" href="{{ asset("front/styles/lib/jquery-ui/jquery-ui.min.css") }}" rel="stylesheet" />
        <link media="all" href="{{ asset('front/scripts/lib/bxslider/jquery.bxslider.css') }}" rel="stylesheet"/>
        <link media="all" href="{{ asset('front/styles/main.css'|asset_rev) }}" rel="stylesheet"/>
    </head>
    <body
        class="{{ bodyClass }}"
    >
        {# include header #}
        {#% include "Front/_part/header.html.twig" %#}

        <div class="maincontent" role="main">
            <div class="before_body">
                
            </div>

            <div class="body">
                <hr>
                <pre class="text-center">TYPES</pre>
                <hr>
                <section class="bg-alabaster bseparator">
                    <div class="container text-center">
                        <pre class="bg-white">h1 / .h1</pre>
                        <h1><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing <span class="color-la-rioja">elit.</span></h1>
                    
                        <pre class="bg-white">h2 / .h2</pre>
                        <h2><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing <span class="color-pelorous">elit.</span></h2>
                    
                        <pre class="bg-white">h2.has-color-bubbles</pre>
                        <h2 class="has-color-bubbles"> <b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing <span class="color-pelorous">elit.</span> </h2>
                    
                        <pre class="bg-white">h3 / .h3</pre>
                        <h3><span class="color-tangerine">Lorem ipsum</span> dolor sit amet, consectetur adipiscing <span
                            class="color-tangerine">elit.</span></h3>
                    
                        <pre class="bg-white">h4 / .h4</pre>
                        <h4><b>Lorem ipsum</b> dolor sit amet, <span class="color-tangerine">consectetur</span> <span class="color-pelorous">adipiscing</span> <span class="color-la-rioja">elit.</span></h4>
                    
                        <pre class="bg-white">h5 / .h5</pre>
                        <h5><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing <span class="color-tundora">elit.</span></h5>
                    
                        <pre class="bg-white">h6 / .h6</pre>
                        <h6><b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing <span class="color-tundora">elit.</span></h6>
                    
                        <pre class="bg-white">p / .p</pre>
                        <p>Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Ita enim vivunt quidam, ut eorum vita refellatur
                        oratio. Ut proverbia non nulla veriora sint quam vestra dogmata. <a href="http://loripsum.net/" target="_blank">An
                            vero, inquit, quisquam potest probare, quod perceptfum, quod.</a> <i>Deinde dolorem quem maximum?</i> Quos nisi
                        redarguimus, omnis virtus, omne decus, omnis vera laus deserenda est. Venit enim mihi Platonis in mentem, quem
                        accepimus primum hic disputare solitum; Hic ambiguo ludimur. </p>
                    
                        <p>Tecum optime, deinde etiam cum mediocri amico. Cur id non ita fit? Ille enim occurrentia nescio quae
                        comminiscebatur; Claudii libidini, qui tum erat summo ne imperio, dederetur. Sed utrum hortandus es nobis, Luci,
                        inquit, an etiam tua sponte propensus es? Nos quidem Virtutes sic natae sumus, ut tibi serviremus, aliud negotii
                        nihil habemus.</p>

                        <pre class="bg-white">.text-leading</pre>
                        <p class="text-leading">Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Ita enim vivunt quidam, ut eorum vita refellatur oratio. </p>

                        <pre class="bg-white">.text-small</pre>
                        <p class="text-small">Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Ita enim vivunt quidam, ut eorum vita refellatur oratio. </p>
                    </div>
                </section>

                <hr>
                <pre class="text-center">LINKS & BUTTONS</pre>
                <hr>
                <section class="bg-white">
                    <div class="container text-center">
                        <pre>a link</pre>
                        <a href="#">Link</a>
                        
                        <pre>a link with color</pre>
                        <a href="#" class="link link-silver-chalice">Link .link-silver-chalice</a>
                        <a href="#" class="link link-concrete">Link .link-concrete</a>
                        <a href="#" class="link link-alabaster">Link .link-alabaster</a>
                        <a href="#" class="link link-la-rioja">Link .link-la-rioja</a>
                        <a href="#" class="link link-pelorous">Link .link-pelorous</a>
                        <a href="#" class="link link-tangerine">Link .link-tangerine</a>
                        <a href="#" class="link link-tundora">Link .link-tundora</a>
                        <a href="#" class="link link-white">Link .link-white</a>
                        <a href="#" class="link link-theme">Dynamic color .link-theme</a>
                        
                        <pre>.link-more</pre>
                        <a class="link-more link-more-silver-chalice" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-concrete" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-alabaster" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-la-rioja" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-pelorous" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-tangerine" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-tundora" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-white" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-more link-more-theme" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>

                        <pre>.link-back</pre>
                        <a class="link-back link-back-silver-chalice" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-concrete" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-alabaster" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-la-rioja" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-pelorous" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-tangerine" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-tundora" href="#">
                            {{ 'word.read_more'|trans({}, 'word') }}
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-right"></i>
                            </span>
                        </a>
                        <a class="link-back link-back-white" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                        <a class="link-back link-back-theme" href="#">
                            <span class="bubble bubble-xs">
                                <i class="icon-cgenial icon-arrow-left"></i>
                            </span>
                            {{ 'word.back'|trans({}, 'word') }}
                        </a>
                                                
                        <pre>.btn ( .btn-la-rioja / .btn-pelorous / .btn-tangerine )</pre>
                        <a href="#" class="btn">Button .btn</a>
                        <a href="#" class="btn btn-silver-chalice">Button .btn-silver-chalice</a>
                        <a href="#" class="btn btn-concrete">Button .btn-concrete</a>
                        <a href="#" class="btn btn-alabaster">Button .btn-alabaster</a>
                        <a href="#" class="btn btn-la-rioja">Button .btn-la-rioja</a>
                        <a href="#" class="btn btn-pelorous">Button .btn-pelorous</a>
                        <a href="#" class="btn btn-tangerine">Button .btn-tangerine</a>
                        <a href="#" class="btn btn-tundora">Button .btn-tundora</a>
                        <a href="#" class="btn btn-white">Button .btn-white</a>
                        <a href="#" class="btn btn-theme">Dynamic color .btn-theme</a>
                        
                        <pre>.btn.btn-sm ( .btn-la-rioja / .btn-pelorous / .btn-tangerine )</pre>
                            <a href="#" class="btn btn-sm">Button .btn</a>
                            <a href="#" class="btn btn-sm btn-silver-chalice">Button .btn-silver-chalice</a>
                            <a href="#" class="btn btn-sm btn-concrete">Button .btn-concrete</a>
                            <a href="#" class="btn btn-sm btn-alabaster">Button .btn-alabaster</a>
                            <a href="#" class="btn btn-sm btn-la-rioja">Button .btn-la-rioja</a>
                            <a href="#" class="btn btn-sm btn-pelorous">Button .btn-pelorous</a>
                            <a href="#" class="btn btn-sm btn-tangerine">Button .btn-tangerine</a>
                            <a href="#" class="btn btn-sm btn-tundora">Button .btn-tundora</a>
                            <a href="#" class="btn btn-sm btn-white">Button .btn-white</a>
                            <a href="#" class="btn btn-sm btn-theme">Dynamic color .btn-theme</a>
                        
                        <pre>.btn.btn-md ( .btn-la-rioja / .btn-pelorous / .btn-tangerine )</pre>
                            <a href="#" class="btn btn-md">Button .btn</a>
                            <a href="#" class="btn btn-md btn-silver-chalice">Button .btn-silver-chalice</a>
                            <a href="#" class="btn btn-md btn-concrete">Button .btn-concrete</a>
                            <a href="#" class="btn btn-md btn-alabaster">Button .btn-alabaster</a>
                            <a href="#" class="btn btn-md btn-la-rioja">Button .btn-la-rioja</a>
                            <a href="#" class="btn btn-md btn-pelorous">Button .btn-pelorous</a>
                            <a href="#" class="btn btn-md btn-tangerine">Button .btn-tangerine</a>
                            <a href="#" class="btn btn-md btn-tundora">Button .btn-tundora</a>
                            <a href="#" class="btn btn-md btn-white">Button .btn-white</a>
                            <a href="#" class="btn btn-md btn-theme">Dynamic color .btn-theme</a>
                        
                        <pre>.btn.btn-lg ( .btn-la-rioja / .btn-pelorous / .btn-tangerine )</pre>
                            <a href="#" class="btn btn-lg">Button .btn</a>
                            <a href="#" class="btn btn-lg btn-silver-chalice">Button .btn-silver-chalice</a>
                            <a href="#" class="btn btn-lg btn-concrete">Button .btn-concrete</a>
                            <a href="#" class="btn btn-lg btn-alabaster">Button .btn-alabaster</a>
                            <a href="#" class="btn btn-lg btn-la-rioja">Button .btn-la-rioja</a>
                            <a href="#" class="btn btn-lg btn-pelorous">Button .btn-pelorous</a>
                            <a href="#" class="btn btn-lg btn-tangerine">Button .btn-tangerine</a>
                            <a href="#" class="btn btn-lg btn-tundora">Button .btn-tundora</a>
                            <a href="#" class="btn btn-lg btn-white">Button .btn-white</a>
                            <a href="#" class="btn btn-lg btn-theme">Dynamic color .btn-theme</a>
                        
                        <pre>.social-networks</pre>
                        <ul class="no-style social-networks">
                            <li>
                                <a href="#" target="_blank" title="Accéder à notre page Facebook" class="bubble facebook">
                                    <i class="icon-cgenial icon-facebook"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" title="Accéder à notre page Twitter" class="bubble twitter">
                                    <i class="icon-cgenial icon-twitter"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" title="Accéder à notre page LinkedIn" class="bubble linkedin">
                                    <i class="icon-cgenial icon-linkedin"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" title="Accéder à notre page YouTube" class="bubble youtube">
                                        <i class="icon-cgenial icon-youtube"></i>
                                </a>
                            </li>
                            <li>
                                <a href="#" target="_blank" title="Accéder à notre page Flickr" class="bubble flickr">
                                    <i class="icon-cgenial icon-flickr-color">
                                        <span class="path1"></span><span class="path2"></span>
                                    </i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </section>

                <hr>
                <pre class="text-center">LISTS</pre>
                <hr>
                <section class="bg-white">
                    <div class="container text-center">
                        <pre>ul / li</pre>
                        <ul>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                        </ul>

                        <pre>ol / li</pre>
                        <ol>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                            <li>Lorem Ipsum</li>
                        </ol>

                        <pre>.pagination</pre>
                        {% include 'Front/Paginator/pagination.html.twig' with {
                            pages:5
                        } only %}
                    </div>
                </section>
                
                <hr>
                <pre class="text-center">ICONS</pre>
                <hr>
                <section class="bg-white bseparator">
                    <div class="container text-center">
                        <div class="row">
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-cgenial-simple">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-cgenial-simple</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-flickr-color">
                                    <span class="path1"></span><span class="path2"></span>
                                    </i>
                                    <span class="mls"> icon-cgenial icon-flickr-color</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-cgenial-triple">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-cgenial-triple</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-triple-color">
                                    <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                    </i>
                                    <span class="mls"> icon-cgenial icon-triple-color</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-youtube">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-youtube</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-logout">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-logout</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-arrow-end-left">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-arrow-end-left</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-arrow-end-right">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-arrow-end-right</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-filters">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-filters</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-search">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-search</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-envelop">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-envelop</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-tick">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-tick</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-arrow-down">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-arrow-down</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-arrow-left">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-arrow-left</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-arrow-right">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-arrow-right</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-arrow-top">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-arrow-top</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-printer">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-printer</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-upload">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-upload</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-info">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-info</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-stop">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-stop</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-google-plus">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-google-plus</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-facebook">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-facebook</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-twitter">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-twitter</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-flickr">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-flickr</span>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div style="display: block; margin: 15px 0; font-size: 20px;">
                                    <i class="icon-cgenial icon-linkedin">
                                    
                                    </i>
                                    <span class="mls"> icon-cgenial icon-linkedin</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <hr>
                <pre class="text-center">GRAPHIC ELEMENTS</pre>
                <hr>
                <section class="bg-alabaster bseparator">
                    <div class="container text-center">
                        <pre>.bubble</pre> 
                        <div class="clearfix">
                            <div class="bubble bubble-tundora">
                                <i class="icon-cgenial icon-triple-color">
                                    <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                                </i>
                            </a>
                        </div>  
                        
                        <pre>.bubble-xl</pre>  
                        <div class="bubbles clearfix">
                            <div class="row">
                                <div class="col-sm-6 col-lg-3">
                                    <div class="bubble bubble-xl bubble-pelorous">
                                        <p><strong>100 000</strong> élèves<br>participants</p>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="bubble bubble-xl bubble-la-rioja">
                                        <p><strong>2 000</strong> profs<br>participants</p>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="bubble bubble-xl bubble-tangerine">
                                        <p><strong>2 000</strong> ingénieurs<br>engagés</p>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-3">
                                    <div class="bubble bubble-xl bubble-tundora">
                                        <p><strong>500</strong> entreprises<br>impliquées</p>
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </section>

                <hr>
                <pre class="text-center">FORMS</pre>
                <hr>
                <section class="bg-white">
                    <div class="container">
                        <form>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control with-border" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">Check me out</label>
                            </div>
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="exampleCheck2">
                                <label class="form-check-label" for="exampleCheck2">Check me out</label>
                            </div>
                            {{ include('Front/_component/button.html.twig', {
                                type: 'button',
                                class: 'btn-sm btn-theme',
                                text: 'Submit',
                            }) }}
                        </form>
                    </div>
                </section>


                <hr>
                <pre class="text-center">LAYOUTS</pre>
                <hr>
                
                    <pre class="text-center">Header</pre>
                    <header class="page-header bg-tundora">
                        <div class="container">
                            <div class="item-content">
                                <h1>Titre de la <span class="color-theme">section</span></h1>
                            </div>
                        </div>
                    </header>

                    <pre class="text-center">Header avec image</pre>
                    <header class="page-header bg-tundora has-bg-image" style="background-image: url({{ asset('front/images/gui-test.png') }});">
                        <div class="container">
                            <div class="item-content">
                                <h1 class="color-theme">Titre de la section</h1>
                                <p>Texte d'introduction de la section</p>
                                <p>sur plusieurs lignes si il le faut avec un </p>
                                <p><a href="#" class="btn btn-theme">Call to action</a></p>
                            </div>
                        </div>
                    </header>

                    <pre class="text-center">Header avec menu</pre>
                    <header class="page-header bg-tundora has-bg-image has-nav" style="background-image: url({{ asset('front/images/gui-test.png') }});">
                        <div class="container">
                            <div class="item-content">
                                <h1 class="color-theme">Titre de la section</h1>
                                <p>Texte d'introduction de la section</p>
                                <p>sur plusieurs lignes si il le faut avec un </p>
                                <p><a href="#" class="btn btn-theme">Call to action</a></p>
                            </div>
                            <ul class="no-style nav nav-tabs nav-justified justify-content-center">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#"><span>Active</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#"><span>Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#"><span>Link</span></a>
                                </li>
                            </ul>
                        </div>
                    </header>
                    
                    <pre class="text-center">Mosaic</pre>
                    <header class="mosaic">
                        <div class="row">
                            <div class="first-col col-xl-4">
                                <div class="module module-customhtml bg-pelorous has-bg-image" style="background-image: url({{ asset('front/images/gui-test.png'|imagine_filter("grayscale")) }});"><div class="item-content"><p><a>Mosaic block 1</a></p></div></div>
                            </div>
                            <div class="second-col col-xl-5">
                                <div class="first-col row">
                                    <div class="col-xl-12">
                                        <div class="module module-customhtml bg-tundora"><div class="item-content"><p><a>Mosaic block 2</a></p></div></div>
                                    </div>   
                                </div>
                                <div class="second-line row">
                                    <div class="col-lg-6">
                                        <div class="module module-customhtml bg-tangerine"><div class="item-content"><p><a>Mosaic block 3</a></p></div></div>    
                                    </div> 
                                    <div class="col-lg-6">
                                        <div class="module module-customhtml bg-la-rioja"><div class="item-content"><p><a>Mosaic block 5</a></p></div></div> 
                                    </div>   
                                </div>
                            </div>
                            <div class="third-col col-xl-3">
                                <div class="module module-customhtml bg-tangerine"><div class="item-content"><p><a>Mosaic block 5</a></p></div></div>
                            </div>
                        </div>
                    </header>
                
                
                <hr>
                <pre class="text-center">BLOCKS</pre>
                <hr>
                
                <pre class="text-center">Justify arround - default</pre>
                <div class="module module-inview-index">
                    <div class="container">
                        <div class="row justify-content-around">
                            <div class="col-xl-4">
                                <div class="card bg-tangerine text-center">
                                    <div class="item-content">
                                        <h3>Vous êtes enseignant ?</h3>
                                        <p>Vous souhaitez accueillir un intervenant dans votre classe ou participer à lʼaction professeurs en entreprise.</p>
                                        <footer class="item-more-actions">
                                            <p><a class="btn btn-xs btn-white" href="#">Inscrivez-vous</a></p>
                                            <p><a class="link link-white text-small" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                        </footer>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div class="card bg-pelorous text-center">
                                    <div class="item-content">
                                        <h3>Vous êtes ingénieur ou techniciens ?</h3>
                                        <p>Vous avez envie dʼaller à la rencontre des collègiens ou lycéens pour témoigner de votre parcours et de votre métier.</p>
                                        <footer class="item-more-actions">
                                            <p><a class="btn btn-xs btn-white" href="#">Inscrivez-vous</a></p>
                                            <p><a class="link link-white text-small" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                        </footer>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <pre class="text-center">Justify arround - Call To Action</pre>
                <div class="module module-inview-index">
                    <div class="container">
                        <div class="row justify-content-around">
                            <div class="col-xl-4 add-spacing">
                                <div class="card bg-la-rioja has-absolute-footer">
                                    <div class="item-content">
                                        <h3>Vous êtes enseignant ?</h3>
                                    </div>
                                    <div class="item-footer">
                                        <div class="figure" style="background-image: url({{ asset('front/images/gui-test.png'|imagine_filter('500L'))|replace({' ' : '%20'}) }});"></div>
                                        <div class="item-footer-hover text-center">
                                            <p>Vous souhaitez accueillir un intervenant dans votre classe ou participer à lʼaction professeurs en entreprise.</p>
                                            <footer class="item-more-actions">
                                                <p><a class="btn btn-xs btn-white" href="#">Inscrivez-vous</a></p>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 add-spacing">
                                <div class="card bg-tangerine has-absolute-footer">
                                    <div class="item-content">
                                        <h3>Vous êtes ingénieur ou techniciens ?</h3>
                                    </div>
                                    <div class="item-footer">
                                        <div class="figure" style="background-image: url({{ asset('front/images/gui-test.png'|imagine_filter('500L'))|replace({' ' : '%20'}) }});"></div>
                                        <div class="item-footer-hover text-center">
                                            <p>Vous avez envie dʼaller à la rencontre des collègiens ou lycéens pour témoigner de votre parcours et de votre métier.</p>
                                            <footer class="item-more-actions">
                                                <p><a class="btn btn-xs btn-white" href="#">Inscrivez-vous</a></p>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <pre class="text-center">Justify center - Actualités</pre>
                <div class="module module-inview-index">
                    <div class="container">
                        <div class="row justify-content-center list-cards cards-news">
                            <div class="col-lg-6 col-xl-4 add-spacing">
                                <div class="card bg-auto">
                                    <div class="item-header">
                                        <div class="figure" style="background-image: url({{ asset('front/images/gui-test.png'|imagine_filter('500L'))|replace({' ' : '%20'}) }});"></div>
                                    </div>
                                    <div class="item-content">
                                        <header>
                                            <h3 class="item-title h5 text-no-transform">
                                                <a href="#">EUROTUNNEL rejoint les partenaires actifs de la Fondation CGénial</a>
                                            </h3>
                                            {# <time class="date item-date" datetime="2018-05-28">28/05/2018</time> #}
                                        </header>
                
                                        {# <div class="item-desc">
                                            Découvrez le palmarès de la finale nationale du Concours CGénial 2018
                                            Pour connaitre les résultats de cette finale exceptionnelle, cliquez sur le lien plus haut.&nbsp;
                                            Chaque établissement a reçu un prix parce que nous considerons que la participation de chaque élève se doit d'être valorisée. Les scola…
                                        </div> #}
                
                                        <footer class="item-more-actions">
                                            <p><a class="btn btn-xs btn-white" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                        </footer>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-xl-4 add-spacing">
                                <div class="card bg-auto">
                                    <div class="item-header">
                                        <div class="figure" style="background-image: url({{ asset('front/images/gui-test.png'|imagine_filter('500L'))|replace({' ' : '%20'}) }});"></div>
                                    </div>
                                    <div class="item-content">
                                        <header>
                                            <h3 class="item-title h5 text-no-transform">
                                                <a href="#">EUROTUNNEL rejoint les partenaires actifs de la Fondation CGénial</a>
                                            </h3>
                                            {# <time class="date item-date" datetime="2018-05-28">28/05/2018</time> #}
                                        </header>
                
                                        {# <div class="item-desc">
                                            Découvrez le palmarès de la finale nationale du Concours CGénial 2018
                                            Pour connaitre les résultats de cette finale exceptionnelle, cliquez sur le lien plus haut.&nbsp;
                                            Chaque établissement a reçu un prix parce que nous considerons que la participation de chaque élève se doit d'être valorisée. Les scola…
                                        </div> #}
                
                                        <footer class="item-more-actions">
                                            <p><a class="btn btn-xs btn-white" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                        </footer>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <pre class="text-center">Justify center - Témoignages</pre>
                <div class="module module-inview-index">
                        <div class="container">
                            <div class="row justify-content-center list-cards cards-testimonials">
                                <div class="col-xl-4 add-spacing">
                                    <div class="card bg-auto has-round-picture">
                                        <div class="item-header">
                                            <figure style="background-image: url({{ asset('front/images/gui-test.png') }});"></figure>
                                            <h3 class="item-title h6 text-no-transform">
                                                François S
                                            </h3>
                                            <p class="text-small">Professeur de Construction Mécanique</p>
                                        </div>
                                        <div class="item-content">
                                            <div class="item-desc quote">
                                                {{ include('Front/_component/icon.html.twig', {id: 'quote', class:'icon-quote'}) }}
                                                Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum
                                            </div>
                    
                                            <footer class="item-more-actions">
                                                <p><a class="btn btn-xs btn-white" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 add-spacing">
                                    <div class="card bg-auto has-round-picture">
                                        <div class="item-header">
                                            <figure style="background-image: url({{ asset('front/images/gui-test.png') }});"></figure>
                                            <h3 class="item-title h6 text-no-transform">
                                                François S
                                            </h3>
                                            <p class="text-small">Professeur de Construction Mécanique</p>
                                        </div>
                                        <div class="item-content">
                                            <div class="item-desc quote">
                                                {{ include('Front/_component/icon.html.twig', {id: 'quote', class:'icon-quote'}) }}
                                                Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum
                                            </div>
                    
                                            <footer class="item-more-actions">
                                                <p><a class="btn btn-xs btn-white" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 add-spacing">
                                    <div class="card bg-auto has-round-picture">
                                        <div class="item-header">
                                            <figure style="background-image: url({{ asset('front/images/gui-test.png') }});"></figure>
                                            <h3 class="item-title h6 text-no-transform">
                                                François S
                                            </h3>
                                            <p class="text-small">Professeur de Construction Mécanique</p>
                                        </div>
                                        <div class="item-content">
                                            <div class="item-desc quote">
                                                {{ include('Front/_component/icon.html.twig', {id: 'quote', class:'icon-quote'}) }}
                                                Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum
                                            </div>
                    
                                            <footer class="item-more-actions">
                                                <p><a class="btn btn-xs btn-white" href="#">{{ 'word.learn_more'|trans({}, 'word') }}</a></p>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

            </div>

            <div class="after_body">
                
            </div>
        </div>

        {# include footer #}
        {#% include "Front/_part/footer.html.twig" %#}

        {# JavaScript files #}
        <script src="{{ asset('front/scripts/main.js'|asset_rev) }}"></script>
        <script src="{{ asset('front/scripts/lib/bxslider/jquery.bxslider.min.js') }}"></script>
    </body>
</html>
