fix css issues

ot_templating/Classes/ViewHelpers/Donors/GetAllViewHelper.php

@@ -69,7 +69,7 @@ class GetAllViewHelper extends AbstractViewHelper {
 
         if ($fromParents) {
             // Get the donors of the parent structures
-            $networkDonors = $this->donorRepository->findParentsByOrganizationId($organizationId);
+            $donors = $this->donorRepository->findParentsByOrganizationId($organizationId);
         } else {
             // Get donors of the structure
             $donors = $this->donorRepository->findByOrganizationId($organizationId);

ot_templating/Resources/Private/Layouts/Modern/1Col.html

@@ -2,23 +2,24 @@
 <f:layout name="1Col" />
 
 <div class="t-container st-effect-3">
+    <div class="wrapper">
 
-    <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
+        <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
 
-    <f:comment><!-- Render content --></f:comment>
-    <section class="page-section-ptb">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 mt-30">
-                    <f:comment><!-- render the content of the content section (middle column) --></f:comment>
-                    <f:render section="Content" />
+        <f:comment><!-- Render content --></f:comment>
+        <section class="page-section-ptb">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 mt-30">
+                        <f:comment><!-- render the content of the content section (middle column) --></f:comment>
+                        <f:render section="Content" />
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
-    <f:render partial="Modern/Footer" />
+        </section>
 
+        <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+    </div>
 </div>

ot_templating/Resources/Private/Layouts/Modern/3Col.html

@@ -2,23 +2,24 @@
 <f:layout name="3Col" />
 
 <div class="t-container st-effect-3">
+    <div class="wrapper">
 
-    <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
+        <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
 
-    <f:comment><!-- Render content --></f:comment>
-    <section class="page-section-ptb">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 mt-30">
-                    <f:comment><!-- render the content of the content section (middle column) --></f:comment>
-                    <f:render section="Content" />
+        <f:comment><!-- Render content --></f:comment>
+        <section class="page-section-ptb">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 mt-30">
+                        <f:comment><!-- render the content of the content section (middle column) --></f:comment>
+                        <f:render section="Content" />
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
-    <f:render partial="Modern/Footer" />
+        </section>
 
+        <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+    </div>
 </div>

ot_templating/Resources/Private/Layouts/Modern/Contact.html

@@ -2,25 +2,25 @@
 <f:layout name="Contact" />
 
 <div class="t-container st-effect-3">
+    <div class="wrapper">
+        <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
 
-    <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
-
-    <f:comment><!-- Render content --></f:comment>
-    <section class="page-section-ptb">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 mt-30">
-                    <div class="contact-form">
-                        <formvh:render persistenceIdentifier="EXT:ot_templating/Resources/Private/Forms/Contact.form.yaml" />
+        <f:comment><!-- Render content --></f:comment>
+        <section class="page-section-ptb">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 mt-30">
+                        <div class="contact-form">
+                            <formvh:render persistenceIdentifier="EXT:ot_templating/Resources/Private/Forms/Contact.form.yaml" />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-
-<f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
-<f:render partial="Modern/Footer" />
+        </section>
 
+        <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+    </div>
 </div>
 

ot_templating/Resources/Private/Layouts/Modern/Events.html

@@ -5,37 +5,38 @@
 <f:layout name="Events" />
 
 <section class="t-container st-effect-3">
+    <div class="wrapper">
 
-    <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
+        <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
 
-    <section class="page-section-ptb">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 mt-30">
+        <section class="page-section-ptb">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 mt-30">
 
-                    <f:if condition="{ot:request.getParameter(param: 'eventId')}">
-                        <f:then>
-                            <f:comment><!-- An event was requested: show this event--></f:comment>
-                            <ot:events.getById as="event"
-                                               eventId="{ot:request.getParameter(param: 'eventId')}">
-                                <f:render partial="Modern/EventsShow" arguments="{_all}"/>
-                            </ot:events.getById>
-                        </f:then>
-                        <f:else>
-                            <f:comment><!-- No specific event was requested: show all events --></f:comment>
-                            <ot:events.getAll as="events"
-                                              organizationId="{settings.organizationId}">
-                                <f:render partial="Modern/EventsIndex" arguments="{_all}"/>
-                            </ot:events.getAll>
-                        </f:else>
-                    </f:if>
+                        <f:if condition="{ot:request.getParameter(param: 'eventId')}">
+                            <f:then>
+                                <f:comment><!-- An event was requested: show this event--></f:comment>
+                                <ot:events.getById as="event"
+                                                   eventId="{ot:request.getParameter(param: 'eventId')}">
+                                    <f:render partial="Modern/EventsShow" arguments="{_all}"/>
+                                </ot:events.getById>
+                            </f:then>
+                            <f:else>
+                                <f:comment><!-- No specific event was requested: show all events --></f:comment>
+                                <ot:events.getAll as="events"
+                                                  organizationId="{settings.organizationId}">
+                                    <f:render partial="Modern/EventsIndex" arguments="{_all}"/>
+                                </ot:events.getAll>
+                            </f:else>
+                        </f:if>
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
-    <f:render partial="Modern/Footer" />
+        </section>
 
+        <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+    </div>
 </section>

ot_templating/Resources/Private/Layouts/Modern/Home.html

@@ -2,37 +2,39 @@
 <f:layout name="Home" />
 
 <div class="t-container st-effect-3">
-
-    <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
-
-    <f:comment><!-- Render content --></f:comment>
-    <section class="page-section-ptb">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12 mt-30">
-                    <f:comment><!-- render the content --></f:comment>
-                    <f:render section="Content" />
-
-                    <f:comment><!-- Render the next events section defined in partial/NextEvents.html--></f:comment>
-                    <f:render partial="Modern/NextEvents" arguments="{settings: settings}"/>
-                    <f:if condition="{settings.organizationIsNetwork}==0">
-                        <f:render partial="Modern/NextEvents" arguments="{settings: settings, fromParents: 1}"/>
-                    </f:if>
-                    <f:if condition="{settings.organizationIsNetwork}==1">
-                        <f:render partial="Modern/NextEvents" arguments="{settings: settings, fromChildren: 1}"/>
-                    </f:if>
-
-                    <f:comment><!-- Render the donors section defined in partial/Donors.html--></f:comment>
-                    <f:render partial="Modern/Donors" arguments="{settings: settings}" />
-                    <f:render partial="Modern/Donors" arguments="{settings: settings, fromParents: 1}"/>
+    <div class="wrapper">
+
+        <f:comment><!-- Render the header defined in partials/Header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
+
+        <f:comment><!-- Render content --></f:comment>
+        <section class="page-section-ptb">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 mt-30">
+                        <f:comment><!-- render the content --></f:comment>
+                        <f:render section="Content" />
+
+                        <f:comment><!-- Render the next events section defined in partial/NextEvents.html--></f:comment>
+                        <f:render partial="Modern/NextEvents" arguments="{settings: settings}"/>
+                        <f:if condition="{settings.organizationIsNetwork}==0">
+                            <f:render partial="Modern/NextEvents" arguments="{settings: settings, fromParents: 1}"/>
+                        </f:if>
+                        <f:if condition="{settings.organizationIsNetwork}==1">
+                            <f:render partial="Modern/NextEvents" arguments="{settings: settings, fromChildren: 1}"/>
+                        </f:if>
+
+                        <f:comment><!-- Render the donors section defined in partial/Donors.html--></f:comment>
+                        <f:render partial="Modern/Donors" arguments="{settings: settings}" />
+                        <f:render partial="Modern/Donors" arguments="{settings: settings, fromParents: 1}"/>
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
 
 
-    <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
-    <f:render partial="Modern/Footer" />
+        <f:comment><!-- Render the footer defined in partials/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
 
+    </div>
 </div>

ot_templating/Resources/Private/Layouts/Modern/Members.html

@@ -5,78 +5,78 @@
 <f:layout name="Members" />
 
 <section class="t-container st-effect-3">
+    <div class="wrapper">
+        <f:comment><!-- Render the header defined in partial/header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
 
-    <f:comment><!-- Render the header defined in partial/header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
+        <section class="page-section-ptb data-table mb-50 mt-50">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12 col-md-12">
+                        <h1 class="text-center">Liste des adhérents</h1>
 
-    <section class="page-section-ptb data-table mb-50 mt-50">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-12 col-md-12">
-                    <h1 class="text-center">Liste des adhérents</h1>
+                        <ot:members.getAll as="members"
+                                           organizationId="{settings.organizationId}">
 
-                    <ot:members.getAll as="members"
-                                       organizationId="{settings.organizationId}">
+                            <f:if condition="{members -> f:count()} > 0">
+                                <f:then>
+                                    <f:for each="{members}" as="member" iteration="i">
 
-                        <f:if condition="{members -> f:count()} > 0">
-                            <f:then>
-                                <f:for each="{members}" as="member" iteration="i">
-
-                                    <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
-                                        <if condition="i>1">
-                                    </div>
+                                        <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
+                                            <if condition="i>1">
                                         </div>
-                                        </if>
+                                            </div>
+                                            </if>
 
-                                    <div class="team-3 mb-50 mt-70">
-                                        <div class="row">
-                                    </f:if>
+                                        <div class="team-3 mb-50 mt-70">
+                                            <div class="row">
+                                        </f:if>
 
-                                            <div class="col-lg-3 col-sm-6 sm-mb-30">
-                                                <div class="team team-round full-border">
-                                                    <div class="team-photo">
-                                                        <f:if condition="{member.image}">
-                                                            <f:then>
-                                                                <img class="img-fluid mx-auto"
-                                                                     src="{member.image}/160x0"
-                                                                     alt="{member.fullName}"/>
-                                                            </f:then>
-                                                            <f:else>
-                                                                <f:image class="img-fluid mx-auto"
-                                                                         src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
+                                                <div class="col-lg-3 col-sm-6 sm-mb-30">
+                                                    <div class="team team-round full-border">
+                                                        <div class="team-photo">
+                                                            <f:if condition="{member.image}">
+                                                                <f:then>
+                                                                    <img class="img-fluid mx-auto"
+                                                                         src="{member.image}/160x0"
                                                                          alt="{member.fullName}"/>
-                                                            </f:else>
-                                                        </f:if>
-                                                    </div>
+                                                                </f:then>
+                                                                <f:else>
+                                                                    <f:image class="img-fluid mx-auto"
+                                                                             src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
+                                                                             alt="{member.fullName}"/>
+                                                                </f:else>
+                                                            </f:if>
+                                                        </div>
 
-                                                    <div class="team-description">
-                                                        <div class="team-info">
-                                                            <h5><a href="team-single.html">{member.fullName}</a></h5>
-                                                            <span>{f:translate(key: member.instrument)}</span>
+                                                        <div class="team-description">
+                                                            <div class="team-info">
+                                                                <h5><a href="team-single.html">{member.fullName}</a></h5>
+                                                                <span>{f:translate(key: member.instrument)}</span>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </div>
 
-                                    <f:if condition="{i.index} === {total}">
+                                        <f:if condition="{i.index} === {total}">
+                                            </div>
                                         </div>
-                                    </div>
-                                    </f:if>
+                                        </f:if>
 
-                                </f:for>
-                            </f:then>
-                            <f:else>
-                                <h5>Aucun adhérent</h5>
-                            </f:else>
-                        </f:if>
+                                    </f:for>
+                                </f:then>
+                                <f:else>
+                                    <h5>Aucun adhérent</h5>
+                                </f:else>
+                            </f:if>
 
-                    </ot:members.getAll>
+                        </ot:members.getAll>
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
-    <f:render partial="Modern/Footer" />
+        </section>
 
+        <f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+    </div>
 </section>

ot_templating/Resources/Private/Layouts/Modern/MembersCa.html

@@ -5,78 +5,80 @@
 <f:layout name="MembersCa" />
 
 <section class="t-container st-effect-3">
+    <div class="wrapper">
 
-    <f:comment><!-- Render the header defined in partial/header.html--></f:comment>
-    <f:render partial="Modern/Header" arguments="{_all}" />
+        <f:comment><!-- Render the header defined in partial/header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
 
-    <section class="page-section-ptb data-table mb-50 mt-50">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-12 col-md-12">
-                    <h1 class="text-center">Liste des membres du CA</h1>
+        <section class="page-section-ptb data-table mb-50 mt-50">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12 col-md-12">
+                        <h1 class="text-center">Liste des membres du CA</h1>
 
-                    <ot:members.getAllCa as="members"
-                                       organizationId="{settings.organizationId}">
+                        <ot:members.getAllCa as="members"
+                                           organizationId="{settings.organizationId}">
 
-                        <f:if condition="{members -> f:count()} > 0">
-                            <f:then>
-                                <f:for each="{members}" as="member" iteration="i">
+                            <f:if condition="{members -> f:count()} > 0">
+                                <f:then>
+                                    <f:for each="{members}" as="member" iteration="i">
 
-                                    <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
-                                        <if condition="i>1">
-                                    </div>
+                                        <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
+                                            <if condition="i>1">
                                         </div>
-                                        </if>
+                                            </div>
+                                            </if>
 
-                                    <div class="team-3 mb-50 mt-70">
-                                        <div class="row">
-                                    </f:if>
+                                        <div class="team-3 mb-50 mt-70">
+                                            <div class="row">
+                                        </f:if>
 
-                                            <div class="col-lg-3 col-sm-6 sm-mb-30">
-                                                <div class="team team-round full-border">
-                                                    <div class="team-photo">
-                                                        <f:if condition="{member.image}">
-                                                            <f:then>
-                                                                <img class="img-fluid mx-auto"
-                                                                     src="{member.image}/160x0"
-                                                                     alt="{member.fullName}"/>
-                                                            </f:then>
-                                                            <f:else>
-                                                                <f:image class="img-fluid mx-auto"
-                                                                         src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
+                                                <div class="col-lg-3 col-sm-6 sm-mb-30">
+                                                    <div class="team team-round full-border">
+                                                        <div class="team-photo">
+                                                            <f:if condition="{member.image}">
+                                                                <f:then>
+                                                                    <img class="img-fluid mx-auto"
+                                                                         src="{member.image}/160x0"
                                                                          alt="{member.fullName}"/>
-                                                            </f:else>
-                                                        </f:if>
-                                                    </div>
+                                                                </f:then>
+                                                                <f:else>
+                                                                    <f:image class="img-fluid mx-auto"
+                                                                             src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
+                                                                             alt="{member.fullName}"/>
+                                                                </f:else>
+                                                            </f:if>
+                                                        </div>
 
-                                                    <div class="team-description">
-                                                        <div class="team-info">
-                                                            <h5><a href="team-single.html">{member.fullName}</a></h5>
-                                                            <span>{f:translate(key: member.mission)}</span>
+                                                        <div class="team-description">
+                                                            <div class="team-info">
+                                                                <h5><a href="team-single.html">{member.fullName}</a></h5>
+                                                                <span>{f:translate(key: member.mission)}</span>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                            </div>
 
-                                    <f:if condition="{i.index} === {total}">
+                                        <f:if condition="{i.index} === {total}">
+                                            </div>
                                         </div>
-                                    </div>
-                                    </f:if>
+                                        </f:if>
 
-                                </f:for>
-                            </f:then>
-                            <f:else>
-                                <h5>Aucun adhérent</h5>
-                            </f:else>
-                        </f:if>
+                                    </f:for>
+                                </f:then>
+                                <f:else>
+                                    <h5>Aucun adhérent</h5>
+                                </f:else>
+                            </f:if>
 
-                    </ot:members.getAllCa>
-                </div>
+                        </ot:members.getAllCa>
+                    </div>
 
+                </div>
             </div>
-        </div>
-    </section>
+        </section>
 
-    <f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
-    <f:render partial="Modern/Footer" />
+        <f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+    </div>
 </section>

ot_templating/Resources/Private/Partials/Modern/Assets.html

@@ -34,6 +34,10 @@ Assets included with the VHS viewhelpers
     font-family: "slick";
     src: url("/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/fonts/slick.ttf") format("truetype");
     }
+    @font-face {
+    font-family: "revicons";
+    src: url("/typo3conf/ext/ot_templating/Resources/Public/assets/Modern/fonts/revicons.ttf") format("truetype");
+    }
 </style>
 
 

ot_templating/Resources/Private/Partials/Modern/NextEvents.html

@@ -48,7 +48,7 @@
 
                     <f:for each="{events}" as="event">
 
-                        <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
+                        <div class="card-container col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                             <div class="card border-0 theme-bg o-hidden h-100">
 
                                 <f:if condition="{fromParents}||{fromChildren}">
@@ -76,7 +76,7 @@
                     </f:for>
 
                     <f:if condition="{eventsPageUid} > 0">
-                        <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
+                        <div class="card-container col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                             <div class="card border-0 theme-bg o-hidden h-100">
                                 <f:link.page pageUid="{eventsPageUid}" class="p-4 more-events">
                                     <h2 class="text-white"> <i class="fa fa-plus fa-3x"></i> </h2>

ot_templating/Resources/Public/assets/Modern/fonts/revicons.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2013 by original authors @ fontello.com</metadata>
+<defs>
+<font id="revicons" horiz-adv-x="1000" >
+<font-face font-family="revicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe802;" d="m643 386q0 103-74 176t-176 74t-177-74t-73-176t73-177t177-73t176 73t74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69q-80 0-153 31t-125 84t-84 125t-31 153t31 152t84 126t125 84t153 31t152-31t126-84t84-126t31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
+<glyph glyph-name="pencil-1" unicode="&#xe831;" d="m795 731c50-46 44-118-4-165l-46-46s35 53-37 123c-64 64-124 37-124 37l49 48c43 45 120 45 162 3z m-89-250l-492-493l-210-51l-4 4l55 210l493 490c8 2 30 9 60 2l-523-522l-15-55l60-60l56 15l25 24l3 56l-40 40l479 479c7-7 7-7 15-15c71-70 38-124 38-124z" horiz-adv-x="830" />
+<glyph glyph-name="picture-1" unicode="&#xe803;" d="m357 529q0-45-31-76t-76-32t-76 32t-31 76t31 75t76 32t76-32t31-75z m572-215v-250h-786v107l178 179l90-89l285 285z m53 393h-893q-7 0-12-5t-6-13v-678q0-8 6-13t12-5h893q7 0 13 5t5 13v678q0 7-5 13t-13 5z m89-18v-678q0-37-26-63t-63-27h-893q-36 0-63 27t-26 63v678q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
+<glyph glyph-name="cancel" unicode="&#xe80a;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165l-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164l-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164l164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164l164-164q15-15 15-38z" horiz-adv-x="785.7" />
+<glyph glyph-name="info-circled" unicode="&#xe80f;" d="m571 82v89q0 8-5 13t-12 5h-54v286q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h53v-179h-53q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h250q7 0 12 5t5 13z m-71 500v89q0 8-5 13t-13 5h-107q-8 0-13-5t-5-13v-89q0-8 5-13t13-5h107q8 0 13 5t5 13z m357-232q0-117-57-215t-156-156t-215-58t-216 58t-155 156t-58 215t58 215t155 156t216 58t215-58t156-156t57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="trash" unicode="&#xe801;" d="m286 439v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m143 0v-321q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q8 0 13-5t5-13z m142 0v-321q0-8-5-13t-12-5h-36q-8 0-13 5t-5 13v321q0 8 5 13t13 5h36q7 0 12-5t5-13z m72-404v529h-500v-529q0-12 4-22t8-15t6-5h464q2 0 6 5t8 15t4 22z m-375 601h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q22 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
+<glyph glyph-name="left-dir" unicode="&#xe817;" d="m357 600v-500q0-14-10-25t-26-11t-25 11l-250 250q-10 11-10 25t10 25l250 250q11 11 25 11t26-11t10-25z" horiz-adv-x="357.1" />
+<glyph glyph-name="right-dir" unicode="&#xe818;" d="m321 350q0-14-10-25l-250-250q-11-11-25-11t-25 11t-11 25v500q0 15 11 25t25 11t25-11l250-250q10-10 10-25z" horiz-adv-x="357.1" />
+<glyph glyph-name="down-open" unicode="&#xe83b;" d="m899 457q0-29-21-50l-363-363q-21-22-51-22q-30 0-50 22l-363 363q-21 20-21 50q0 30 21 51l41 42q22 20 51 20q29 0 50-20l271-271l271 271q21 20 51 20q29 0 50-20l42-42q21-22 21-51z" horiz-adv-x="928.6" />
+<glyph glyph-name="left-open" unicode="&#xe819;" d="m414-28l-364 364q-20 20-20 50t20 51l364 363q21 20 51 20t50-20l42-42q21-21 21-51t-21-50l-271-271l271-271q21-21 21-51t-21-50l-42-42q-21-20-50-20t-51 20z" horiz-adv-x="642.9" />
+<glyph glyph-name="right-open" unicode="&#xe81a;" d="m613 386q0-29-20-51l-364-363q-21-21-50-21t-51 21l-42 42q-21 21-21 50q0 30 21 51l271 271l-271 270q-21 22-21 51q0 30 21 50l42 42q20 21 51 21t50-21l364-363q20-21 20-50z" horiz-adv-x="642.9" />
+<glyph glyph-name="angle-left" unicode="&#xe820;" d="m350 546q0-7-6-12l-219-220l219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 260q-6 6-6 13t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
+<glyph glyph-name="angle-right" unicode="&#xe81d;" d="m332 314q0-7-6-13l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219l-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13z" horiz-adv-x="357.1" />
+<glyph glyph-name="left-big" unicode="&#xe81f;" d="m857 350v-71q0-30-18-51t-47-21h-393l164-164q21-20 21-50t-21-50l-42-43q-21-20-51-20q-29 0-50 20l-364 364q-20 21-20 50q0 29 20 51l364 363q21 21 50 21q29 0 51-21l42-42q21-21 21-50t-21-51l-164-164h393q29 0 47-20t18-51z" horiz-adv-x="857.1" />
+<glyph glyph-name="right-big" unicode="&#xe81e;" d="m821 314q0-30-20-50l-363-364q-22-20-51-20q-29 0-50 20l-42 42q-22 21-22 51t22 51l163 163h-393q-29 0-47 21t-18 51v71q0 30 18 51t47 20h393l-163 164q-22 21-22 51t22 50l42 42q21 21 50 21q29 0 51-21l363-363q20-20 20-51z" horiz-adv-x="857.1" />
+<glyph glyph-name="magic" unicode="&#xe807;" d="m664 526l164 163l-60 60l-164-164z m249 163q0-15-10-25l-717-718q-10-10-25-10t-25 10l-111 111q-10 10-10 25t10 25l718 718q10 10 25 10t25-10l110-111q10-10 10-25z m-753 106l54-16l-54-17l-17-55l-17 55l-55 17l55 16l17 55z m195-90l109-34l-109-33l-34-109l-33 109l-109 33l109 34l33 109z m519-267l55-17l-55-16l-17-55l-17 55l-54 16l54 17l17 55z m-357 357l54-16l-54-17l-17-55l-17 55l-54 17l54 16l17 55z" horiz-adv-x="928.6" />
+<glyph glyph-name="picture" unicode="&#xe800;" d="m856 518l-100 0l-124 150l-214-150l-180 0q-52 0-90-39t-38-91l0-160l-108 296q-10 38 22 52l680 248q36 10 50-24z m106-90q16 0 27-12t11-28l0-472q0-16-11-28t-27-12l-724 0q-16 0-27 12t-11 28l0 472q0 16 11 28t27 12l724 0z m-56-452l0 162l-72 160l-166-60l-130-132l-138 170l-92-214l0-86l598 0z" horiz-adv-x="1000" />
+<glyph glyph-name="export" unicode="&#xe80b;" d="m750 60l0 56l100 82l0-188q0-20-15-35t-35-15l-750 0q-20 0-35 15t-15 35l0 550q0 22 14 36t36 14l288 0q-32-24-59-49t-39-39l-10-12l-130 0l0-450l650 0z m-82 348q-166 0-242-41t-160-181q0 8 1 22t9 56t22 79t44 83t70 79t107 56t149 23l0 156l332-250l-332-260l0 178z" horiz-adv-x="1000" />
+<glyph glyph-name="cog" unicode="&#xe832;" d="m760 350q0-72 80-122q-12-40-34-82q-70 18-136-44q-54-58-34-136q-40-20-84-36q-46 82-132 82t-132-82q-44 16-84 36q20 80-34 136q-54 54-136 34q-14 26-34 82q82 52 82 132q0 72-82 124q20 56 34 82q74-18 136 44q54 56 34 136q42 22 84 34q46-80 132-80t132 80q42-12 84-34q-20-78 34-136q66-62 136-44q22-42 34-82q-80-50-80-124z m-340-182q76 0 129 53t53 129t-53 130t-129 54t-129-54t-53-130t53-129t129-53z" horiz-adv-x="840" />
+<glyph glyph-name="login" unicode="&#xe833;" d="m800 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-450 0q-40 0-69 30t-29 70l0 100l98 0l0-100l450 0l0 700l-450 0l0-150l-98 0l0 150q0 42 29 71t69 29l450 0z m-350-670l0 120l-450 0l0 150l450 0l0 120l200-194z" horiz-adv-x="900" />
+<glyph glyph-name="logout" unicode="&#xe834;" d="m502 0l0 100l98 0l0-100q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l400 0q42 0 71-29t29-71l0-150l-98 0l0 150l-402 0l0-700l402 0z m398 326l-198-196l0 120l-450 0l0 150l450 0l0 120z" horiz-adv-x="900" />
+<glyph glyph-name="video" unicode="&#xe805;" d="m214-43v72q0 14-10 25t-25 10h-72q-14 0-25-10t-11-25v-72q0-14 11-25t25-11h72q14 0 25 11t10 25z m0 214v72q0 14-10 25t-25 11h-72q-14 0-25-11t-11-25v-72q0-14 11-25t25-10h72q14 0 25 10t10 25z m0 215v71q0 15-10 25t-25 11h-72q-14 0-25-11t-11-25v-71q0-15 11-25t25-11h72q14 0 25 11t10 25z m572-429v286q0 14-11 25t-25 11h-429q-14 0-25-11t-10-25v-286q0-14 10-25t25-11h429q15 0 25 11t11 25z m-572 643v71q0 15-10 26t-25 10h-72q-14 0-25-10t-11-26v-71q0-15 11-25t25-11h72q14 0 25 11t10 25z m786-643v72q0 14-11 25t-25 10h-71q-15 0-25-10t-11-25v-72q0-14 11-25t25-11h71q15 0 25 11t11 25z m-214 429v285q0 15-11 26t-25 10h-429q-14 0-25-10t-10-26v-285q0-15 10-25t25-11h429q15 0 25 11t11 25z m214-215v72q0 14-11 25t-25 11h-71q-15 0-25-11t-11-25v-72q0-14 11-25t25-10h71q15 0 25 10t11 25z m0 215v71q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-71q0-15 11-25t25-11h71q15 0 25 11t11 25z m0 214v71q0 15-11 26t-25 10h-71q-15 0-25-10t-11-26v-71q0-15 11-25t25-11h71q15 0 25 11t11 25z m71 89v-750q0-37-26-63t-63-26h-893q-36 0-63 26t-26 63v750q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
+<glyph glyph-name="arrow-combo" unicode="&#xe827;" d="m230 850l230-364l-460 0z m0-1000l-230 366l460 0z" horiz-adv-x="460" />
+<glyph glyph-name="left-open-1" unicode="&#xe82a;" d="m242 626q14 16 39 16t41-16q38-36 0-80l-186-196l186-194q38-44 0-80q-16-16-40-16t-40 16l-226 236q-16 16-16 38q0 24 16 40q206 214 226 236z" horiz-adv-x="341" />
+<glyph glyph-name="right-open-1" unicode="&#xe82b;" d="m98 626l226-236q16-16 16-40q0-22-16-38l-226-236q-16-16-40-16t-40 16q-36 36 0 80l186 194l-186 196q-36 44 0 80q16 16 41 16t39-16z" horiz-adv-x="340" />
+<glyph glyph-name="left-open-mini" unicode="&#xe822;" d="m252 180q26-26 0-48q-26-26-48 0l-192 194q-24 24 0 50l192 194q22 26 48 0q26-22 0-48l-156-172z" horiz-adv-x="265" />
+<glyph glyph-name="right-open-mini" unicode="&#xe823;" d="m13 180l158 170l-158 172q-26 26 0 48q26 26 48 0l192-194q24-26 0-50l-192-194q-22-26-48 0q-26 22 0 48z" horiz-adv-x="265" />
+<glyph glyph-name="left-open-big" unicode="&#xe824;" d="m452-20q26-26 0-48q-26-26-48 0l-392 394q-24 24 0 50l392 394q22 26 48 0q26-22 0-48l-358-372z" horiz-adv-x="465" />
+<glyph glyph-name="right-open-big" unicode="&#xe825;" d="m13-20l358 370l-358 372q-26 26 0 48q26 26 48 0l392-394q24-26 0-50l-392-394q-22-26-48 0q-26 22 0 48z" horiz-adv-x="465" />
+<glyph glyph-name="left" unicode="&#xe836;" d="m378 20l-378 330l378 330l0-190l352 0l0-278l-352 0l0-192z" horiz-adv-x="730" />
+<glyph glyph-name="right" unicode="&#xe826;" d="m350 680l380-330l-380-330l0 192l-350 0l0 278l350 0l0 190z" horiz-adv-x="730" />
+<glyph glyph-name="ccw" unicode="&#xe808;" d="m532 736q170 0 289-120t119-290t-119-290t-289-120q-142 0-252 88l70 74q84-60 182-60q126 0 216 90t90 218t-90 218t-216 90q-124 0-214-87t-92-211l142 0l-184-204l-184 204l124 0q2 166 122 283t286 117z" horiz-adv-x="940" />
+<glyph glyph-name="arrows-ccw" unicode="&#xe806;" d="m186 140l116 116l0-292l-276 16l88 86q-116 122-114 290t120 288q100 100 240 116l4-102q-100-16-172-88q-88-88-90-213t84-217z m332 598l276-16l-88-86q116-122 114-290t-120-288q-96-98-240-118l-2 104q98 16 170 88q88 88 90 213t-84 217l-114-116z" horiz-adv-x="820" />
+<glyph glyph-name="palette" unicode="&#xe829;" d="m857 622q72-48 101-110t20-104t-35-48q-16-4-54 10t-80 10t-80-46q-30-46-21-75t34-65t23-50q-2-26-36-63t-126-74t-216-37q-186 0-291 101t-95 245q8 118 104 235t216 151q290 84 536-80z m-318-466q30 0 52 22t22 54t-22 53t-52 21q-32 0-54-21t-22-53t22-54t54-22z" horiz-adv-x="980" />
+<glyph glyph-name="list-add" unicode="&#xe80c;" d="m350 400q22 0 36-15t14-35t-15-35t-35-15l-300 0q-20 0-35 15t-15 35t14 35t36 15l300 0z m0-200q22 0 36-15t14-35t-15-35t-35-15l-300 0q-20 0-35 15t-15 35t14 35t36 15l300 0z m620 200q30 0 30-50t-30-50l-170 0l0-170q0-30-50-30t-50 30l0 170l-164 0q-30 0-30 50t30 50l164 0l0 170q0 30 50 30t50-30l0-170l170 0z m-620 200q22 0 36-15t14-35t-15-35t-35-15l-300 0q-20 0-35 15t-15 35t14 35t36 15l300 0z" horiz-adv-x="1000" />
+<glyph glyph-name="doc" unicode="&#xe809;" d="m818 595q16-16 16-36l0-521q0-65-46-111t-110-46l-522 0q-65 0-110 46t-46 111l0 625q0 65 46 110t110 46l417 0q22 0 37-15z m-110-36l-135 134l0-56q0-32 23-55t55-23l57 0z m-30-574q21 0 36 16t15 37l0 469l-78 0q-53 0-92 38t-38 92l0 78l-365 0q-21 0-37-15t-15-37l0-625q0-21 15-37t37-16l522 0z" horiz-adv-x="834" />
+<glyph glyph-name="left-open-outline" unicode="&#xe82e;" d="m638 91q0-64-47-111t-110-46q-65 0-110 45l-371 372l371 371q44 44 111 44t111-44q45-45 45-111q0-65-45-110l-150-150l150-150q45-45 45-110z m-490 260l297-298q15-15 37-15t37 15t15 38q0 21-15 36l-224 224l224 223q15 15 15 37q0 22-15 37t-37 15t-37-15z" horiz-adv-x="638" />
+<glyph glyph-name="left-open-2" unicode="&#xe82c;" d="m481 684q32-31 32-74t-32-74l-186-186l186-186q32-31 32-74t-32-74t-73-31t-74 31l-334 334l334 334q30 31 74 31t73-31z" horiz-adv-x="513" />
+<glyph glyph-name="right-open-outline" unicode="&#xe82f;" d="m156-66q-63 0-110 46t-46 111t46 110l150 150l-150 150q-46 46-46 110q0 65 46 111q44 44 110 44t110-44l372-371l-372-372q-45-45-110-45z m0 729q-21 0-37-16t-15-36q0-20 16-37l223-223l-223-224q-16-16-16-36q0-22 16-38q15-15 36-15t37 15l297 298l-297 297q-15 15-37 15z" horiz-adv-x="638" />
+<glyph glyph-name="right-open-2" unicode="&#xe82d;" d="m31 684q30 31 74 31t74-31l335-334l-335-334q-31-31-74-31t-74 31t-31 74t31 74l188 186l-188 186q-31 32-31 74t31 74z" horiz-adv-x="514" />
+<glyph glyph-name="equalizer" unicode="&#xe83a;" d="m576 239l0-112l-55 0l0-167q0-23-17-40t-39-17t-39 17t-17 40l0 167l-56 0l0 112l56 0l0 503q0 24 17 39t38 16q24 0 41-16t16-39l0-503l55 0z m335 335l0-112l-55 0l0-502q0-23-16-40t-41-17q-23 0-39 17t-16 40l0 502l-56 0l0 112l56 0l0 168q0 24 16 39t39 16t41-16t16-39l0-168l55 0z m-670-112l0-111l-55 0l0-391q0-23-16-40t-40-17q-23 0-39 17t-17 40l0 391l-56 0l0 111l56 0l0 280q0 24 16 39t40 16t40-16t16-39l0-280l55 0z" horiz-adv-x="928" />
+<glyph glyph-name="layers-alt" unicode="&#xe804;" d="m18 127l446-111l447 111l0-111l-447-113l-446 113l0 111z m0 224l446-112l447 112l0-112l-447-112l-446 112l0 112z m0 223l446-112l447 112l0-112l-447-111l-446 111l0 112z m0 223l446-112l447 112l0-112l-447-111l-446 111l0 112z" horiz-adv-x="928" />
+<glyph glyph-name="popup" unicode="&#xe828;" d="m700 750q42 0 71-29t29-71l0-400q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 402q0 40 29 69t71 29l400 0z m0-500l0 400l-400 0l0-400l400 0z m-600 100l0-300l300 0l0-100l-300 0q-40 0-70 30t-30 70l0 300l100 0z" horiz-adv-x="800" />
+</font>
+</defs>
+</svg>

ot_templating/Resources/Public/assets/Modern/script/custom.js

@@ -110,7 +110,7 @@ var $window = $(window),
               outside_click_close : true,           // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
               top_fixed           : false,          // fixed the menu top of the screen. options (true) or (false)
               sticky_header       : true,           // menu fixed on top when scroll down down. options (true) or (false)
-              sticky_header_height: 250,            // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
+              sticky_header_height: 220,            // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
               menu_position       : pos,            // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
               full_width          : false,          // make menu full width. options (true) or (false)
              // MOBILE MODE SETTINGS
@@ -124,14 +124,29 @@ var $window = $(window),
                 sticky_header_height: 200           // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
              }
         });
