add responsive behavior to classic template

ot_templating/Resources/Private/Partials/Classic/Menu.html

@@ -11,64 +11,85 @@
 <v:menu as="mainMenu"
         classHasSubpages="dropdown"
         pageUid="{ot:rootPage.getId()}">
+    <div id="menu-container">
 
-    <ul id="menu">
+        <f:comment><!-- Button for mobile view, hidden by default --></f:comment>
+        <a class="toggle-menu" href="#">
+            <i class="fa fa-bars"></i>
+        </a>
 
-        <f:for each="{mainMenu}" as="mainMenuItem">
+        <ul id="menu">
+            <f:for each="{mainMenu}" as="mainMenuItem">
 
-            <li class="{mainMenuItem.class} delayed-collapsing">
+                <li class="{mainMenuItem.class} delayed-collapsing">
 
-                <f:link.page pageUid="{mainMenuItem.uid}" title="{mainMenuItem.linktext}">
-                    {mainMenuItem.linktext}
+                    <div class="menu-label">
+                        <f:link.page pageUid="{mainMenuItem.uid}" title="{mainMenuItem.linktext}">
+                            {mainMenuItem.linktext}
+                            <f:if condition="{mainMenuItem.hasSubPages}">
+                                <i class="caret fa fa-caret-down"></i>
+                            </f:if>
+                        </f:link.page>
+
+                        <f:comment><!-- Button for mobile view, hidden by default --></f:comment>
+                        <f:if condition="{mainMenuItem.hasSubPages}">
+                            <button class="toggle-dropdown fa fa-plus"></button>
+                        </f:if>
+                    </div>
+
+                    <f:comment><!--Si la page a des sous-pages: menu de second niveau--></f:comment>
                     <f:if condition="{mainMenuItem.hasSubPages}">
-                        <i class="caret fa fa-caret-down"></i>
-                    </f:if>
-                </f:link.page>
 
-                <f:comment><!--Si la page a des sous-pages: menu de second niveau--></f:comment>
-                <f:if condition="{mainMenuItem.hasSubPages}">
+                        <v:menu as="subMenu"
+                                pageUid="{mainMenuItem.uid}"
+                                classHasSubpages="dropdown">
 
-                    <v:menu as="subMenu"
-                            pageUid="{mainMenuItem.uid}"
-                            classHasSubpages="dropdown">
+                            <ul class="dropdown-menu">
 
-                        <ul class="dropdown-menu">
+                                <f:for each="{subMenu}" as="subMenuItem">
 
-                            <f:for each="{subMenu}" as="subMenuItem">
+                                    <li class="{subMenuItem.class} delayed-collapsing">
+                                        <div class="menu-label">
+                                            <f:link.page pageUid="{subMenuItem.uid}" title="{subMenuItem.linktext}">
+                                                {subMenuItem.title}
 
-                                <li class="{subMenuItem.class} delayed-collapsing">
-                                    <f:link.page pageUid="{subMenuItem.uid}" title="{subMenuItem.linktext}">
-                                        {subMenuItem.title}
+                                                <f:if condition="{subMenuItem.hasSubPages}">
+                                                    <i class="caret fa fa-caret-right"></i>
+                                                </f:if>
+                                            </f:link.page>
 
+                                            <f:comment><!-- Buttons for mobile view, hidden by default --></f:comment>
+                                            <f:if condition="{subMenuItem.hasSubPages}">
+                                                <button class="toggle-dropdown fa fa-plus"></button>
+                                            </f:if>
+                                        </div>
+
+                                        <f:comment><!--Si la page a des sous-pages: menu de troisième niveau--></f:comment>
                                         <f:if condition="{subMenuItem.hasSubPages}">
