Submitting website and changing directory structure

DesignFiles/CameraHolder.scad

+baseHeight=2;
+airChannelHeight=2;
+restHeight=1;
+chamberHeight=2;
+clipHeight=2;
+
+wallThickness = 2;
+
+cameraPCBLength = 18.5;
+cameraConnectorLength = 2.4;
+cameraHeadLength = 5;
+
+mountHole1DistanceFromRear=3;
+mountHole2DistanceFromRear=13;
+
+mountLength = 17;
+
+pcbSlopeAngle = 10;
+cameraHeadAngle = 85;
+
+$fn = 100;
+
+precision = 2;
+
+function sideHeight() = baseHeight + airChannelHeight + restHeight + chamberHeight + clipHeight;
+
+function mountHeight() = baseHeight + tan(pcbSlopeAngle) * mountLength;
+
+function cameraHeadTowerHeight() = (sin(cameraHeadAngle)*cameraHeadLength)+mountHeight();
+
+function cameraHeadTowerWidth() = (cos(cameraHeadAngle)*cameraHeadLength)+wallThickness;
+
+module precision(){
+    translate([-precision/2,0,0]){
+        children();
+    }
+}
+
+module sidePCB(side){
+    union(){
+        difference(){
+            cube([wallThickness,mountLength,mountHeight()]);
+            translate([0,0,baseHeight]){
+                rotate([pcbSlopeAngle,0,0]){
+                    precision(){
+                        cube([2+precision,25,mountHeight()]);
+                    }
+                }
+            }            
+        }
+        translate([side,2,baseHeight-0.5]){
+            rotate([pcbSlopeAngle,0,0]){
+                cube([0.5,15,2]);            
+            }
+        }
+    }
+}
+
+module sideCameraHead(){
+    difference(){
+        cube([wallThickness,cameraHeadTowerWidth(),cameraHeadTowerHeight()]);
+        translate([0,0,mountHeight()+wallThickness]){
+            rotate([cameraHeadAngle,0,0]){
+                precision(){
+                    cube([2+precision,5,5]);
+                }
+           }
+        }
+    }
+}
+
+module sideSection(side){
+    union(){
+        sidePCB(side);
+        translate([0,mountLength,0]){
+            sideCameraHead();
+        }
+    }
+}
+
+module basePlate(){
+    difference(){
+        translate([-wallThickness*2.5,0,0]){
+            cube([wallThickness*6,mountLength+cameraHeadTowerWidth(),wallThickness]);
+        }
+        /*
+        translate([wallThickness/2,mountLength+cameraHeadTowerWidth()-mountHole1DistanceFromRear,-1]){
+            cylinder(6,1);
+        }
+        translate([wallThickness/2,mountLength+cameraHeadTowerWidth()-mountHole2DistanceFromRear,-1]){
+            cylinder(6,1);      
+        }
+                */
+        translate([wallThickness*2.5-0.3,mountHole1DistanceFromRear,-1]){
+            cube([2.4,2.4,4]);
+        }
+        translate([wallThickness*2.5-0.3,mountHole2DistanceFromRear,-1]){
+            cube([2.4,2.4,4]);
+        }
+        translate([-wallThickness*2.5-0.3,mountHole1DistanceFromRear,-1]){
+            cube([2.4,2.4,4]);
+        }
+        /*
+        translate([-wallThickness*2.5-0.1,mountHole2DistanceFromRear,-1]){
+            cube([2,2,4]);
+        }*/
+    }
+}
+
+module installationPins(){
+    translate([wallThickness*6-2+0.1,mountHole1DistanceFromRear,18]){
+                cube([1.9,1.9,4]);
+            }
+            translate([wallThickness*6-2+0.1,mountHole2DistanceFromRear,18]){
+                cube([1.9,1.9,4]);
+            }
+            translate([0,mountHole1DistanceFromRear,18]){
+                cube([1.9,1.9,4]);
+            }
+}
+
+module installationHelper(){
+        union(){
+             cube([wallThickness*6,mountLength+cameraHeadTowerWidth(),20]);
+             installationPins();
+            /*
+            translate([0,mountHole2DistanceFromRear,18]){
+                cube([2,2,4]);
+            }
+            */
+        }
+}
+
+module cameraHolderAssembly(){
+    difference(){
+        union(){
+            for (i=[-1.2,1.2]){
+                translate([i*wallThickness,0,0]){
+                    sideSection(-0.25+(1+i*0.62));                
+                }
+
+            }
+            basePlate();        
+        }
+        //I could put an indentation in for the camera head!
+        translate([wallThickness,mountLength+1,mountHeight()+wallThickness+0.5]){
+            rotate([cameraHeadAngle,0,0]){
+                precision(){
+                    cylinder(6,2.4,2.4);
+                }
+           }
+        }
+    }
+}
+
+module clip(direction){
+    rotate([90,0,direction]){
+        polygon([[0,0],[0.5,0],[0.5,6],[-0.5,4],[0,3.5]]);
+    }
+}
+
+
+//cameraHolderAssembly();
+
+/*
+translate([-20,0,0]){
+    cameraHolderAssembly();
+}
+*/
+

DesignFiles/CardboardCore.scad

