Web Styleguide
  • 4.1.1

Home 

<div class="navbar navbar--sticky">
    <div class="navbar__body">
        <a href="#" class="navbar__brand" title="Liip">
            <div class="logo">
                <svg class="logo__L" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.7 49">
                    <path d="M0.1,46.8h29.6v-9.7H11.2V2.5H0.4v44.3H0.1z M0.1,46.8h29.6v-9.7H11.2V2.5H0.4v44.3H0.1z"></path>
                </svg>
                <svg class="logo__II" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.8 49">
                    <path d="M13.5,48.3L35.2,5.1l-9.6-4.9L3.8,43.4L13.5,48.3 M38.6,48.3L60.4,5.1l-9.7-4.9L28.9,43.4
    L38.6,48.3"></path>
                </svg>
                <svg class="logo__P" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.9 49">
                    <path d="M3.4,2.5v44.3h10.8V31h6.6c9.8,0,15-7,15-14.2c0-7.3-5.3-14.2-15-14.2H3.4L3.4,2.5z M14.3,12.3
    h6.1c3,0,4.7,2.2,4.7,4.5s-1.7,4.5-4.7,4.5h-6.1V12.3L14.3,12.3z"></path>
                </svg>
            </div>
        </a>

        <button class="navbar__toggle btn btn--bare" data-toggle="collapse" data-target=".navbar__collapse" title="Toggle navbar">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="navbar-hamburger icon">
                <rect x="4" y="5" width="16" height="2" class="navbar-hamburger__first" />
                <rect x="4" y="11" width="16" height="2" class="navbar-hamburger__second" />
                <rect x="4" y="17" width="16" height="2" class="navbar-hamburger__third" />
            </svg>
        </button>
        <nav class="navbar__collapse collapse">
            <ul class="navbar-menu">
                <li><a href="#" class="navbar-menu__link">Services</a></li>
                <li><a href="#" class="navbar-menu__link">Projects</a></li>
                <li><a href="#" class="navbar-menu__link">Team</a></li>
                <li><a href="#" class="navbar-menu__link">Blog</a></li>
            </ul>
        </nav>
    </div>
</div>

<div class="section section--fit section--behind-navbar">
    <div class="section__body">
        <div class="haiku">
            <div class="haiku__intro">Tuesday 10:21</div>
            <div class="haiku__title"><span class="haiku__number">150</span> self managed employees <a href="#">crafting digital solutions</a></div>
        </div>

    </div>
    <div class="section__continue">
        <svg class="icon icon--chevron-down icon--100 md-icon--200">
            <use xlink:href="../../assets/icons.svg#chevron-down" />
        </svg>

    </div>
</div>

<div class="section">
    <div class="section__body">
        <ul class="expertises-tiles">

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--ecommerce expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#ecommerce" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            E-commerce
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--content-management expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#content-management" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Content Management
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--user-experience expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#user-experience" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            User Experience
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--mobile expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#mobile" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Mobile
                        </div>
                        <div class="expertise-tile__teaser">
                            Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--elearning expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#elearning" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            E-learning
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--api expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#api" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            API
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--open-source expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#open-source" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Open Data
                        </div>
                        <div class="expertise-tile__teaser">
                            Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--analytics expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#analytics" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Analytics
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--fintech expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#fintech" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Finance
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--seo expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#seo" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            SEO
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--service-design expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#service-design" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Service Design
                        </div>
                        <div class="expertise-tile__teaser">
                            Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--sea expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#sea" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            SEA
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--content expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#content" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Content
                        </div>
                        <div class="expertise-tile__teaser">
                            Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

            <li class="expertise-tiles__item">
                <a href="#" class="expertise-tile">
                    <div class="expertise-tile__body">
                        <svg class="icon icon--data-science expertise-tile__icon icon--150 sm-icon--200">
                            <use xlink:href="../../assets/icons.svg#data-science" />
                        </svg>

                        <div class="expertise-tile__title h3 mrgt">
                            Data Science
                        </div>
                        <div class="expertise-tile__teaser">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.
                        </div>
                    </div>
                </a>

            </li>

        </ul>

    </div>
</div>