-                                            <i class="caret fa fa-caret-right"></i>
+
+                                            <v:menu as="thirdLevelMenu"
+                                                    pageUid="{subMenuItem.uid}" >
+
+                                                <ul class="dropdown-menu">
+                                                    <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">
+                                                        <li class="{thirdLevelMenuItem.class}">
+                                                            <f:link.page pageUid="{thirdLevelMenuItem.uid}" title="{thirdLevelMenuItem.linktext}">
+                                                                {thirdLevelMenuItem.title}
+                                                            </f:link.page>
+                                                        </li>
+                                                    </f:for>
+                                                </ul>
+                                            </v:menu>
+
                                         </f:if>
-                                    </f:link.page>
-
-                                    <f:comment><!--Si la page a des sous-pages: menu de troisième niveau--></f:comment>
-                                    <f:if condition="{subMenuItem.hasSubPages}">
-
-                                        <v:menu as="thirdLevelMenu"
-                                                pageUid="{subMenuItem.uid}" >
-
-                                            <ul class="dropdown-menu">
-                                                <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">
-                                                    <li class="{thirdLevelMenuItem.class}">
-                                                        <f:link.page pageUid="{thirdLevelMenuItem.uid}" title="{thirdLevelMenuItem.linktext}">
-                                                            {thirdLevelMenuItem.title}
-                                                        </f:link.page>
-                                                    </li>
-                                                </f:for>
-                                            </ul>
-                                        </v:menu>
-
-                                    </f:if>
-                                </li>
-                            </f:for>
-                        </ul>
-                    </v:menu>
-                </f:if>
-            </li>
-        </f:for>
-    </ul>
+                                    </li>
+                                </f:for>
+                            </ul>
+                        </v:menu>
+
+                    </f:if>
+                </li>
+            </f:for>
+        </ul>
+    </div>
 </v:menu>

ot_templating/Resources/Public/assets/Classic/script/main.js

@@ -29,6 +29,8 @@ $(document).ready(function(){
 
     $('.dropdown').on('mouseenter', function(e) {
 
+        e.preventDefault();
+
         // stop any delayed hiding on this since the cursor went back on it
         stopDelayedHidingFor($(this));
 
@@ -80,6 +82,17 @@ $(document).ready(function(){
         });
     });
 
+    // * Responsive menu
+
+    $('#menu-container .toggle-menu').on('click', function() {
+        $('#menu').toggleClass('show-flex');
+    });
+
+    $('.toggle-dropdown').on('click', function() {
+        var dropdown = $(this).closest('.dropdown');
+        var dropdown_menu = dropdown.find('.dropdown-menu').first();
+        dropdown_menu.toggleClass('show-flex');
+    });
 
     // **** Login Pop-Up and Auth
     $('#login-btn').on('click', function(e) {

ot_templating/Resources/Public/assets/Classic/style/_base.scss

@@ -8,4 +8,3 @@ a {
   text-decoration: none;
 }
 
-

ot_templating/Resources/Public/assets/Classic/style/_states.scss

@@ -1,6 +1,140 @@
-// Generic special states that could apply
+// Generic special states that could apply, and media queries
+$menu-font-color: $menu-font-color;
 
 .alert {
   color: $forms-error-color;
   font-weight: bold;
 }
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+
+//  Topbar
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  //   Content
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  //   Footer
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+
+}
+
+
+@media (not(hover)), screen and (max-width: 900px) {
+  //  Menu
+  #menu {
+    display: none;
+
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: $menu-font-color;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: $menu-font-color;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}

ot_templating/Resources/Public/assets/Classic/style/module/_carousel.scss

@@ -16,15 +16,17 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
 // Default CSS, in case slick is not loaded or activated
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 

ot_templating/Resources/Public/assets/Classic/style/module/_content.scss

@@ -157,7 +157,6 @@ $cols-header-font-weight: $cols-header-font-weight;
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 
   // special case
   header {

ot_templating/Resources/Public/assets/Classic/style/module/_dropdown.scss

@@ -9,6 +9,7 @@
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;

ot_templating/Resources/Public/assets/Classic/style/module/_footer.scss

@@ -17,8 +17,8 @@
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }

ot_templating/Resources/Public/assets/Classic/style/module/_menu.scss

@@ -19,32 +19,38 @@ $menu-item-height: 50px;
 $submenu-item-height: 30px;
 
 
-#menu {
+#menu-container {
   @include flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
-
+  flex-direction: column;
+  position: relative;
   background-color: $menu-background-color;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-
-  position: relative;
-
 }
 
-#menu:after {
+#menu-container:after {
   content: ""; /* empty but necessary */
   position: absolute;
   background-color: $menu-background-color;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  @include flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -127,8 +133,29 @@ $submenu-item-height: 30px;
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+  //max-width: 60vw;
+}
+
+// Prepare responsive behavior
+#menu-container .toggle-menu {
+  display: none;
+  color: $menu-dropdown-font-color;
+  background-color: $menu-dropdown-background-color;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: $menu-dropdown-font-color;
+  background-color: $menu-dropdown-background-color;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }

ot_templating/Resources/Public/assets/Classic/style/style.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #4facc6;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #4facc6;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #4facc6;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=style.css.map */

ot_templating/Resources/Public/assets/Classic/style/style.scss

@@ -70,10 +70,11 @@ $warning-background-color: #e60000 !default;
 $warning-font-color: #ffffff !default;
 
 // Import all project files
+//   (take care to the order of import,
+//    for ex _states shall be last, and mixins first)
 @import
 "_mixins",
 "_base",
-"_states",
 "_layout",
 "module/_dropdown",
 "module/_topbar",
@@ -94,4 +95,5 @@ $warning-font-color: #ffffff !default;
 "module/_forms",
 "module/_contact",
 "module/_faq",
-"module/_fce-2col";
+"module/_fce-2col",
+"_states";

ot_templating/Resources/Public/assets/Classic/style/theme-blue.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #097f9a;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #097f9a;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #097f9a;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-blue.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-green.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #04a04c;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #04a04c;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #04a04c;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-green.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-grey.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #8c8c8c;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #8c8c8c;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #8c8c8c;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-grey.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-light-blue.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #0aa5ec;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #0aa5ec;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #0aa5ec;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-light-blue.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-light-red.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #dd453f;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #dd453f;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #dd453f;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-light-red.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-orange.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #e4611b;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #e4611b;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #e4611b;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-orange.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-purple.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #a5377e;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #a5377e;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #a5377e;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-purple.css.map */

ot_templating/Resources/Public/assets/Classic/style/theme-red.css

@@ -7,11 +7,6 @@ a {
   text-decoration: none;
 }
 