-    // Dynamic active menu
-    var path = window.location.pathname.split("/").pop();
-    var target = $('header .mega-menu a[href="'+path+'"]');
-    target.parent().addClass('active');
-    $('header .mega-menu li.active').parents('li').addClass('active');
+
+        // Dynamic active menu
+        var path = window.location.pathname.split("/").pop();
+        var target = $('header .mega-menu a[href="'+path+'"]');
+        target.parent().addClass('active');
+        $('header .mega-menu li.active').parents('li').addClass('active');
 
     });
-  }
+
+     //  Fix mega-menu issues
+     $('header .mega-menu .menu-links>li>ul.drop-down-multilevel').each(function () {
+         if (($(this).offset().left + $(this).width()) > $(window).width()) {
+             $(this).addClass('dropdown-align-left');
+         }
+     });
+     $('header .mega-menu .drop-down-multilevel .drop-down-multilevel').each(function () {
+         if (($(this).offset().left + $(this).width()) > $(window).width()) {
+             $(this).addClass('dropdown-left');
+         }
+     });
+
+}
+
 
 /*************************
        owl carousel 
@@ -1048,4 +1063,4 @@ var _arr  = {};
         POTENZA.flickrfeed(),
         POTENZA.mobileview();
     });
-})(jQuery);
+})(jQuery);

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -138,6 +138,28 @@
         color: #323232 !important;
     }
 
+    /* **** Fix mega menu issues ***** */
+
+    /* Prevent hidden submenus to overflow from the screen */
+    body {
+        overflow-x: hidden;
+    }
+    /* Force 1st-level dropdown to align
+    on the left if they are too close to the
+    screen right edge */
+    .mega-menu .dropdown-align-left {
+        right: 0 !important;
+    }
+    /* Force 2nd-level dropdown to be displayed
+    on the left if they are too close to the
+    screen right edge */
+    .mega-menu .dropdown-left {
+        top: 0 !important;
+        right: 100% !important;
+        left: auto !important;
+    }
+
+
     /*------------------------
         Prochains évènements
     ------------------------*/