<div class="section">
    <div class="section__body">
        <div class="grid grid--large grid--multiline">
            <div class="grid__item md-w-1/2 lg-w-1/3">
                <div class="article-card">
                    <a href="#" class="article-card__link">
                        <figure class="image-branded">
                            <img src="/assets/images/hero/1.jpg" alt="Happy Liipers who just won the Best of Swiss Web gold award in creation" class="img-block">
                        </figure>

                        <h3 class="article-card__title">Guacamole toast: a case study in-depth</h3>
                        <p class="article-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil quas error illum, inventore modi commodi voluptates doloribus incidunt saepe in explicabo omnis distinctio fugiat? Velit illo tempora, adipisci aut.</p>
                    </a>

                    <a href="#" class="liiper-card media media--middle liiper-card--small media--small">
                        <div class="media__left">
                            <div class="liiper-card__avatar avatar" style="background-image:url('https://liip.rokka.io/zebra_squared/f436dfa764a883d45c24d4d25ecbc6a0269118c1.jpeg')"></div>
                        </div>
                        <div class="media__body">
                            <div class="liiper-card__name">Raphaël Santos</div>
                            <div class="liiper-card__role">Awesome liiper</div>
                        </div>
                    </a>

                </div>

            </div>
            <div class="grid__item md-w-1/2 lg-w-1/3">
                <div class="article-card">
                    <a href="#" class="article-card__link">
                        <figure class="image-branded">
                            <img src="/assets/images/hero/1.jpg" alt="Happy Liipers who just won the Best of Swiss Web gold award in creation" class="img-block">
                        </figure>

                        <h3 class="article-card__title">Guacamole toast: a case study in-depth</h3>
                        <p class="article-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil quas error illum, inventore modi commodi voluptates doloribus incidunt saepe in explicabo omnis distinctio fugiat? Velit illo tempora, adipisci aut.</p>
                    </a>

                    <a href="#" class="liiper-card media media--middle liiper-card--small media--small">
                        <div class="media__left">
                            <div class="liiper-card__avatar avatar" style="background-image:url('https://liip.rokka.io/zebra_squared/3f46a91ca11ae079cedfd6b8c23f1dbb34e828e5.jpeg')"></div>
                        </div>
                        <div class="media__body">
                            <div class="liiper-card__name">Stefanie Taepke</div>
                            <div class="liiper-card__role">Awesome liiper</div>
                        </div>
                    </a>

                </div>

            </div>
            <div class="grid__item md-w-1/2 lg-w-1/3 hidden-md-down">
                <div class="article-card">
                    <a href="#" class="article-card__link">
                        <figure class="image-branded">
                            <img src="/assets/images/hero/1.jpg" alt="Happy Liipers who just won the Best of Swiss Web gold award in creation" class="img-block">
                        </figure>

                        <h3 class="article-card__title">Guacamole toast: a case study in-depth</h3>
                        <p class="article-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nihil quas error illum, inventore modi commodi voluptates doloribus incidunt saepe in explicabo omnis distinctio fugiat? Velit illo tempora, adipisci aut.</p>
                    </a>

                    <a href="#" class="liiper-card media media--middle liiper-card--small media--small">
                        <div class="media__left">
                            <div class="liiper-card__avatar avatar" style="background-image:url('https://liip.rokka.io/zebra_squared/9a6e4e039325007f185f501c7cc25b319d9fc9b4.jpeg')"></div>
                        </div>
                        <div class="media__body">
                            <div class="liiper-card__name">Laurent Prodon</div>
                            <div class="liiper-card__role">Awesome liiper</div>
                        </div>
                    </a>

                </div>

            </div>
        </div>

    </div>
</div>

<div class="section">
    <div class="section__body">
        <h2 class="text-center mrgt0 mrgb+">Contact us</h2>
        <form action="" id="contact-form" class="contact-form">
            <div class="contact-form__body box box--default md-pdg+">
                <div class="contact-form__step-1">
                    <div class="form-group">
                        <label for="message" class="field-label pdgt0">Message <abbr class="text-muted" title="Required field">*</abbr></label>
                        <textarea id="message" name="message" rows="4" class="contact-form__message field field--ghost field--large pdgt0" placeholder="Write your message here…" required></textarea>
                    </div>
                </div>
                <div class="contact-form__step-2 collapse">
                    <div class="pdgt+">
                        <div class="grid grid--large grid--multiline grid--bottom">
                            <div class="grid__item sm-w-1/2 xl-w-1/4">
                                <div class="form-group">
                                    <label for="name" class="field-label pdgt0">Name <abbr class="text-muted" title="Required field">*</abbr></label>
                                    <input type="text" id="name" name="name" class="contact-form__name field field--light field--primary pdgt0" required>
                                </div>
                            </div>
                            <div class="grid__item sm-w-1/2 xl-w-1/4">
                                <div class="form-group">
                                    <label for="email" class="field-label pdgt0">E-mail <abbr class="text-muted" title="Required field">*</abbr></label>
                                    <input type="email" id="email" name="email" class="contact-form__email field field--light field--primary pdgt0" required>
                                </div>
                            </div>
                            <div class="grid__item sm-w-1/2 xl-w-1/4">
                                <div class="form-group">
                                    <label for="phone" class="field-label pdgt0">Phone</label>
                                    <input type="text" id="phone" name="phone" class="contact-form__phone field field--light field--primary pdgt0" required>
                                </div>
                            </div>
                            <div class="grid__item sm-w-1/2 xl-w-1/4">
                                <button type="submit" class="btn btn--primary btn--block">Send</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <script type="text/javascript">
            window.addEventListener('DOMContentLoaded', function() {
                var form = document.querySelector('#contact-form');
                if (form) {
                    new Styleguide.ContactForm(form);
                }
            })
        </script>

    </div>
</div>