-.alert {
-  color: #e60000;
-  font-weight: bold;
-}
-
 body {
   max-width: 1170px;
   margin: auto;
@@ -69,6 +64,7 @@ body {
 ul.dropdown-menu {
   display: none;
   position: absolute;
+  top: 100%;
   z-index: 1;
   margin: auto 0;
   padding: 0;
@@ -138,7 +134,7 @@ ul.dropdown-left {
   font-weight: 500;
 }
 
-#menu {
+#menu-container {
   /* OLD - iOS 6-, Safari 3.1-6 */
   display: -webkit-box;
   /* OLD - Firefox 19- (buggy but mostly works) */
@@ -149,28 +145,45 @@ ul.dropdown-left {
   display: -webkit-flex;
   /* NEW, Spec - Opera 12.1, Firefox 20+ */
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
+  flex-direction: column;
+  position: relative;
   background-color: #df0009;
-  padding: 0;
-  align-items: center;
   margin: 0 0 1em;
-  position: relative;
 }
 
-#menu:after {
+#menu-container:after {
   content: "";
   /* empty but necessary */
   position: absolute;
   background-color: #df0009;
   height: 100%;
   left: -50vw;
-  width: 200vw;
+  width: 150vw;
   z-index: -1;
 }
 
+#menu {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+
 #menu li {
+  display: flex;
   height: 100%;
 }
 
@@ -249,10 +262,29 @@ ul.dropdown-left {
 }
 
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
-#menu.sticky {
+#menu-container.sticky {
   position: fixed;
   top: 0;
-  max-width: 60vw;
+}
+
+#menu-container .toggle-menu {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  padding: 12px;
+  margin: 4px 20px 4px 4px;
+  align-self: flex-end;
+  border-radius: 5px;
+  font-size: 32px;
+}
+
+#menu-container .toggle-dropdown {
+  display: none;
+  color: #555;
+  background-color: #ffffff;
+  font-size: 18px;
+  height: 32px;
+  margin: 0;
 }
 
 .content {
@@ -365,7 +397,6 @@ ul.dropdown-left {
 .centralcol {
   flex: 1;
   padding: 0 2em;
-  min-width: 600px;
 }
 .centralcol header h2 {
   color: #df0009;
@@ -410,8 +441,8 @@ ul.dropdown-left {
   background-repeat: repeat-x;
   box-shadow: 0px -2px 10px 0px #656565;
   height: 84px;
-  left: -50%;
-  width: 200%;
+  left: -50vw;
+  width: 150vw;
   z-index: -1;
   margin: 0;
 }
@@ -581,14 +612,16 @@ header .slick-track {
 
 .slick-slide img {
   max-width: initial;
+  width: 100%;
+  height: auto;
 }
 
-.carousel .carousel-img:not(.slick-slide) {
+.carousel div:not(.slick-slide) > .carousel-img {
   width: 100%;
   display: none;
 }
 
-.carousel .carousel-img:first-child:not(.slick-slide) {
+.carousel div:not(.slick-slide):first-child > .carousel-img {
   display: inline;
 }
 
@@ -1237,4 +1270,135 @@ form button[type=submit]:hover {
   margin-right: 0;
 }
 
+.alert {
+  color: #e60000;
+  font-weight: bold;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.show-flex {
+  display: flex !important;
+}
+
+@media screen and (max-width: 900px) {
+  #topbar {
+    height: auto;
+    flex-direction: column;
+  }
+
+  .topbar-logo img {
+    max-height: 48px;
+  }
+
+  .topbar-network-logo img {
+    max-height: 36px;
+  }
+
+  #topbar > * {
+    margin: 8px 0;
+  }
+
+  .main {
+    flex-direction: column;
+  }
+
+  .centralcol {
+    order: 1;
+  }
+
+  .leftcol {
+    order: 2;
+    min-width: 0;
+    width: auto;
+    margin: 0 5%;
+  }
+
+  .rightcol {
+    order: 3;
+    min-width: 0;
+    width: auto;
+    margin: 0 5% 20px 5%;
+  }
+
+  #footer {
+    height: auto;
+    min-height: 100px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #footer::after {
+    height: 100%;
+  }
+
+  .footer-navbar {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .footer-navbar li {
+    margin-bottom: 16px;
+  }
+
+  footer .logo-ot {
+    margin: auto;
+  }
+}
+@media (false), screen and (max-width: 900px) {
+  #menu {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #menu .caret {
+    display: none;
+  }
+
+  #menu-container .toggle-menu {
+    display: flex;
+  }
+
+  #menu-container .toggle-dropdown {
+    display: flex;
+  }
+
+  #menu li {
+    margin: 6px 0;
+    flex-direction: column;
+    width: 80%;
+  }
+
+  #menu li .menu-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  #menu li a {
+    flex: 1;
+  }
+
+  #menu .dropdown-menu {
+    flex-direction: column;
+    position: static;
+    float: none;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    color: #ffffff;
+    padding-left: 12px;
+  }
+
+  #menu .dropdown-menu a {
+    color: #ffffff;
+    height: auto;
+    white-space: normal;
+    text-align: left;
+  }
+}
+
 /*# sourceMappingURL=theme-red.css.map */