@@ -398,142 +420,152 @@ Members and Ca Members pages
 }
 
 
+
+/*============================
+Next events (homepage)
+============================*/
+
+.events .card-container {
+    margin-bottom: 24px;
+}
+
 /*============================
 Events pages
 ============================*/
-   /* All events page from ot_widget*/
-   .ot-all-events {
-       display: flex;
-       flex-direction: row;
-   }
 
-    .ot-all-events .events-controls {
-        order: 1;
-        flex: 1;
-    }
+/* All events page from ot_widget*/
+.ot-all-events {
+   display: flex;
+   flex-direction: row;
+}
 
-    .ot-all-events .events-results {
-        order: 0;
-        flex: 1;
-    }
+.ot-all-events .events-controls {
+    order: 1;
+    flex: 1;
+}
 
-    .ot-all-events .events-controls, .events-results {
-        display: flex;
-        flex-direction: column;
-        margin: 0 1.5em;
-    }
+.ot-all-events .events-results {
+    order: 0;
+    flex: 1;
+}
 
-    .ot-all-events .event-search {
-        display: flex;
-        flex-direction: column;
-        margin-bottom: 2em;
-    }
+.ot-all-events .events-controls, .events-results {
+    display: flex;
+    flex-direction: column;
+    margin: 0 1.5em;
+}
 