+//import("/Users/bensenior/Downloads/wwgc_manufacturers_kit_v2.2/Google Cardboard IO 2015 Technical Drawings/Viewer - Body.dxf");
+
+use<CameraHolder.scad>;
+
+//TODO : Animation exposes a "denk fehler" with centering the objects. Don't do this. May require a rethink! Try setting $t=0!
+//We shouldn't have started on the face, but on the furthest tip... perhaps not have used center either... use same transitions for folding as for not folding, but try to figure out how to fold around the pivot.  Basically, the recursive nature of the system should mean that everything beyond each fold is also moved as a sheet, and it continually curls up one fold at a time (unless we have multiple at a level, e.g. to start folding the camera cable chamber early).
+//What will come out of this will be an instructional video,
+//...where I just have to put a voice over onto it, and perhaps, some camera zoom positions.
+
+//cardboard depth
+cDepth=1;
+unitWidth=135;          //Change me to make the headset wider
+unitHeight=75;
+unitDepth=30;           //Change me to win more room for camera length/hub width
+topHollowDepth=10;      //Change me for more height to house usb hub and connectors
+perforationWidth=3;
+perforationHeight=0.3;
+bottomHollowDepth=12;   //Change me to make room for more cable bend
+pd=64;
+cableHoleRadius=4;
+cameraSlitWidth=1;
+cameraSlitLength=8;
+cableChannelWidth=15;
+noseFactor=7;
+IRledHoleRadius=1.5;
+cableOutHoleRadius=5;
+folded = false;
+$t = 1 ;
+$fn = 100;
+
+mountHole1DistanceFromRear=3;
+mountHole2DistanceFromRear=13;
+
+/*
+colour1="red";
+colour2="green";
+colour3="yellow";
+colour4="pink";
+*/
+colour1="cyan";
+colour2="cyan";
+colour3="cyan";
+colour4="cyan";
+
+module perforation(){
+   square([perforationWidth,0.3]);
+}
+
+module perforatedLine(adjust){
+    //Interleave perforations
+    n = floor(unitWidth/perforationWidth)-2;
+    translate([(-unitWidth/2)+adjust[0]+perforationWidth,0+adjust[1],0+adjust[2]]){
+        for (i = [0:2:n-1]){
+            translate([perforationWidth*i,0]){
+               perforation();
+            }
+        }
+    }
+}
+
+module f1(){
+   color(colour1){
+       difference(){
+           square([unitWidth,unitHeight],center=true);
+           for (i=[-1,1]){
+                translate([i*unitHeight/3,0,0]){
+                    circle(unitHeight/2.6);
+                }
+            }
+            mark("f1",-1);
+       }
+   }
+}
+
+module t1(){
+    color(colour2){
+        difference(){        
+            square([unitWidth,unitDepth],center=true);
+            translate([unitWidth/2-unitDepth/2-5,0,0]){
+                circle(cableOutHoleRadius);
+            }
+            rotate([0,180,0]){
+                translate([-30,0,0]){
+                    mark("t1 - EyeSkills.org",side=1);
+                }
+            }
+        }
+    }
+}
+
+module t2(){
+    color(colour3){
+        difference(){
+            square([unitWidth,topHollowDepth],center=true);            
+            mark("t2");
+        }
+    }
+}
+
+module t3(){
+    color(colour1){
+        difference(){
+            square([unitWidth,unitDepth-cDepth*2],center=true);
+            //cable channel
+            translate([unitWidth/2+cDepth-cableChannelWidth,topHollowDepth/2-cableChannelWidth/2+cDepth+cDepth,0]){
+                square([cableChannelWidth,cableChannelWidth]);
+            }
+            circle(IRledHoleRadius);
+            mark("t3",-1);
+        }
+    }
+}
+
+module t4(){
+    color(colour2){
+        difference(){
+            square([unitWidth,topHollowDepth],center=true);
+            mark("t4");
+        }
+    }
+}
+
+module b1(){
+    
+    color(colour3){
+         difference(){
+            square([unitWidth,unitDepth],center=true);
+            polygon([
+                        [10,unitDepth/2-10],
+                        [unitWidth/noseFactor,-unitDepth/2-cDepth],
+                        [-unitWidth/noseFactor,-unitDepth/2-cDepth],
+                        [-10,unitDepth/2-10]
+            ]);            
+            mark("b1");
+         }         
+    }
+}
+
+module b2(){
+    color(colour4){   
+        difference(){    
+            square([unitWidth,bottomHollowDepth],center=true);
+            polygon([   [unitWidth/noseFactor,-bottomHollowDepth],
+                        [-unitWidth/noseFactor,-bottomHollowDepth],
+                        [-unitWidth/noseFactor,bottomHollowDepth],
+                        [unitWidth/noseFactor,bottomHollowDepth]
+                    ]);
+            mark("b2");
+        }        
+    }
+}
+
+module b3(){
+    color(colour1){
+        
+        difference(){            
+            square([unitWidth,unitDepth-cDepth*2],center=true);
+            for (i=[-1,1]){
+                translate([i*pd/2,+unitDepth/2-cableHoleRadius,0]){
+                    circle(cableHoleRadius);
+                }
+                //TODO: load the mountHoldDistance values from the actual mount holder file
+                /*
+                translate([i*pd/2,-unitDepth/2+cDepth+mountHole2DistanceFromRear,0]){
+                    circle(cameraSlitWidth);
+                }
+
+                translate([i*pd/2,-unitDepth/2+cDepth+mountHole1DistanceFromRear,0]){
+                    circle(cameraSlitWidth);
+                }
+                */
+                
+            }
+            //Nose
+            polygon([
+                        [10,-unitDepth/2+10],
+                        [unitWidth/noseFactor,unitDepth/2],
+                        [-unitWidth/noseFactor,unitDepth/2],
+                        [-10,-unitDepth/2+10]
+            ]);
+            //cable channel
+            translate([unitWidth/2+cDepth-cableChannelWidth,-bottomHollowDepth/2-cableChannelWidth/2-cDepth,0]){
+                square([cableChannelWidth,cableChannelWidth]);
+            }
+            projection(){
+                translate([pd/2+6,(unitDepth/2)-9,-20]){
+                    rotate([0,0,180]){
+                    installationPins();
+                    }
+                }
+                translate([-1*pd/2+6,(unitDepth/2)-9,-20]){
+                    rotate([0,0,180]){
+                    installationPins();
+                    }
+                }
+            }
+            mark("b3",-1);
+        }        
+    }
+}
+
+module b4(){
+    color(colour2){
+        difference(){
+            square([unitWidth,bottomHollowDepth-cDepth],center=true);            
+            mark("b4");
+        }
+
+    }
+}
+
+module s1(){
+    color(colour3){
+       square([unitHeight-topHollowDepth-bottomHollowDepth,cableChannelWidth]);
+    }
+}
+
+module nf(){
+    //Nose fold 1
+    color(colour4){
+        translate([-unitWidth/noseFactor/2,0,0]){
+            square([unitWidth/noseFactor,10]);
+        }
+    }
+    //Nose fold 2
+    //translate([-unitWidth/noseFactor/2,0,0]){
+    //    square([unitWidth/noseFactor,10]);
+   //}
+}
+
+module mark(t,side=-1){
+    translate([side*unitWidth/2.2,0]) {
+        text(t,unitDepth/10);
+    }
+}
+
+module reposition(folded=false,translate1,translate2,direction){
+    let (fold=(!folded)?[0,+translate1+translate2,0]:[0,translate1,direction*translate2],
+    r=(!folded)?[0,0,0]:[direction*90*$t,0,0]){
+        translate(fold){ 
+            rotate(r){
+                //Only want the difference of the perforation with the first child
+                for ( i = [0:1:$children-1] ){
+                    if (i==0){
+                        difference(){                    
+                            children(i);
+                            perforatedLine([0,direction*-translate2,0]);
+                        }
+                    } else {
+                        children(i);
+                    }                    
+                }
+            }
+        }
+    }
+}
+
+//The flattened view
+module foldIt(folded){
+    difference(){
+        f1();
+        perforatedLine([0,-unitHeight/2,0]);
+    }
+    //Need to add perforation (1mm)  
+
+    reposition(folded,unitHeight/2,unitDepth/2,1){
+        t1();
+        reposition(folded,unitDepth/2,topHollowDepth/2,1){            
+            t2();
+            reposition(folded,topHollowDepth/2,(unitDepth-cDepth*2)/2,1){
+                t3();         
+                reposition(folded,unitDepth/2-cDepth,topHollowDepth/2,1){
+                    t4();
+                }
+            }  
+        }
+    }
+
+    reposition(folded,-unitHeight/2,-unitDepth/2,-1){          
+        b1();
+        reposition(folded,-unitDepth/2,-bottomHollowDepth/2,-1){ 
+            b2();            
+            reposition(folded,-bottomHollowDepth/2,-(unitDepth-cDepth*2)/2,-1){
+                b3();                  
+                reposition(folded,-unitDepth/2+10,0,1){
+                    nf();
+                    reposition(folded,perforationHeight+(unitWidth/noseFactor)/2,0,1){
+                        nf();
+                        reposition(folded,perforationHeight+(unitWidth/noseFactor)/2,0,1){
+                            nf();
+                        }
+                    }
+                }
+                reposition(folded,-(unitDepth-cDepth*3)/2,-bottomHollowDepth/2,-1){                b4();                    
+                }
+            }
+        }    
+    }
+
+    translate([unitWidth/2,unitHeight/2-bottomHollowDepth+cDepth*2,0]){
+        rotate([0,0,270]){
+            reposition(folded,0,0,1){ 
+                s1();
+                reposition(folded,cableChannelWidth,0,1){
+                    s1();
+                    reposition(folded,cableChannelWidth,0,1){
+                        s1();
+                        reposition(folded,cableChannelWidth,0,1){
+                            s1();
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+//The folded view
+/*
+foldIt(true);
+
+translate([-250,0,0]){
+    foldIt(false);    
+}
+*/

DesignFiles/EyeTractiveParts.scad

+use<CameraHolder.scad>;
+use<CardboardCore.scad>;
+use<lensRemovalTool.scad>;
+use<InstallationHelper.scad>;
+
+//These are the mounting units for holding the camera in place to look back at the eyes
+
+translate ([-26,0,0]) cameraHolderAssembly();
+translate ([26,0,0]) cameraHolderAssembly();
+
+//This is a simple tool you can poke through the cardboard, which helps align the mounting units perfectly and reliably for glueing. It can be screwed down to a desk.
+translate ([-8,40,0]) cameraHolder();
+
+//This is a simple tool to help you screw the lens off tiny endoscopic cameras. Modify to fit your lens size.
+translate ([0,70,0]) lensRemovalTool();
+
+//This is the cardboard core which you can laser cut and fold
+translate([-140,120,0]){
+    foldIt(false);    
+}
+
+//If you want to see how it looks when folded, just uncomment this line
+translate([140,50,0]){
+    foldIt(true);    
+}

DesignFiles/InstallationHelper.scad

+include <CameraHolder.scad>;
+
+module cameraHolder(){
+
+    difference(){
+        union(){
+            
+            translate([wallThickness*3.5,-mountLength/3,0]){
+                cube([86,20,3],center=true);
+            }
+            
+            translate([-32,-15,-18.5]){
+                    installationPins();
+            }
+
+            translate([32,-15,-18.5]){
+                    installationPins();
+            }
+
+        }
+        translate([-wallThickness*4.5,-6,0]){
+            cylinder(3.2,1,3,center=true);
+        }
+        translate([+wallThickness*4.5*2,-6,0]){
+            cylinder(3.2,1,3,center=true);
+        }
+    }
+
+}
+
+cameraHolder();
\ No newline at end of file

DesignFiles/lensRemovalTool.scad

+module lensRemovalTool(){
+    difference(){    
+        cube([40,20,2],true);
+        cube([4.2,4.2,4],true);
+    }
+}
\ No newline at end of file

www/README.txt

+Paradigm Shift by HTML5 UP
+html5up.net | @ajlkn
+Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
+
+Say hello to Paradigm Shift, my first addition to HTML5 UP in more than a year (!!!).
+Took things in a slightly different direction with this one, partly to mess with CSS
+grid (which this one relies on pretty heavily) but mostly to get back to making weirder
+and more experimental designs/layouts. Anyway, hope you dig it, and thanks for the
+continued support despite the lack of updates :)
+
+Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
+you can use for pretty much whatever.
+
+(* = not included)
+
+AJ
+aj@lkn.io | @ajlkn
+
+
+Credits:
+
+	Demo Images:
+		Unsplash (unsplash.com)
+
+	Icons:
+		Font Awesome (fontawesome.io)
+
+	Other:
+		jQuery (jquery.com)
+		Responsive Tools (github.com/ajlkn/responsive-tools)
\ No newline at end of file

www/assets/js/breakpoints.min.js

+/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
+var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});

www/assets/js/browser.min.js

+/* browser.js v1.0 | @ajlkn | MIT licensed */
+var browser=function(){"use strict";var e={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(n){e._canUse||(e._canUse=document.createElement("div"));var o=e._canUse.style,r=n.charAt(0).toUpperCase()+n.slice(1);return n in o||"Moz"+r in o||"Webkit"+r in o||"O"+r in o||"ms"+r in o},init:function(){var n,o,r,i,t=navigator.userAgent;for(n="other",o=0,r=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],i=0;i<r.length;i++)if(t.match(r[i][1])){n=r[i][0],o=parseFloat(RegExp.$1);break}for(e.name=n,e.version=o,n="other",o=0,r=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],i=0;i<r.length;i++)if(t.match(r[i][1])){n=r[i][0],o=parseFloat(r[i][2]?r[i][2](RegExp.$1):RegExp.$1);break}e.os=n,e.osVersion=o,e.touch="wp"==e.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});

www/assets/js/jquery.scrolly.min.js

+/* jquery.scrolly v1.0.0-dev | (c) @ajlkn | MIT licensed */
+(function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o<this[t];o++)e(this[o]).scrolly(i);return c}l=n,f=c.attr("href");if(f.charAt(0)!="#"||f[t]<2)return c;a=jQuery.extend({anchor:r,easing:"swing",offset:0,parent:e("body,html"),pollOnce:!1,speed:1e3},i),a.pollOnce&&(l=u(f,a)),c.off(s).on(s,function(e){var t=l!==n?l:u(f,a);t!==n&&(e.preventDefault(),a.parent.stop().animate({scrollTop:t},a.speed,a.easing))})}})(jQuery);
\ No newline at end of file

www/assets/js/main.js

+/*
+	Paradigm Shift by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+(function($) {
+
+	var	$window = $(window),
+		$body = $('body');
+
+	// Breakpoints.
+		breakpoints({
+			default:   ['1681px',   null       ],
+			xlarge:    ['1281px',   '1680px'   ],
+			large:     ['981px',    '1280px'   ],
+			medium:    ['737px',    '980px'    ],
+			small:     ['481px',    '736px'    ],
+			xsmall:    ['361px',    '480px'    ],
+			xxsmall:   [null,       '360px'    ]
+		});
+
+	// Play initial animations on page load.
+		$window.on('load', function() {
+			window.setTimeout(function() {
+				$body.removeClass('is-preload');
+			}, 100);
+		});
+
+	// Hack: Enable IE workarounds.
+		if (browser.name == 'ie')
+			$body.addClass('is-ie');
+
+	// Mobile?
+		if (browser.mobile)
+			$body.addClass('is-mobile');
+
+	// Scrolly.
+		$('.scrolly')
+			.scrolly({
+				offset: 100
+			});
+
+	// Polyfill: Object fit.
+		if (!browser.canUse('object-fit')) {
+
+			$('.image[data-position]').each(function() {
+
+				var $this = $(this),
+					$img = $this.children('img');
+
+				// Apply img as background.
+					$this
+						.css('background-image', 'url("' + $img.attr('src') + '")')
+						.css('background-position', $this.data('position'))
+						.css('background-size', 'cover')
+						.css('background-repeat', 'no-repeat');
+
+				// Hide img.
+					$img
+						.css('opacity', '0');
+
+			});
+
+			$('.gallery > a').each(function() {
+
+				var $this = $(this),
+					$img = $this.children('img');
+
+				// Apply img as background.
+					$this
+						.css('background-image', 'url("' + $img.attr('src') + '")')
+						.css('background-position', 'center')
+						.css('background-size', 'cover')
+						.css('background-repeat', 'no-repeat');
+
+				// Hide img.
+					$img
+						.css('opacity', '0');
+
+			});
+
+		}
+
+	// Gallery.
+		$('.gallery')
+			.on('click', 'a', function(event) {
+
+				var $a = $(this),
+					$gallery = $a.parents('.gallery'),
+					$modal = $gallery.children('.modal'),
+					$modalImg = $modal.find('img'),
+					href = $a.attr('href');
+
+				// Not an image? Bail.
+					if (!href.match(/\.(jpg|gif|png|mp4)$/))
+						return;
+
+				// Prevent default.
+					event.preventDefault();
+					event.stopPropagation();
+
+				// Locked? Bail.
+					if ($modal[0]._locked)
+						return;
+
+				// Lock.
+					$modal[0]._locked = true;
+
+				// Set src.
+					$modalImg.attr('src', href);
+
+				// Set visible.
+					$modal.addClass('visible');
+
+				// Focus.
+					$modal.focus();
+
+				// Delay.
+					setTimeout(function() {
+
+						// Unlock.
+							$modal[0]._locked = false;
+
+					}, 600);
+
+			})
+			.on('click', '.modal', function(event) {
+
+				var $modal = $(this),
+					$modalImg = $modal.find('img');
+
+				// Locked? Bail.
+					if ($modal[0]._locked)
+						return;
+
+				// Already hidden? Bail.
+					if (!$modal.hasClass('visible'))
+						return;
+
+				// Stop propagation.
+					event.stopPropagation();
+
+				// Lock.
+					$modal[0]._locked = true;
+
+				// Clear visible, loaded.
+					$modal
+						.removeClass('loaded')
+
+				// Delay.
+					setTimeout(function() {
+
+						$modal
+							.removeClass('visible')
+
+						setTimeout(function() {
+
+							// Clear src.
+								$modalImg.attr('src', '');
+
+							// Unlock.
+								$modal[0]._locked = false;
+
+							// Focus.
+								$body.focus();
+
+						}, 475);
+
+					}, 125);
+
+			})
+			.on('keypress', '.modal', function(event) {
+
+				var $modal = $(this);
+
+				// Escape? Hide modal.
+					if (event.keyCode == 27)
+						$modal.trigger('click');
+
+			})
+			.on('mouseup mousedown mousemove', '.modal', function(event) {
+
+				// Stop propagation.
+					event.stopPropagation();
+
+			})
+			.prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>')
+				.find('img')
+					.on('load', function(event) {
+
+						var $modalImg = $(this),
+							$modal = $modalImg.parents('.modal');
+
+						setTimeout(function() {
+
+							// No longer visible? Bail.
+								if (!$modal.hasClass('visible'))
+									return;
+
+							// Set loaded.
+								$modal.addClass('loaded');
+
+						}, 275);
+
+					});
+
+})(jQuery);
\ No newline at end of file

www/assets/sass/base/_page.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Basic */
+
+	// MSIE: Required for IEMobile.
+		@-ms-viewport {
+			width: device-width;
+		}
+
+	// MSIE: Prevents scrollbar from overlapping content.
+		body {
+			-ms-overflow-style: scrollbar;
+		}
+
+	// Ensures page width is always >=320px.
+		@include breakpoint('<=xsmall') {
+			html, body {
+				min-width: 320px;
+			}
+		}
+
+	// Set box model to border-box.
+	// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+		html {
+			box-sizing: border-box;
+		}
+
+		*, *:before, *:after {
+			box-sizing: inherit;
+		}
+
+	html {
+		overflow-x: hidden;
+	}
+
+	body {
+		background: _palette(bg);
+		overflow-x: hidden;
+
+		// Stops initial animations until page loads.
+			&.is-preload {
+				*, *:before, *:after {
+					@include vendor('animation', 'none !important');
+					@include vendor('transition', 'none !important');
+				}
+			}
+
+	}
\ No newline at end of file

