logo is now textual+css, added lightbox plugin

user/config/plugins/featherlight.yaml

@@ -0,0 +1,10 @@
+enabled: true                 # global enable/disable the entire plugin
+active: true                  # if the plugin is active and JS/CSS should be loaded
+gallery: true                # enable/disable the gallery extension
+requirejs: false              # output to an AMD module
+openSpeed: 250                # open speed in ms
+closeSpeed: 250               # close speed in ms
+closeOnClick: background      # background|anywhere|false
+closeOnEsc: true              # true|false on hitting Esc key
+root: body                    # where to append featherlights
+initTemplate: plugin://featherlight/js/featherlight.init.js

user/config/system.yaml

@@ -35,7 +35,7 @@ errors:
   log: true
 
 debugger:
-  enabled: false
+  enabled: true
   twig: true
   shutdown:
     close_connection: true

user/plugins/featherlight/.gitignore

@@ -0,0 +1,2 @@
+
+.DS_Store

user/plugins/featherlight/CHANGELOG.md

@@ -0,0 +1,55 @@
+# v1.5.0
+## 07/26/2017
+
+1. [](#new)
+    * Update to Featherlight 1.7.7
+
+# v1.4.0
+## 07/14/2016
+
+1. [](#new)
+    * Allow to have a custom initialization javascript file
+    * Allow AMD module output for RequireJS
+1. [](#improved)
+    * Moved initialization to its own javascript file instead of inlined in the PHP code
+    * Fixed closeOnEsc
+
+# v1.3.1
+## 05/23/2016
+
+1. [](#improved)
+    * Use common language strings
+    * Set active by default
+
+# v1.3.0
+## 08/25/2015
+
+1. [](#improved)
+    * Added blueprints for Grav Admin plugin
+
+# v1.2.0
+## 06/16/2015
+
+1. [](#improved)
+    * Updated to featherlight 1.3.2
+    * Added Gallery support
+
+# v1.1.0
+## 03/24/2015
+
+1. [](#improved)
+    * Updated to featherlight 1.2.3
+    * Added 'root' option to configure where featherlight is added
+    * Added reference for to load jQuery if needed
+
+# v1.0.3
+## 02/19/2015
+
+1. [](#improved)
+    * README improvements
+
+# v1.0.2
+## 11/30/2014
+
+1. [](#new)
+    * ChangeLog started...

user/plugins/featherlight/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Grav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

user/plugins/featherlight/README.md

@@ -0,0 +1,160 @@
+# Grav Featherlight Plugin
+
+![Featherlight](assets/featherlight.png)
+
+`featherlight` is a simple [Grav](http://github.com/getgrav/grav) plugin that adds **lightbox** functionality via the jQuery plugin [Featherlight.js](http://noelboss.github.io/featherlight/).
+
+# Installation
+
+Installing the Featherlight plugin can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.
+
+## GPM Installation (Preferred)
+
+The simplest way to install this plugin is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm) through your system's Terminal (also called the command line).  From the root of your Grav install type:
+
+    bin/gpm install featherlight
+
+This will install the Featherlight plugin into your `/user/plugins` directory within Grav. Its files can be found under `/your/site/grav/user/plugins/featherlight`.
+
+## Manual Installation
+
+To install this plugin, just download the zip version of this repository and unzip it under `/your/site/grav/user/plugins`. Then, rename the folder to `featherlight`. You can find these files either on [GitHub](https://github.com/getgrav/grav-plugin-featherlight) or via [GetGrav.org](http://getgrav.org/downloads/plugins#extras).
+
+You should now have all the plugin files under
+
+    /your/site/grav/user/plugins/featherlight
+
+>> NOTE: This plugin is a modular component for Grav which requires [Grav](http://github.com/getgrav/grav) to function
+
+# Usage
+
+To best understand how Featherlight works, you should read through the original project [documentation](https://github.com/noelboss/featherlight/#installation).
+
+## Configuration
+
+Featherlight is **enabled** but **not active** by default.  You can change this behavior by setting `active: true` in the plugin's configuration.  Simply copy the `user/plugins/featherlight/featherlight.yaml` into `user/config/plugins/featherlight.yaml` and make your modifications.
+
+```
+enabled: true                 # global enable/disable the entire plugin
+active: false                 # if the plugin is active and JS/CSS should be loaded
+openSpeed: 250                # open speed in ms
+closeSpeed: 250               # close speed in ms
+closeOnClick: background      # background|anywhere|false
+closeOnEsc: true              # true|false on hitting Esc key
+root: body                    # where to append featherlights
+initTemplate: plugin://featherlight/js/featherlight.init.js
+```
+
+You can also override any default setings from the page headers:
+
+eg:
+
+    ---
+    title: Sample Code With Custom Settings
+    featherlight:
+        active: true
+        openSpeed: 100
+        closeSpeed: 100
+    ---
+
+
+You can also enable globally in the `yaml`, but disable featherlighting for a particular page:
+
+    ---
+    title: Sample Code with Featherlight disabled
+    featherlight:
+        active: false
+    ---
+
+## Implementing a lightbox with Featherlight
+
+To implement a lightbox using Featherlight in Grav, you must output the proper HTML output.  Luckily Grav already takes care of this for you if you are using Grav media files.
+
+In markdown this could look something like:
+
+```
+![Sample Image](sample-image.jpg?lightbox=1024&cropResize=200,200)
+```
+
+In Twig this could look like:
+
+```
+{{ page.media['sample-image.jpg'].lightbox(1024,768).cropResize(200,200).html('Sample Image') }}
+```
+
+More details can be found in the [Grav documentation for Media functionality](http://learn.getgrav.org/content/media).
+
+## Adding captions to the lightbox
+
+Image captions within the lightbox do not come out of the box with featherlight. But as the author described in his [wiki](https://github.com/noelboss/featherlight/wiki/Gallery:-showing-a-caption) it's quite easy to add.
+
+Per default we use a this script when initializing the plugin: [js/featherlight.init.js](js/featherlight.init.js). You can copy it to the "user" folder, change the initTemplate setting to `user://js/featherlight.init.js` and add a afterContent callback like this:
+
+    $(document).ready(function(){
+        $('a[rel="lightbox"]').{pluginName}({
+            openSpeed: {openSpeed},
+            closeSpeed: {closeSpeed},
+            closeOnClick: '{closeOnClick}',
+            closeOnEsc: '{closeOnEsc}',
+            root: '{root}',
+            afterContent: function() {
+                var caption = this.$currentTarget.find('img').attr('alt');
+                this.$instance.find('.caption').remove();
+                $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
+            }
+        });
+    });
+
+The placeholders `{pluginName}`, `{openSpeed}`, `{closeSpeed}` and `{root}` will be replaced when processing this file.
+
+## Using AMD modules with RequireJS
+
+Must update to `v1.4.1`. When you select `RequireJS` from the config, this plugin will inlineJS an AMD module called `featherlight` that you can use with RequireJS. If you call this module directly, it will work, however if you decide to disable this plugin RequireJS will fail. As such, if you include the module below it will see if `featherlight` exists and include it if it does.
+
+```
+define(['jquery'], function($){
+  var Lightbox = {
+    Init : function() {
+    if (require.specified('featherlight')) {
+      require( [ 'featherlight' ], function (Featherlight) {
+        Featherlight.Init();
+      });
+      }
+    }
+  };
+  return Lightbox;
+});
+```
+
+Also set your main.js file to include this line:
+
+```
+paths: {
+    ...
+    plugin: '/user/plugins',
+    ...
+},
+```
+
+# Updating
+
+As development for the Featherlight plugin continues, new versions may become available that add additional features and functionality, improve compatibility with newer Grav releases, and generally provide a better user experience. Updating Featherlight is easy, and can be done through Grav's GPM system, as well as manually.
+
+## GPM Update (Preferred)
+
+The simplest way to update this plugin is via the [Grav Package Manager (GPM)](http://learn.getgrav.org/advanced/grav-gpm). You can do this with this by navigating to the root directory of your Grav install using your system's Terminal (also called command line) and typing the following:
+
+    bin/gpm update featherlight
+
+This command will check your Grav install to see if your Featherlight plugin is due for an update. If a newer release is found, you will be asked whether or not you wish to update. To continue, type `y` and hit enter. The plugin will automatically update and clear Grav's cache.
+
+## Manual Update
+
+Manually updating Featherlight is pretty simple. Here is what you will need to do to get this done:
+
+* Delete the `your/site/user/plugins/featherlight` directory.
+* Download the new version of the Featherlight plugin from either [GitHub](https://github.com/getgrav/grav-plugin-featherlight) or [GetGrav.org](http://getgrav.org/downloads/plugins#extras).
+* Unzip the zip file in `your/site/user/plugins` and rename the resulting folder to `featherlight`.
+* Clear the Grav cache. The simplest way to do this is by going to the root Grav directory in terminal and typing `bin/grav clear-cache`.
+
+> Note: Any changes you have made to any of the files listed under this directory will also be removed and replaced by the new set. Any files located elsewhere (for example a YAML settings file placed in `user/config/plugins`) will remain intact.

user/plugins/featherlight/blueprints.yaml

@@ -0,0 +1,113 @@
+name: Featherlight
+version: 1.5.0
+description: "Featherlight is a simple [Grav](http://github.com/getgrav/grav) plugin that adds **lightbox** functionality via the jQuery plugin [Featherlight.js](http://noelboss.github.io/featherlight/)."
+icon: file-photo-o
+author:
+  name: Team Grav
+  email: devs@getgrav.org
+  url: http://getgrav.org
+homepage: https://github.com/getgrav/grav-plugin-featherlight
+keywords: featherlight, plugin, code, lightbox
+bugs: https://github.com/getgrav/grav-plugin-featherlight/issues
+license: MIT
+
+form:
+  validation: strict
+  fields:
+    enabled:
+      type: toggle
+      label: PLUGIN_ADMIN.PLUGIN_STATUS
+      hightlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+
+    active:
+      type: toggle
+      label: Active
+      hightlight: 1
+      default: 1
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+      help: Activate on all pages. You can override this setting on a page basis
+
+    requirejs:
+      type: toggle
+      label: RequireJS
+      hightlight: 1
+      default: 0
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+      help: Outputs a AMD module to use with RequireJS
+
+    gallery:
+      type: toggle
+      label: Gallery
+      hightlight: 1
+      default: 0
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+      help: Enable/disable the lightbox gallery extension
+
+    openSpeed:
+      type: text
+      size: medium
+      label: Open Speed
+      default: '250'
+      help: Open Speed in ms
+
+    closeSpeed:
+      type: text
+      size: medium
+      label: Close Speed
+      default: '250'
+      help: Close Speed in ms
+
+    closeOnClick:
+      type: select
+      size: medium
+      classes: fancy
+      label: Close on Click
+      options:
+        background: background
+        anywhere: anywhere
+        'false': 'false'
+
+    closeOnEsc:
+      type: toggle
+      label: Close on Esc
+      hightlight: 1
+      default: 0
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+      help: Close the lightbox on hitting the Esc key
+
+    root:
+      type: text
+      size: medium
+      label: Root
+      default: 'body'
+      help: Where to append featherlights
+
+    initTemplate:
+      type: text
+      size: medium
+      label: Init script
+      default: 'plugin://featherlight/js/featherlight.init.js'
+      placeholder: 'plugin://featherlight/js/featherlight.init.js'
+      help: Path to template file for JS init script

user/plugins/featherlight/css/featherlight.gallery.min.css

@@ -0,0 +1,8 @@
+/**
+ * Featherlight Gallery – an extension for the ultra slim jQuery lightbox
+ * Version 1.7.7 - http://noelboss.github.io/featherlight/
+ *
+ * Copyright 2017, Noël Raoul Bossart (http://www.noelboss.com)
+ * MIT Licensed.
+**/
+@media all{.featherlight-next,.featherlight-previous{display:block;position:absolute;top:25px;right:25px;bottom:0;left:80%;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(0,0,0,0)}.featherlight-previous{left:25px;right:80%}.featherlight-next:hover,.featherlight-previous:hover{background:rgba(255,255,255,.25)}.featherlight-next span,.featherlight-previous span{display:none;position:absolute;top:50%;left:5%;width:82%;text-align:center;font-size:80px;line-height:80px;margin-top:-40px;text-shadow:0 0 5px #fff;color:#fff;font-style:normal;font-weight:400}.featherlight-next span{right:5%;left:auto}.featherlight-next:hover span,.featherlight-previous:hover span{display:inline-block}.featherlight-first-slide.featherlight-last-slide .featherlight-next,.featherlight-first-slide.featherlight-last-slide .featherlight-previous,.featherlight-loading .featherlight-next,.featherlight-loading .featherlight-previous,.featherlight-swipe-aware .featherlight-next,.featherlight-swipe-aware .featherlight-previous{display:none}}@media only screen and (max-device-width:1024px){.featherlight-next:hover,.featherlight-previous:hover{background:0 0}.featherlight-next span,.featherlight-previous span{display:block}}@media only screen and (max-width:1024px){.featherlight-next,.featherlight-previous{top:10px;right:10px;left:85%}.featherlight-previous{left:10px;right:85%}.featherlight-next span,.featherlight-previous span{margin-top:-30px;font-size:40px}}

user/plugins/featherlight/css/featherlight.min.css

@@ -0,0 +1,8 @@
+/**
+ * Featherlight - ultra slim jQuery lightbox
+ * Version 1.7.7 - http://noelboss.github.io/featherlight/
+ *
+ * Copyright 2017, Noël Raoul Bossart (http://www.noelboss.com)
+ * MIT Licensed.
+**/
+@media all{.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch;overflow-y:scroll}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}

user/plugins/featherlight/featherlight.php

@@ -0,0 +1,130 @@
+<?php
+namespace Grav\Plugin;
+
+use \Grav\Common\Plugin;
+use \Grav\Common\Grav;
+use \Grav\Common\Page\Page;
+
+class FeatherlightPlugin extends Plugin
+{
+    protected $active = false;
+
+    /**
+     * @return array
+     */
+    public static function getSubscribedEvents()
+    {
+        return [
+            'onPluginsInitialized' => ['onPluginsInitialized', 0]
+        ];
+    }
+
+    /**
+     * Initialize configuration
+     */
+    public function onPluginsInitialized()
+    {
+        if ($this->isAdmin()) {
+            $this->active = false;
+            return;
+        }
+
+        $this->enable([
+            'onPageInitialized' => ['onPageInitialized', 0]
+        ]);
+    }
+
+    /**
+     * Initialize configuration
+     */
+    public function onPageInitialized()
+    {
+        $defaults = (array) $this->config->get('plugins.featherlight');
+
+        /** @var Page $page */
+        $page = $this->grav['page'];
+        if (isset($page->header()->featherlight)) {
+            $this->config->set('plugins.featherlight', array_merge($defaults, $page->header()->featherlight));
+        }
+
+        // take the old legacy `lightbox: true` setting into account
+        if (isset($page->header()->lightbox) && $page->header()->lightbox == true) {
+            $legacy = true;
+        } else {
+            $legacy = false;
+        }
+
+        $this->active = $this->config->get('plugins.featherlight.active') || $legacy;
+
+        if ($this->active) {
+            $this->enable([
+                'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
+            ]);
+        }
+    }
+
+    /**
+     * if enabled on this page, load the JS + CSS theme.
+     */
+    public function onTwigSiteVariables()
+    {
+        $config = $this->config->get('plugins.featherlight');
+
+        if ($config['requirejs']) {
+            $init = "define(\"featherlight\",['jquery', 'plugin/featherlight/js/featherlight.min' ], function($){
+                var Lightbox = {
+                  Init : function() {
+                    $('a[rel=\"lightbox\"]').featherlight({
+                      openSpeed: {$config['openSpeed']},
+                      closeSpeed: {$config['closeSpeed']},
+                      closeOnClick: '{$config['closeOnClick']}',
+                      closeOnEsc:   '{$config['closeOnEsc']}',
+                      root: '{$config['root']}'
+                    });
+                  }
+                };
+                return Lightbox;
+            });";
+            $this->grav['assets']
+                ->addCss('plugin://featherlight/css/featherlight.min.css')
+                ->addInlineJs($init);
+        } elseif ($config['gallery']) {
+            $init = $this->getInitJs($config);
+            $this->grav['assets']
+                 ->addCss('plugin://featherlight/css/featherlight.min.css')
+                 ->addCss('plugin://featherlight/css/featherlight.gallery.min.css')
+                 ->add('jquery', 101)
+                 ->addJs('plugin://featherlight/js/featherlight.min.js')
+                 ->addJs('plugin://featherlight/js/featherlight.gallery.min.js')
+                 ->addInlineJs($init);
+        } else {
+            $init = $this->getInitJs($config);
+            $this->grav['assets']
+                ->addCss('plugin://featherlight/css/featherlight.min.css')
+                ->add('jquery', 101)
+                ->addJs('plugin://featherlight/js/featherlight.min.js')
+                ->addInlineJs($init);
+        }
+    }
+
+    protected function getInitJs($config) {
+        $asset = $this->grav['locator']->findResource($config['initTemplate'], false);
+
+        $init = file_get_contents(ROOT_DIR . $asset);
+
+        $init = str_replace(
+            array('{pluginName}', '{openSpeed}', '{closeSpeed}', '{closeOnClick}', '{closeOnEsc}', '{root}'),
+            array(
+                $config['gallery'] ? 'featherlightGallery' : 'featherlight',
+                $config['openSpeed'],
+                $config['closeSpeed'],
+                $config['closeOnClick'],
+                $config['closeOnEsc'],
+                $config['root']
+            ),
+            $init
+        );
+
+        return $init;
+    }
+}

user/plugins/featherlight/featherlight.yaml

@@ -0,0 +1,10 @@
+enabled: true                 # global enable/disable the entire plugin
+active: true                  # if the plugin is active and JS/CSS should be loaded
+gallery: false                # enable/disable the gallery extension
+requirejs: false              # output to an AMD module
+openSpeed: 250                # open speed in ms
+closeSpeed: 250               # close speed in ms
+closeOnClick: background      # background|anywhere|false
+closeOnEsc: true              # true|false on hitting Esc key
+root: body                    # where to append featherlights
+initTemplate: plugin://featherlight/js/featherlight.init.js

user/plugins/featherlight/hebe.json

@@ -0,0 +1,15 @@
+{
+   "project":"grav-plugin-featherlight",
+   "platforms":{
+      "grav":{
+         "nodes":{
+            "plugin":[
+               {
+                  "source":"/",
+                  "destination":"/user/plugins/featherlight"
+               }
+            ]
+         }
+      }
+   }
+}

user/plugins/featherlight/js/featherlight.init.js

@@ -0,0 +1,9 @@
+$(document).ready(function(){
+    $('a[rel="lightbox"]').{pluginName}({
+        openSpeed: {openSpeed},
+        closeSpeed: {closeSpeed},
+        closeOnClick: '{closeOnClick}',
+        closeOnEsc: '{closeOnEsc}',
+        root: '{root}'
+    });
+});

user/themes/ouidade/css/styles.css

@@ -171,6 +171,7 @@ figure {
  * Address differences between Firefox and other browsers.
  */
 hr {
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   height: 0; }
 
@@ -277,6 +278,7 @@ input {
  */
 input[type="checkbox"],
 input[type="radio"] {
+  -webkit-box-sizing: border-box;
   box-sizing: border-box;
   /* 1 */
   padding: 0;
@@ -298,6 +300,7 @@ input[type="number"]::-webkit-outer-spin-button {
 input[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   /* 2 */ }
 
@@ -403,7 +406,6 @@ html, body {
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box; }
 
 html,
@@ -1709,6 +1711,7 @@ select {
   margin-bottom: 1.25rem;
   padding: 0.875rem 1.5rem 0.875rem 0.875rem;
   position: relative;
+  -webkit-transition: opacity 300ms ease-out;
   transition: opacity 300ms ease-out;
   background-color: #008CBA;
   border-color: #0078a0;
@@ -2100,6 +2103,7 @@ button, .button {
   background-color: #008CBA;
   border-color: #007095;
   color: #FFFFFF;
+  -webkit-transition: background-color 300ms ease-out;
   transition: background-color 300ms ease-out; }
   button:hover, button:focus, .button:hover, .button:focus {
     background-color: #007095; }
@@ -2176,6 +2180,7 @@ button, .button {
     background-color: #008CBA;
     border-color: #007095;
     color: #FFFFFF;
+    -webkit-box-shadow: none;
     box-shadow: none;
     cursor: default;
     opacity: 0.7; }
@@ -2189,6 +2194,7 @@ button, .button {
       background-color: #e7e7e7;
       border-color: #b9b9b9;
       color: #333333;
+      -webkit-box-shadow: none;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
@@ -2202,6 +2208,7 @@ button, .button {
       background-color: #43AC6A;
       border-color: #368a55;
       color: #FFFFFF;
+      -webkit-box-shadow: none;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
@@ -2215,6 +2222,7 @@ button, .button {
       background-color: #f04124;
       border-color: #cf2a0e;
       color: #FFFFFF;
+      -webkit-box-shadow: none;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
@@ -2228,6 +2236,7 @@ button, .button {
       background-color: #f08a24;
       border-color: #cf6e0e;
       color: #FFFFFF;
+      -webkit-box-shadow: none;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
@@ -2241,6 +2250,7 @@ button, .button {
       background-color: #a0d3e8;
       border-color: #61b6d9;
       color: #333333;
+      -webkit-box-shadow: none;
       box-shadow: none;
       cursor: default;
       opacity: 0.7; }
@@ -2739,9 +2749,6 @@ button::-moz-focus-inner {
     left: 50%;
     top: 50%;
     -webkit-transform: translateY(-50%) translateX(-50%);
-    -moz-transform: translateY(-50%) translateX(-50%);
-    -ms-transform: translateY(-50%) translateX(-50%);
-    -o-transform: translateY(-50%) translateX(-50%);
     transform: translateY(-50%) translateX(-50%);
     max-height: 100%;
     max-width: 100%; }
@@ -2840,6 +2847,7 @@ button::-moz-focus-inner {
           max-width: none; }
         .clearing-assembled .clearing-container .carousel > ul li a.th {
           border: none;
+          -webkit-box-shadow: none;
           box-shadow: none;
           display: block; }
         .clearing-assembled .clearing-container .carousel > ul li img {
@@ -3301,6 +3309,7 @@ input:not([type]), input[type="text"], input[type="password"], input[type="date"
   border-style: solid;
   border-width: 1px;
   border-color: #cccccc;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.75);
   display: block;
@@ -3311,12 +3320,8 @@ input:not([type]), input[type="text"], input[type="password"], input[type="date"
   padding: 0.5rem;
   width: 100%;
   -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: border-color 0.15s linear, background 0.15s linear;
-  -moz-transition: border-color 0.15s linear, background 0.15s linear;
-  -ms-transition: border-color 0.15s linear, background 0.15s linear;
-  -o-transition: border-color 0.15s linear, background 0.15s linear;
   transition: border-color 0.15s linear, background 0.15s linear; }
   input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus {
     background: #fafafa;
@@ -3965,6 +3970,7 @@ label.error {
 .joyride-expose-wrapper {
   background-color: #FFFFFF;
   border-radius: 3px;
+  -webkit-box-shadow: 0 0 15px #FFFFFF;
   box-shadow: 0 0 15px #FFFFFF;
   position: absolute;
   z-index: 102; }
@@ -4075,13 +4081,9 @@ kbd {
 @keyframes rotate {
   from {
     -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
     transform: rotate(0deg); }
   to {
     -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
 /* Orbit Graceful Loading */
@@ -4105,9 +4107,13 @@ kbd {
       display: inline-block; }
   .slideshow-wrapper .preloader {
     border-radius: 1000px;
+    -webkit-animation-duration: 1.5s;
     animation-duration: 1.5s;
+    -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
+    -webkit-animation-name: rotate;
     animation-name: rotate;
+    -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
     border-color: #555555 #FFFFFF;
     border: solid 3px;
@@ -4131,9 +4137,6 @@ kbd {
     padding: 0;
     position: relative;
     -webkit-transform: translateZ(0);
-    -moz-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    -o-transform: translateZ(0);
     transform: translateZ(0); }
     .orbit-container .orbit-slides-container img {
       display: block;
@@ -4311,6 +4314,7 @@ ul.pagination {
     margin-left: 0.3125rem; }
     ul.pagination li a, ul.pagination li button {
       border-radius: 3px;
+      -webkit-transition: background-color 300ms ease-out;
       transition: background-color 300ms ease-out;
       background: none;
       color: #999999;
@@ -4606,6 +4610,7 @@ ul.pagination {
   background-color: #FFFFFF;
   padding: 1.875rem;
   border: solid 1px #666666;
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
   @media only screen and (max-width: 40em) {
     .reveal-modal {
@@ -4627,13 +4632,16 @@ ul.pagination {
     .reveal-modal {
       top: 6.25rem; } }
   .reveal-modal.radius {
+    -webkit-box-shadow: none;
     box-shadow: none;
     border-radius: 3px; }
   .reveal-modal.round {
+    -webkit-box-shadow: none;
     box-shadow: none;
     border-radius: 1000px; }
   .reveal-modal.collapse {
     padding: 0;
+    -webkit-box-shadow: none;
     box-shadow: none; }
   @media only screen and (min-width: 40.0625em) {
     .reveal-modal.tiny {
@@ -4889,6 +4897,7 @@ ul.pagination {
     text-indent: 100%;
     width: 4rem;
     height: 2rem;
+    -webkit-transition: left 0.15s ease-out;
     transition: left 0.15s ease-out; }
   .switch input {
     left: 10px;
@@ -4909,13 +4918,8 @@ ul.pagination {
     top: .25rem;
     width: 1.5rem;
     -webkit-transition: left 0.15s ease-out;
-    -moz-transition: left 0.15s ease-out;
-    -o-transition: translate3d(0, 0, 0);
     transition: left 0.15s ease-out;
     -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-    -ms-transform: translate3d(0, 0, 0);
-    -o-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0); }
   .switch input:checked + label {
     background: #008CBA; }
@@ -5106,12 +5110,15 @@ table {
 /* Image Thumbnails */
 .th {
   border: solid 4px #FFFFFF;
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
   display: inline-block;
   line-height: 0;
   max-width: 100%;
+  -webkit-transition: all 200ms ease-out;
   transition: all 200ms ease-out; }
   .th:hover, .th:focus {
+    -webkit-box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5);
     box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5); }
   .th.radius {
     border-radius: 3px; }
@@ -5302,9 +5309,11 @@ meta.foundation-mq-topbar {
           margin-top: -8px;
           top: 50%;
           right: 0.9375rem;
+          -webkit-box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
           box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
           width: 16px; }
         .top-bar .toggle-topbar.menu-icon a span:hover:after {
+          -webkit-box-shadow: 0 0 0 1px "", 0 7px 0 1px "", 0 14px 0 1px "";
           box-shadow: 0 0 0 1px "", 0 7px 0 1px "", 0 14px 0 1px ""; }
   .top-bar.expanded {
     background: transparent;
@@ -5314,6 +5323,7 @@ meta.foundation-mq-topbar {
     .top-bar.expanded .toggle-topbar a {
       color: #888888; }
       .top-bar.expanded .toggle-topbar a span::after {
+        -webkit-box-shadow: 0 0 0 1px #888888, 0 7px 0 1px #888888, 0 14px 0 1px #888888;
         box-shadow: 0 0 0 1px #888888, 0 7px 0 1px #888888, 0 14px 0 1px #888888; }
     @media screen and (-webkit-min-device-pixel-ratio: 0) {
       .top-bar.expanded .top-bar-section .has-dropdown.moved > .dropdown,
@@ -5326,6 +5336,7 @@ meta.foundation-mq-topbar {
   left: 0;
   position: relative;
   width: auto;
+  -webkit-transition: left 300ms ease-out;
   transition: left 300ms ease-out; }
   .top-bar-section ul {
     display: block;
@@ -5580,6 +5591,7 @@ meta.foundation-mq-topbar {
     margin-bottom: 0;
     max-width: 62.5rem; }
   .top-bar-section {
+    -webkit-transition: none 0 0;
     transition: none 0 0;
     left: 0 !important; }
     .top-bar-section ul {
@@ -6096,6 +6108,7 @@ blockquote p {
     background: transparent !important;
     color: #000000 !important;
     /* Black prints faster: h5bp.com/s */
+    -webkit-box-shadow: none !important;
     box-shadow: none !important;
     text-shadow: none !important; }
   a,
@@ -6145,10 +6158,9 @@ blockquote p {
   position: relative;
   width: 100%;
   -webkit-transition: -webkit-transform 500ms ease;
-  -moz-transition: -moz-transform 500ms ease;
-  -ms-transition: -ms-transform 500ms ease;
-  -o-transition: -o-transform 500ms ease;
-  transition: transform 500ms ease; }
+  transition: -webkit-transform 500ms ease;
+  transition: transform 500ms ease;
+  transition: transform 500ms ease, -webkit-transform 500ms ease; }
   .inner-wrap:before, .inner-wrap:after {
     content: " ";
     display: table; }
@@ -6213,6 +6225,7 @@ blockquote p {
   padding: 0;
   position: relative;
   text-indent: 2.1875rem;
+  -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
   width: 2.8125rem; }
   .tab-bar .menu-icon span::after {
@@ -6223,28 +6236,31 @@ blockquote p {
     top: 50%;
     margin-top: -0.5rem;
     left: 0.90625rem;
+    -webkit-box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
     box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
     width: 1rem; }
   .tab-bar .menu-icon span:hover:after {
+    -webkit-box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3;
     box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3; }
 
 .left-off-canvas-menu {
   -webkit-backface-visibility: hidden;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
+  -webkit-transition: -webkit-transform 500ms ease 0s;
+  transition: -webkit-transform 500ms ease 0s;
   transition: transform 500ms ease 0s;
+  transition: transform 500ms ease 0s, -webkit-transform 500ms ease 0s;
   width: 15.625rem;
   z-index: 1001;
   -webkit-transform: translate3d(-100%, 0, 0);
-  -moz-transform: translate3d(-100%, 0, 0);
-  -ms-transform: translate(-100%, 0);
-  -o-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
   left: 0;
   top: 0; }
@@ -6255,19 +6271,20 @@ blockquote p {
   -webkit-backface-visibility: hidden;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
+  -webkit-transition: -webkit-transform 500ms ease 0s;
+  transition: -webkit-transform 500ms ease 0s;
   transition: transform 500ms ease 0s;
+  transition: transform 500ms ease 0s, -webkit-transform 500ms ease 0s;
   width: 15.625rem;
   z-index: 1001;
   -webkit-transform: translate3d(100%, 0, 0);
-  -moz-transform: translate3d(100%, 0, 0);
-  -ms-transform: translate(100%, 0);
-  -o-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   right: 0;
   top: 0; }
@@ -6278,19 +6295,20 @@ blockquote p {
   -webkit-backface-visibility: hidden;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
+  -webkit-transition: -webkit-transform 500ms ease 0s;
+  transition: -webkit-transform 500ms ease 0s;
   transition: transform 500ms ease 0s;
+  transition: transform 500ms ease 0s, -webkit-transform 500ms ease 0s;
   width: 15.625rem;
   z-index: 1001;
   -webkit-transform: translate3d(0, -100%, 0);
-  -moz-transform: translate3d(0, -100%, 0);
-  -ms-transform: translate(0, -100%);
-  -o-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
   top: 0;
   width: 100%;
@@ -6302,19 +6320,20 @@ blockquote p {
   -webkit-backface-visibility: hidden;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
+  -webkit-transition: -webkit-transform 500ms ease 0s;
+  transition: -webkit-transform 500ms ease 0s;
   transition: transform 500ms ease 0s;
+  transition: transform 500ms ease 0s, -webkit-transform 500ms ease 0s;
   width: 15.625rem;
   z-index: 1001;
   -webkit-transform: translate3d(0, 100%, 0);
-  -moz-transform: translate3d(0, 100%, 0);
-  -ms-transform: translate(0, 100%);
-  -o-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   bottom: 0;
   width: 100%;
@@ -6342,6 +6361,7 @@ ul.off-canvas-list {
     color: rgba(255, 255, 255, 0.7);
     display: block;
     padding: 0.66667rem;
+    -webkit-transition: background 300ms ease;
     transition: background 300ms ease; }
     ul.off-canvas-list li a:hover {
       background: #242424; }
@@ -6350,15 +6370,14 @@ ul.off-canvas-list {
 
 .move-right > .inner-wrap {
   -webkit-transform: translate3d(15.625rem, 0, 0);
-  -moz-transform: translate3d(15.625rem, 0, 0);
-  -ms-transform: translate(15.625rem, 0);
-  -o-transform: translate3d(15.625rem, 0, 0);
   transform: translate3d(15.625rem, 0, 0); }
 
 .move-right .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6375,15 +6394,14 @@ ul.off-canvas-list {
 
 .move-left > .inner-wrap {
   -webkit-transform: translate3d(-15.625rem, 0, 0);
-  -moz-transform: translate3d(-15.625rem, 0, 0);
-  -ms-transform: translate(-15.625rem, 0);
-  -o-transform: translate3d(-15.625rem, 0, 0);
   transform: translate3d(-15.625rem, 0, 0); }
 
 .move-left .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6400,15 +6418,14 @@ ul.off-canvas-list {
 
 .move-top > .inner-wrap {
   -webkit-transform: translate3d(0, -18.75rem, 0);
-  -moz-transform: translate3d(0, -18.75rem, 0);
-  -ms-transform: translate(0, -18.75rem);
-  -o-transform: translate3d(0, -18.75rem, 0);
   transform: translate3d(0, -18.75rem, 0); }
 
 .move-top .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6425,15 +6442,14 @@ ul.off-canvas-list {
 
 .move-bottom > .inner-wrap {
   -webkit-transform: translate3d(0, 18.75rem, 0);
-  -moz-transform: translate3d(0, 18.75rem, 0);
-  -ms-transform: translate(0, 18.75rem);
-  -o-transform: translate3d(0, 18.75rem, 0);
   transform: translate3d(0, 18.75rem, 0); }
 
 .move-bottom .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6450,17 +6466,16 @@ ul.off-canvas-list {
 
 .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu,
 .offcanvas-overlap .top-off-canvas-menu, .offcanvas-overlap .bottom-off-canvas-menu {
-  -ms-transform: none;
   -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
   transform: none;
   z-index: 1003; }
 
 .offcanvas-overlap .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6476,17 +6491,16 @@ ul.off-canvas-list {
       background: rgba(255, 255, 255, 0.05); } }
 
 .offcanvas-overlap-left .right-off-canvas-menu {
-  -ms-transform: none;
   -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
   transform: none;
   z-index: 1003; }
 
 .offcanvas-overlap-left .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6502,17 +6516,16 @@ ul.off-canvas-list {
       background: rgba(255, 255, 255, 0.05); } }
 
 .offcanvas-overlap-right .left-off-canvas-menu {
-  -ms-transform: none;
   -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
   transform: none;
   z-index: 1003; }
 
 .offcanvas-overlap-right .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6528,17 +6541,16 @@ ul.off-canvas-list {
       background: rgba(255, 255, 255, 0.05); } }
 
 .offcanvas-overlap-top .bottom-off-canvas-menu {
-  -ms-transform: none;
   -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
   transform: none;
   z-index: 1003; }
 
 .offcanvas-overlap-top .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6554,17 +6566,16 @@ ul.off-canvas-list {
       background: rgba(255, 255, 255, 0.05); } }
 
 .offcanvas-overlap-bottom .top-off-canvas-menu {
-  -ms-transform: none;
   -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
   transform: none;
   z-index: 1003; }
 
 .offcanvas-overlap-bottom .exit-off-canvas {
   -webkit-backface-visibility: hidden;
+  -webkit-box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
   cursor: pointer;
+  -webkit-transition: background 300ms ease;
   transition: background 300ms ease;
   -webkit-tap-highlight-color: transparent;
   background: rgba(255, 255, 255, 0.2);
@@ -6608,6 +6619,7 @@ ul.off-canvas-list {
   -webkit-overflow-scrolling: touch;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   margin: 0;
   overflow-x: hidden;
@@ -6618,16 +6630,12 @@ ul.off-canvas-list {
   height: 18.75rem;
   z-index: 1002;
   -webkit-transform: translate3d(-100%, 0, 0);
-  -moz-transform: translate3d(-100%, 0, 0);
-  -ms-transform: translate(-100%, 0);
-  -o-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
   left: 0;
   -webkit-transition: -webkit-transform 500ms ease;
-  -moz-transition: -moz-transform 500ms ease;
-  -ms-transition: -ms-transform 500ms ease;
-  -o-transition: -o-transform 500ms ease;
-  transition: transform 500ms ease; }
+  transition: -webkit-transform 500ms ease;
+  transition: transform 500ms ease;
+  transition: transform 500ms ease, -webkit-transform 500ms ease; }
   .left-submenu * {
     -webkit-backface-visibility: hidden; }
   .left-submenu .back > a {
@@ -6649,9 +6657,6 @@ ul.off-canvas-list {
       display: inline; }
   .left-submenu.move-right, .left-submenu.offcanvas-overlap-right, .left-submenu.offcanvas-overlap {
     -webkit-transform: translate3d(0%, 0, 0);
-    -moz-transform: translate3d(0%, 0, 0);
-    -ms-transform: translate(0%, 0);
-    -o-transform: translate3d(0%, 0, 0);
     transform: translate3d(0%, 0, 0); }
 
 .right-submenu {
@@ -6659,6 +6664,7 @@ ul.off-canvas-list {
   -webkit-overflow-scrolling: touch;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   margin: 0;
   overflow-x: hidden;
@@ -6669,16 +6675,12 @@ ul.off-canvas-list {
   height: 18.75rem;
   z-index: 1002;
   -webkit-transform: translate3d(100%, 0, 0);
-  -moz-transform: translate3d(100%, 0, 0);
-  -ms-transform: translate(100%, 0);
-  -o-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   right: 0;
   -webkit-transition: -webkit-transform 500ms ease;
-  -moz-transition: -moz-transform 500ms ease;
-  -ms-transition: -ms-transform 500ms ease;
-  -o-transition: -o-transform 500ms ease;
-  transition: transform 500ms ease; }
+  transition: -webkit-transform 500ms ease;
+  transition: transform 500ms ease;
+  transition: transform 500ms ease, -webkit-transform 500ms ease; }
   .right-submenu * {
     -webkit-backface-visibility: hidden; }
   .right-submenu .back > a {
@@ -6700,9 +6702,6 @@ ul.off-canvas-list {
       display: inline; }
   .right-submenu.move-left, .right-submenu.offcanvas-overlap-left, .right-submenu.offcanvas-overlap {
     -webkit-transform: translate3d(0%, 0, 0);
-    -moz-transform: translate3d(0%, 0, 0);
-    -ms-transform: translate(0%, 0);
-    -o-transform: translate3d(0%, 0, 0);
     transform: translate3d(0%, 0, 0); }
 
 .top-submenu {
@@ -6710,6 +6709,7 @@ ul.off-canvas-list {
   -webkit-overflow-scrolling: touch;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   margin: 0;
   overflow-x: hidden;
@@ -6720,17 +6720,13 @@ ul.off-canvas-list {
   height: 18.75rem;
   z-index: 1002;
   -webkit-transform: translate3d(0, -100%, 0);
-  -moz-transform: translate3d(0, -100%, 0);
-  -ms-transform: translate(0, -100%);
-  -o-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
   top: 0;
   width: 100%;
   -webkit-transition: -webkit-transform 500ms ease;
-  -moz-transition: -moz-transform 500ms ease;
-  -ms-transition: -ms-transform 500ms ease;
-  -o-transition: -o-transform 500ms ease;
-  transition: transform 500ms ease; }
+  transition: -webkit-transform 500ms ease;
+  transition: transform 500ms ease;
+  transition: transform 500ms ease, -webkit-transform 500ms ease; }
   .top-submenu * {
     -webkit-backface-visibility: hidden; }
   .top-submenu .back > a {
@@ -6748,9 +6744,6 @@ ul.off-canvas-list {
       border-top: 1px solid #5e5e5e; }
   .top-submenu.move-bottom, .top-submenu.offcanvas-overlap-bottom, .top-submenu.offcanvas-overlap {
     -webkit-transform: translate3d(0, 0%, 0);
-    -moz-transform: translate3d(0, 0%, 0);
-    -ms-transform: translate(0, 0%);
-    -o-transform: translate3d(0, 0%, 0);
     transform: translate3d(0, 0%, 0); }
 
 .bottom-submenu {
@@ -6758,6 +6751,7 @@ ul.off-canvas-list {
   -webkit-overflow-scrolling: touch;
   background: #333333;
   bottom: 0;
+  -webkit-box-sizing: content-box;
   box-sizing: content-box;
   margin: 0;
   overflow-x: hidden;
@@ -6768,17 +6762,13 @@ ul.off-canvas-list {
   height: 18.75rem;
   z-index: 1002;
   -webkit-transform: translate3d(0, 100%, 0);
-  -moz-transform: translate3d(0, 100%, 0);
-  -ms-transform: translate(0, 100%);
-  -o-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   bottom: 0;
   width: 100%;
   -webkit-transition: -webkit-transform 500ms ease;
-  -moz-transition: -moz-transform 500ms ease;
-  -ms-transition: -ms-transform 500ms ease;
-  -o-transition: -o-transform 500ms ease;
-  transition: transform 500ms ease; }
+  transition: -webkit-transform 500ms ease;
+  transition: transform 500ms ease;
+  transition: transform 500ms ease, -webkit-transform 500ms ease; }
   .bottom-submenu * {
     -webkit-backface-visibility: hidden; }
   .bottom-submenu .back > a {
@@ -6796,9 +6786,6 @@ ul.off-canvas-list {
       border-top: 1px solid #5e5e5e; }
   .bottom-submenu.move-top, .bottom-submenu.offcanvas-overlap-top, .bottom-submenu.offcanvas-overlap {
     -webkit-transform: translate3d(0, 0%, 0);
-    -moz-transform: translate3d(0, 0%, 0);
-    -ms-transform: translate(0, 0%);
-    -o-transform: translate3d(0, 0%, 0);
     transform: translate3d(0, 0%, 0); }
 
 .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
@@ -7180,6 +7167,7 @@ header#top-bar {
   header#top-bar #title-area {
     position: relative;
     height: 10.1em;
+    -webkit-transition: height 0.4s ease-in-out;
     transition: height 0.4s ease-in-out; }
     header#top-bar #title-area h1 {
       font-size: 1em;
@@ -7192,12 +7180,20 @@ header#top-bar {
         display: block;
         height: 9.3em;
         margin: 0.3em 0 0.5em;
-        background: transparent url("../images/logo.png") no-repeat center center;
-        background-size: contain; }
-    header#top-bar #title-area h1 span, header#top-bar #title-area h2 {
-      position: absolute;
-      margin-top: -3000px;
-      height: 0; }
+        color: #e30613;
+        font: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+        font-size: 0.8em;
+        font-weight: 300;
+        font-variant: normal;
+        font-weight: 500; }
+        header#top-bar #title-area h1 a:before {
+          content: "";
+          display: block;
+          width: 95px;
+          height: 95px;
+          border-radius: 47.5px;
+          border: 17px solid #5b2d87;
+          margin: 0 auto 1em; }
   header#top-bar.reduced #title-area {
     height: 7.63055em; }
   header#top-bar h1, header#top-bar h2 {
@@ -7234,6 +7230,7 @@ header#top-bar {
       line-height: 1;
       overflow: hidden;
       height: 0.01px;
+      -webkit-transition: height 0.3s ease-in;
       transition: height 0.3s ease-in;
       position: relative; }
       header#top-bar #left-nav li a {
@@ -7275,6 +7272,7 @@ header#top-bar {
     @media only screen and (min-width: 40.0625em) {
       header#top-bar #left-nav:hover li {
         height: 1.1em;
+        -webkit-transition: height 0.5s ease-out;
         transition: height 0.5s ease-out; }
         header#top-bar #left-nav:hover li:hover span {
           text-decoration: underline; } }
@@ -7382,6 +7380,7 @@ div#center {
               background-color: #fff;
               white-space: nowrap;
               opacity: 0;
+              -webkit-transition: opacity 0.3s ease-in-out;
               transition: opacity 0.3s ease-in-out;
               padding: 0.2em 0.3em;
               width: 0; }
@@ -7398,7 +7397,6 @@ div#center {
       padding-bottom: 0.7em; }
     div#center .projet-block header > * {
       font-family: "cocogoose", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-      text-align: center;
       padding: 0;
       margin: 0; }
     div#center .projet-block h1 {
@@ -7456,11 +7454,15 @@ div#center {
   div#center .projet p {
     padding: 0 0.7em 0.7em;
     margin: 0; }
-  div#center .projet #images .block {
-    padding: 0.7em; }
+  div#center .projet #images {
+    letter-spacing: 0px; }
+    div#center .projet #images a {
+      letter-spacing: normal;
+      display: inline-block;
+      margin: 0 1em 1em 0; }
   div#center .projet img {
-    width: 100%;
-    max-width: 100%; }
+    max-width: 100%;
+    height: 300px; }
   div#center .default > * {
     padding-left: 0.7em;
     padding-right: 0.7em; }
@@ -7504,6 +7506,7 @@ div#center {
       width: 100%;
       text-align: center;
       opacity: 0;
+      -webkit-transition: opacity 0.2s ease-in;
       transition: opacity 0.2s ease-in; }
       div#center #diaporama > *.visible {
         opacity: 1; }
@@ -7608,3 +7611,30 @@ footer#bottom-bar {
     font-style: normal; }
     footer#bottom-bar address a {
       text-decoration: underline; }
+
+div.featherlight:last-of-type {
+  background-color: rgba(255, 255, 255, 0.9); }
+  div.featherlight:last-of-type div.featherlight-content {
+    background: none; }
+    div.featherlight:last-of-type div.featherlight-content span.featherlight-next:hover, div.featherlight:last-of-type div.featherlight-content span.featherlight-previous:hover {
+      background: none; }
+    div.featherlight:last-of-type div.featherlight-content span.featherlight-next span, div.featherlight:last-of-type div.featherlight-content span.featherlight-previous span {
+      color: #5b2d87;
+      text-shadow: none;
+      visibility: hidden;
+      position: relative;
+      left: 0;
+      right: 0;
+      width: 100%; }
+      div.featherlight:last-of-type div.featherlight-content span.featherlight-next span:after, div.featherlight:last-of-type div.featherlight-content span.featherlight-previous span:after {
+        content: ">";
+        display: block;
+        visibility: visible;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        text-align: right;
+        padding: 0 0.5em; }
+    div.featherlight:last-of-type div.featherlight-content span.featherlight-previous span:after {
+      content: "<";
+      text-align: left; }

user/themes/ouidade/scss/styles.scss

@@ -127,15 +127,21 @@ header#top-bar{
       overflow: hidden;
       position: relative;
       a{display: block;
-        // height:100%;
         height:$logoH;
         margin:$logo_mt 0 $logo_mb;
-        // height:$titleareaH;
-        background: transparent url("../images/logo.png") no-repeat center center;
-        background-size: contain;}
-    }
-    h1 span, h2{
-      position:absolute; margin-top:-3000px; height:0;
+        color:$secondcolor;
+        @include fontnormal;
+        font-weight: 500;
+        &:before{
+          content:"";
+          display: block;
+          $r: 95px;
+          width:$r; height:$r;
+          border-radius: $r/2;
+          border: 17px solid $maincolor;
+          margin: 0 auto 1em;
+        }
+      }
     }
   }
 
@@ -368,7 +374,8 @@ div#center{
     }
 
     header>*{
-      font-family: $font; text-align: center;
+      font-family: $font;
+      // text-align: center;
       padding:0; margin:0;
     }
     h1{
@@ -441,11 +448,19 @@ div#center{
 
     #images{
       // .row{margin:0;}
-      .block{padding:0.7em;}
+      // .block{padding:0.7em;}
+      letter-spacing: 0px;
+      a{
+        letter-spacing: normal;
+        display: inline-block;
+        margin:0 1em 1em 0;
+      }
     }
 
     img{
-      width:100%; max-width:100%;
+      // width:100%;
+      max-width:100%;
+      height:300px;
     }
 
   }
@@ -627,3 +642,49 @@ footer#bottom-bar{
     a{text-decoration: underline;}
   }
 }
+
+div.featherlight:last-of-type{
+  background-color: rgba(255,255,255,0.9);
+  div.featherlight-content{
+    background: none;
+    span.featherlight-next, span.featherlight-previous{
+      // left:90%;
+      // outline: 1px solid red;
+      &:hover{
+        background: none;
+      }
+      span{
+        // outline: 1px solid green;
+        color:$maincolor;
+        text-shadow: none;
+        visibility: hidden;
+        position: relative;
+        left:0; right:0;
+        width:100%;
+        &:after{
+          // outline: 1px solid purple;
+          content:">";
+          display: block;
+          visibility: visible;
+          position: absolute;
+          top:0; width:100%;
+          text-align: right;
+          padding:0 0.5em;
+          @include $font;
+          font-weight: 500;
+          font-size: 1.2em;
+        }
+      }
+    }
+    span.featherlight-previous{
+      // left:25px;
+      // right:90%;
+      span{
+        &:after{
+          content:"<";
+          text-align: left;
+        }
+      }
+    }
+  }
+}

user/themes/ouidade/templates/partials/header.html.twig

@@ -3,8 +3,7 @@
     <div class="row fullwidth">
 
       <section id="title-area" class="medium-8 medium-push-2 columns">
-          <h1><a href="/"><span>{{ site.title|e('html') }}</span></a></h1>
-          <h2>{{ site.subtitle|e('html') }}</h2>
+          <h1><a href="/">{{ site.title|e('html') }}<br/><span>{{ site.subtitle|e('html') }}</span></a></h1>
       </section>
 
       <nav id="left-nav" class="nav small-6 medium-2 medium-pull-8 columns">

user/themes/ouidade/templates/projet.html.twig

@@ -14,51 +14,9 @@
 
     <div id="images" class="">
       {{ dump(images) }}
-
-      {# set temporary array to be able to look trough images with index #}
-      {% set numberedKeys = {} %}
-      {% for key,value in images %}
-        {% set numberedKeys = numberedKeys|merge({(loop.index):(key)}) %}
-      {% endfor %}
-      {{dump(numberedKeys)}}
-
-      {# display images #}
-      {% set continue = false %}
-
       {% for image in images %}
-        {% if not continue %}
-          <div class="row">
-
-            {% if image.meta.size == 1 %}
-              <div class="block block-{{loop.index}} column large-12">
-                {{ image.html }}
-              </div>
-            {% else %}
-              {% set nextimage = images[numberedKeys[loop.index]] %}
-              {{ dump(nextimage) }}
-              {% if nextimage.meta.size != 1 %}
-                {% set continue = true %}
-                <div class="block block-{{loop.index}} column large-6">
-                  {{ image.resize(1000).html }}
-                </div>
-                <div class="block block-{{loop.index+1}} column large-6">
-                  {{ nextimage.resize(1000).html }}
-                </div>
-              {% else %}
-                <div class="block block-{{loop.index}} column large-6">
-                  {{ image.resize(1000).html }}
-                </div>
-                <div class="block empty column large-6"></div>
-              {% endif %}
-
-            {% endif %}
-
-          </div>
-        {% else %}
-          {% set continue = false %}
-        {% endif %}
+        {{ image.lightbox().resize(400).html(image.meta.title) }}
       {% endfor %}
-
     </div>
   </section>