-    .ot-all-events h3 {
-        font-size: 1.2em;
-        font-weight: bold;
-    }
+.ot-all-events .event-search {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2em;
+}
 
-    .ot-all-events .event-search form {
-        display: flex;
-        flex-direction: column;
-    }
+.ot-all-events h3 {
+    font-size: 1.2em;
+    font-weight: bold;
+}
 
-    .ot-all-events .event-search form input, button {
-        margin-bottom: 1em;
-        line-height: 1.4em;
-        font-size: 1.1em;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        padding: 6px 12px;
-    }
+.ot-all-events .event-search form {
+    display: flex;
+    flex-direction: column;
+}
 
-    .ot-all-events .event-search form button {
-        border: solid 2px #cccccc;
-    }
+.ot-all-events .event-search form input, button {
+    margin-bottom: 1em;
+    line-height: 1.4em;
+    font-size: 1.1em;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 6px 12px;
+}
 
-    .ot-all-events .event-search form button:hover {
-        background-color: #d8edf3;
-        cursor: pointer;
-    }
+.ot-all-events .event-search form button {
+    border: solid 2px #cccccc;
+}
 
-    .ot-all-events #event-map {
-        height: 400px;
-        width: 100%;
-        align-self: flex-end;
-    }
+.ot-all-events .event-search form button:hover {
+    background-color: #d8edf3;
+    cursor: pointer;
+}
 
