draggablesilder-rails 1.0.0

data/app/assets/javascripts/dragslideshow.js

@@ -0,0 +1,349 @@
+/**
+ * dragslideshow.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2014, Codrops
+ * http://www.codrops.com
+ */
+;( function( window ) {
+	
+	'use strict';
+	
+	var docElem = window.document.documentElement,
+		transEndEventNames = {
+			'WebkitTransition': 'webkitTransitionEnd',
+			'MozTransition': 'transitionend',
+			'OTransition': 'oTransitionEnd',
+			'msTransition': 'MSTransitionEnd',
+			'transition': 'transitionend'
+		},
+		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+		support = { transitions : Modernizr.csstransitions };
+
+	/**
+	 * gets the viewport width and height
+	 * based on http://responsejs.com/labs/dimensions/
+	 */
+	function getViewport( axis ) {
+		var client, inner;
+		if( axis === 'x' ) {
+			client = docElem['clientWidth'];
+			inner = window['innerWidth'];
+		}
+		else if( axis === 'y' ) {
+			client = docElem['clientHeight'];
+			inner = window['innerHeight'];
+		}
+		
+		return client < inner ? inner : client;
+	}
+
+	/**
+	 * extend obj function
+	 */
+	function extend( a, b ) {
+		for( var key in b ) { 
+			if( b.hasOwnProperty( key ) ) {
+				a[key] = b[key];
+			}
+		}
+		return a;
+	}
+
+	/**
+	 * DragSlideshow function
+	 */
+	function DragSlideshow( el, options ) {	
+		this.el = el;
+		this.options = extend( {}, this.options );
+		extend( this.options, options );
+		this._init();
+	}
+
+	/**
+	 * DragSlideshow options
+	 */
+	DragSlideshow.prototype.options = {
+		perspective : '1200',
+		slideshowRatio : 0.3, // between: 0,1
+		onToggle : function() { return false; },
+		onToggleContent : function() { return false; },
+		onToggleContentComplete : function() { return false; }
+	}
+
+	/**
+	 * init function
+	 * initialize and cache some vars
+	 */
+	DragSlideshow.prototype._init = function() {
+		var self = this;
+
+		// current
+		this.current = 0;
+
+		// status
+		this.isFullscreen = true;
+		
+		// the images wrapper element
+		this.imgDragger = this.el.querySelector( 'section.dragdealer' );
+		
+		// the moving element inside the images wrapper
+		this.handle = this.imgDragger.querySelector( 'div.handle' );
+		
+		// the slides
+		this.slides = [].slice.call( this.handle.children );
+		
+		// total number of slides
+		this.slidesCount = this.slides.length;
+		
+		if( this.slidesCount < 1 ) return;
+
+		// cache options slideshowRatio (needed for window resize)
+		this.slideshowRatio = this.options.slideshowRatio;
+
+		// add class "current" to first slide
+		classie.add( this.slides[ this.current ], 'current' );
+		
+		// the pages/content
+		this.pages = this.el.querySelector( 'section.pages' );
+
+		// set the width of the handle : total slides * 100%
+		this.handle.style.width = this.slidesCount * 100 + '%';
+		
+		// set the width of each slide to 100%/total slides
+		this.slides.forEach( function( slide ) {
+			slide.style.width = 100 / self.slidesCount + '%';
+		} );
+		
+		// initialize the DragDealer plugin
+		this._initDragDealer();
+
+		// init events
+		this._initEvents();
+	}
+
+	/**
+	 * initialize the events
+	 */
+	DragSlideshow.prototype._initEvents = function() {
+		var self = this;
+		
+		this.slides.forEach( function( slide ) {
+			// clicking the slides when not in isFullscreen mode
+			slide.addEventListener( 'click', function() {
+				if( self.isFullscreen || self.dd.activity || self.isAnimating ) return false;
+				
+				if( self.slides.indexOf( slide ) === self.current ) {
+					self.toggle();
+				}
+				else {
+					self.dd.setStep( self.slides.indexOf( slide ) + 1 );
+				}
+			} );
+
+			// reveal content
+			slide.querySelector( 'button.content-switch' ).addEventListener( 'click', function() { self._toggleContent( slide ); } );
+		} );
+
+		// keyboard navigation events
+		document.addEventListener( 'keydown', function( ev ) {
+			var keyCode = ev.keyCode || ev.which,
+				currentSlide = self.slides[ self.current ];
+
+			if( self.isContent ) {
+				switch (keyCode) {
+					// up key
+					case 38:
+						// only if current scroll is 0:
+						if( self._getContentPage( currentSlide ).scrollTop === 0 ) {
+							self._toggleContent( currentSlide );
+						}
+						break;
+				}
+			}
+			else {
+				switch (keyCode) {
+					// down key
+					case 40:
+						// if not fullscreen don't reveal the content. If you want to navigate directly to the content then remove this check.
+						if( !self.isFullscreen ) return;
+						self._toggleContent( currentSlide );
+						break;
+					// right and left keys
+					case 37:
+						self.dd.setStep( self.current );
+						break;
+					case 39:
+						self.dd.setStep( self.current + 2 );
+						break;
+				}
+			}
+		} );
+	}
+
+	/**
+	 * gets the content page of the current slide
+	 */
+	DragSlideshow.prototype._getContentPage = function( slide ) {
+		return this.pages.querySelector( 'div.content[data-content = "' + slide.getAttribute( 'data-content' ) + '"]' );
+	}
+
+	/**
+	 * show/hide content
+	 */
+	DragSlideshow.prototype._toggleContent = function( slide ) {
+		if( this.isAnimating ) {
+			return false;
+		}
+		this.isAnimating = true;
+
+		// callback
+		this.options.onToggleContent();
+
+		// get page
+		var page = this._getContentPage( slide );
+		
+		if( this.isContent ) {
+			// enable the dragdealer
+			this.dd.enable();
+			classie.remove( this.el, 'show-content' );
+		}
+		else {
+			// before: scroll all the content up
+			page.scrollTop = 0;
+			// disable the dragdealer
+			this.dd.disable();
+			classie.add( this.el, 'show-content' );	
+			classie.add( page, 'show' );
+		}
+
+		var self = this,
+			onEndTransitionFn = function( ev ) {
+				if( support.transitions ) {
+					if( ev.propertyName.indexOf( 'transform' ) === -1 || ev.target !== this ) return;
+					this.removeEventListener( transEndEventName, onEndTransitionFn );
+				}
+				if( self.isContent ) {
+					classie.remove( page, 'show' );	
+				}
+				self.isContent = !self.isContent;
+				self.isAnimating = false;
+				// callback
+				self.options.onToggleContentComplete();
+			};
+
+		if( support.transitions ) {
+			this.el.addEventListener( transEndEventName, onEndTransitionFn );
+		}
+		else {
+			onEndTransitionFn();
+		}
+	}
+
+	/**
+	 * initialize the Dragdealer plugin
+	 */
+	DragSlideshow.prototype._initDragDealer = function() {
+		var self = this;
+		this.dd = new Dragdealer( this.imgDragger, {
+			steps: this.slidesCount,
+			speed: 0.4,
+			loose: true,
+			requestAnimationFrame : true,
+			callback: function( x, y ) {
+				self._navigate( x, y );
+			}
+		});
+	}
+
+	/**
+	 * DragDealer plugin callback: update current value
+	 */
+	DragSlideshow.prototype._navigate = function( x, y ) {
+		// add class "current" to the current slide / remove that same class from the old current slide
+		classie.remove( this.slides[ this.current || 0 ], 'current' );
+		this.current = this.dd.getStep()[0] - 1;
+		classie.add( this.slides[ this.current ], 'current' );
+	}
+
+	/**
+	 * toggle between fullscreen and minimized slideshow
+	 */
+	DragSlideshow.prototype.toggle = function() {
+		if( this.isAnimating ) {
+			return false;
+		}
+		this.isAnimating = true;
+
+		// add preserve-3d to the slides (seems to fix a rendering problem in firefox)
+		this._preserve3dSlides( true );
+		
+		// callback
+		this.options.onToggle();
+
+		classie.remove( this.el, this.isFullscreen ? 'switch-max' : 'switch-min' );
+		classie.add( this.el, this.isFullscreen ? 'switch-min' : 'switch-max' );
+		
+		var self = this,
+			p = this.options.perspective,
+			r = this.options.slideshowRatio,
+			zAxisVal = this.isFullscreen ? p - ( p / r ) : p - p * r;
+
+		this.imgDragger.style.WebkitTransform = 'perspective(' + this.options.perspective + 'px) translate3d( -50%, -50%, ' + zAxisVal + 'px )';
+		this.imgDragger.style.transform = 'perspective(' + this.options.perspective + 'px) translate3d( -50%, -50%, ' + zAxisVal + 'px )';
+
+		var onEndTransitionFn = function( ev ) {
+			if( support.transitions ) {
+				if( ev.propertyName.indexOf( 'transform' ) === -1 ) return;
+				this.removeEventListener( transEndEventName, onEndTransitionFn );
+			}
+
+			if( !self.isFullscreen ) {
+				// remove preserve-3d to the slides (seems to fix a rendering problem in firefox)
+				self._preserve3dSlides();
+			}
+
+			// replace class "img-dragger-large" with "img-dragger-small"
+			classie.remove( this, self.isFullscreen ? 'img-dragger-large' : 'img-dragger-small' );
+			classie.add( this, self.isFullscreen ? 'img-dragger-small' : 'img-dragger-large' );
+
+			// reset transforms and set width & height
+			self.imgDragger.style.WebkitTransform = 'translate3d( -50%, -50%, 0px )';
+			self.imgDragger.style.transform = 'translate3d( -50%, -50%, 0px )';
+			this.style.width = self.isFullscreen ? self.options.slideshowRatio * 100 + '%' : '100%';
+			this.style.height = self.isFullscreen ? self.options.slideshowRatio * 100 + '%' : '100%';
+			// reinstatiate the dragger with the "reflow" method
+			self.dd.reflow();
+
+			// change status
+			self.isFullscreen = !self.isFullscreen;
+			
+			self.isAnimating = false;
+		};
+
+		if( support.transitions ) {
+			this.imgDragger.addEventListener( transEndEventName, onEndTransitionFn );
+		}
+		else {
+			onEndTransitionFn();
+		}
+	}
+
+	/**
+	 * add/remove preserve-3d to the slides (seems to fix a rendering problem in firefox)
+	 */
+	DragSlideshow.prototype._preserve3dSlides = function( add ) {
+		this.slides.forEach( function( slide ) {
+			slide.style.transformStyle = add ? 'preserve-3d' : '';
+		});
+	}
+
+	/**
+	 * add to global namespace
+	 */
+	window.DragSlideshow = DragSlideshow;
+
+} )( window );