<footer class="footer">
    <div class="section">
        <div class="section__body">
            <div class="addresses grid grid--multiline">
                <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
                    <article class="address address--300">
                        <div class="address__weather">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
                                <path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
                                <circle cx="12" cy="15.6" r=".7" />
                                <path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" /></svg>
                        </div>
                        <h2 class="h4 address__title">Lausanne</h2>
                        <address class="address__body">
                            Rue de la Banque 1<br>
                            PO box 917<br>
                            CH-1701 Fribourg<br>
                            Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
                        </address>
                        <a href="#" class="address__map-link">Open Map</a>
                    </article>

                </div>
                <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
                    <article class="address address--400">
                        <div class="address__weather">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
                                <path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
                                <circle cx="12" cy="15.6" r=".7" />
                                <path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" /></svg>
                        </div>
                        <h2 class="h4 address__title">Fribourg</h2>
                        <address class="address__body">
                            Rue de la Banque 1<br>
                            PO box 917<br>
                            CH-1701 Fribourg<br>
                            Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
                        </address>
                        <a href="#" class="address__map-link">Open Map</a>
                    </article>

                </div>
                <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
                    <article class="address address--500">
                        <div class="address__weather">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
                                <path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
                                <circle cx="12" cy="15.6" r=".7" />
                                <path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" /></svg>
                        </div>
                        <h2 class="h4 address__title">Bern</h2>
                        <address class="address__body">
                            Rue de la Banque 1<br>
                            PO box 917<br>
                            CH-1701 Fribourg<br>
                            Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
                        </address>
                        <a href="#" class="address__map-link">Open Map</a>
                    </article>

                </div>
                <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
                    <article class="address address--600">
                        <div class="address__weather">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
                                <path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
                                <circle cx="12" cy="15.6" r=".7" />
                                <path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" /></svg>
                        </div>
                        <h2 class="h4 address__title">Zürich</h2>
                        <address class="address__body">
                            Rue de la Banque 1<br>
                            PO box 917<br>
                            CH-1701 Fribourg<br>
                            Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
                        </address>
                        <a href="#" class="address__map-link">Open Map</a>
                    </article>

                </div>
                <div class="grid__item sm-w-1/2 md-w-1/3 lg-w-1/5">
                    <article class="address address--700">
                        <div class="address__weather">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon icon--200">
                                <path d="M21.9 10.9c.3-1.1.1-2.3-.6-3.2-.8-1.1-2-1.7-3.3-1.7-1-2.4-3.4-4-6-4-3.4 0-6.2 2.7-6.5 6-3.1.3-5.5 2.9-5.5 6 0 3.3 2.7 6 6 6h13c2.8 0 5-2.2 5-5 0-1.6-.8-3.1-2.1-4.1zM19 19H6c-2.8 0-5-2.2-5-5s2.2-5 5-5c.3 0 .5-.2.5-.5C6.5 5.5 9 3 12 3c2.3 0 4.4 1.5 5.2 3.7.1.2.3.3.5.3 1.1-.1 2.1.4 2.7 1.2.6.9.8 1.8.4 2.8-.1.2 0 .5.2.6 1.2.7 2 2 2 3.4 0 2.2-1.8 4-4 4z" />
                                <circle cx="12" cy="15.6" r=".7" />
                                <path d="M12 7.2c-1.4 0-2.6 1.2-2.6 2.6 0 .3.2.5.5.5s.5-.2.5-.5c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.3 0-.5.2-.5.5V14c0 .3.2.5.5.5s.5-.2.5-.5v-1.6c1.2-.2 2.1-1.3 2.1-2.5 0-1.6-1.2-2.7-2.6-2.7z" /></svg>
                        </div>
                        <h2 class="h4 address__title">St Gallen</h2>
                        <address class="address__body">
                            Rue de la Banque 1<br>
                            PO box 917<br>
                            CH-1701 Fribourg<br>
                            Phone: <a href="tel:+41264222511" class="link-text">+41 26 422 25 11</a>
                        </address>
                        <a href="#" class="address__map-link">Open Map</a>
                    </article>

                </div>
            </div>
        </div>
    </div>

    <hr class="mrgv0">

    <div class="section pdgv md-pdgv+">
        <div class="section__body">
            <ul class="list-inline list-inline--tight list-inline--center">
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Jobs</a></li>
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Contact</a></li>
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Open-source</a></li>
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Press</a></li>
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Code of Conduct</a></li>
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Privacy Policy</a></li>
                <li class="mrgv-- mrgh- md-mrgh"><a href="#" class="btn btn--bare">Impressum</a></li>
            </ul>
        </div>
    </div>

    <hr class="mrgv0">

    <div class="section">
        <div class="section__body">
            <div class="grid grid--large grid--middle grid--multiline">
                <div class="grid__item sm-w-1/2 lg-w-2/3">
                    <ul class="actions">
                        <li>
                            <label for="language-switcher" class="visible-sr">Language</label>
                            <select class="language-switcher field " id="language-switcher">
                                <option>English</option>
                                <option>Deutsch</option>
                                <option>Français</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <div class="grid__item sm-w-1/2 lg-w-1/3">
                    <ul class="list-inline list-inline--justified">
                        <li>
                            <a href="https://www.facebook.com/liipag" class="link-text" title="Facebook">
                                <svg class="icon icon--facebook icon--100 md-icon--150">
                                    <use xlink:href="../../assets/icons.svg#facebook" />
                                </svg>

                            </a>
                        </li>
                        <li>
                            <a href="https://twitter.com/liip" class="link-text" title="Twitter">
                                <svg class="icon icon--twitter icon--100 md-icon--150">
                                    <use xlink:href="../../assets/icons.svg#twitter" />
                                </svg>

                            </a>
                        </li>
                        <li>
                            <a href="https://www.instagram.com/liip_ch" class="link-text" title="Instagram">
                                <svg class="icon icon--instagram icon--100 md-icon--150">
                                    <use xlink:href="../../assets/icons.svg#instagram" />
                                </svg>

                            </a>
                        </li>
                        <li>
                            <a href="https://github.com/liip" class="link-text" title="GitHub">
                                <svg class="icon icon--github icon--100 md-icon--150">
                                    <use xlink:href="../../assets/icons.svg#github" />
                                </svg>

                            </a>
                        </li>
                        <li>
                            <a href="https://www.linkedin.com/company/267051" class="link-text" title="LinkedIn">
                                <svg class="icon icon--linkedin icon--100 md-icon--150">
                                    <use xlink:href="../../assets/icons.svg#linkedin" />
                                </svg>

                            </a>
                        </li>
                        <li>
                            <a href="#" class="link-text" title="RSS Feed">
                                <svg class="icon icon--rss icon--100 md-icon--150">
                                    <use xlink:href="../../assets/icons.svg#rss" />
                                </svg>

                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

<script>
    window.addEventListener('DOMContentLoaded', function() {
        var navbar = document.querySelector('.navbar');
        new Styleguide.Navbar(navbar);
    });
</script>
 
{% render '@navbar', { modifier: 'navbar--sticky' } %}

<div class="section section--fit section--behind-navbar">
  <div class="section__body">
    {% render '@sentence--default' %}
  </div>
  <div class="section__continue">
    {% render '@icon', { id: "chevron-down", class: "icon--100 md-icon--200" } %}
  </div>