-    .ot-all-events .event {
-        display: flex;
-        flex-direction: column;
-        border-bottom: solid 2px #cccccc;
-        border-radius: 4px;
-        padding: 1em;
-        justify-content: space-around;
-    }
+.ot-all-events #event-map {
+    height: 400px;
+    width: 100%;
+    align-self: flex-end;
+}
 
-    .ot-all-events .event-preview {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
+.ot-all-events .event {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 2px #cccccc;
+    border-radius: 4px;
+    padding: 1em;
+    justify-content: space-around;
+}
 
-    .ot-all-events .event-preview .event-poster {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
+.ot-all-events .event-preview {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
 
-    .ot-all-events .event-preview .event-poster img {
-        width: auto;
-        max-width: 100%;
-        min-width: 40%;
-        height: auto;
-        margin-right: 4em;
-    }
+.ot-all-events .event-preview .event-poster {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
-    .ot-all-events .event-preview .event-summary {
-        flex: 2;
-        display: flex;
-        flex-direction: column;
-    }
+.ot-all-events .event-preview .event-poster img {
+    width: auto;
+    max-width: 100%;
+    min-width: 40%;
+    height: auto;
+    margin-right: 4em;
+}
 
-    .ot-all-events .event-preview .event-summary > span {
-        margin-bottom: 0.5em;
-    }
+.ot-all-events .event-preview .event-summary {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+}
 
-    .ot-all-events .event-preview .event-name {
-        font-size: 1.4em;
-        color: #333333;
-        font-weight: bold;
-    }
+.ot-all-events .event-preview .event-summary > span {
+    margin-bottom: 0.5em;
+}
 
-    .ot-all-events .event-preview .event-loc-date {
-        font-size: 1.1em;
-        color: #4d4d4d;
-        font-weight: bold;
-    }
+.ot-all-events .event-preview .event-name {
+    font-size: 1.4em;
+    color: #333333;
+    font-weight: bold;
+}
 
-    .ot-all-events .event-preview .event-description {
-        color: #4d4d4d;
-    }
+.ot-all-events .event-preview .event-loc-date {
+    font-size: 1.1em;
+    color: #4d4d4d;
+    font-weight: bold;
+}
 
-    .ot-all-events .event-see {
-        align-self: stretch;
-        padding: 0.4em 0.8em;
-        font-size: 1.1em;
-        margin-top: 0.4em;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-    }
+.ot-all-events .event-preview .event-description {
+    color: #4d4d4d;
+}
 
-    .ot-all-events .event-see:hover {
-        text-decoration: none;
-        font-weight: bold;
-    }
+.ot-all-events .event-see {
+    align-self: stretch;
+    padding: 0.4em 0.8em;
+    font-size: 1.1em;
+    margin-top: 0.4em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.ot-all-events .event-see:hover {
+    text-decoration: none;
+    font-weight: bold;
+}
 
 /*============================
 Event's details pages