data/app/assets/javascripts/modernizr.custom.js

@@ -0,0 +1,4 @@
+/* Modernizr 2.8.2 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load
+ */
+;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function q(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return s.shivMethods?o(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(s,b.frag)}function r(a){a||(a=b);var c=n(a);return s.shivCSS&&!g&&!c.hasCSS&&(c.hasCSS=!!l(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),k||q(a,c),a}var c="3.7.0",d=a.html5||{},e=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,f=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g,h="_html5shiv",i=0,j={},k;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

data/app/assets/stylesheets/component.css

@@ -0,0 +1,458 @@
+@font-face {
+	font-family: 'feathericons';
+	src:url('../fonts/feathericons/feathericons.eot?2h4ajg');
+	src:url('../fonts/feathericons/feathericons.eot?#iefix2h4ajg') format('embedded-opentype'),
+		url('../fonts/feathericons/feathericons.woff?2h4ajg') format('woff'),
+		url('../fonts/feathericons/feathericons.ttf?2h4ajg') format('truetype'),
+		url('../fonts/feathericons/feathericons.svg?2h4ajg#feathericons') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+html, 
+body,
+.js .container,
+.js .dragslider,
+.js .img-dragger .handle {
+	height: 100%;
+}
+
+html.js,
+.js body {
+	overflow: hidden;
+	position: relative;
+}
+
+.js .dragslider {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	-webkit-transition: -webkit-transform 0.6s cubic-bezier(.7,0,.3,1);
+	transition: transform 0.6s cubic-bezier(.7,0,.3,1);
+}
+
+.dragslider.show-content {
+	-webkit-transform: translate3d(0,-100%,0);
+	transform: translate3d(0,-100%,0);
+}
+
+.dragslider h2 {
+	font-family: 'Playfair Display', serif;
+	font-size: 8em;
+	font-weight: 700;
+	margin: 0 auto;
+	line-height: 1;
+	position: relative;
+}
+
+.no-js .dragslider h2 {
+	padding: 15px;
+}
+
+.dragslider h2 span {
+	display: block;
+	font-size: 27%;
+	font-family: 'Lato', sans-serif;
+	font-weight: 300;
+	padding-top: 0.2em;
+}
+
+/* Switch button */
+button.slider-switch {
+	font-size: 0;
+	width: 80px;
+	height: 80px;
+	padding: 0;
+	color: transparent;
+	position: relative;
+	border: none;
+	background: url(../img/switchmin.svg) no-repeat center center;
+	background-size: 90%;
+	float: right;
+	outline: none;
+	overflow: hidden;
+	opacity: 0.7;
+	-webkit-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+	pointer-events: auto;
+}
+
+.no-js button.slider-switch {
+	display: none;
+}
+
+button.slider-switch.view-maxi {
+	background-image: url(../img/switchmax.svg)
+}
+
+button.slider-switch:hover {
+	opacity: 1;
+}
+
+/* Dragger */
+.img-dragger {
+	position: relative;
+	z-index: 100;
+}
+
+.js .img-dragger {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate3d(-50%,-50%,0);
+	transform: translate3d(-50%,-50%,0);
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+}
+
+.js .img-dragger-large {
+	width: 100%;
+	height: 100%;
+}
+
+.js .img-dragger .handle {
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	white-space: nowrap;
+	font-size: 0;
+}
+
+.no-js .img-dragger,
+.no-js .img-dragger .handle {
+	height: auto;
+	position: relative;
+	text-align: center;
+	font-size: 0;
+	clear: both;
+	white-space: nowrap;
+	overflow: auto;
+}
+
+.no-js .img-dragger .handle {
+	padding: 40px 0 0;
+}
+
+.img-dragger .slide {
+	display: inline-block;
+	position: relative;
+	height: 100%;
+	background: #567076;
+	font-size: 16px;
+	white-space: normal;
+	cursor: -webkit-grab; 
+	cursor: -moz-grab;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	vertical-align: top;
+}
+
+.no-js .img-dragger .slide {
+	width: 300px;
+	font-size: 7px;
+	min-height: 200px;
+}
+
+.img-dragger .slide:active {
+	cursor: -webkit-grabbing; 
+	cursor: -moz-grabbing;
+}
+
+.img-wrap {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.img-wrap img {
+	position: absolute;
+	display: block;
+	height: calc(100% + 0.2px);
+	opacity: 0.5;
+}
+
+@media screen and (min-aspect-ratio: 1280/850) {
+    .img-dragger .img-wrap  img {
+        width: calc(100% + 0.2px);
+        height: auto;
+    }
+}
+
+.js .slide h2 {
+	color: #fff;
+	position: absolute;
+	-webkit-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+}
+
+.js .img-dragger-large .slide h2 {
+	width: 70%;
+	left: 15%;
+	top: 50%;
+	-webkit-transform: translate3d(0,-50%,0);
+	transform: translate3d(0,-50%,0);
+}
+
+.img-dragger-small .slide h2 {
+	font-size: 2.5em;
+	padding-top: 1em;
+	top: 100%;
+	width: 100%;
+	text-align: center;
+	color: #34495e;
+	-webkit-animation: slideUpFade 0.4s 0.1s;
+}
+
+@-webkit-keyframes slideUpFade {
+	from {
+		opacity: 0;
+		-webkit-transform: translate3d(0,20px,0);
+	}
+	to {
+		opacity: 1;
+		-webkit-transform: translate3d(0,0,0);
+	}
+}
+
+.img-dragger-small .slide h2 span {
+	font-size: 0.35em;
+}
+
+.img-dragger-small .slide.current h2 {
+	color: #fff;
+	-webkit-animation-delay: 0s;
+	animation-delay: 0s;
+	-webkit-transition: color 0.3s, opacity 0.3s;
+	transition: color 0.3s, opacity 0.3s;
+}
+
+.slide h2 i {
+	font-style: normal;
+	font-weight: 400;
+}
+
+button.content-switch {
+	border: 2px solid #fff;
+	width: 160px;
+	text-indent: 200%;
+	overflow: hidden;
+	white-space: nowrap;
+	background: transparent;
+	color: #fff;
+	font-family: 'Lato', sans-serif;
+	position: absolute;
+	cursor: pointer;
+	top: 100%;
+	left: 50%;
+	-webkit-transform: translate3d(-50%,-200%,0);
+	transform: translate3d(-50%,-200%,0);
+	padding: 1em 2em;
+	font-size: 0.85em;
+	line-height: 1;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	font-weight: 400;
+	outline: none;
+	z-index: 1000;
+	opacity: 0.7;
+	-webkit-transition: -webkit-transform 0.6s cubic-bezier(.7,0,.3,1), opacity 0.3s, color 0.3s, border-color 0.3s;
+	transition: transform 0.6s cubic-bezier(.7,0,.3,1), opacity 0.3s, color 0.3s, border-color 0.3s;
+}
+
+.no-js button.content-switch {
+	display: none;
+}
+
+button.content-switch:hover {
+	opacity: 1;
+}
+
+button.content-switch::before {
+	content: '\e097';
+	font-family: 'feathericons';
+	speak: none;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	text-indent: 0;
+	font-size: 1.5em;
+	line-height: 0.75;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.show-content .current button.content-switch {
+	border-color: #c5d3d6;
+	color: #c5d3d6;
+	-webkit-transform: translate3d(-50%,100%,0);
+	transform: translate3d(-50%,100%,0);
+}
+
+.show-content .current button.content-switch::before {
+	content: '\e096';
+}
+
+/* Content */
+.js .pages {
+	position: absolute;
+	top: 100%;
+	height: 0;
+	width: 100%;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: touch;
+	-webkit-transition: height 0s 0.6s;
+	transition: height 0s 0.6s;
+}
+
+.js .show-content .pages {
+	-webkit-transition: none;
+	transition: none;
+	height: 100%;
+}
+
+.pages .content {
+	background: #dfe3e3;
+	text-align: center;
+	color: #545b61;
+	font-size: 1.5em;
+}
+
+.js .pages .content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 0;
+	width: 100%;
+	overflow: hidden;
+	-webkit-transition: height 0s 0.6s;
+	transition: height 0s 0.6s;
+}
+
+.pages .content.show {
+	height: auto;
+	-webkit-transition: none;
+	transition: none;
+}
+
+.pages .content h2 {
+	font-size: 5em;
+	max-width: 70%;
+	color: #34495e;
+	padding: 2.25em 10px 1em;
+}
+
+.no-js .pages .content h2 {
+	padding-top: 1em;
+}
+
+.pages .content h2 span {
+	color: #95a5a6;
+}
+
+.pages .content p {
+	max-width: 1100px;
+	margin: 0 auto;
+	padding: 0.5em 2em;
+	line-height: 1.5;
+	text-align: left;
+	font-family: 'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif;
+}
+
+.pages .content p:last-child {
+	padding: 5em 1em 8em;
+	text-align: center;
+	font-weight: bold;
+}
+
+.js .pages .content h2,
+.js .pages .content p {
+	-webkit-transform: translate3d(0,200px,0);
+	transform: translate3d(0,200px,0);
+	-webkit-transition-property: opacity;
+	transition-property: opacity;
+	-webkit-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-webkit-transition-timing-function: cubic-bezier(.7,0,.3,1);
+	transition-timing-function: cubic-bezier(.7,0,.3,1);
+}
+
+.pages .content.show h2,
+.pages .content.show p {
+	-webkit-transition-duration: 1s;
+	transition-duration: 1s;
+	-webkit-transition-property: -webkit-transform, opacity;
+	transition-property: transform, opacity;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+.pages .content.show p {
+	-webkit-transition-delay: 0.1s;
+	transition-delay: 0.1s;
+}
+
+.pages .content a {
+	color: #3c89d5;
+	display: block;
+}
+
+.pages .content a:hover {
+	color: #545b61;
+}
+
+/* Switch */
+.switch-min .img-dragger-large .slide > *:not(.img-wrap),
+.switch-max .img-dragger-small .slide > *:not(.img-wrap)  { /* fade out everything except image */
+	opacity: 0;
+	-webkit-transition: none;
+	transition: none;
+}
+
+.switch-min .img-dragger-large,
+.switch-max .img-dragger-small {
+	-webkit-transition: -webkit-transform 0.6s cubic-bezier(.7,0,.3,1);
+	transition: transform 0.6s cubic-bezier(.7,0,.3,1);
+}
+
+.img-dragger-small button.content-switch {
+	opacity: 0;
+	pointer-events: none;
+}
+
+/* Helper classes */
+.no-transition {
+	-webkit-transition: none !important;
+	transition: none !important;
+}
+
+.hide {
+	opacity: 0 !important;
+	pointer-events: none !important;
+}
+
+@media screen and (max-width: 63.125em) {
+	.dragslider h2 {
+		font-size: 2.8em;
+	}
+	.pages .content {
+		font-size: 100%;
+	}
+	.pages .content h2 {
+		font-size: 3em;
+	}
+}
+
+@media screen and (max-width: 650px) {
+	button.slider-switch {
+		display: none;
+	}
+}