</div>

<div class="section">
  <div class="section__body">
    {% render '@expertises-tiles' %}
  </div>
</div>

<div class="section">
  <div class="section__body">
    {% render '@article-cards-list' %}
  </div>
</div>

<div class="section">
  <div class="section__body">
    <h2 class="text-center mrgt0 mrgb+">Contact us</h2>
    {% render '@contact-form' %}
  </div>
</div>

{% render '@footer' %}

<script>
window.addEventListener('DOMContentLoaded', function() {
  var navbar = document.querySelector('.navbar');
  new Styleguide.Navbar(navbar);
});
</script>
 
expertises:
  - name: E-commerce
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: ecommerce
  - name: Content Management
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: content-management
  - name: User Experience
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: user-experience
  - name: Mobile
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: mobile
  - name: E-learning
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: elearning
  - name: API
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: api
  - name: Open Data
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: open-source
  - name: Analytics
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: analytics
  - name: Finance
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: fintech
  - name: SEO
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: seo
  - name: Service Design
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: service-design
  - name: SEA
    teaser: Lorem ipsum dolor sit amet consectetur adipisicing elit.
    icon: sea
  - name: Content
    teaser: 'Nam, commodi excepturi? Eius, voluptates quia dolorem obcaecat.'
    icon: content
  - name: Data Science
    teaser: >-
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, commodi
      excepturi? Eius, voluptates quia dolorem obcaecat.
    icon: data-science
