<div class="services" id="services">
    <div class="container">
        <div class="row-fluid">
        <div id="appinfobox" class="col-md-12">     
            <img src="./files/images/story_gesamt_2.medium.png" srcset="./files/images/story_gesamt_2.large.png 1000w" style="width:100%" alt="DEMOCRACY App Story">
        </div>
        </div>
        <div class="row-fluid" style="padding-top: 25px;">
            <div class="col-md-12 w3-agileits">
                <div class="wthree-heading">
                    <h3 id="sec_vision">Vision</h3>
                    <br><br>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <div>${main_text_left}</div>
                    </div>
                    <div class="col-md-5 welcome-right">
                        <h4 style="font-size: 22px;color: #4494D3">Unsere Funktionen</h4>
                        ${main_functions}
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid" style="min-height: 170px; padding-top: 25px; text-align: center;">
            <div class="col-md-12 w3-agileits">
                <div class="wthree-heading">
                    <br><br>
                    <br><br>
                    <h3 id="sec_vision">Partner & Referenzen</h3>	
                    <br><br>
                </div>
                <div class="row">
                    <div class="col-md-3" style="height: 230px; text-align: center; display: table;">
                        <a href="https://www.startnext.com/democracy" target="blank" data-toggle="tooltip" data-placement="top" title="Erfolgreich crowdfinanziert" style="height: 230px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/startnext_logo_green-1.png" alt="Startnext Logo" style="max-height: 230px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-3" style="height: 230px; text-align: center; display: table;">
                        <a href="https://www.ghst.de/demokratie/" target="blank" data-toggle="tooltip" data-placement="top" title="Gefördert durch" style="height: 230px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/1200px-Hertie-Stiftung.png" alt="Herti Stiftung Logo" style="max-height: 230px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-3" style="height: 230px; text-align: center; display: table;">
                        <a href="https://www.idealismprevails.at/demokratie-im-21-jahrhundert-marius-krueger-b-a/" target="blank" data-placement="top" data-toggle="tooltip" title="Promotet von" style="height: 250px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/IP_Logo_RGB.png" alt="Idealism Prevails Logo" style="max-height: 230px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-3" style="height: 230px; text-align: center; display: table;">
                        <a href="http://www.sputnik.de/sendungen/tagesupdate/audio-539944.html" target="blank" data-placement="top" data-toggle="tooltip" title="Zu hören bei" style="height: 230px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/MDR-SPUTNIK.png" alt="MDR Sputnik Logo" style="max-height: 230px; max-width: 100%;">
                        </a>
                    </div>
                </div>
                <br>
                <div class="row" style="padding-top: 25px;">
                    <div class="col-md-3" style="height: 130px; text-align: center; display: table;">
                        <a href="https://crypto.iti.kit.edu/fileadmin/User/Vorlesung_kryptische_Wahlverfahren/Skript-29-Mai-2013.pdf" target="blank" data-placement="top" data-toggle="tooltip" title="Weitergebildet vom" style="height: 130px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/Logo_KIT.png" alt="KIT Logo" style="max-height: 130px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-6" style="height: 130px; text-align: center; display: table;">
                        <a href="https://prototypefund.de/project/democracy-demokratie_live/" target="blank" data-placement="top" data-toggle="tooltip" title="Gewinner 3. Förderrunde" style="height: 130px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/Prototype.png" alt="Prototype Fund Logo" style="max-height: 130px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-3" style="height: 130px; text-align: center; display: table;">
                        <a href="http://buergerkandidaten.de/" target="blank" data-toggle="tooltip" data-placement="top" title="Unterstützt von" style="height: 130px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/buergerkandidaten.png" alt="Bürgerkandidaten Logo" style="max-height: 130px; max-width: 100%;">
                        </a>
                    </div>
                </div>
                <div class="row" style="padding-top: 35px;">
                    <div class="col-md-4" style="height: 175px; text-align: center; display: table;">
                        <a href="https://www.pressenza.com/de/2017/12/demokratie-echtzeit-neue-app-democracy-erfolgreich-crowdfinanziert/" target="blank" data-placement="top" data-toggle="tooltip" title="Publiziert von" style="height: 175px; vertical-align: bottom; display: table-cell; margin: auto;">
                            <img class="img-responsive" src="./files/references/pressenza_logo.png" alt="Pressenza Logo" style="max-height: 175px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-5" style="height: 175px; text-align: center; display: table;">
                        <a href="https://www.openpetition.de" target="blank" data-placement="top" data-toggle="tooltip" title="Technologie-Partnerschaft mit" style="height: 175px; vertical-align: bottom; display: table-cell; margin: auto;">
                            <img class="img-responsive" src="./files/references/600dpi_A4_Logo_Schriftzug.png" alt="Open Petition Logo" style="max-height: 175px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-3" style="height: 175px; text-align: center; display: table;">
                        <a href="https://kenfm.de/mehr-transparenz-im-bundestag-ueber-digitale-mitbestimmung/" target="blank" data-placement="top" data-toggle="tooltip" title="Veröffentlicht von" style="height: 175px; vertical-align: bottom; display: table-cell; margin: auto;">
                            <img class="img-responsive" src="./files/references/KenFM_Profilbild_2017.png" alt="KenFM Logo" style="max-height: 155px; max-width: 100%;">
                        </a>
                    </div>
                </div>
                <div class="row" style="padding-top: 45px;">
                    <div class="col-md-4" style="height: 100px; text-align: center; display: table;">
                        <a href="https://neue-debatte.com/2017/11/03/digitale-medien-mit-der-democracy-app-zur-basisdemokratie/" target="blank" data-placement="top" data-toggle="tooltip" title="Debattiert auf" style="height: 100px; vertical-align: bottom; display: table-cell; margin: auto;">
                            <img class="img-responsive" src="./files/references/neue-debatte-logo.png" alt="Neue Debatte Logo" style="max-height: 90px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-4" style="height: 100px; text-align: center; display: table;">
                        <a href="https://enorm-magazin.de/push-mitteilung-aus-dem-bundestag" target="blank" data-toggle="tooltip" data-placement="top" title="Abgedruckt bei" style="height: 100px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/enorm-magazin.png" alt="Enorm Magazin Logo" style="max-height: 70px; max-width: 100%;">
                        </a>
                    </div>
                    <div class="col-md-4" style="height: 100px; text-align: center; display: table;">
                        <a href="http://verfassung-vom-volk.org" target="blank" data-toggle="tooltip" data-placement="top" title="Im Gespräch mit" style="height: 100px; vertical-align: bottom; display: table-cell;">
                            <img class="img-responsive" src="./files/references/VvV-Logo-2016-03-28.png" alt="Verfassung vom Volk Logo" style="max-height: 100px; max-width: 100%;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>