Web Styleguide
  • 6.3.1

Home

<div class="master">
    <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>

    <main>
        <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.
                                </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/55dda75db2f5c6bca77f68a87c52a9ef1640ae6d.jpeg')"></div>
                                </div>
                                <div class="media__body">
                                    <div class="liiper-card__name">Ursina Spadin</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/75dfce993993303a4bc4c9b5ed162c1258e5a038.jpeg')"></div>
                                </div>
                                <div class="media__body">
                                    <div class="liiper-card__name">Nicolas Dougoud</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/cc8898782e14b35f27d24e3bf7533176a5ed6f9b.jpeg')"></div>
                                </div>
                                <div class="media__body">
                                    <div class="liiper-card__name">Bettina Brennwald</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>
    </main>

    <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>

</div>

<div id="cookies-banner" class="cookies-banner box box--default hidden">
    <div class="h4 mrgt0">Who reads what? For how long? And where?</div>
    <p class="mrgt0 text-muted text-medium">
        As a digital agency we would like to know what is going on on our website. Therefore we use cookies. They help us to measure exactly this. And no worries - we do not recognise underwear colour and coffee consumption. However, these cookies are stored with you. So we can at least find out how often you come by.
    </p>

    <div class="grid grid--multiline">
        <div class="grid__item w-1/2">
            <button id="cookies-banner-accept-all-btn" class="btn btn--default btn--block">
                Accept all
            </button>
        </div>
        <div class="grid__item w-1/2">
            <button id="cookies-banner-decline-all-btn" class="btn btn--default btn--block">
                Decline all
            </button>
        </div>
        <div class="grid__item">
            <button class="btn btn--bare" data-a11y-dialog-show="cookies-banner-dialog">Customize my preferences</button>
        </div>
    </div>
</div>

<div id="cookies-banner-dialog" class="dialog" aria-hidden="true" aria-labelledby="cookies-banner-dialog-dialog-title">
    <div class="dialog-overlay" data-a11y-dialog-hide></div>

    <div class="dialog-content" role="document">
        <div class="dialog__header">
            <h1 id="cookies-banner-dialog-dialog-title" class="h3 mrgv0 flex-grow-1">
                Cookies settings
            </h1>

            <button class="btn btn--bare" type="button" aria-label="Close dialog" data-a11y-dialog-hide>
                <svg class="icon icon--close icon--100">
                    <use xlink:href="../../assets/icons.svg#close" />
                </svg>

            </button>
        </div>

        <div class="dialog__body">

            <p class="mrgt0">By allowing these third party services, you accept their cookies and the use of tracking technologies necessary for their proper functioning. Read more in our <a href="#">Privacy Policy</a>.</p>

            <ul class="list-stacked">
                <li>
                    <div class="media media--middle">
                        <div class="media__left">
                            <div class="toggle">
                                <input id="cookies-settings-toggle-all" type="checkbox" name="" value="1" class="toggle__checkbox">
                                <label for="cookies-settings-toggle-all" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <label for="cookies-settings-toggle-all" class="field-label pdgv0">Toggle all</label>
                        </div>
                    </div>
                </li>
                <li>
                    <hr class="mrgv0">
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="facebookPixel" type="checkbox" name="facebookPixel" value="1" class="toggle__checkbox">
                                <label for="facebookPixel" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="facebookPixel">Facebook Pixel</label></h2>
                            <div class="text-muted text-medium">Facebook Pixel allows us to measure the impact of Liip publications on Facebook.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="linkedinInsight" type="checkbox" name="linkedinInsight" value="1" class="toggle__checkbox">
                                <label for="linkedinInsight" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="linkedinInsight">LinkedIn Insight</label></h2>
                            <div class="text-muted text-medium">LinkedIn Insight allows us to measure the impact of Liip publications on LinkedIn.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="hotjar" type="checkbox" name="hotjar" value="1" class="toggle__checkbox">
                                <label for="hotjar" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="hotjar">Hotjar</label></h2>
                            <div class="text-muted text-medium">Hotjar is a tool for collecting and analysing the interactions of all users in the form of a heat map. This tool is used to improve the content provided.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="googleAnalytics" type="checkbox" name="googleAnalytics" value="1" class="toggle__checkbox">
                                <label for="googleAnalytics" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="googleAnalytics">Google Analytics</label></h2>
                            <div class="text-muted text-medium">Google Analytics is a tool provided by Google that enables us to collect and analyse information on the properties of the traffic visiting the website, the interactions with the content provided, and the consumption performance of all this content, in order to improve the content supplied.</div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media">
                        <div class="media__left">
                            <div class="toggle cookies-settings-toggle">
                                <input id="googleOptimize" type="checkbox" name="googleOptimize" value="1" class="toggle__checkbox">
                                <label for="googleOptimize" class="toggle__label"></label>
                            </div>

                        </div>
                        <div class="media__body">
                            <h2 class="h4 mrgt0 mrgb--"><label for="googleOptimize">Google Optimize</label></h2>
                            <div class="text-muted text-medium">Google Optimize allows you to offer multiple variants of a website&#39;s content or structure in order to determine the version that obtains the best results from users, also known as A/B testing, and to personalise a website based on how it is utilised by its users. This tool is provided by Google.</div>
                        </div>
                    </div>
                </li>

            </ul>

        </div>

        <div class="dialog__footer">

            <ul class="list-inline list-inline--right" role="presentation">
                <li role="presentation">
                    <button class="btn btn--primary" data-a11y-dialog-hide>I’m done</button>
                </li>
            </ul>

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

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        var cookiesBannerNode = document.querySelector('#cookies-banner');
        if (cookiesBannerNode) {
            var cookiesBanner = new Styleguide.CookiesBanner(cookiesBannerNode, {
                settingsDialog: '#cookies-banner-dialog',
                onAcceptAll: function(values) {
                    console.log('Accepted all cookies!', values);
                },
                onDeclineAll: function(values) {
                    console.log('Declined all cookies!', values);
                },
                onToggle: function(name, enabled, values) {
                    console.log('Toggle cookie consent for', name, enabled, values);
                },
                onToggleAll: function(enabled, values) {
                    console.log('Toggle all', enabled, values);
                }
            });
            cookiesBanner.show();
        }
    })
</script>

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

  <main>
    <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>
  </main>

  {% render '@footer' %}
</div>

{% render '@cookies-banner' %}

<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.
    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

No notes defined.