liipers:
  - name: Hannes Gassert
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d1996e9334b17b85162f7f9b9f65ad19403e44a7.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d1996e9334b17b85162f7f9b9f65ad19403e44a7.jpeg
  - name: Nadja Perroulaz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fe9af5612b6b9b5f4c89c2f067a6148903934a2d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fe9af5612b6b9b5f4c89c2f067a6148903934a2d.jpeg
  - name: Gerhard Andrey
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/50f1c94fc7d926f6a29e80b7edcd2cd9ffb04b74.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/50f1c94fc7d926f6a29e80b7edcd2cd9ffb04b74.jpeg
  - name: Brian King
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/66ef3db52a066525e6769644a5e248092be5ed49.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/66ef3db52a066525e6769644a5e248092be5ed49.jpeg
  - name: Christian Stocker
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/b537639e539efcc3df4459ef87c5963aa5079ca6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/b537639e539efcc3df4459ef87c5963aa5079ca6.jpeg
  - name: Adrian Schlegel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1b0ece9c2eb862a4dd151a48f135f94f440e4eb6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1b0ece9c2eb862a4dd151a48f135f94f440e4eb6.jpeg
  - name: David Buchmann
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6b2c6d04335a90b5b9f9f04218b6955ae4ad6fd4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6b2c6d04335a90b5b9f9f04218b6955ae4ad6fd4.jpeg
  - name: Benjamin Wohlwend
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c32ffcf03142c133a405f609a2dfe094f8eeccb8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c32ffcf03142c133a405f609a2dfe094f8eeccb8.jpeg
  - name: Lukas Kahwe Smith
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7fd5ff8888ea580f6f6388b5aaf9860a6fe2aafb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7fd5ff8888ea580f6f6388b5aaf9860a6fe2aafb.jpeg
  - name: Pascal Helfenstein
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/71af1da1d9803c01fad45271ed6be984a0a373d1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/71af1da1d9803c01fad45271ed6be984a0a373d1.jpeg
  - name: Jean-Christophe Zulian
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/80d1c7a194a3f0cc88fbf2c018a1b2c4e1e9ace5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/80d1c7a194a3f0cc88fbf2c018a1b2c4e1e9ace5.jpeg
  - name: Kevin Müller
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/23d4cfc3da49820a106c2c6ec402f0e8a62cc155.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/23d4cfc3da49820a106c2c6ec402f0e8a62cc155.jpeg
  - name: Thomas Botton
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4906043129d24e2de21e20763dee3aae4d756419.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4906043129d24e2de21e20763dee3aae4d756419.jpeg
  - name: Tonio Zemp
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7608a1879cab18ae98b168fe2566fbe2acee7532.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7608a1879cab18ae98b168fe2566fbe2acee7532.jpeg
  - name: Jonas Vonlanthen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/56047d3f6510ac9e25049fa1eeba7e90e09238b4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/56047d3f6510ac9e25049fa1eeba7e90e09238b4.jpeg
  - name: Laurent Prodon
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9a6e4e039325007f185f501c7cc25b319d9fc9b4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9a6e4e039325007f185f501c7cc25b319d9fc9b4.jpeg
  - name: Benoît Pointet
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/134656a229d9debdf16306e854bdb8af99a4f529.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/134656a229d9debdf16306e854bdb8af99a4f529.jpeg
  - name: Zahida Huber
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/798f26af9f8856ea94332303dc9efbec07261248.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/798f26af9f8856ea94332303dc9efbec07261248.jpeg
  - name: Philipp Egli
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/76912ad62ae380826b5cc5bb8f26cd6ffe189ef1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/76912ad62ae380826b5cc5bb8f26cd6ffe189ef1.jpeg
  - name: Sylvain Fankhauser
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a1e3bb55f1fa078996c01542fc9182024760f477.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a1e3bb55f1fa078996c01542fc9182024760f477.jpeg
  - name: Donato Rotunno
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/aba39a1483a52b24a9acf800223e534181b8e583.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/aba39a1483a52b24a9acf800223e534181b8e583.jpeg
  - name: Colin Frei
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e9fce3c6a1e86ecb4132aa155e6c287ed155bac2.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e9fce3c6a1e86ecb4132aa155e6c287ed155bac2.jpeg
  - name: Geoffroy Perriard
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6c766ec7924fd6b6d98a7761ac36d8f23353b64d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6c766ec7924fd6b6d98a7761ac36d8f23353b64d.jpeg
  - name: Andreas Amsler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1cf73618f9b49243344809df44ea5124765102f6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1cf73618f9b49243344809df44ea5124765102f6.jpeg
  - name: David Jeanmonod
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ce8785b49c319b17a7e20acf772de449aa4a0680.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ce8785b49c319b17a7e20acf772de449aa4a0680.jpeg
  - name: Boris Hofer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8d2506eb8e050b82125a872f44734ebc9a54a9d8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8d2506eb8e050b82125a872f44734ebc9a54a9d8.jpeg
  - name: Noora Suurnäkki
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/10cd2e343a37a7f9ec4387ecb8564595dee8288e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/10cd2e343a37a7f9ec4387ecb8564595dee8288e.jpeg
  - name: Dorian Villet
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/40e86ead6976ee5b80b6987aa94e95b008511b1c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/40e86ead6976ee5b80b6987aa94e95b008511b1c.jpeg
  - name: Didier Raboud
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d244587eb94db7ba721bb1008b2b00c3e9a931be.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d244587eb94db7ba721bb1008b2b00c3e9a931be.jpeg
  - name: Christoph Meier
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/cd7269446dfb84f339ef670104479a3e286551a8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/cd7269446dfb84f339ef670104479a3e286551a8.jpeg
  - name: Melanie Mächler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3ecc89c259acbbbb20aec2532619832b9401c710.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3ecc89c259acbbbb20aec2532619832b9401c710.jpeg
  - name: Tobias Schultze
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f562a03ff9f7738f13399de88a9c188d395bc702.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f562a03ff9f7738f13399de88a9c188d395bc702.jpeg
  - name: Cédric Hofstetter
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/78851412d830f7f6446f6d0286a6577aa4dc15cb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/78851412d830f7f6446f6d0286a6577aa4dc15cb.jpeg
  - name: Stefan Oderbolz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/b7d007cc0f2bfd96472b766ec45c6bca6e50794a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/b7d007cc0f2bfd96472b766ec45c6bca6e50794a.jpeg
  - name: Tiziano Rullo
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/de61471b4e4c7431829f238163163645426c2921.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/de61471b4e4c7431829f238163163645426c2921.jpeg
  - name: Jan Hug
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/885160d7d78bbc763a379684715f02f92b8a5ecd.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/885160d7d78bbc763a379684715f02f92b8a5ecd.jpeg
  - name: Andreas Frey Sang
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8b0351cf494581f88637636c20ed1ae25ac463a7.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8b0351cf494581f88637636c20ed1ae25ac463a7.jpeg
  - name: Rita Barracha
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/02111c9a0564dd1dfcdf277974b3f12bfac85c4c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/02111c9a0564dd1dfcdf277974b3f12bfac85c4c.jpeg
  - name: Daniel Frey
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1071f47e912f78d3a1587e8db089937110b514e5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1071f47e912f78d3a1587e8db089937110b514e5.jpeg
  - name: Martin Janser
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c2195c36709f4b76d6fb0a45cdab50ffd670be7d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c2195c36709f4b76d6fb0a45cdab50ffd670be7d.jpeg
  - name: Noé Froidevaux
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1693b9c30121ef5b67130b471c632234bb13fce1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1693b9c30121ef5b67130b471c632234bb13fce1.jpeg
  - name: Fabian Schweizer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/0251807e7dc281731e6f63ccccb5528c2e1bcbbf.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/0251807e7dc281731e6f63ccccb5528c2e1bcbbf.jpeg
  - name: Matthieu Cornut
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9f2af2535358ec849d1bb955e689805e4481372a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9f2af2535358ec849d1bb955e689805e4481372a.jpeg
  - name: Christian Riesen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f439e5034cd83c1fad1cae2e1a983fb0cc0ad82e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f439e5034cd83c1fad1cae2e1a983fb0cc0ad82e.jpeg
  - name: François Bruneau
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e355745ff9d444e9b665dabd6506b42496afc246.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e355745ff9d444e9b665dabd6506b42496afc246.jpeg
  - name: Daniel Lanz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8276d02973e283407a473b0aa8ea71585a6d0000.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8276d02973e283407a473b0aa8ea71585a6d0000.jpeg
  - name: Pascal Thormeier
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/181f2a704f3cde4bd0cae4e790728c5f1dbc7ee6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/181f2a704f3cde4bd0cae4e790728c5f1dbc7ee6.jpeg
  - name: Rae Knowler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fdce424983dea400525c5f2ec48499d145236d48.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fdce424983dea400525c5f2ec48499d145236d48.jpeg
  - name: Nadia Fischer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a475cd0044c258bd6febf44f856d371a2a0bcb36.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a475cd0044c258bd6febf44f856d371a2a0bcb36.jpeg
  - name: Michelle Sanver
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/2545e444c6b43cb97a3f5159c60f253a7b10ca07.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/2545e444c6b43cb97a3f5159c60f253a7b10ca07.jpeg
  - name: Nicolas Dougoud
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/75dfce993993303a4bc4c9b5ed162c1258e5a038.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/75dfce993993303a4bc4c9b5ed162c1258e5a038.jpeg
  - name: Theres Scherrer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3458b1d977968dc1f1e8b60e3be7423e6ecca165.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3458b1d977968dc1f1e8b60e3be7423e6ecca165.jpeg
  - name: Pascal Cudré
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7e812c45798f7d528a56a1fb0cb57f0e282c7753.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7e812c45798f7d528a56a1fb0cb57f0e282c7753.jpeg
  - name: Benoît Burgener
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ee55d4df1b1475cbd278311185b2a5740c4cfdc9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ee55d4df1b1475cbd278311185b2a5740c4cfdc9.jpeg
  - name: Marlene Stroj-Rullo
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6b43ee08887985cee734d5008a7228ddfec3a0f9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6b43ee08887985cee734d5008a7228ddfec3a0f9.jpeg
  - name: Yves Bertrand
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/40270077658ad9940f340050220ea9a5a833c2a5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/40270077658ad9940f340050220ea9a5a833c2a5.jpeg
  - name: Maxim Gubar
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7e10c4f975e6c8662fdc3de16de358f3d83fb896.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7e10c4f975e6c8662fdc3de16de358f3d83fb896.jpeg
  - name: Olivia Müller
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/2129be20080aeadbd05c408dc5eb8571eaa1fd6b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/2129be20080aeadbd05c408dc5eb8571eaa1fd6b.jpeg
  - name: Jonathan Macheret
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e2a1aedd9c74d7073ba3b2c30882e77382969051.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e2a1aedd9c74d7073ba3b2c30882e77382969051.jpeg
  - name: Lennart Jegge
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ef3a19d9508890d2114ebb3422efc16aa8d50ccc.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ef3a19d9508890d2114ebb3422efc16aa8d50ccc.jpeg
  - name: Darja Gartner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/90677823827e0f468c63481599040fba00a3955e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/90677823827e0f468c63481599040fba00a3955e.jpeg
  - name: Dominique Sorg
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/aef32ff84340a560490f86420a295ba96b438775.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/aef32ff84340a560490f86420a295ba96b438775.jpeg
  - name: Marc Brühwiler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/53621f3f8e379ec75ec0e64e59775a1c147bcdfe.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/53621f3f8e379ec75ec0e64e59775a1c147bcdfe.jpeg
  - name: Jennifer Bächtold
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/124ecadc4c5311d5ff05b065663639a3ec1d2612.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/124ecadc4c5311d5ff05b065663639a3ec1d2612.jpeg
  - name: Kilian Schefer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9b42a053cf2bd11ce4005d80527cbfecd8b391c8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9b42a053cf2bd11ce4005d80527cbfecd8b391c8.jpeg
  - name: Fabio Santschi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d95bd1a844869008cf35773a151598f72572849e.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d95bd1a844869008cf35773a151598f72572849e.jpeg
  - name: Tatjana Nebel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9944e5add255c563d41ab22ceb13ec06eaafa201.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9944e5add255c563d41ab22ceb13ec06eaafa201.jpeg
  - name: Maximilian Lemke
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/bd4805586ccb82a1f599ce3104e79210602eec8f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/bd4805586ccb82a1f599ce3104e79210602eec8f.jpeg
  - name: Bettina Brennwald
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/cc8898782e14b35f27d24e3bf7533176a5ed6f9b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/cc8898782e14b35f27d24e3bf7533176a5ed6f9b.jpeg
  - name: Pedro Couto
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f33d0117be4dd474f6551cb5d800b6202d8ae9f6.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f33d0117be4dd474f6551cb5d800b6202d8ae9f6.jpeg
  - name: Sylvain Aerni
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/acfc20e5b9c26ab3ac603192d95fe6f10b06707c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/acfc20e5b9c26ab3ac603192d95fe6f10b06707c.jpeg
  - name: Philippe Savary
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ba86f518243215bdb8e6de3f3bc0ff6b0451c56b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ba86f518243215bdb8e6de3f3bc0ff6b0451c56b.jpeg
  - name: Jürg Hunziker
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4bee8b607dbd0131aa6a3fa6b37db23696b4e113.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4bee8b607dbd0131aa6a3fa6b37db23696b4e113.jpeg
  - name: Emanuele Panzeri
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/ba3462765617c21d95700ccbb8962791f23399b7.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/ba3462765617c21d95700ccbb8962791f23399b7.jpeg
  - name: Ludovic Turmel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1f2052974d02513cae8fa2a3c6d5ff8e698f439c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1f2052974d02513cae8fa2a3c6d5ff8e698f439c.jpeg
  - name: Karine Chor
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/22a8134e4effa3e4a4a8d599e83412541fd7ac54.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/22a8134e4effa3e4a4a8d599e83412541fd7ac54.jpeg
  - name: David Jordan
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/961b857ab12f6495049d6662de0a3e73079d1799.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/961b857ab12f6495049d6662de0a3e73079d1799.jpeg
  - name: Mathieu Barras
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4ad27d39e859a9f99d724bf7b209c30326cde42c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4ad27d39e859a9f99d724bf7b209c30326cde42c.jpeg
  - name: Laura Helfer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/92e7e4bd76ca54965eb738a578a2d088493920fd.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/92e7e4bd76ca54965eb738a578a2d088493920fd.jpeg
  - name: Martin Meier
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/cb1df65df8e5ee59273dba41066d4d4e6e480e5c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/cb1df65df8e5ee59273dba41066d4d4e6e480e5c.jpeg
  - name: Łukasz Gintowt
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7e2501881edae1cdd1b68c6319075bc900568574.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7e2501881edae1cdd1b68c6319075bc900568574.jpeg
  - name: András Czövek
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/5b3b5cc7277e7dc63c45494854b49d2b6eff6c86.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/5b3b5cc7277e7dc63c45494854b49d2b6eff6c86.jpeg
  - name: Thierry Krummenacher
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a423c3b95c567dc5bb8ee85586944b635a5eb93a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a423c3b95c567dc5bb8ee85586944b635a5eb93a.jpeg
  - name: Tim Keller
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/88920033615941080f144fdd84877f303d9ded64.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/88920033615941080f144fdd84877f303d9ded64.jpeg
  - name: Patrick Stadler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/310018864edaeec53e7b49b319f51bcf3d2009a8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/310018864edaeec53e7b49b319f51bcf3d2009a8.jpeg
  - name: Romina Borga
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/aaa846d96d1809b9bf37dbe1cf682317d089e9e9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/aaa846d96d1809b9bf37dbe1cf682317d089e9e9.jpeg
  - name: Stéphanie Möckli
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/8f792c7b4505c1d58a3b503fe399aec02b870903.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/8f792c7b4505c1d58a3b503fe399aec02b870903.jpeg
  - name: Luca Sardonini
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/0001cfcaa9fe13331ce41f3db403b4714670fbef.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/0001cfcaa9fe13331ce41f3db403b4714670fbef.jpeg
  - name: Christina Henkel
    avatar: null
  - name: Andrea Meyer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4e5afc143412665482c1d71839bae711d017c483.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4e5afc143412665482c1d71839bae711d017c483.jpeg
  - name: Tri Nhan Nguyen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/93db581bfa44ed9ed062a766d534e3327dac8281.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/93db581bfa44ed9ed062a766d534e3327dac8281.jpeg
  - name: Clarissa Küchler
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/108979f7c42625851ce5194d1d4a09c8b6572fcb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/108979f7c42625851ce5194d1d4a09c8b6572fcb.jpeg
  - name: Andrii Poplavskyi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c4c1ac9d1e5c4ca700947f098b934582e3eeb830.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c4c1ac9d1e5c4ca700947f098b934582e3eeb830.jpeg
  - name: Vera Lorenzi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6eef4e2a3bb27b306483ccb3a688b3125fbb4326.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6eef4e2a3bb27b306483ccb3a688b3125fbb4326.jpeg
  - name: Elena Rigamonti
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/28af72753d15da2418889d8a7beba3450daff8d0.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/28af72753d15da2418889d8a7beba3450daff8d0.jpeg
  - name: Thomas Riotte
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/03ab64a217bc2a78b58ac2659a5848592733aaeb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/03ab64a217bc2a78b58ac2659a5848592733aaeb.jpeg
  - name: Eléonore Leibzig
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/692842efb5aa1ada75d20f3ac7c006983a823b47.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/692842efb5aa1ada75d20f3ac7c006983a823b47.jpeg
  - name: Miriam Pretzlaff
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/806e2756f45f259c7bbe7b2256d10e24860da769.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/806e2756f45f259c7bbe7b2256d10e24860da769.jpeg
  - name: Alain Frapolli
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/78fbdf03c418eca0a6c69ecfb38703488254cf91.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/78fbdf03c418eca0a6c69ecfb38703488254cf91.jpeg
  - name: Michael Weibel
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a3f9101bca57a2ee78cd7e43f522bfed22a84401.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a3f9101bca57a2ee78cd7e43f522bfed22a84401.jpeg
  - name: Isaline Mülhauser
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/7cadeaaa4eec1bf05452ae1e73b957e89cd8afc9.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/7cadeaaa4eec1bf05452ae1e73b957e89cd8afc9.jpeg
  - name: Fabian Ryf
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/34a1fa530b3f6f25084c44d492429bf721f372b2.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/34a1fa530b3f6f25084c44d492429bf721f372b2.jpeg
  - name: Marcel Tanner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/04496e5f09de05b27799751cadebe173e7721366.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/04496e5f09de05b27799751cadebe173e7721366.jpeg
  - name: Biram Ly
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fac224afbe7adc76c9fe83dbecb49f07ff99639f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fac224afbe7adc76c9fe83dbecb49f07ff99639f.jpeg
  - name: David Pacassi Torrico
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/bb3cd390c99b41aca650867257c6cb3d04dba589.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/bb3cd390c99b41aca650867257c6cb3d04dba589.jpeg
  - name: Stefanie Taepke
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3f46a91ca11ae079cedfd6b8c23f1dbb34e828e5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3f46a91ca11ae079cedfd6b8c23f1dbb34e828e5.jpeg
  - name: Yaren Kurt
    avatar: null
  - name: Thomas Ebermann
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c8c15bc7cf5d31e20e1fed8171a0fba4c365943f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c8c15bc7cf5d31e20e1fed8171a0fba4c365943f.jpeg
  - name: Yuri Bänninger
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/5a656374b4c46c553a05f9a9dec578799483b994.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/5a656374b4c46c553a05f9a9dec578799483b994.jpeg
  - name: Marton Orehovszky
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e524fd9d2271a77d7e9b906712915e5cebb9c638.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e524fd9d2271a77d7e9b906712915e5cebb9c638.jpeg
  - name: Christof Leuenberger
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c9d2f885c1d1001c743322d16965c99e62129dbb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c9d2f885c1d1001c743322d16965c99e62129dbb.jpeg
  - name: Stefan Schweingruber
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3badb152227bca02c180c21d0e5d988e968c701d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3badb152227bca02c180c21d0e5d988e968c701d.jpeg
  - name: Philipp Klein
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/41a69077347878790df4da3b7ebca859a30378a4.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/41a69077347878790df4da3b7ebca859a30378a4.jpeg
  - name: Sascha Aeppli
    avatar: null
  - name: Fabio Anderegg
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/14c0b1e3e31afd3275b0458b61d381f4a192bc9b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/14c0b1e3e31afd3275b0458b61d381f4a192bc9b.jpeg
  - name: Joscha Jenni
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/11e8ad00f4e7f6cb12212997278ffc70eab8ac1d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/11e8ad00f4e7f6cb12212997278ffc70eab8ac1d.jpeg
  - name: Viktoria Kluckner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/b47318240c933133ce85b9b8600eb17e05f8d55f.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/b47318240c933133ce85b9b8600eb17e05f8d55f.jpeg
  - name: Claes Lennman
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/fb2cc8366791101735ca68ce8457545e59ce5c9a.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/fb2cc8366791101735ca68ce8457545e59ce5c9a.jpeg
  - name: Robert Filipponi
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/055fb5927052664a41b1e54b9fb1843a9563770b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/055fb5927052664a41b1e54b9fb1843a9563770b.jpeg
  - name: Krisztian Kovacs
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/4f6ba46fdb03972827e771aa9674252d1277d0ec.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/4f6ba46fdb03972827e771aa9674252d1277d0ec.jpeg
  - name: Urs Stucki
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9fa12182067e5c5ed3dab7210e412ea38ccca17b.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9fa12182067e5c5ed3dab7210e412ea38ccca17b.jpeg
  - name: Julia Hertrich
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9330e1f70e90c79f4681b00814784dfa4ca14754.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9330e1f70e90c79f4681b00814784dfa4ca14754.jpeg
  - name: Jonas Schmid
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6faa6426c257058bbeae570c285e5469464f381c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6faa6426c257058bbeae570c285e5469464f381c.jpeg
  - name: Ksénia Jonin
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/24fa7ad0fe78e5f309fb36d3f37c3d0a317a60df.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/24fa7ad0fe78e5f309fb36d3f37c3d0a317a60df.jpeg
  - name: Raphaël Santos
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f436dfa764a883d45c24d4d25ecbc6a0269118c1.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f436dfa764a883d45c24d4d25ecbc6a0269118c1.jpeg
  - name: Romain Sickenberg
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/068ab091799e4843044a9d695d32e77a6b3bc9bf.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/068ab091799e4843044a9d695d32e77a6b3bc9bf.jpeg
  - name: Janina Kürsteiner
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/c6a616c992490e400c5626ccce2189db12752ebb.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/c6a616c992490e400c5626ccce2189db12752ebb.jpeg
  - name: Jonas Wyssen
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d25995ccefa39d12527fc8bed6b070be421a9ba3.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d25995ccefa39d12527fc8bed6b070be421a9ba3.jpeg
  - name: Sonja Nydegger
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d9efdc28f4567d83b93ed26a3d385918f52d6354.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d9efdc28f4567d83b93ed26a3d385918f52d6354.jpeg
  - name: Sina Marty
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/a98aa8262ada149399268ca36ff10cd637c2f758.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/a98aa8262ada149399268ca36ff10cd637c2f758.jpeg
  - name: Matteo Piatti
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/e6017b0218fa8efcefb188fc6f97862690634371.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/e6017b0218fa8efcefb188fc6f97862690634371.jpeg
  - name: Weronika Sieradzka
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/149799c46d85bbc5b01bb8d07038bd0a525b5fc3.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/149799c46d85bbc5b01bb8d07038bd0a525b5fc3.jpeg
  - name: Manuel Escrig
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/1e3260d90c0ebb041a3ba1885c46669ab8048640.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/1e3260d90c0ebb041a3ba1885c46669ab8048640.jpeg
  - name: Ursina Spadin
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/55dda75db2f5c6bca77f68a87c52a9ef1640ae6d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/55dda75db2f5c6bca77f68a87c52a9ef1640ae6d.jpeg
  - name: Lars Peyer
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f1d2e3d12a7ecaeab45e7db59069aae9b1b982b2.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f1d2e3d12a7ecaeab45e7db59069aae9b1b982b2.jpeg
  - name: Simone Wegelin
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/f6c64ad7bf2fc6dcbf8ff719c9984c7a264f1fe8.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/f6c64ad7bf2fc6dcbf8ff719c9984c7a264f1fe8.jpeg
  - name: Giorgio Nadig
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/6112f780809e3ef29e6a25dc808f7385ada0f1d5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/6112f780809e3ef29e6a25dc808f7385ada0f1d5.jpeg
  - name: Jonathan Droz
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/002edf6c98dae85315e7d6f9bf80668724a5ad9c.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/002edf6c98dae85315e7d6f9bf80668724a5ad9c.jpeg
  - name: David Lopez Pazos
    avatar: null
  - name: Denis Haramincic
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/25a74895deaf4fa21f0ff7affb09a16f054f7481.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/25a74895deaf4fa21f0ff7affb09a16f054f7481.jpeg
  - name: Stefan Heinemann
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/d7e4a269d996ede7c70059464ccef461e0575fc5.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/d7e4a269d996ede7c70059464ccef461e0575fc5.jpeg
  - name: Tina Hegi
    avatar: null
  - name: Hugo Torres
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/9d542bf710b80f3b6a9a0483e62a7ba18ed6b377.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/9d542bf710b80f3b6a9a0483e62a7ba18ed6b377.jpeg
  - name: Rami Jumaah
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/486d3f78489536c1d6bcf37dbd39d37596640a56.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/486d3f78489536c1d6bcf37dbd39d37596640a56.jpeg
  - name: Patrik Dummermuth
    avatar: null
  - name: Patrick Retornaz
    avatar: null
  - name: Léo Davesne
    avatar:
      square: >-
        https://liip.rokka.io/zebra_squared/3b26ff6bd533baf1c25cbb0cde30fc888359fd3d.jpeg
      large: >-
        https://liip.rokka.io/zebra_big/3b26ff6bd533baf1c25cbb0cde30fc888359fd3d.jpeg
  - name: Joëlle Mary
    avatar: null
  - name: Doran Kayoumi
    avatar: null
  - name: Mannar Hielal
    avatar: null
offices:
  - name: Lausanne
  - name: Fribourg
  - name: Bern
  - name: Zürich
  - name: St.Gallen

There are no notes for this item.