www/assets/sass/base/_reset.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+	html, body, div, span, applet, object,
+	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+	pre, a, abbr, acronym, address, big, cite,
+	code, del, dfn, em, img, ins, kbd, q, s, samp,
+	small, strike, strong, sub, sup, tt, var, b,
+	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+	form, label, legend, table, caption, tbody,
+	tfoot, thead, tr, th, td, article, aside,
+	canvas, details, embed, figure, figcaption,
+	footer, header, hgroup, menu, nav, output, ruby,
+	section, summary, time, mark, audio, video {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		font-size: 100%;
+		font: inherit;
+		vertical-align: baseline;
+	}
+
+	article, aside, details, figcaption, figure,
+	footer, header, hgroup, menu, nav, section {
+		display: block;
+	}
+
+	body {
+		line-height: 1;
+	}
+
+	ol, ul {
+		list-style: none;
+	}
+
+	blockquote,	q {
+		quotes: none;
+
+		&:before,
+		&:after {
+			content: '';
+			content: none;
+		}
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	body {
+		-webkit-text-size-adjust: none;
+	}
+
+	mark {
+		background-color: transparent;
+		color: inherit;
+	}
+
+	input::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
+
+	input, select, textarea {
+		-moz-appearance: none;
+		-webkit-appearance: none;
+		-ms-appearance: none;
+		appearance: none;
+	}
\ No newline at end of file

www/assets/sass/base/_typography.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Typography */
+
+	html {
+		font-size: 18pt;
+
+		@include breakpoint('<=xlarge') {
+			font-size: 13pt;
+		}
+
+		@include breakpoint('<=medium') {
+			font-size: 14pt;
+		}
+
+		@include breakpoint('<=small') {
+			font-size: 12pt;
+		}
+
+		@include breakpoint('<=xsmall') {
+			font-size: 11pt;
+		}
+	}
+
+	body {
+		background-color: _palette(bg);
+		color: _palette(fg);
+	}
+
+	body, input, select, textarea {
+		color: _palette(fg-bold);
+		font-family: _font(family);
+		font-size: 1rem;
+		font-weight: _font(weight);
+		letter-spacing: _font(kerning);
+		line-height: 2;
+	}
+
+	a {
+		@include vendor('transition', 'border-bottom-color #{_duration(transition)} ease-in-out');
+		text-decoration: none;
+		color: _palette(fg-bold);
+		border-bottom: dotted 1px;
+
+		&:hover {
+			text-decoration: none;
+			border-bottom-color: transparent;
+		}
+	}
+
+	strong, b {
+		font-weight: _font(weight-bold);
+		color: _palette(fg-bold);
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p {
+		margin: 0 0 _size(element-margin) 0;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: _palette(fg-bold);
+		font-family: _font(family-heading);
+		font-weight: _font(weight-heading-light);
+		letter-spacing: _font(kerning-heading);
+		line-height: 1.75;
+		margin: 0 0 (_size(element-margin) * 0.75) 0;
+		text-transform: uppercase;
+
+		a {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	h1 {
+		font-family: _font(family);
+		font-size: 5rem;
+		font-weight: _font(weight-extrabold);
+		letter-spacing: _font(kerning-heading-alt);
+		line-height: 1.1;
+		margin: 0 0 (_size(element-margin) * 0.75) 0;
+		text-transform: none;
+	}
+
+	h2 {
+		font-size: 1.25rem;
+		font-weight: _font(weight-heading);
+		margin: 0 0 _size(element-margin) 0;
+	}
+
+	h3 {
+		font-size: 0.875rem;
+	}
+
+	h4 {
+		font-size: 0.875rem;
+	}
+
+	h5 {
+		font-size: 0.75rem;
+	}
+
+	h6 {
+		font-size: 0.625rem;
+	}
+
+	@include breakpoint('<=small') {
+		h1 {
+			font-size: 4.5rem;
+			line-height: 1.1;
+		}
+
+		h2 {
+			font-size: 1.25rem;
+			line-height: 1.7;
+		}
+
+		h3 {
+			font-size: 0.9rem;
+		}
+
+		h4 {
+			font-size: 0.75rem;
+		}
+
+		h5 {
+			font-size: 0.675rem;
+		}
+	}
+
+	@include breakpoint('<=xxsmall') {
+		h1 {
+			font-size: 3.75rem;
+		}
+
+		h2 {
+			font-size: 1.125rem;
+		}
+
+		h3 {
+			font-size: 0.8rem;
+		}
+
+		h4 {
+			font-size: 0.675rem;
+		}
+
+		h5 {
+			font-size: 0.675rem;
+		}
+	}
+
+	sub {
+		font-size: 0.8rem;
+		position: relative;
+		top: 0.5rem;
+	}
+
+	sup {
+		font-size: 0.8rem;
+		position: relative;
+		top: -0.5rem;
+	}
+
+	blockquote {
+		border-left: solid 0.5rem _palette(border);
+		font-style: italic;
+		margin: 0 0 _size(element-margin) 0;
+		padding: (_size(element-margin) * 0.5) 0 (_size(element-margin) * 0.5) _size(element-margin);
+	}
+
+	code {
+		background: _palette(border-bg);
+		border-radius: _size(border-radius);
+		font-family: _font(family-fixed);
+		font-size: 0.9rem;
+		margin: 0 0.25rem;
+		padding: 0.25rem 0.65rem;
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: _font(family-fixed);
+		font-size: 0.9rem;
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		code {
+			display: block;
+			line-height: 1.75;
+			padding: 1rem 1.5rem;
+			overflow-x: auto;
+		}
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid 2px _palette(border);
+		margin: (_size(element-margin) * 1.5) 0;
+
+		&.major {
+			margin: (_size(element-margin) * 2.5) 0;
+		}
+
+		@include breakpoint('<=small') {
+			&.major {
+				margin: (_size(element-margin) * 1.5) 0;
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_actions.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Actions */
+
+	ul.actions {
+		@include vendor('display', 'flex');
+		cursor: default;
+		list-style: none;
+		margin-left: (_size(element-margin) * -0.5);
+		padding-left: 0;
+
+		li {
+			padding: 0 0 0 (_size(element-margin) * 0.5);
+			vertical-align: middle;
+		}
+
+		&.special {
+			@include vendor('justify-content', 'center');
+			width: 100%;
+			margin-left: 0;
+
+			li {
+				&:first-child {
+					padding-left: 0;
+				}
+			}
+		}
+
+		&.stacked {
+			@include vendor('flex-direction', 'column');
+			margin-left: 0;
+
+			li {
+				padding: (_size(element-margin) * 0.65) 0 0 0;
+
+				&:first-child {
+					padding-top: 0;
+				}
+			}
+		}
+
+		&.fit {
+			width: calc(100% + #{_size(element-margin) * 0.5});
+
+			li {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+				width: 100%;
+
+				> * {
+					width: 100%;
+				}
+			}
+
+			&.stacked {
+				width: 100%;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			&:not(.fixed) {
+				@include vendor('flex-direction', 'column');
+				margin-left: 0;
+				width: 100% !important;
+
+				li {
+					@include vendor('flex-grow', '1');
+					@include vendor('flex-shrink', '1');
+					padding: (_size(element-margin) * 0.5) 0 0 0;
+					text-align: center;
+					width: 100%;
+
+					> * {
+						width: 100%;
+					}
+
+					&:first-child {
+						padding-top: 0;
+					}
+
+					input[type="submit"],
+					input[type="reset"],
+					input[type="button"],
+					button,
+					.button {
+						width: 100%;
+
+						&.icon {
+							&:before {
+								margin-left: -0.5rem;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_arrow.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Arrow */
+
+	a.arrow {
+		border-bottom: 0;
+		display: inline-block;
+		height: 4rem;
+		position: relative;
+		width: 6rem;
+
+		.label {
+			display: none;
+		}
+
+		&:before {
+			background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512"><path d="M442.53,346.28L293.65,495.16c-0.33,0.33-0.7,0.62-1.05,0.94c-9.16,9.77-22.15,15.9-36.6,15.9 c-14.44,0-27.43-6.13-36.59-15.88c-0.35-0.33-0.72-0.62-1.06-0.96L69.47,346.28c-19.62-19.62-19.62-51.44,0-71.05 c19.62-19.62,51.43-19.62,71.06,0l65.23,65.23V50.24C205.76,22.5,228.25,0,256,0s50.24,22.5,50.24,50.24v290.21l65.23-65.23 c19.62-19.62,51.43-19.62,71.05,0C462.15,294.84,462.15,326.66,442.53,346.28z" fill="#{_palette(fg-bold)}" /></svg>');
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			content: '';
+			display: inline-block;
+			height: 100%;
+			position: relative;
+			width: 3rem;
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_box.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Box */
+
+	.box {
+		border: solid 2px _palette(border);
+		border-radius: _size(border-radius);
+		margin-bottom: _size(element-margin);
+		padding: 1.5rem;
+
+		> :last-child {
+			margin-bottom: 0;
+		}
+
+		&.alt {
+			border: 0;
+			border-radius: 0;
+			padding: 0;
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_button.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'box-shadow #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: 0;
+		box-shadow: inset 0 0 0 2px _palette(border);
+		color: _palette(fg-bold) !important;
+		cursor: pointer;
+		display: inline-block;
+		font-family: _font(family-heading);
+		font-size: 0.6rem;
+		font-weight: _font(weight-heading-light);
+		height: (_size(element-height) * 1);
+		letter-spacing: _font(kerning-heading);
+		line-height: (_size(element-height) * 1);
+		padding: 0 2rem;
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+
+		&:hover {
+			box-shadow: inset 0 0 0 2px _palette(accent-alt);
+			color: _palette(accent-alt) !important;
+		}
+
+		&:active {
+			background-color: _palette(accent-bg);
+			box-shadow: inset 0 0 0 2px _palette(accent-alt);
+			color: _palette(accent-alt) !important;
+		}
+
+		&.small {
+			font-size: 0.5rem;
+			height: _size(element-height) * 0.75;
+			line-height: _size(element-height) * 0.75;
+			padding: 0 1.25rem;
+		}
+
+		&.large {
+			font-size: 0.7rem;
+			height: _size(element-height) * 1.0875;
+			line-height: _size(element-height) * 1.0875;
+			padding: 0 3.25rem;
+		}
+
+		&.wide {
+			min-width: 13rem;
+		}
+
+		&.icon {
+			&:before {
+				margin-right: 0.5rem;
+			}
+		}
+
+		&.fit {
+			width: 100%;
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+
+		&.primary {
+			background-color: _palette(accent);
+			box-shadow: none;
+			color: _palette(fg-bold) !important;
+
+			&:hover {
+				background-color: saturate(lighten(_palette(accent), 15), 10);
+			}
+
+			&:active {
+				background-color: desaturate(darken(_palette(accent), 3), 10);
+			}
+		}
+
+		@include breakpoint('<=small') {
+			font-size: 0.7rem;
+			height: (_size(element-height) * 1.1);
+			line-height: (_size(element-height) * 1.1);
+
+			&.large {
+				font-size: 0.8rem;
+				height: _size(element-height) * 1.25;
+				line-height: _size(element-height) * 1.25;
+			}
+
+			&.small {
+				font-size: 0.6rem;
+				height: (_size(element-height) * 1);
+				line-height: (_size(element-height) * 1);
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_feature-icons.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Feature Icons */
+
+	ul.feature-icons {
+		display: flex;
+		flex-wrap: wrap;
+		list-style: none;
+		margin: (_size(element-margin) * 1.5) 0;
+		padding-left: 0;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		li {
+			margin: (_size(element-margin) * 1.25) 0 0 0;
+			padding: 0.5rem 0 0 4.5rem;
+			position: relative;
+			width: 50%;
+
+			&:before {
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512"><path d="M256,0l221.7,128v256L256,512L34.3,384V128L256,0z" fill="#{_palette(border-bg)}" /></svg>');
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				color: _palette(fg-bold);
+				display: block;
+				font-size: 1.25rem;
+				height: 3.25rem;
+				left: 0;
+				line-height: 3.25rem;
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: 3.25rem;
+			}
+
+			&:nth-child(1),
+			&:nth-child(2) {
+				margin-top: 0;
+			}
+		}
+
+		@include breakpoint('<=small') {
+			margin: 0 0 (_size(element-margin) * 1.5) 0;
+
+			li {
+				width: 100%;
+
+				&:nth-child(2) {
+					margin-top: (_size(element-margin) * 1);
+				}
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_form.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Form */
+
+	form {
+		margin: 0 0 _size(element-margin) 0;
+
+		> :last-child {
+			margin-bottom: 0;
+		}
+
+		> .fields  {
+			$gutter: _size(form-gutter);
+
+			@include vendor('display', 'flex');
+			@include vendor('flex-wrap', 'wrap');
+			margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+			width: calc(100% + #{$gutter * 2});
+
+			> .field {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				padding: $gutter 0 0 $gutter;
+				width: calc(100% - #{$gutter * 1});
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+
+				&.half {
+					width: calc(50% - #{$gutter * 0.5});
+				}
+
+				&.third {
+					width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
+				}
+
+				&.quarter {
+					width: calc(25% - #{$gutter * 0.25});
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			> .fields {
+				$gutter: (_size(element-margin) * 0.75);
+
+				margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+				width: calc(100% + #{$gutter * 2});
+
+				> .field {
+					padding: $gutter 0 0 $gutter;
+					width: calc(100% - #{$gutter * 1});
+
+					&.half {
+						width: calc(100% - #{$gutter * 1});
+					}
+
+					&.third {
+						width: calc(100% - #{$gutter * 1});
+					}
+
+					&.quarter {
+						width: calc(100% - #{$gutter * 1});
+					}
+				}
+			}
+		}
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="search"],
+	input[type="url"],
+	select,
+	textarea {
+		@include vendor('appearance', 'none');
+		border-radius: _size(border-radius);
+		border: solid 2px _palette(border);
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 1rem;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+
+		&:focus {
+			border-color: _palette(accent-alt);
+		}
+	}
+
+	label {
+		color: _palette(fg-bold);
+		display: block;
+		font-family: _font(family-heading);
+		font-size: 0.75rem;
+		font-weight: _font(weight-heading-light);
+		letter-spacing: _font(kerning-heading);
+		line-height: 1.75;
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+		text-transform: uppercase;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="search"],
+	input[type="url"] {
+		height: _size(element-height);
+	}
+
+	select {
+		background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+		background-position: calc(100% - 1rem) center;
+		background-repeat: no-repeat;
+		background-size: 1.25rem;
+		height: _size(element-height);
+		padding-right: _size(element-height);
+		text-overflow: ellipsis;
+
+		option {
+			background-color: _palette(bg);
+			color: _palette(fg);
+		}
+
+		&:focus {
+			&::-ms-value {
+				background-color: transparent;
+			}
+		}
+
+		&::-ms-expand {
+			display: none;
+		}
+	}
+
+	textarea {
+		padding: 0.75rem 1rem;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"], {
+		@include vendor('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2rem;
+		opacity: 0;
+		width: 1rem;
+		z-index: -1;
+
+		& + label {
+			@include icon;
+			color: _palette(fg);
+			cursor: pointer;
+			display: inline-block;
+			font-family: _font(family);
+			font-size: 1rem;
+			font-weight: _font(weight);
+			letter-spacing: _font(kerning);
+			padding-left: (_size(element-height) * 0.6) + 0.875rem;
+			padding-right: 0.875rem;
+			position: relative;
+			text-transform: none;
+
+			&:before {
+				border-radius: _size(border-radius);
+				border: solid 2px _palette(border);
+				content: '';
+				display: inline-block;
+				height: (_size(element-height) * 0.6);
+				left: 0;
+				line-height: (_size(element-height) * 0.575);
+				position: absolute;
+				text-align: center;
+				top: (_size(element-height) * -0.05);
+				width: (_size(element-height) * 0.6);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				content: '\f00c';
+				background-color: _palette(accent);
+				border-color: _palette(accent);
+				color: _palette(bg);
+			}
+		}
+
+		&:focus + label {
+			&:before {
+				border-color: _palette(accent);
+				box-shadow: 0 0 0 1px _palette(accent);
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+				border-radius: _size(border-radius);
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	:-moz-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	::-moz-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	:-ms-input-placeholder {
+		opacity: 1.0;
+		color: _palette(fg-light) !important;
+	}
+
+	@include breakpoint('<=small') {
+		label {
+			font-size: 0.675rem;
+		}
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			& + label {
+				font-size: 1rem;
+			}
+		}
+	}
+
+	@include breakpoint('<=xxsmall') {
+		label {
+			font-size: 0.675rem;
+		}
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			& + label {
+				font-size: 1rem;
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_gallery.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Gallery */
+
+	@include keyframes('gallery-modal-spinner') {
+		0% {
+			@include vendor('transform', 'rotate(0deg)');
+		}
+
+		100% {
+			@include vendor('transform', 'rotate(360deg)');
+		}
+	}
+
+	.gallery {
+		$gutter: _size(gallery-gutter);
+
+		display: flex;
+		flex-wrap: wrap;
+		margin: ($gutter * -1) 0 0 ($gutter * -1);
+		width: calc(100% + #{$gutter});
+
+		a {
+			border-bottom: 0;
+			display: block;
+			margin: $gutter 0 0 $gutter;
+			outline: 0;
+			position: relative;
+			width: calc(50% - #{$gutter});
+
+			img {
+				display: block;
+				height: 25vw;
+				min-height: 18rem;
+				object-fit: cover;
+				object-position: center;
+				width: 100%;
+			}
+
+			&.landscape {
+				width: 100%;
+
+				img {
+					height: 30vw;
+				}
+			}
+
+			&.portrait {
+				img {
+					height: 30vw;
+				}
+			}
+		}
+
+		.modal {
+			@include vendor('display', 'flex');
+			@include vendor('align-items', 'center');
+			@include vendor('justify-content', 'center');
+			@include vendor('pointer-events', 'none');
+			@include vendor('user-select', 'none');
+			@include vendor('transition', (
+				'opacity #{_duration(gallery-lightbox-fadein)} ease',
+				'visibility #{_duration(gallery-lightbox-fadein)}',
+				'z-index #{_duration(gallery-lightbox-fadein)}'
+			));
+			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+			background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity));
+			height: 100%;
+			left: 0;
+			opacity: 0;
+			outline: 0;
+			position: fixed;
+			top: 0;
+			visibility: none;
+			width: 100%;
+			z-index: 0;
+
+			&:before {
+				@include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
+				@include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease');
+				@include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}');
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 2px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 4rem;
+				content: '';
+				display: block;
+				height: 4rem;
+				left: 50%;
+				margin: -2rem 0 0 -2rem;
+				opacity: 0;
+				position: absolute;
+				top: 50%;
+				width: 4rem;
+			}
+
+			&:after {
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 2px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 3rem;
+				content: '';
+				cursor: pointer;
+				display: block;
+				height: 4rem;
+				position: absolute;
+				right: 0.5rem;
+				top: 0.5rem;
+				width: 4rem;
+			}
+
+			.inner {
+				@include vendor('transform', 'translateY(0.75rem)');
+				@include vendor('transition', (
+					'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease',
+					'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease'
+				));
+				opacity: 0;
+
+				img {
+					box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
+					display: block;
+					max-height: 90vh;
+					max-width: 90vw;
+				}
+			}
+
+			&.visible {
+				@include vendor('pointer-events', 'auto');
+				opacity: 1;
+				visibility: visible;
+				z-index: _misc(z-index-base) + 1000;
+
+				&:before {
+					opacity: 1;
+				}
+			}
+
+			&.loaded {
+				.inner {
+					@include vendor('transform', 'translateY(0)');
+					@include vendor('transition', (
+						'opacity #{_duration(gallery-lightbox-fadein)} ease',
+						'transform #{_duration(gallery-lightbox-fadein)} ease'
+					));
+					opacity: 1;
+				}
+
+				&:before {
+					@include vendor('transition-delay', '0s');
+					opacity: 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			a {
+				img {
+					height: 20rem;
+				}
+
+				&.landscape {
+					img {
+						height: 25rem;
+					}
+				}
+
+				&.portrait {
+					img {
+						height: 25rem;
+					}
+				}
+			}
+
+			.modal {
+				.inner {
+					img {
+						max-width: 100vw;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			$gutter: (_size(gallery-gutter) * 0.5);
+
+			margin: ($gutter * -1) 0 0 ($gutter * -1);
+			width: calc(100% + #{$gutter});
+
+			a {
+				margin: $gutter 0 0 $gutter;
+				width: calc(50% - #{$gutter});
+
+				img {
+					height: 20rem;
+				}
+
+				&.landscape {
+					img {
+						height: 20rem;
+					}
+				}
+
+				&.portrait {
+					img {
+						height: 30rem;
+					}
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			a {
+				img {
+					height: 12rem;
+					min-height: 0;
+				}
+
+				&.landscape {
+					img {
+						height: 12rem;
+					}
+				}
+
+				&.portrait {
+					img {
+						height: 14rem;
+					}
+				}
+			}
+		}
+	}

www/assets/sass/components/_icon.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icon */
+
+	.icon {
+		@include icon;
+		border-bottom: none;
+		position: relative;
+
+		> .label {
+			display: none;
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_icons.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+	ul.icons {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+
+			&:last-child {
+				padding-right: 0;
+			}
+
+			.icon {
+				@include vendor('transition', 'background-color #{_duration(transition)} ease-in-out');
+				width: 2.25rem;
+				height: 2.25rem;
+				text-align: center;
+				line-height: 2.25rem;
+				border-radius: 2.25rem;
+				display: inline-block;
+
+				&:before {
+					font-size: 1.25rem;
+				}
+
+				&:hover {
+					background-color: _palette(border-bg);
+				}
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_image.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+	.image {
+		border: 0;
+		display: inline-block;
+		position: relative;
+
+		img {
+			display: block;
+		}
+
+		&[data-position] {
+			img {
+				@include vendor('object-fit', 'cover');
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		&[data-position="top left"] {
+			img {
+				@include vendor('object-position', 'top left');
+			}
+		}
+
+		&[data-position="top"] {
+			img {
+				@include vendor('object-position', 'top');
+			}
+		}
+
+		&[data-position="top right"] {
+			img {
+				@include vendor('object-position', 'top right');
+			}
+		}
+
+		&[data-position="right"] {
+			img {
+				@include vendor('object-position', 'right');
+			}
+		}
+
+		&[data-position="bottom right"] {
+			img {
+				@include vendor('object-position', 'bottom right');
+			}
+		}
+
+		&[data-position="bottom"] {
+			img {
+				@include vendor('object-position', 'bottom');
+			}
+		}
+
+		&[data-position="bottom left"] {
+			img {
+				@include vendor('object-position', 'bottom left');
+			}
+		}
+
+		&[data-position="left"] {
+			img {
+				@include vendor('object-position', 'left');
+			}
+		}
+
+		&[data-position="center"] {
+			img {
+				@include vendor('object-position', 'center');
+			}
+		}
+
+		&[data-position="25% 25%"] {
+			img {
+				@include vendor('object-position', '25% 25%');
+			}
+		}
+
+		&[data-position="75% 25%"] {
+			img {
+				@include vendor('object-position', '75% 25%');
+			}
+		}
+
+		&[data-position="75% 75%"] {
+			img {
+				@include vendor('object-position', '75% 75%');
+			}
+		}
+
+		&[data-position="25% 75%"] {
+			img {
+				@include vendor('object-position', '25% 75%');
+			}
+		}
+
+		&.left,
+		&.right {
+			max-width: 40%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.left {
+			float: left;
+			margin: 0 2rem 2rem 0;
+			top: 0.25rem;
+		}
+
+		&.right {
+			float: right;
+			margin: 0 0 2rem 2rem;
+			top: 0.25rem;
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.main {
+			display: block;
+			margin: (_size(element-margin) * 1.5) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+		}
+
+		&.fill {
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+
+			img {
+				//@include vendor('object-fit', 'cover');
+				//@include vendor('object-position', 'center');
+				height: 100%;
+				left: 0;
+				position: absolute;
+				top: 0;
+				width: 100%;
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_list.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* List */
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1.25rem;
+
+		li {
+			padding-left: 0.25rem;
+		}
+	}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1rem;
+
+		li {
+			padding-left: 0.325rem;
+		}
+
+		&.alt {
+			list-style: none;
+			padding-left: 0;
+
+			> li {
+				border-top: solid 1px _palette(border);
+				padding: 0.75rem 0;
+
+				&:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+
+				&:last-child {
+					padding-bottom: 0;
+				}
+			}
+		}
+
+		&.items {
+			list-style: none;
+			padding-left: 0;
+
+			> li {
+				padding-left: 0;
+				margin: 0 0 (_size(element-margin) * 1.5) 0;
+
+				> h3 {
+					margin: 0 0 (_size(element-margin) * 0.5) 0;
+				}
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			&.items {
+				> li {
+					margin: 0 0 (_size(element-margin) * 1) 0;
+				}
+			}
+		}
+	}
+
+	dl {
+		margin: 0 0 _size(element-margin) 0;
+
+		dt {
+			display: block;
+			font-weight: _font(weight-bold);
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+		}
+
+		dd {
+			margin-left: (_size(element-margin) * 0.75);
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_row.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Row */
+
+	.row {
+		@include html-grid(2rem);
+
+		@include breakpoint('<=xlarge') {
+			@include html-grid(2rem, 'xlarge');
+		}
+
+		@include breakpoint('<=large') {
+			@include html-grid(1.5rem, 'large');
+		}
+
+		@include breakpoint('<=medium') {
+			@include html-grid(1.5rem, 'medium');
+		}
+
+		@include breakpoint('<=small') {
+			@include html-grid(1.25rem, 'small');
+		}
+
+		@include breakpoint('<=xsmall') {
+			@include html-grid(1.25rem, 'xsmall');
+		}
+	}
\ No newline at end of file

www/assets/sass/components/_table.scss

+///
+/// Paradigm Shift by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		overflow-x: auto;
+	}
+
+	table {
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid 1px _palette(border);
+				border-left: 0;
+				border-right: 0;
+
+				&:nth-child(2n + 1) {
+					background-color: _palette(border-bg);
+				}
+			}
+		}
+
+		td {
+			padding: 0.75rem 0.75rem;
+		}
+
+		th {
+			color: _palette(fg-bold);
+			font-size: 0.9rem;
+			font-weight: _font(weight-bold);
+			padding: 0 0.75rem 0.75rem 0.75rem;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid 2px _palette(border);
+		}
+
+		tfoot {
+			border-top: solid 2px _palette(border);
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid 1px _palette(border);
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: 1px;
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: 1px;
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+	}
\ No newline at end of file

www/assets/sass/libs/_breakpoints.scss

+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Breakpoints.
+	/// @var {list}
+	$breakpoints: () !global;
+
+// Mixins.
+
+	/// Sets breakpoints.
+	/// @param {map} $x Breakpoints.
+	@mixin breakpoints($x: ()) {
+		$breakpoints: $x !global;
+	}
+
+	/// Wraps @content in a @media block targeting a specific orientation.
+	/// @param {string} $orientation Orientation.
+	@mixin orientation($orientation) {
+		@media screen and (orientation: #{$orientation}) {
+			@content;
+		}
+	}
+
+	/// Wraps @content in a @media block using a given query.
+	/// @param {string} $query Query.
+	@mixin breakpoint($query: null) {
+
+		$breakpoint: null;
+		$op: null;
+		$media: null;
+
+		// Determine operator, breakpoint.
+
+			// Greater than or equal.
+				@if (str-slice($query, 0, 2) == '>=') {
+
+					$op: 'gte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Less than or equal.
+				@elseif (str-slice($query, 0, 2) == '<=') {
+
+					$op: 'lte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Greater than.
+				@elseif (str-slice($query, 0, 1) == '>') {
+
+					$op: 'gt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Less than.
+				@elseif (str-slice($query, 0, 1) == '<') {
+
+					$op: 'lt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Not.
+				@elseif (str-slice($query, 0, 1) == '!') {
+
+					$op: 'not';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Equal.
+				@else {
+
+					$op: 'eq';
+					$breakpoint: $query;
+
+				}
+
+		// Build media.
+			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+
+				$a: map-get($breakpoints, $breakpoint);
+
+				// Range.
+					@if (type-of($a) == 'list') {
+
+						$x: nth($a, 1);
+						$y: nth($a, 2);
+
+						// Max only.
+							@if ($x == null) {
+
+								// Greater than or equal (>= 0 / anything)
+									@if ($op == 'gte') {
+										$media: 'screen';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< 0 / invalid)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Not (> y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (<= y)
+									@else {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+							}
+
+						// Min only.
+							@else if ($y == null) {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= inf / anything)
+									@elseif ($op == 'lte') {
+										$media: 'screen';
+									}
+
+								// Greater than (> inf / invalid)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Equal (>= x)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+							}
+
+						// Min and max.
+							@else {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x and > y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (>= x and <= y)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
+									}
+
+							}
+
+					}
+
+				// String.
+					@else {
+
+						// Missing a media type? Prefix with "screen".
+							@if (str-slice($a, 0, 1) == '(') {
+								$media: 'screen and ' + $a;
+							}
+
+						// Otherwise, use as-is.
+							@else {
+								$media: $a;
+							}
+
+					}
+
+			}
+
+		// Output.
+	        @media #{$media} {
+				@content;
+			}
+
+	}
\ No newline at end of file

www/assets/sass/libs/_functions.scss

+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+
+	$result: null;
+
+	@if type-of($index) != number {
+		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+	}
+	@else if $index == 0 {
+		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+	}
+	@else if abs($index) > length($list) {
+		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+	}
+	@else {
+
+		$result: ();
+		$index: if($index < 0, length($list) + $index + 1, $index);
+
+		@for $i from 1 through length($list) {
+
+			@if $i != $index {
+				$result: append($result, nth($list, $i));
+			}
+
+		}
+
+	}
+
+	@return $result;
+
+}
+
+/// Gets a value from a map.
+/// @author Hugo Giraudel
+/// @param {map} $map Map.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function val($map, $keys...) {
+
+	@if nth($keys, 1) == null {
+		$keys: remove-nth($keys, 1);
+	}
+
+	@each $key in $keys {
+		$map: map-get($map, $key);
+	}
+
+	@return $map;
+
+}
+
+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _duration($keys...) {
+	@return val($duration, $keys...);
+}
+
+/// Gets a font value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _font($keys...) {
+	@return val($font, $keys...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _misc($keys...) {
+	@return val($misc, $keys...);
+}
+
+/// Gets a palette value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _palette($keys...) {
+	@return val($palette, $keys...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+	@return val($size, $keys...);
+}
\ No newline at end of file

www/assets/sass/libs/_html-grid.scss

+// html-grid.scss v1.0 | @ajlkn | MIT licensed */
+
+// Mixins.
+
+	/// Initializes the current element as an HTML grid.
+	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
+	/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
+	@mixin html-grid($gutters: 1.5em, $suffix: '') {
+
+		// Initialize.
+			$cols: 12;
+			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
+			$unit: 100% / $cols;
+
+			// Suffixes.
+				$suffixes: null;
+
+				@if (type-of($suffix) == 'list') {
+					$suffixes: $suffix;
+				}
+				@else {
+					$suffixes: ($suffix);
+				}
+
+			// Gutters.
+				$guttersCols: null;
+				$guttersRows: null;
+
+				@if (type-of($gutters) == 'list') {
+
+					$guttersCols: nth($gutters, 1);
+					$guttersRows: nth($gutters, 2);
+
+				}
+				@else {
+
+					$guttersCols: $gutters;
+					$guttersRows: 0;
+
+				}
+
+		// Row.
+			display: flex;
+			flex-wrap: wrap;
+			box-sizing: border-box;
+			align-items: stretch;
+
+			// Columns.
+				> * {
+					box-sizing: border-box;
+				}
+
+			// Gutters.
+				&.gtr-uniform {
+					> * {
+						> :last-child {
+							margin-bottom: 0;
+						}
+					}
+				}
+
+			// Alignment.
+				&.aln-left {
+					justify-content: flex-start;
+				}
+
+				&.aln-center {
+					justify-content: center;
+				}
+
+				&.aln-right {
+					justify-content: flex-end;
+				}
+
+				&.aln-top {
+					align-items: flex-start;
+				}
+
+				&.aln-middle {
+					align-items: center;
+				}
+
+				&.aln-bottom {
+					align-items: flex-end;
+				}
+
+		// Step through suffixes.
+			@each $suffix in $suffixes {
+
+				// Suffix.
+					@if ($suffix != '') {
+						$suffix: '-' + $suffix;
+					}
+					@else {
+						$suffix: '';
+					}
+
+				// Row.
+
+					// Important.
+						> .imp#{$suffix} {
+							order: -1;
+						}
+
+					// Columns, offsets.
+						@for $i from 1 through $cols {
+							> .col-#{$i}#{$suffix} {
+								width: $unit * $i;
+							}
+
+							> .off-#{$i}#{$suffix} {
+								margin-left: $unit * $i;
+							}
+						}
+
+					// Step through multipliers.
+						@each $multiplier in $multipliers {
+
+							// Gutters.
+								$class: null;
+
+								@if ($multiplier != 1) {
+									$class: '.gtr-' + ($multiplier * 100);
+								}
+
+								&#{$class} {
+									margin-top: ($guttersRows * $multiplier * -1);
+									margin-left: ($guttersCols * $multiplier * -1);
+
+									> * {
+										padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
+									}
+
+									// Uniform.
+										&.gtr-uniform {
+											margin-top: $guttersCols * $multiplier * -1;
+
+											> * {
+												padding-top: $guttersCols * $multiplier;
+											}
+										}
+
+								}
+
+						}
+
+			}
+
+	}
\ No newline at end of file

www/assets/sass/libs/_mixins.scss

+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $where Optional pseudoelement to target (before or after).
+@mixin icon($content: false, $where: before) {
+
+	text-decoration: none;
+
+	&:#{$where} {
+
+		@if $content {
+			content: $content;
+		}
+
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-font-smoothing: antialiased;
+		font-family: FontAwesome;
+		font-style: normal;
+		font-weight: normal;
+		text-transform: none !important;
+
+	}
+
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+
+	@if $important {
+		$important: '!important';
+	}
+
+	$x: 0.1em;
+
+	@if unit(_size(element-margin)) == 'rem' {
+		$x: 0.1rem;
+	}
+
+	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+
+}
+
+/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
+/// @param {string} $svg SVG data URL.
+/// @return {string} Encoded SVG data URL.
+@function svg-url($svg) {
+
+	$svg: str-replace($svg, '"', '\'');
+	$svg: str-replace($svg, '%', '%25');
+	$svg: str-replace($svg, '<', '%3C');
+	$svg: str-replace($svg, '>', '%3E');
+	$svg: str-replace($svg, '&', '%26');
+	$svg: str-replace($svg, '#', '%23');
+	$svg: str-replace($svg, '{', '%7B');
+	$svg: str-replace($svg, '}', '%7D');
+	$svg: str-replace($svg, ';', '%3B');
+
+	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
+
+}
\ No newline at end of file

www/assets/sass/libs/_vars.scss

+// Misc.
+	$misc: (
+		z-index-base:				10000,
+		gallery-lightbox-opacity:	0.875
+	);
+
+// Duration.
+	$duration: (
+		transition:					0.25s,
+		gallery-lightbox-fadein:	0.5s
+	);
+
+// Size.
+	$size: (
+		border-radius:			0.325rem,
+		element-height:			3rem,
+		element-margin:			2rem,
+		header-width:			25rem,
+		subheader-width:		22rem,
+		content-width:			60rem,
+		line-width:				2px,
+		form-gutter:			2rem,
+		gallery-gutter:			1.25rem,
+	);
+
+// Font.
+	$font: (
+		family:					('Source Sans Pro', Helvetica, sans-serif),
+		family-fixed:			('Courier New', monospace),
+		family-heading:			('Raleway', Helvetica, sans-serif),
+		weight:					300,
+		weight-bold:			600,
+		weight-extrabold:		700,
+		weight-heading:			800,
+		weight-heading-light:	600,
+		kerning:				0.0375em,
+		kerning-heading:		0.175em,
+		kerning-heading-alt:	-0.05em
+	);
+
+// Palette.
+	$palette: (
+		bg:						#ffffff,
+		fg:						#000000,
+		fg-bold:				#000000,
+		fg-light:				rgba(0,0,0,0.25),
+		border:					rgba(144,144,144,0.25),
+		border-bg:				rgba(144,144,144,0.1),
+		accent:					#49fcd4,
+		accent-border:			desaturate(darken(#49fcd4, 8), 30),
+		accent-alt:				desaturate(darken(#49fcd4, 10), 20),
+		accent-bg:				transparentize(#49fcd4, 0.75)
+	);
\ No newline at end of file

www/assets/sass/libs/_vendor.scss

+// vendor.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Vendor prefixes.
+	/// @var {list}
+	$vendor-prefixes: (
+		'-moz-',
+		'-webkit-',
+		'-ms-',
+		''
+	);
+
+	/// Properties that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-properties: (
+
+		// Animation.
+			'animation',
+			'animation-delay',
+			'animation-direction',
+			'animation-duration',
+			'animation-fill-mode',
+			'animation-iteration-count',
+			'animation-name',
+			'animation-play-state',
+			'animation-timing-function',
+
+		// Appearance.
+			'appearance',
+
+		// Backdrop filter.
+			'backdrop-filter',
+
+		// Background image options.
+			'background-clip',
+			'background-origin',
+			'background-size',
+
+		// Box sizing.
+			'box-sizing',
+
+		// Clip path.
+			'clip-path',
+
+		// Filter effects.
+			'filter',
+
+		// Flexbox.
+			'align-content',
+			'align-items',
+			'align-self',
+			'flex',
+			'flex-basis',
+			'flex-direction',
+			'flex-flow',
+			'flex-grow',
+			'flex-shrink',
+			'flex-wrap',
+			'justify-content',
+			'order',
+
+		// Font feature.
+			'font-feature-settings',
+			'font-language-override',
+			'font-variant-ligatures',
+
+		// Font kerning.
+			'font-kerning',
+
+		// Fragmented borders and backgrounds.
+			'box-decoration-break',
+
+		// Grid layout.
+			'grid-column',
+			'grid-column-align',
+			'grid-column-end',
+			'grid-column-start',
+			'grid-row',
+			'grid-row-align',
+			'grid-row-end',
+			'grid-row-start',
+			'grid-template-columns',
+			'grid-template-rows',
+
+		// Hyphens.
+			'hyphens',
+			'word-break',
+
+		// Masks.
+			'mask',
+			'mask-border',
+			'mask-border-outset',
+			'mask-border-repeat',
+			'mask-border-slice',
+			'mask-border-source',
+			'mask-border-width',
+			'mask-clip',
+			'mask-composite',
+			'mask-image',
+			'mask-origin',
+			'mask-position',
+			'mask-repeat',
+			'mask-size',
+
+		// Multicolumn.
+			'break-after',
+			'break-before',
+			'break-inside',
+			'column-count',
+			'column-fill',
+			'column-gap',
+			'column-rule',
+			'column-rule-color',
+			'column-rule-style',
+			'column-rule-width',
+			'column-span',
+			'column-width',
+			'columns',
+
+		// Object fit.
+			'object-fit',
+			'object-position',
+
+		// Regions.
+			'flow-from',
+			'flow-into',
+			'region-fragment',
+
+		// Scroll snap points.
+			'scroll-snap-coordinate',
+			'scroll-snap-destination',
+			'scroll-snap-points-x',
+			'scroll-snap-points-y',
+			'scroll-snap-type',
+
+		// Shapes.
+			'shape-image-threshold',
+			'shape-margin',
+			'shape-outside',
+
+		// Tab size.
+			'tab-size',
+
+		// Text align last.
+			'text-align-last',
+
+		// Text decoration.
+			'text-decoration-color',
+			'text-decoration-line',
+			'text-decoration-skip',
+			'text-decoration-style',
+
+		// Text emphasis.
+			'text-emphasis',
+			'text-emphasis-color',
+			'text-emphasis-position',
+			'text-emphasis-style',
+
+		// Text size adjust.
+			'text-size-adjust',
+
+		// Text spacing.
+			'text-spacing',
+
+		// Transform.
+			'transform',
+			'transform-origin',
+
+		// Transform 3D.
+			'backface-visibility',
+			'perspective',
+			'perspective-origin',
+			'transform-style',
+
+		// Transition.
+			'transition',
+			'transition-delay',
+			'transition-duration',
+			'transition-property',
+			'transition-timing-function',
+
+		// Unicode bidi.
+			'unicode-bidi',
+
+		// User select.
+			'user-select',
+
+		// Writing mode.
+			'writing-mode',
+
+	);
+
+	/// Values that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-values: (
+
+		// Cross fade.
+			'cross-fade',
+
+		// Element function.
+			'element',
+
+		// Filter function.
+			'filter',
+
+		// Flexbox.
+			'flex',
+			'inline-flex',
+
+		// Grab cursors.
+			'grab',
+			'grabbing',
+
+		// Gradients.
+			'linear-gradient',
+			'repeating-linear-gradient',
+			'radial-gradient',
+			'repeating-radial-gradient',
+
+		// Grid layout.
+			'grid',
+			'inline-grid',
+
+		// Image set.
+			'image-set',
+
+		// Intrinsic width.
+			'max-content',
+			'min-content',
+			'fit-content',
+			'fill',
+			'fill-available',
+			'stretch',
+
+		// Sticky position.
+			'sticky',
+
+		// Transform.
+			'transform',
+
+		// Zoom cursors.
+			'zoom-in',
+			'zoom-out',
+
+	);
+
+// Functions.
+
+	/// Removes a specific item from a list.
+	/// @author Hugo Giraudel
+	/// @param {list} $list List.
+	/// @param {integer} $index Index.
+	/// @return {list} Updated list.
+	@function remove-nth($list, $index) {
+
+		$result: null;
+
+		@if type-of($index) != number {
+			@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+		}
+		@else if $index == 0 {
+			@warn "List index 0 must be a non-zero integer for `remove-nth`.";
+		}
+		@else if abs($index) > length($list) {
+			@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+		}
+		@else {
+
+			$result: ();
+			$index: if($index < 0, length($list) + $index + 1, $index);
+
+			@for $i from 1 through length($list) {
+
+				@if $i != $index {
+					$result: append($result, nth($list, $i));
+				}
+
+			}
+
+		}
+
+		@return $result;
+
+	}
+
+	/// Replaces a substring within another string.
+	/// @author Hugo Giraudel
+	/// @param {string} $string String.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {string} Updated string.
+	@function str-replace($string, $search, $replace: '') {
+
+		$index: str-index($string, $search);
+
+		@if $index {
+			@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+		}
+
+		@return $string;
+
+	}
+
+	/// Replaces a substring within each string in a list.
+	/// @param {list} $strings List of strings.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {list} Updated list of strings.
+	@function str-replace-all($strings, $search, $replace: '') {
+
+		@each $string in $strings {
+			$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
+		}
+
+		@return $strings;
+
+	}
+
+// Mixins.
+
+	/// Wraps @content in vendorized keyframe blocks.
+	/// @param {string} $name Name.
+	@mixin keyframes($name) {
+
+		@-moz-keyframes #{$name} { @content; }
+		@-webkit-keyframes #{$name} { @content; }
+		@-ms-keyframes #{$name} { @content; }
+		@keyframes #{$name} { @content; }
+
+	}
+
+	/// Vendorizes a declaration's property and/or value(s).
+	/// @param {string} $property Property.
+	/// @param {mixed} $value String/list of value(s).
+	@mixin vendor($property, $value) {
+
+		// Determine if property should expand.
+			$expandProperty: index($vendor-properties, $property);
+
+		// Determine if value should expand (and if so, add '-prefix-' placeholder).
+			$expandValue: false;
+
+			@each $x in $value {
+				@each $y in $vendor-values {
+					@if $y == str-slice($x, 1, str-length($y)) {
+
+						$value: set-nth($value, index($value, $x), '-prefix-' + $x);
+						$expandValue: true;
+
+					}
+				}
+			}
+
+		// Expand property?
+			@if $expandProperty {
+			    @each $vendor in $vendor-prefixes {
+			        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Expand just the value?
+			@elseif $expandValue {
+			    @each $vendor in $vendor-prefixes {
+			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Neither? Treat them as a normal declaration.
+			@else {
+		        #{$property}: #{$value};
+			}
+
+	}
\ No newline at end of file

www/assets/sass/main.scss

+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+@import 'font-awesome.min.css';
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700,300i,600i,700i|Raleway:600,800');
+
+/*
+	Paradigm Shift by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+*/
+
+// Breakpoints.
+
+	@include breakpoints((
+		default:   (1681px,   null     ),
+		xlarge:    (1281px,   1920px   ),
+		large:     (1153px,   1280px   ),
+		medium:    (737px,    1152px   ),
+		small:     (481px,    736px    ),
+		xsmall:    (361px,    480px    ),
+		xxsmall:   (null,     360px    )
+	));
+
+// Base.
+
+	@import 'base/reset';
+	@import 'base/page';
+	@import 'base/typography';
+
+// Component.
+
+	@import 'components/row';
+	@import 'components/box';
+	@import 'components/button';
+	@import 'components/form';
+	@import 'components/icon';
+	@import 'components/image';
+	@import 'components/list';
+	@import 'components/actions';
+	@import 'components/icons';
+	@import 'components/table';
+	@import 'components/arrow';
+	@import 'components/gallery';
+	@import 'components/feature-icons';
+
+// Layout.
+
+	@import 'layout/wrapper';
\ No newline at end of file

www/core.html

+<!DOCTYPE HTML>
+<!--
+	Paradigm Shift by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>EyeTractive</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<link rel="stylesheet" href="assets/css/main.css" />
+	</head>
+	<body class="is-preload">
+
+		<!-- Wrapper -->
+			<div id="wrapper">
+
+				<!-- Intro -->
+					<section class="intro">
+						<header>
+							<h1>Eyetracktive Design</h1>
+							<p>Cut it. Glue it. Use it.</p>
+							<ul class="actions">
+								<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
+							</ul>
+						</header>
+						<div class="content">
+							<span class="image fill" data-position="center"><img src="images/core/EyeTracktiveParts.png" alt="" /></span>
+						</div>
+					</section>
+
+				<!-- Section -->
+					<section id="first">
+						<header>
+							<h2>The Camera Insert</h2>
+						</header>
+						<div class="content">
+							<p> At the heart of EyeTractive is a piece of card. This replaces the third section of a regular google cardboard second generation.</p>
+							<span class="image main"><img src="images/IMG_9471.JPG" alt="" /></span>
+							<p> You will be replacing it with this file. You can print this out and cut along the lines with a knife, or feed it into a laser cutter. We recommend using 2mm stiff card.</p>
+							<span class="image main"><img src="images/laserCut.jpg" alt="" /></span>
+							<p> Would you like to evolve the design? Here are the <a href="https://gitlab.eyeskills.org/community/eyetracktive/tree/master">original working files</a>. Just download the open source and free software <a href="www.openscad.org">OpenSCAD</a> to edit them.</p>
+							<span class="image main"><img src="images/core/EyeTracktiveParts.png" alt="" /></span>
+							<p> We will talk about how to assemble it later in this guide, once we have gone through all the parts that will fit inside it! </p>
+							<span class="button primary" href="www.eyeskills.org">Support us!</span>
+						</div>
+					</section>
+
+					<!-- Section -->
+						<section id="second">
+							<header>
+								<h2>Assembling the Core</h2>
+							</header>
+							<div class="content">
+								<p>These are the main parts you will need to assemble the core.  There is the insert to hold the electronics and cameras (blue card), the electronics themselves (consisting of a small hub, the guts of two endoscopic cameras, and cabling), 3D printed mounts for holding the cameras in a position where they can see the eyes, and an installation aide.</p>
+								<p>You can read more detail on how to assemble the electonics <a href="electronics.html">here.</a></p>
+								<span class="image main"><img src="images/mainParts.jpg" alt="" /></span>
+								<p> If you wish to 3D print the camera mounts, you can download the OpenSCAD files <a href="files/CameraHolderV2.scad">here</a>. Printing with PLA filament is fine. </p>
+								<span class="image main"><img src="images/cameraMount.png" alt="" /></span>
+
+								<h3> Part 1 - Putting the electronic guts in place. </h3>
+								<p> After you have assembled the <a href="electronics.html">electronics</a> you will need to feed them into the cardboard core. </p>
+								<p> First, feed the camera PCB and lens units through the feed holes at the front of the core (b3). </p>
+								<span class="image main"><img src="images/core/IMG_9268.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9271.JPG" alt="" /></span>
+								<p> Next, feed the USB plug through the output hole at the top of the core (t1). </p>
+								<span class="image main"><img src="images/core/IMG_9279.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9282.JPG" alt="" /></span>
+								<p> Now glue along the edges of the camera holders (leaving space for the heat to dissipate along the central channel)... </p>
+								<span class="image main"><img src="images/core/IMG_9293.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9300.JPG" alt="" /></span>
+								<p>... and mount the camera lens and pcb unit into the appropriate slots on the camera holder. </p>
+								<span class="image main"><img src="images/core/IMG_9311.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9324.JPG" alt="" /></span>
+								<p> Once you have both cameras in position, you can mount the camera mounts on the core itself.  Use the installation assistant to ensure that the module are mounted facing in the right direction and also in just the right position.</p>
+								<span class="image main"><img src="images/core/IMG_9324.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9333.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9344.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9356.JPG" alt="" /></span>
+								<p> Next we're going to glue the nano-hub into position in the cabel channel that runs between the bottom and top of the core.</p>
+								<span class="image main"><img src="images/core/IMG_9359.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9370.JPG" alt="" /></span>
+								<p> After that, we will afix the Infra Red LED at the top of the core which illuminates the eyes.</p>
+								<span class="image main"><img src="images/core/IMG_9377.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9388.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9389.JPG" alt="" /></span>
+								<h3> Part 2 - Folding and glueing the core. </h3>
+								<p> First, glue and fold the cable channel which holds the usb hub.</p>
+								<span class="image main"><img src="images/core/IMG_9402.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9411.JPG" alt="" /></span>
+								<p> Next, glue and fold the "nose guard" around the cable coming from the left most camera.</p>
+								<span class="image main"><img src="images/core/IMG_9422.JPG" alt="" /></span>
+								<p> After this, you can glue and fold the rest of the base unit... </p>
+								<span class="image main"><img src="images/core/IMG_9424.JPG" alt="" /></span>
+								<p> Now you just need to glue and fold the upper-most section.</p>
+								<span class="image main"><img src="images/core/IMG_9425.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9435.JPG" alt="" /></span>
+								<p> Now you are ready to place it inside the unfolded Google Cardboard V2, and fold it in.</p>
+								<span class="image main"><img src="images/core/IMG_9466.JPG" alt="" /></span>
+								<span class="image main"><img src="images/core/IMG_9469.JPG" alt="" /></span>
+								<p> As you may have noticed, there are several areas which could be improved.  The core needs sides to glue the surrounding cardboard against, and the IR LED positioning will probably need to be rethought.  It may also be desirable to add additional tabs to improve the structural firmness between the top, bottom and cable channel. Feel free to adapt the OpenSCAD design and send us an updated copy! :-)</p>
+							</div>
+						</section>
+
+				<!--
+					<section>
+						<header>
+							<h2>EyeTractive Ergonomics</h2>
+						</header>
+						<div class="content">
+							<p> In testing, we found that Google's Cardboard VR headset doesn't fit </p>
+							<ul class="feature-icons">
+								<li class="icon fa-laptop">Consequat tempus</li>
+								<li class="icon fa-bolt">Etiam adipiscing</li>
+								<li class="icon fa-signal">Libero nullam</li>
+								<li class="icon fa-gear">Blandit condimentum</li>
+								<li class="icon fa-map-marker">Lorem ipsum dolor</li>
+								<li class="icon fa-code">Nibh amet venenatis</li>
+							</ul>
+							<p>Vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
+						</div>
+					</section>
+				-->
+				<!-- Section -->
+					<section>
+						<header>
+							<h2>Get in touch</h2>
+						</header>
+						<div class="content">
+							<p>Over <a href="impressum.html"> here! </a></p>
+						</div>
+					</section>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/jquery.scrolly.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+			<script src="assets/js/util.js"></script>
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>

www/design.html

+<!DOCTYPE HTML>
+<!--
+	Paradigm Shift by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>EyeTractive</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<link rel="stylesheet" href="assets/css/main.css" />
+	</head>
+	<body class="is-preload">
+
+		<!-- Wrapper -->
+			<div id="wrapper">
+
+				<!-- Intro -->
+					<section class="intro">
+						<header>
+							<h1>Eyetracktive Design</h1>
+							<p>Cut it. Glue it. Use it.</p>
+							<ul class="actions">
+								<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
+							</ul>
+						</header>
+						<div class="content">
+							<span class="image fill" data-position="center"><img src="images/pic01.png" alt="" /></span>
+						</div>
+					</section>
+
+				<!-- Section -->
+					<section id="first">
+						<header>
+							<h2>The Camera Insert</h2>
+						</header>
+						<div class="content">
+							<p> At the heart of EyeTractive is a piece of card. This replaces the third section of a regular google cardboard second generation.</p>
+							<span class="image main"><img src="images/IMG_9471.JPG" alt="" /></span>
+							<p> You will be replacing it with this file. You can print this out and cut along the lines with a knife, or feed it into a laser cutter. We recommend using 2mm stiff card.</p>
+							<span class="image main"><img src="images/laserCut.jpg" alt="" /></span>
+							<p> Would you like to evolve the design? Here are the <a href="files/EyeTractiveCoreV2.scad">original working files</a>. Just download the open source and free software <a href="www.openscad.org">OpenSCAD</a> to edit them.</p>
+							<span class="image main"><img src="images/ourDesign.png" alt="" /></span>
+							<p> We will talk about how to assemble it later in this guide, once we have gone through all the parts that will fit inside it! </p>							
+						</div>
+					</section>
+
+					<!-- Section -->
+						<section id="second">
+							<header>
+								<h2>The EyeTractive Core</h2>
+							</header>
+							<div class="content">
+								<p> Our goal led us to design a solution which works with second generation Google Cardboards, simply replacing its central insert. Simple. Affordable. Ecologically sound. </p>
+								<p> The core uses nothing more than cardboard, which can be cut by laser, or by hand. Just fold it up and insert it. </p>
+								<p> ...as you can see with the first prototype, designed at the first Berlin Hackademy! </p>
+								<span class="image main"><img src="images/prototype1.jpg" alt="" /></span> <!--prototype Unfolded-->
+								<a href="core.html"><span class="button primary">Get the EyeTracktive Core design files!</span></a>
+							</div>
+						</section>
+
+						<!-- Section -->
+							<section id="third">
+								<header>
+									<h2>EyeTractive Ergonomics</h2>
+								</header>
+								<div class="content">
+									<p> In testing, we found that the design of Google's cardboard was a poor fit for many people's foreheads and noses. It wasn't just uncomfortable, but let in irritating amounts of light. </p>
+									<p> We think our solution is quite ground-breaking in its simplicity and affordability. Folded Neoprene. Again, to be cut by laser or by hand. </p>
+									<span class="image main"><img src="images/pic02.jpg" alt="" /></span> <!--Asieh-->
+									<a href="ergonomics.html"><span class="button primary">Get the EyeTracktive Ergonomics design files!</span></a>
+								</div>
+							</section>
+
+							<!-- Section -->
+								<section id="forth">
+									<header>
+										<h2>EyeTractive Electronics</h2>
+									</header>
+									<div class="content">
+										<p> Our approach is to use off the shelf components wherever possible.  Our cameras are based on endoscopic cameras which work with android, connected to a usb hub which can then allow an android phone to provide both power and image processing! </p>
+										<p> These cameras are held in place using custom 3D printed parts, but it's just as possible to use wedges of wood or hot glue - if not as pretty!</p>
+										<span class="image main"><img src="images/cameraMount.jpg" alt="" /></span> <!--Asieh-->
+										<div class="content">
+											<div class="gallery">
+												<a href="images/gallery/fulls/cameraMount.jpg" class="landscape"><img src="images/gallery/thumbs/thumbcameraMount.jpg" alt="" /></a>
+												<a href="images/gallery/fulls/cameraHeat.jpg"><img src="images/gallery/thumbs/thumbcameraHeat.jpg" alt="" /></a>
+												<a href="images/gallery/fulls/camera.jpg"><img src="images/gallery/thumbs/thumbcamera.jpg" alt="" /></a>
+											</div>
+										</div>
+										<a href="electronics.html"><span class="button primary">Get the EyeTracktive Electronics design files!</span></a>
+									</div>
+								</section>
+
+				<!-- Section -->
+				<!--
+					<section>
+						<header>
+							<h2>EyeTractive Ergonomics</h2>
+						</header>
+						<div class="content">
+							<p> In testing, we found that Google's Cardboard VR headset doesn't fit </p>
+							<ul class="feature-icons">
+								<li class="icon fa-laptop">Consequat tempus</li>
+								<li class="icon fa-bolt">Etiam adipiscing</li>
+								<li class="icon fa-signal">Libero nullam</li>
+								<li class="icon fa-gear">Blandit condimentum</li>
+								<li class="icon fa-map-marker">Lorem ipsum dolor</li>
+								<li class="icon fa-code">Nibh amet venenatis</li>
+							</ul>
+							<p>Vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
+						</div>
+					</section>
+				-->		<!-- Section -->
+							<section>
+								<header>
+									<h2>Get in touch</h2>
+								</header>
+								<div class="content">
+									<p>Over <a href="impressum.html"> here! </a></p>
+								</div>
+							</section>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/jquery.scrolly.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+			<script src="assets/js/util.js"></script>
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>

www/electronics.html

+<!DOCTYPE HTML>
+<!--
+	Paradigm Shift by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>EyeTractive</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<link rel="stylesheet" href="assets/css/main.css" />
+	</head>
+	<body class="is-preload">
+
+		<!-- Wrapper -->
+			<div id="wrapper">
+
+				<!-- Intro -->
+					<section class="intro">
+						<header>
+							<h1>Eyetracktive Design</h1>
+							<p>Cut it. Glue it. Use it.</p>
+							<ul class="actions">
+								<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
+							</ul>
+						</header>
+						<div class="content">
+							<span class="image fill" data-position="center"><img src="images/pic01.png" alt="" /></span>
+						</div>
+					</section>
+
+				<!-- Section -->
+					<section id="first">
+						<header>
+							<h2>Extract the camera</h2>
+						</header>
+						<div class="content">
+							<p> To track the eyes, we need a camera to look back at them. To make this affordable, we have been working with low cost (less than 6€ per unit) endoscopic cameras such as this one...</p>
+							<span class="image main"><img src="images/electronics/SAM_1954.JPG" alt="" /></span>
+							<span class="image main"><img src="images/electronics/SAM_1958.JPG" alt="" /></span>
+							<p> First, you need to get the camera out of the casing.  In these more modern (water proof) designs, you can simply "wobble" the cable at the end of casing to break the glue joint holding the casing onto the cable.</p>
+							<span class="image main"><img src="images/electronics/SAM_1959.JPG" alt="" /></span>
+							<span class="image main"><img src="images/electronics/SAM_1960.JPG" alt="" /></span>
+							<p> You'll then be able to <i> carefully </i> slide out the camera and the attached PCB.</p>
+							<span class="image main"><img src="images/electronics/SAM_1961.JPG" alt="" /></span>
+							<span class="image main"><img src="images/electronics/SAM_1962.JPG" alt="" /></span>
+						</div>
+					</section>
+
+					<!-- Section -->
+						<section id="second">
+							<header>
+								<h2>Modify the camera</h2>
+							</header>
+							<div class="content">
+								<p>The endoscopic cameras come with a tiny ring of LEDs. These will be replaced later by an Infra Red (IR) light source.  Simply clip off the LED ring.</p>
+								<span class="image main"><img src="images/electronics/SAM_1964.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1972.JPG" alt="" /></span>
+								<p>Next, we need to unscrew the lens on the camera so that we can remove the IR filter. Why? IR light isn't seen by the human eye, which makes it great for illuminating the pupil without distracting the user. However, these cameras (almost all cameras) have an inbuilt IR filter which blocks infra-red light, so it needs to go!</p>
+								<p>To remove the filter, we use the handy 3D printed aide you can get <a href="https://gitlab.eyeskills.org/community/eyetracktive/blob/master/lensRemovalTool.scad">here</a>  </p>
+								<span class="image main"><img src="images/electronics/SAM_1976.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1977.JPG" alt="" /></span>
+								<p>Now comes the hard part. You need to smash out the filter. Just poke it until it breaks and take out the pieces.  More elegant suggestions are welcome ;-)</p>
+								<span class="image main"><img src="images/electronics/SAM_1980.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1981.JPG" alt="" /></span>
+								<p>Make sure you clean the lens before continuing...</p>
+								<span class="image main"><img src="images/electronics/SAM_1982.JPG" alt="" /></span>
+
+					<section id="third">
+						<header>
+							<h2>Get soldering</h2>
+						</header>
+						<div class="content">
+								<p>Now we can use the power supply to the LED array to power an IR LED. Make sure you calculate the right resistor value for your choice of IR LED.  Infra-red can be harmful for the eye! This is a good source of information for your <a href="https://www.google.com/url?q=https://www.renesas.com/eu/en/doc/application-note/an1737.pdf&sa=D&ust=1554124529321000&usg=AFQjCNFDCt6dDsbeKFKJ-yWRIB8byNPMJw">calculations</a>.</p>
+								<span class="image main"><img src="images/electronics/SAM_1984.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2026.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2028.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2030.JPG" alt="" /></span>
+								<p>You can reuse the usb cable. The larger "illumination dial" at the main USB connector is superfluous. The chip controlling image processing and USB transfer is the one right next to the camera! </p>
+								<span class="image main"><img src="images/electronics/SAM_1986.JPG" alt="" /></span>
+								<p>Solder this up to the nano usb hub of your choice. In this case the <a href="https://www.tindie.com/products/mux/nanohub-tiny-usb-hub-for-hacking-projects/"> NanoHub from Berkel en Rodenrijs!</a> </p>
+								<span class="image main"><img src="images/electronics/SAM_1987.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1988.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1989.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1990.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1991.JPG" alt="" /></span>
+								<p>You'll do this again for the two cables which connect to the cameras. They need to connect to the camera PCB and also the nano hub.</p>
+								<span class="image main"><img src="images/electronics/SAM_1992.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1993.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1994.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1995.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_1997.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2005.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2006.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2010.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2018.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2019.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2023.JPG" alt="" /></span>
+								<span class="image main"><img src="images/electronics/SAM_2024.JPG" alt="" /></span>
+						</div>
+					</section>
+					<section id="third">
+						<header>
+							<h2>Test</h2>
+						</header>
+						<div class="content">
+								<p>Now you should be able to just plug the camera guts into your laptop/pc/android phone and see both working!</p>
+								<span class="image main"><img src="images/electronics/SAM_2033.JPG" alt="" /></span>
+						</div>
+					</section>
+
+				<!--
+					<section>
+						<header>
+							<h2>EyeTractive Ergonomics</h2>
+						</header>
+						<div class="content">
+							<p> In testing, we found that Google's Cardboard VR headset doesn't fit </p>
+							<ul class="feature-icons">
+								<li class="icon fa-laptop">Consequat tempus</li>
+								<li class="icon fa-bolt">Etiam adipiscing</li>
+								<li class="icon fa-signal">Libero nullam</li>
+								<li class="icon fa-gear">Blandit condimentum</li>
+								<li class="icon fa-map-marker">Lorem ipsum dolor</li>
+								<li class="icon fa-code">Nibh amet venenatis</li>
+							</ul>
+							<p>Vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
+						</div>
+					</section>
+				-->
+				<!-- Section -->
+					<section>
+						<header>
+							<h2>Get in touch</h2>
+						</header>
+						<div class="content">
+							<p>Over <a href="impressum.html"> here! </a></p>
+						</div>
+					</section>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/jquery.scrolly.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+			<script src="assets/js/util.js"></script>
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>

www/ergonomics.html

+<!DOCTYPE HTML>
+<!--
+	Paradigm Shift by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<title>EyeTractive</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+		<meta name="description" content="" />
+		<meta name="keywords" content="" />
+		<link rel="stylesheet" href="assets/css/main.css" />
+	</head>
+	<body class="is-preload">
+
+		<!-- Wrapper -->
+			<div id="wrapper">
+
+				<!-- Intro -->
+					<section class="intro">
+						<header>
+							<h1>Eyetracktive Design</h1>
+							<p>Cut it. Glue it. Use it.</p>
+							<ul class="actions">
+								<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
+							</ul>
+						</header>
+						<div class="content">
+							<span class="image fill" data-position="center"><img src="images/pic01.png" alt="" /></span>
+						</div>
+					</section>
+
+				<!-- Section -->
+					<section id="first">
+						<header>
+							<h2>Lets get comfortable</h2>
+						</header>
+						<div class="content">
+							<p> In our testing we found that the standard Google Cardboard design lets in too much light, and is a poor fit for many different shapes of nose and forehead.</p>
+							<p> To solve this, we created this optional add-on. Just print out this <a href="https://gitlab.eyeskills.org/community/eyetracktive/blob/master/Ergonomics/EyeSkillsbrille-schnittmuster.svg">file</a> as a template for cutting neoprene or foam with a pair of scissors. We do <b> not </b> recommend using a laser cutter as this can be a health-hazard if you select the wrong materials!</p>
+							<span class="image main"><img src="images/ergonomics/IMG_9615.JPG" alt="" /></span>
+							<p> Next, take a simple clip-tie and thread it through the holes as though you were sewing...</p>
+							<span class="image main"><img src="images/ergonomics/IMG_9617.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9618.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9619.JPG" alt="" /></span>
+							<p> Don't pull it too tight. The tighter you pull it, the more extreme the shape will become. </p>
+							<span class="image main"><img src="images/ergonomics/IMG_9621.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9630.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9634.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9636.JPG" alt="" /></span>
+						</div>
+					</section>
+					<section id="second">
+						<header>
+							<h2>Fix it in place</h2>
+						</header>
+						<div class="content">
+							<p> Grab a glue-gun and just press the shape into position. </p>
+							<span class="image main"><img src="images/ergonomics/IMG_9651.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9665.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9677.JPG" alt="" /></span>
+							<p> This is a perfectly good design to hold with both hands. This can actually be more comfortable and reduce motion sickness for many people who use VR.</p>
+						</div>
+					</section>
+					<section id="second">
+						<header>
+							<h2>Optional straps...</h2>
+						</header>
+						<div class="content">
+							<p> If you like, you can glue some extra head straps to hold the headset in place... </p>
+							<span class="image main"><img src="images/ergonomics/IMG_9707.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9712.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9715.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9717.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9729.JPG" alt="" /></span>
+							<span class="image main"><img src="images/ergonomics/IMG_9743.JPG" alt="" /></span>
+						</div>
+					</section>
+				<!--
+					<section>
+						<header>
+							<h2>EyeTractive Ergonomics</h2>
+						</header>
+						<div class="content">
+							<p> In testing, we found that Google's Cardboard VR headset doesn't fit </p>
+							<ul class="feature-icons">
+								<li class="icon fa-laptop">Consequat tempus</li>
+								<li class="icon fa-bolt">Etiam adipiscing</li>
+								<li class="icon fa-signal">Libero nullam</li>
+								<li class="icon fa-gear">Blandit condimentum</li>
+								<li class="icon fa-map-marker">Lorem ipsum dolor</li>
+								<li class="icon fa-code">Nibh amet venenatis</li>
+							</ul>
+							<p>Vehicula ultrices sed ultricies condimentum. Magna sed etiam consequat, et lorem adipiscing sed nulla. Volutpat nisl et tempus et dolor libero, feugiat magna tempus, sed et lorem adipiscing.</p>
+						</div>
+					</section>
+				-->
+				<!-- Section -->
+					<section>
+						<header>
+							<h2>Get in touch</h2>
+						</header>
+						<div class="content">
+							<p>Over <a href="impressum.html"> here! </a></p>
+						</div>
+					</section>
+
+			</div>
+
+		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/jquery.scrolly.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+			<script src="assets/js/util.js"></script>
+			<script src="assets/js/main.js"></script>
+
+	</body>
+</html>