Fire JS Bin - keycodes

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
 */window.Modernizr=function(e,t,n){function r(e){g.cssText=e}function i(e,t){return r(E.join(e+";")+(t||""))}function s(e,t){return typeof e===t}function o(e,t){return!!~(""+e).indexOf(t)}function u(e,t){for(var r in e){var i=e[r];if(!o(i,"-")&&g[i]!==n)return t=="pfx"?i:!0}return!1}function a(e,t,r){for(var i in e){var o=t[e[i]];if(o!==n)return r===!1?e[i]:s(o,"function")?o.bind(r||t):o}return!1}function f(e,t,n){var r=e.charAt(0).toUpperCase()+e.slice(1),i=(e+" "+x.join(r+" ")+r).split(" ");return s(t,"string")||s(t,"undefined")?u(i,t):(i=(e+" "+T.join(r+" ")+r).split(" "),a(i,t,n))}function l(){h.input=function(n){for(var r=0,i=n.length;r<i;r++)L[n[r]]=n[r]in y;return L.list&&(L.list=!!t.createElement("datalist")&&!!e.HTMLDataListElement),L}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),h.inputtypes=function(e){for(var r=0,i,s,o,u=e.length;r<u;r++)y.setAttribute("type",s=e[r]),i=y.type!=="text",i&&(y.value=b,y.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(s)&&y.style.WebkitAppearance!==n?(d.appendChild(y),o=t.defaultView,i=o.getComputedStyle&&o.getComputedStyle(y,null).WebkitAppearance!=="textfield"&&y.offsetHeight!==0,d.removeChild(y)):/^(search|tel)$/.test(s)||(/^(url|email)$/.test(s)?i=y.checkValidity&&y.checkValidity()===!1:i=y.value!=b)),k[e[r]]=!!i;return k}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var c="2.6.2",h={},p=!0,d=t.documentElement,v="modernizr",m=t.createElement(v),g=m.style,y=t.createElement("input"),b=":)",w={}.toString,E=" -webkit- -moz- -o- -ms- ".split(" "),S="Webkit Moz O ms",x=S.split(" "),T=S.toLowerCase().split(" "),N={svg:"http://www.w3.org/2000/svg"},C={},k={},L={},A=[],O=A.slice,M,_=function(e,n,r,i){var s,o,u,a,f=t.createElement("div"),l=t.body,c=l||t.createElement("body");if(parseInt(r,10))while(r--)u=t.createElement("div"),u.id=i?i[r]:v+(r+1),f.appendChild(u);return s=["",'<style id="s',v,'">',e,"</style>"].join(""),f.id=v,(l?f:c).innerHTML+=s,c.appendChild(f),l||(c.style.background="",c.style.overflow="hidden",a=d.style.overflow,d.style.overflow="hidden",d.appendChild(c)),o=n(f,e),l?f.parentNode.removeChild(f):(c.parentNode.removeChild(c),d.style.overflow=a),!!o},D=function(){function e(e,i){i=i||t.createElement(r[e]||"div"),e="on"+e;var o=e in i;return o||(i.setAttribute||(i=t.createElement("div")),i.setAttribute&&i.removeAttribute&&(i.setAttribute(e,""),o=s(i[e],"function"),s(i[e],"undefined")||(i[e]=n),i.removeAttribute(e))),i=null,o}var r={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return e}(),P={}.hasOwnProperty,H;!s(P,"undefined")&&!s(P.call,"undefined")?H=function(e,t){return P.call(e,t)}:H=function(e,t){return t in e&&s(e.constructor.prototype[t],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(e){var t=this;if(typeof t!="function")throw new TypeError;var n=O.call(arguments,1),r=function(){if(this instanceof r){var i=function(){};i.prototype=t.prototype;var s=new i,o=t.apply(s,n.concat(O.call(arguments)));return Object(o)===o?o:s}return t.apply(e,n.concat(O.call(arguments)))};return r}),C.flexbox=function(){return f("flexWrap")},C.canvas=function(){var e=t.createElement("canvas");return!!e.getContext&&!!e.getContext("2d")},C.canvastext=function(){return!!h.canvas&&!!s(t.createElement("canvas").getContext("2d").fillText,"function")},C.webgl=function(){return!!e.WebGLRenderingContext},C.touch=function(){var n;return"ontouchstart"in e||e.DocumentTouch&&t instanceof DocumentTouch?n=!0:_(["@media (",E.join("touch-enabled),("),v,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(e){n=e.offsetTop===9}),n},C.geolocation=function(){return"geolocation"in navigator},C.postmessage=function(){return!!e.postMessage},C.websqldatabase=function(){return!!e.openDatabase},C.indexedDB=function(){return!!f("indexedDB",e)},C.hashchange=function(){return D("hashchange",e)&&(t.documentMode===n||t.documentMode>7)},C.history=function(){return!!e.history&&!!history.pushState},C.draganddrop=function(){var e=t.createElement("div");return"draggable"in e||"ondragstart"in e&&"ondrop"in e},C.websockets=function(){return"WebSocket"in e||"MozWebSocket"in e},C.rgba=function(){return r("background-color:rgba(150,255,150,.5)"),o(g.backgroundColor,"rgba")},C.hsla=function(){return r("background-color:hsla(120,40%,100%,.5)"),o(g.backgroundColor,"rgba")||o(g.backgroundColor,"hsla")},C.multiplebgs=function(){return r("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(g.background)},C.backgroundsize=function(){return f("backgroundSize")},C.borderimage=function(){return f("borderImage")},C.borderradius=function(){return f("borderRadius")},C.boxshadow=function(){return f("boxShadow")},C.textshadow=function(){return t.createElement("div").style.textShadow===""},C.opacity=function(){return i("opacity:.55"),/^0.55$/.test(g.opacity)},C.cssanimations=function(){return f("animationName")},C.csscolumns=function(){return f("columnCount")},C.cssgradients=function(){var e="background-image:",t="gradient(linear,left top,right bottom,from(#9f9),to(white));",n="linear-gradient(left top,#9f9, white);";return r((e+"-webkit- ".split(" ").join(t+e)+E.join(n+e)).slice(0,-e.length)),o(g.backgroundImage,"gradient")},C.cssreflections=function(){return f("boxReflect")},C.csstransforms=function(){return!!f("transform")},C.csstransforms3d=function(){var e=!!f("perspective");return e&&"webkitPerspective"in d.style&&_("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(t,n){e=t.offsetLeft===9&&t.offsetHeight===3}),e},C.csstransitions=function(){return f("transition")},C.fontface=function(){var e;return _('@font-face {font-family:"font";src:url("https://")}',function(n,r){var i=t.getElementById("smodernizr"),s=i.sheet||i.styleSheet,o=s?s.cssRules&&s.cssRules[0]?s.cssRules[0].cssText:s.cssText||"":"";e=/src/i.test(o)&&o.indexOf(r.split(" ")[0])===0}),e},C.generatedcontent=function(){var e;return _(["#",v,"{font:0/0 a}#",v,':after{content:"',b,'";visibility:hidden;font:3px/1 a}'].join(""),function(t){e=t.offsetHeight>=3}),e},C.video=function(){var e=t.createElement("video"),n=!1;try{if(n=!!e.canPlayType)n=new Boolean(n),n.ogg=e.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),n.h264=e.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),n.webm=e.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(r){}return n},C.audio=function(){var e=t.createElement("audio"),n=!1;try{if(n=!!e.canPlayType)n=new Boolean(n),n.ogg=e.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),n.mp3=e.canPlayType("audio/mpeg;").replace(/^no$/,""),n.wav=e.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),n.m4a=(e.canPlayType("audio/x-m4a;")||e.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(r){}return n},C.localstorage=function(){try{return localStorage.setItem(v,v),localStorage.removeItem(v),!0}catch(e){return!1}},C.sessionstorage=function(){try{return sessionStorage.setItem(v,v),sessionStorage.removeItem(v),!0}catch(e){return!1}},C.webworkers=function(){return!!e.Worker},C.applicationcache=function(){return!!e.applicationCache},C.svg=function(){return!!t.createElementNS&&!!t.createElementNS(N.svg,"svg").createSVGRect},C.inlinesvg=function(){var e=t.createElement("div");return e.innerHTML="<svg/>",(e.firstChild&&e.firstChild.namespaceURI)==N.svg},C.smil=function(){return!!t.createElementNS&&/SVGAnimate/.test(w.call(t.createElementNS(N.svg,"animate")))},C.svgclippaths=function(){return!!t.createElementNS&&/SVGClipPath/.test(w.call(t.createElementNS(N.svg,"clipPath")))};for(var B in C)H(C,B)&&(M=B.toLowerCase(),h[M]=C[B](),A.push((h[M]?"":"no-")+M));return h.input||l(),h.addTest=function(e,t){if(typeof e=="object")for(var r in e)H(e,r)&&h.addTest(r,e[r]);else{e=e.toLowerCase();if(h[e]!==n)return h;t=typeof t=="function"?t():t,typeof p!="undefined"&&p&&(d.className+=" "+(t?"":"no-")+e),h[e]=t}return h},r(""),m=y=null,function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=g.elements;return typeof e=="string"?e.split(" "):e}function i(e){var t=v[e[p]];return t||(t={},d++,e[p]=d,v[d]=t),t}function s(e,n,r){n||(n=t);if(m)return n.createElement(e);r||(r=i(n));var s;return r.cache[e]?s=r.cache[e].cloneNode():c.test(e)?s=(r.cache[e]=r.createElem(e)).cloneNode():s=r.createElem(e),s.canHaveChildren&&!l.test(e)?r.frag.appendChild(s):s}function o(e,n){e||(e=t);if(m)return e.createDocumentFragment();n=n||i(e);var s=n.frag.cloneNode(),o=0,u=r(),a=u.length;for(;o<a;o++)s.createElement(u[o]);return s}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return g.shivMethods?s(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/\w+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(g,t.frag)}function a(e){e||(e=t);var r=i(e);return g.shivCSS&&!h&&!r.hasCSS&&(r.hasCSS=!!n(e,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),m||u(e,r),e}var f=e.html5||{},l=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,c=/^(?: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,h,p="_html5shiv",d=0,v={},m;(function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",h="hidden"in e,m=e.childNodes.length==1||function(){t.createElement("a");var e=t.createDocumentFragment();return typeof e.cloneNode=="undefined"||typeof e.createDocumentFragment=="undefined"||typeof e.createElement=="undefined"}()}catch(n){h=!0,m=!0}})();var g={elements:f.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:f.shivCSS!==!1,supportsUnknownElements:m,shivMethods:f.shivMethods!==!1,type:"default",shivDocument:a,createElement:s,createDocumentFragment:o};e.html5=g,a(t)}(this,t),h._version=c,h._prefixes=E,h._domPrefixes=T,h._cssomPrefixes=x,h.hasEvent=D,h.testProp=function(e){return u([e])},h.testAllProps=f,h.testStyles=_,h.prefixed=function(e,t,n){return t?f(e,t,n):f(e,"pfx")},d.className=d.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(p?" js "+A.join(" "):""),h}(this,this.document),function(e,t,n){function r(e){return"[object Function]"==d.call(e)}function i(e){return"string"==typeof e}function s(){}function o(e){return!e||"loaded"==e||"complete"==e||"uninitialized"==e}function u(){var e=v.shift();m=1,e?e.t?h(function(){("c"==e.t?k.injectCss:k.injectJs)(e.s,0,e.a,e.x,e.e,1)},0):(e(),u()):m=0}function a(e,n,r,i,s,a,f){function l(t){if(!d&&o(c.readyState)&&(w.r=d=1,!m&&u(),c.onload=c.onreadystatechange=null,t)){"img"!=e&&h(function(){b.removeChild(c)},50);for(var r in T[n])T[n].hasOwnProperty(r)&&T[n][r].onload()}}var f=f||k.errorTimeout,c=t.createElement(e),d=0,g=0,w={t:r,s:n,e:s,a:a,x:f};1===T[n]&&(g=1,T[n]=[]),"object"==e?c.data=n:(c.src=n,c.type=e),c.width=c.height="0",c.onerror=c.onload=c.onreadystatechange=function(){l.call(this,g)},v.splice(i,0,w),"img"!=e&&(g||2===T[n]?(b.insertBefore(c,y?null:p),h(l,f)):T[n].push(c))}function f(e,t,n,r,s){return m=0,t=t||"j",i(e)?a("c"==t?E:w,e,t,this.i++,n,r,s):(v.splice(this.i++,0,e),1==v.length&&u()),this}function l(){var e=k;return e.loader={load:f,i:0},e}var c=t.documentElement,h=e.setTimeout,p=t.getElementsByTagName("script")[0],d={}.toString,v=[],m=0,g="MozAppearance"in c.style,y=g&&!!t.createRange().compareNode,b=y?c:p.parentNode,c=e.opera&&"[object Opera]"==d.call(e.opera),c=!!t.attachEvent&&!c,w=g?"object":c?"script":"img",E=c?"script":w,S=Array.isArray||function(e){return"[object Array]"==d.call(e)},x=[],T={},N={timeout:function(e,t){return t.length&&(e.timeout=t[0]),e}},C,k;k=function(e){function t(e){var e=e.split("!"),t=x.length,n=e.pop(),r=e.length,n={url:n,origUrl:n,prefixes:e},i,s,o;for(s=0;s<r;s++)o=e[s].split("="),(i=N[o.shift()])&&(n=i(n,o));for(s=0;s<t;s++)n=x[s](n);return n}function o(e,i,s,o,u){var a=t(e),f=a.autoCallback;a.url.split(".").pop().split("?").shift(),a.bypass||(i&&(i=r(i)?i:i[e]||i[o]||i[e.split("/").pop().split("?")[0]]),a.instead?a.instead(e,i,s,o,u):(T[a.url]?a.noexec=!0:T[a.url]=1,s.load(a.url,a.forceCSS||!a.forceJS&&"css"==a.url.split(".").pop().split("?").shift()?"c":n,a.noexec,a.attrs,a.timeout),(r(i)||r(f))&&s.load(function(){l(),i&&i(a.origUrl,u,o),f&&f(a.origUrl,u,o),T[a.url]=2})))}function u(e,t){function n(e,n){if(e){if(i(e))n||(f=function(){var e=[].slice.call(arguments);l.apply(this,e),c()}),o(e,f,t,0,u);else if(Object(e)===e)for(p in h=function(){var t=0,n;for(n in e)e.hasOwnProperty(n)&&t++;return t}(),e)e.hasOwnProperty(p)&&(!n&&!--h&&(r(f)?f=function(){var e=[].slice.call(arguments);l.apply(this,e),c()}:f[p]=function(e){return function(){var t=[].slice.call(arguments);e&&e.apply(this,t),c()}}(l[p])),o(e[p],f,t,p,u))}else!n&&c()}var u=!!e.test,a=e.load||e.both,f=e.callback||s,l=f,c=e.complete||s,h,p;n(u?e.yep:e.nope,!!a),a&&n(a)}var a,f,c=this.yepnope.loader;if(i(e))o(e,0,c,0);else if(S(e))for(a=0;a<e.length;a++)f=e[a],i(f)?o(f,0,c,0):S(f)?k(f):Object(f)===f&&u(f,c);else Object(e)===e&&u(e,c)},k.addPrefix=function(e,t){N[e]=t},k.addFilter=function(e){x.push(e)},k.errorTimeout=1e4,null==t.readyState&&t.addEventListener&&(t.readyState="loading",t.addEventListener("DOMContentLoaded",C=function(){t.removeEventListener("DOMContentLoaded",C,0),t.readyState="complete"},0)),e.yepnope=l(),e.yepnope.executeStack=u,e.yepnope.injectJs=function(e,n,r,i,a,f){var l=t.createElement("script"),c,d,i=i||k.errorTimeout;l.src=e;for(d in r)l.setAttribute(d,r[d]);n=f?u:n||s,l.onreadystatechange=l.onload=function(){!c&&o(l.readyState)&&(c=1,n(),l.onload=l.onreadystatechange=null)},h(function(){c||(c=1,n(1))},i),a?l.onload():p.parentNode.insertBefore(l,p)},e.yepnope.injectCss=function(e,n,r,i,o,a){var i=t.createElement("link"),f,n=a?u:n||s;i.href=e,i.rel="stylesheet",i.type="text/css";for(f in r)i.setAttribute(f,r[f]);o||(p.parentNode.insertBefore(i,p),h(n,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,t,n,r,i){return jQuery.easing[jQuery.easing.def](e,t,n,r,i)},easeInQuad:function(e,t,n,r,i){return r*(t/=i)*t+n},easeOutQuad:function(e,t,n,r,i){return-r*(t/=i)*(t-2)+n},easeInOutQuad:function(e,t,n,r,i){return(t/=i/2)<1?r/2*t*t+n:-r/2*(--t*(t-2)-1)+n},easeInCubic:function(e,t,n,r,i){return r*(t/=i)*t*t+n},easeOutCubic:function(e,t,n,r,i){return r*((t=t/i-1)*t*t+1)+n},easeInOutCubic:function(e,t,n,r,i){return(t/=i/2)<1?r/2*t*t*t+n:r/2*((t-=2)*t*t+2)+n},easeInQuart:function(e,t,n,r,i){return r*(t/=i)*t*t*t+n},easeOutQuart:function(e,t,n,r,i){return-r*((t=t/i-1)*t*t*t-1)+n},easeInOutQuart:function(e,t,n,r,i){return(t/=i/2)<1?r/2*t*t*t*t+n:-r/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(e,t,n,r,i){return r*(t/=i)*t*t*t*t+n},easeOutQuint:function(e,t,n,r,i){return r*((t=t/i-1)*t*t*t*t+1)+n},easeInOutQuint:function(e,t,n,r,i){return(t/=i/2)<1?r/2*t*t*t*t*t+n:r/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(e,t,n,r,i){return-r*Math.cos(t/i*(Math.PI/2))+r+n},easeOutSine:function(e,t,n,r,i){return r*Math.sin(t/i*(Math.PI/2))+n},easeInOutSine:function(e,t,n,r,i){return-r/2*(Math.cos(Math.PI*t/i)-1)+n},easeInExpo:function(e,t,n,r,i){return t==0?n:r*Math.pow(2,10*(t/i-1))+n},easeOutExpo:function(e,t,n,r,i){return t==i?n+r:r*(-Math.pow(2,-10*t/i)+1)+n},easeInOutExpo:function(e,t,n,r,i){return t==0?n:t==i?n+r:(t/=i/2)<1?r/2*Math.pow(2,10*(t-1))+n:r/2*(-Math.pow(2,-10*--t)+2)+n},easeInCirc:function(e,t,n,r,i){return-r*(Math.sqrt(1-(t/=i)*t)-1)+n},easeOutCirc:function(e,t,n,r,i){return r*Math.sqrt(1-(t=t/i-1)*t)+n},easeInOutCirc:function(e,t,n,r,i){return(t/=i/2)<1?-r/2*(Math.sqrt(1-t*t)-1)+n:r/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(e,t,n,r,i){var s=1.70158,o=0,u=r;if(t==0)return n;if((t/=i)==1)return n+r;o||(o=i*.3);if(u<Math.abs(r)){u=r;var s=o/4}else var s=o/(2*Math.PI)*Math.asin(r/u);return-(u*Math.pow(2,10*(t-=1))*Math.sin((t*i-s)*2*Math.PI/o))+n},easeOutElastic:function(e,t,n,r,i){var s=1.70158,o=0,u=r;if(t==0)return n;if((t/=i)==1)return n+r;o||(o=i*.3);if(u<Math.abs(r)){u=r;var s=o/4}else var s=o/(2*Math.PI)*Math.asin(r/u);return u*Math.pow(2,-10*t)*Math.sin((t*i-s)*2*Math.PI/o)+r+n},easeInOutElastic:function(e,t,n,r,i){var s=1.70158,o=0,u=r;if(t==0)return n;if((t/=i/2)==2)return n+r;o||(o=i*.3*1.5);if(u<Math.abs(r)){u=r;var s=o/4}else var s=o/(2*Math.PI)*Math.asin(r/u);return t<1?-0.5*u*Math.pow(2,10*(t-=1))*Math.sin((t*i-s)*2*Math.PI/o)+n:u*Math.pow(2,-10*(t-=1))*Math.sin((t*i-s)*2*Math.PI/o)*.5+r+n},easeInBack:function(e,t,n,r,i,s){s==undefined&&(s=1.70158);return r*(t/=i)*t*((s+1)*t-s)+n},easeOutBack:function(e,t,n,r,i,s){s==undefined&&(s=1.70158);return r*((t=t/i-1)*t*((s+1)*t+s)+1)+n},easeInOutBack:function(e,t,n,r,i,s){s==undefined&&(s=1.70158);return(t/=i/2)<1?r/2*t*t*(((s*=1.525)+1)*t-s)+n:r/2*((t-=2)*t*(((s*=1.525)+1)*t+s)+2)+n},easeInBounce:function(e,t,n,r,i){return r-jQuery.easing.easeOutBounce(e,i-t,0,r,i)+n},easeOutBounce:function(e,t,n,r,i){return(t/=i)<1/2.75?r*7.5625*t*t+n:t<2/2.75?r*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?r*(7.5625*(t-=2.25/2.75)*t+.9375)+n:r*(7.5625*(t-=2.625/2.75)*t+.984375)+n},easeInOutBounce:function(e,t,n,r,i){return t<i/2?jQuery.easing.easeInBounce(e,t*2,0,r,i)*.5+n:jQuery.easing.easeOutBounce(e,t*2-i,0,r,i)*.5+r*.5+n}});(function(e){e.fn.zclip=function(t){if(typeof t=="object"&&!t.length){var n=e.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:!0,setHandCursor:!0,setCSSEffects:!0},t);return this.each(function(){var t=e(this);if(t.is(":visible")&&(typeof n.copy=="string"||e.isFunction(n.copy))){ZeroClipboard.setMoviePath(n.path);var r=new ZeroClipboard.Client;e.isFunction(n.copy)&&t.bind("zClip_copy",n.copy);e.isFunction(n.beforeCopy)&&t.bind("zClip_beforeCopy",n.beforeCopy);e.isFunction(n.afterCopy)&&t.bind("zClip_afterCopy",n.afterCopy);r.setHandCursor(n.setHandCursor);r.setCSSEffects(n.setCSSEffects);r.addEventListener("mouseOver",function(e){t.trigger("mouseenter")});r.addEventListener("mouseOut",function(e){t.trigger("mouseleave")});r.addEventListener("mouseDown",function(i){t.trigger("mousedown");e.isFunction(n.copy)?r.setText(t.triggerHandler("zClip_copy")):r.setText(n.copy);e.isFunction(n.beforeCopy)&&t.trigger("zClip_beforeCopy")});r.addEventListener("complete",function(r,i){if(e.isFunction(n.afterCopy))t.trigger("zClip_afterCopy");else{i.length>500&&(i=i.substr(0,500)+"...\n\n("+(i.length-500)+" characters not shown)");t.removeClass("hover")}n.clickAfter&&t.trigger("click")});r.glue(t[0],t.parent()[0]);e(window).bind("load resize",function(){r.reposition()})}})}if(typeof t=="string")return this.each(function(){var n=e(this);t=t.toLowerCase();var r=n.data("zclipId"),i=e("#"+r+".zclip");if(t=="remove"){i.remove();n.removeClass("active hover")}else if(t=="hide"){i.hide();n.removeClass("active hover")}else t=="show"&&i.show()})}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(e){typeof e=="string"&&(e=document.getElementById(e));if(!e.addClass){e.hide=function(){this.style.display="none"};e.show=function(){this.style.display=""};e.addClass=function(e){this.removeClass(e);this.className+=" "+e};e.removeClass=function(e){var t=this.className.split(/\s+/),n=-1;for(var r=0;r<t.length;r++)if(t[r]==e){n=r;r=t.length}if(n>-1){t.splice(n,1);this.className=t.join(" ")}return this};e.hasClass=function(e){return!!this.className.match(new RegExp("\\s*"+e+"\\s*"))}}return e},setMoviePath:function(e){this.moviePath=e},dispatch:function(e,t,n){var r=this.clients[e];r&&r.receiveEvent(t,n)},register:function(e,t){this.clients[e]=t},getDOMObjectPosition:function(e,t){var n={left:0,top:0,width:e.width?e.width:e.offsetWidth,height:e.height?e.height:e.offsetHeight};if(e&&e!=t){n.left+=e.offsetLeft;n.top+=e.offsetTop}return n},Client:function(e){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);e&&this.glue(e)}};ZeroClipboard.Client.prototype={id:0,ready:!1,movie:null,clipText:"",handCursorEnabled:!0,cssEffects:!0,handlers:null,glue:function(e,t,n){this.domElement=ZeroClipboard.$(e);var r=99;this.domElement.style.zIndex&&(r=parseInt(this.domElement.style.zIndex,10)+1);typeof t=="string"?t=ZeroClipboard.$(t):typeof t=="undefined"&&(t=document.getElementsByTagName("body")[0]);var i=ZeroClipboard.getDOMObjectPosition(this.domElement,t);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var s=this.div.style;s.position="absolute";s.left=""+i.left+"px";s.top=""+i.top+"px";s.width=""+i.width+"px";s.height=""+i.height+"px";s.zIndex=r;if(typeof n=="object")for(addedStyle in n)s[addedStyle]=n[addedStyle];t.appendChild(this.div);this.div.innerHTML=this.getHTML(i.width,i.height)},getHTML:function(e,t){var n="",r="id="+this.id+"&width="+e+"&height="+t;if(navigator.userAgent.match(/MSIE/)){var i=location.href.match(/^https/i)?"https://":"http://";n+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+i+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+e+'" height="'+t+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+r+'"/><param name="wmode" value="transparent"/></object>'}else n+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+e+'" height="'+t+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+r+'" wmode="transparent" />';return n},hide:function(){this.div&&(this.div.style.left="-2000px")},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var e=document.getElementsByTagName("body")[0];try{e.removeChild(this.div)}catch(t){}this.domElement=null;this.div=null}},reposition:function(e){if(e){this.domElement=ZeroClipboard.$(e);this.domElement||this.hide()}if(this.domElement&&this.div){var t=ZeroClipboard.getDOMObjectPosition(this.domElement),n=this.div.style;n.left=""+t.left+"px";n.top=""+t.top+"px"}},setText:function(e){this.clipText=e;this.ready&&this.movie.setText(e)},addEventListener:function(e,t){e=e.toString().toLowerCase().replace(/^on/,"");this.handlers[e]||(this.handlers[e]=[]);this.handlers[e].push(t)},setHandCursor:function(e){this.handCursorEnabled=e;this.ready&&this.movie.setHandCursor(e)},setCSSEffects:function(e){this.cssEffects=!!e},receiveEvent:function(e,t){e=e.toString().toLowerCase().replace(/^on/,"");switch(e){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var n=this;setTimeout(function(){n.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var n=this;setTimeout(function(){n.receiveEvent("load",null)},100);this.ready=!0;return}this.ready=!0;try{this.movie.setText(this.clipText)}catch(r){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(r){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");this.recoverActive&&this.domElement.addClass("active")}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=!1;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=!0}this.domElement.removeClass("hover")}break;case"mousedown":this.domElement&&this.cssEffects&&this.domElement.addClass("active");break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=!1}}if(this.handlers[e])for(var i=0,s=this.handlers[e].length;i<s;i++){var o=this.handlers[e][i];typeof o=="function"?o(this,t):typeof o=="object"&&o.length==2?o[0][o[1]](this,t):typeof o=="string"&&window[o](this,t)}}};(function(e){typeof define=="function"&&define.amd?define(["jquery"],e):e(jQuery)})(function(e){function n(e){return e}function r(e){return decodeURIComponent(e.replace(t," "))}function i(e){e.indexOf('"')===0&&(e=e.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return s.json?JSON.parse(e):e}catch(t){}}var t=/\+/g,s=e.cookie=function(t,o,u){if(o!==undefined){u=e.extend({},s.defaults,u);if(typeof u.expires=="number"){var a=u.expires,f=u.expires=new Date;f.setDate(f.getDate()+a)}o=s.json?JSON.stringify(o):String(o);return document.cookie=[s.raw?t:encodeURIComponent(t),"=",s.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join("")}var l=s.raw?n:r,c=document.cookie.split("; "),h=t?undefined:{};for(var p=0,d=c.length;p<d;p++){var v=c[p].split("="),m=l(v.shift()),g=l(v.join("="));if(t&&t===m){h=i(g);break}t||(h[m]=i(g))}return h};s.defaults={};e.removeCookie=function(t,n){if(e.cookie(t)!==undefined){e.cookie(t,"",e.extend({},n,{expires:-1}));return!0}return!1}});
 
 
 jQuery(document).ready(function(e){displayKey=function(t,n){e("key.active").removeClass("active");var r=t.attr("data-key"),i=t.attr("data-lmth"),s=t.attr("data-uni"),o=t.attr("data-unicaps"),u=t.attr("data-encode"),a=t.attr("data-encodecaps"),f=n.shiftKey?!0:!1,l=e("#keyboard").hasClass("capslock"),c=e("#keyboard").hasClass("charcode"),h=e("#keyboard").hasClass("unicode"),p=e("#keyboard").hasClass("encoded"),d=l||f?!0:!1,v=!1;c?v=r:!d&&h?v=s:p&&!d?v=u:h&&d?v=o:p&&d&&(v=a);if(v){t.addClass("active");e("#codebox input").val(v);e("#codebox").addClass("active")}f&&e("key.shft").addClass("active")};e(".code-inner.dark").hide();var t=e(".a,.b,.c,.d,.e,.f,.g,.h,.i,.j,.k,.l,.m,.n,.o,.p,.q,.r,.s,.t,.u,.v,.w,.x,.y,.z,.1,.2,.3,.4,.5,.6,.7,.8,.9,.0,.til,.hyp,.equ,.lbrack,.rbrack,.bs,.col,.apos,.comm,.great,.quest");e.loadingStuff=function(){setTimeout(function(){e("aside").animate({opacity:1})},75);setTimeout(function(){e(".wrapper").animate({opacity:1})},150);e("#keyboard").addClass("showing")};e.loadingStuff();e.bodyLoad=function(){e(document).ready(function(){if(e("aside").hasClass("inactive")){e(".wrapper").removeClass("active");e(".settings").removeClass("close")}else if(!e("aside").hasClass("inactive")){e(".wrapper").addClass("active");e(".settings").addClass("close")}});e(document).ready(function(){if(e(".cap").hasClass("capsOn")){t.addClass("uppercase");e("#keyboard").addClass("capslock");e(".caps").addClass("activated")}});e(document).on("keydown",function(n){if(n.shiftKey){t.addClass("uppercase");e("#keyboard").addClass("capslock")}});e(document).on("keyup",function(n){if(!e(".cap").hasClass("capsOn")&&!n.shiftKey){t.removeClass("uppercase");e("#keyboard").removeClass("capslock")}})};e.bodyLoad();e.keyBoard=function(){e("menu a").on("click",function(t){var n=e(this).attr("id");e("#keyboard").removeClass().addClass(n).addClass("showing");e("#codebox").removeClass().addClass(n);e(this).addClass("active").siblings().removeClass();e(".cap").hasClass("capsOn")&&e("#keyboard").addClass("capslock")});e(".cap").on("click",function(){t.toggleClass("uppercase");e(this).toggleClass("capsOn");e(".caps").toggleClass("activated");e("#keyboard").toggleClass("capslock")});return!1};e.keyBoard();e.keyCodeKeyboardCodes=function(){e.Press=function(){e("key").on("mousedown",function(t){displayKey(e(this),t)})};e.KeyPress=function(){e(document).on("keydown",function(t){var n=e("[data-key="+t.keyCode+"]");displayKey(n,t);t.preventDefault()})};e.Depress=function(){e("key").on("mouseup",function(t){e("#codebox").removeClass("active");var n=t.which;e(this).removeClass("active")})};e.KeyDepress=function(){e(document).on("keyup",function(t){var n=e("[data-key="+t.keyCode+"]");n.removeClass("active");e("#codebox").removeClass("active");var r=t.which})};e.Press();e.Depress();e.KeyPress();e.KeyDepress()};e.keyCodeKeyboardCodes();e.keyCombos=function(){e(".reload").on("click",function(){location.reload()})};e.menuOpener=function(){e(".settings").on("click",function(){e(this).toggleClass("close");e(".wrapper").toggleClass("active");e("aside").toggleClass("inactive")})};e.menuOpener();e.logoClicker=function(){e("#logo").on("mousedown",function(){e("#codebox").addClass("active");e(".code-inner").hide();e(".code-inner.dark").show()});e("#logo").on("mouseup",function(){e("#codebox").removeClass("active");e(".code-inner").show();e(".code-inner.dark").hide()})};e.logoClicker();e.cookieMonster=function(){var t="type",n="menu",r="cap",i=0/0;e("#"+e.cookie(t)).addClass("active");e("#keyboard").addClass(e.cookie(t));e("#codebox").addClass(e.cookie(t));e("menu a").on("click",function(n){n.preventDefault();e("#"+e.cookie(t)).removeClass("active");e.cookie(t,e(this).attr("id"),i);e("#"+e.cookie(t)).addClass("active")});e(".settings").on("click",function(t){t.preventDefault();e.cookie(n,e("aside").attr("class"),i)});e(".cap").on("click",function(t){t.preventDefault();e.cookie(r,e(this).attr("class"),i)});e("aside").addClass(e.cookie(n));e(".cap").addClass(e.cookie(r))};e.cookieMonster();e(".light").on("click",function(){e("body").addClass("light")});e(".dark").on("click",function(){e("body").removeClass("light")})});

<!DOCTYPE html>



<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Keycodes - Javascript Keyboard Codes, Character Codes, Unicode, HTML Entities</title>
  <meta
  name="description" content="Your guide to keyboard codes, unicodes, keycodes, javascript character codes, charcodes - by JayJo"
  />
  <meta name="keywords" content="javascript, keycodes, character codes, characters, unicode"
  />
  <link href="/assets/images/favicon.ico" rel="shortcut icon">
  <link href="apple-touch-icon.png" rel="apple-touch-icon">
  <script type="text/javascript">
    (function(e, b) {
      if(!b.__SV) {
        var a, f, i, g;
        window.mixpanel = b;
        a = e.createElement("script");
        a.type = "text/javascript";
        a.async = !0;
        a.src = ("https:" === e.location.protocol ? "https:" : "http:") + '//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';
        f = e.getElementsByTagName("script")[0];
        f.parentNode.insertBefore(a, f);
        b._i = [];
        b.init = function(a, e, d) {
          function f(b, h) {
            var a = h.split(".");
            2 == a.length && (b = b[a[0]], h = a[1]);
            b[h] = function() {
              b.push([h].concat(Array.prototype.slice.call(arguments, 0)))
            }
          }
          var c = b;
          "undefined" !== typeof d ? c = b[d] = [] : d = "mixpanel";
          c.people = c.people || [];
          c.toString = function(b) {
            var a = "mixpanel";
            "mixpanel" !== d && (a += "." + d);
            b || (a += " (stub)");
            return a
          };
          c.people.toString = function() {
            return c.toString(1) + ".people (stub)"
          };
          i = "disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");
          for(g = 0; g < i.length; g++) f(c, i[g]);
          b._i.push([a, e, d])
        };
        b.__SV = 1.2
      }
    })(document, window.mixpanel || []);
    mixpanel.init("");
  </script>
  
  <script type="text/javascript">
    var _sf_startpt = (new Date()).getTime()
  </script>
</head>

<body class="home">
  <header>
    <a class="settings"><span>Settings</span></a>
    <p class="theme-switcher">
      <a href="#" class="light">Light</a>
      <a href="#" class="dark">Dark</a>
    </p>
  </header>
  <aside>
    <menu>
      <a href="#charcode" id="charcode">Keycode</a>
      <a href="#unicode" id="unicode">Unicode</a>
      <a href="#encoded" id="encoded">URL Encoded</a>
    </menu>
    <div class="twitter-share">
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://keycodes.atjayjo.com"
      data-text="Tired of hunting through lists of character codes - checkout Keycodes"
      data-via="jayjo">Tweet</a>
      <script>
        !
        function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0],
            p = /^http:/.test(d.location) ? 'http' : 'https';
          if(!d.getElementById(id)) {
            js = d.createElement(s);
            js.id = id;
            js.src = p + '://platform.twitter.com/widgets.js';
            fjs.parentNode.insertBefore(js, fjs);
          }
        }(document, 'script', 'twitter-wjs');
      </script>
    </div>
  </aside>
  <section class="wrap">
    
    <div class="wrapper">
      <div id="keyboard">
        <row class="one">
          <key class="single esc" data-key="27" data-encode="%1B" data-encodecaps="%1B">esc</key>
          <key class="single f1" data-key="112">F1</key>
          <key class="single f2" data-key="113">f2</key>
          <key class="single f3" data-key="114">f3</key>
          <key class="single f4" data-key="115">f4</key>
          <key class="single f5" data-key="116">f5</key>
          <key class="single f6" data-key="117">f6</key>
          <key class="single f7" data-key="118">f7</key>
          <key class="single f8" data-key="119">f8</key>
          <key class="single f9" data-key="120">f9</key>
          <key class="single f10" data-key="121">f10</key>
          <key class="single f11" data-key="122">f11</key>
          <key class="single f12" data-key="123">f12</key>
          <key class="single f13" data-key="124">F13</key>
          <div class="clearfix"></div>
        </row>
        <row class="two">
          <key class="double til" data-key="192" data-encode="%7E" data-encodecaps="%60"
          data-uni="U+0060" data-unicaps="U+007E">~
            <span>`</span>
          </key>
          <key class="double 1" data-key="49" data-encode="%31" data-encodecaps="%21"
          data-uni="U+0031" data-unicaps="U+0021">!
            <span>1</span>
          </key>
          <key class="double 2" data-key="50" data-encode="%32" data-encodecaps="%40"
          data-uni="U+0032" data-unicaps="U+0040">@
            <span>2</span>
          </key>
          <key class="double 3" data-key="51" data-encode="%33" data-encodecaps="%23"
          data-uni="U+0033" data-unicaps="U+0023">#
            <span>3</span>
          </key>
          <key class="double 4" data-key="52" data-encode="%34" data-encodecaps="%24"
          data-uni="U+0034" data-unicaps="U+0024">$
            <span>4</span>
          </key>
          <key class="double 5" data-key="53" data-encode="%35" data-encodecaps="%25"
          data-uni="U+0035" data-unicaps="U+0025">%
            <span>5</span>
          </key>
          <key class="double 6" data-key="54" data-encode="%36" data-encodecaps="%5E"
          data-uni="U+0036" data-unicaps="U+005E">^
            <span>6</span>
          </key>
          <key class="double 7" data-key="55" data-encode="%37" data-encodecaps="%26"
          data-uni="U+0037" data-unicaps="U+0026">&
            <span>7</span>
          </key>
          <key class="double 8" data-key="56" data-encode="%38" data-encodecaps="%2A"
          data-uni="U+0038" data-unicaps="U+002A">*
            <span>8</span>
          </key>
          <key class="double 9" data-key="57" data-encode="%39" data-encodecaps="%28"
          data-uni="U+0039" data-unicaps="U+0028">(
            <span>9</span>
          </key>
          <key class="double 0" data-key="48" data-encode="%30" data-encodecaps="%29"
          data-uni="U+0030" data-unicaps="U+0029">)
            <span>0</span>
          </key>
          <key class="double hyp" data-key="189" data-encode="%2D" data-encodecaps="%5F"
          data-uni="U+002D" data-unicaps="U+005F">_
            <span>-</span>
          </key>
          <key class="double equ" data-key="187" data-encode="%3D" data-encodecaps="%2B"
          data-uni="U+003D" data-unicaps="U+002B">+
            <span>=</span>
          </key>
          <key class="single delete right" data-key="8" data-encode="%08" data-encodecaps="%08"
          data-uni="U+007F">Delete</key>
          <div class="clearfix"></div>
        </row>
        <row class="three">
          <key class="tab left" data-key="9" data-encode="%09" data-encodecaps="%09"
          data-uni="U+0009">Tab</key>
          <key class="single q" data-key="81" data-encode="%71" data-encodecaps="%51"
          data-uni="U+0071" data-unicaps="U+0051">q</key>
          <key class="single w" data-key="87" data-encode="%77" data-encodecaps="%57"
          data-uni="U+0077" data-unicaps="U+0057">w</key>
          <key class="single e" data-key="69" data-encode="%65" data-encodecaps="%45"
          data-uni="U+0065" data-unicaps="U+0045">e</key>
          <key class="single r" data-key="82" data-encode="%72" data-encodecaps="%52"
          data-uni="U+0072" data-unicaps="U+0052">r</key>
          <key class="single t" data-key="84" data-encode="%74" data-encodecaps="%54"
          data-uni="U+0074" data-unicaps="U+0054">t</key>
          <key class="single y" data-key="89" data-encode="%79" data-encodecaps="%59"
          data-uni="U+0079" data-unicaps="U+0059">y</key>
          <key class="single u" data-key="85" data-encode="%75" data-encodecaps="%55"
          data-uni="U+0075" data-unicaps="U+0055">u</key>
          <key class="single i" data-key="73" data-encode="%69" data-encodecaps="%49"
          data-uni="U+0069" data-unicaps="U+0049">i</key>
          <key class="single o" data-key="79" data-encode="%6F" data-encodecaps="%4F"
          data-uni="U+006F" data-unicaps="U+004F">o</key>
          <key class="single p" data-key="80" data-encode="%70" data-encodecaps="%50"
          data-uni="U+0070" data-unicaps="U+0050">p</key>
          <key class="double lbrack" data-key="219" data-encode="%5B" data-encodecaps="%7B"
          data-uni="U+005B" data-unicaps="U+007B">{
            <span>[</span>
          </key>
          <key class="double rbrack" data-key="221" data-encode="%5D" data-encodecaps="%7D"
          data-uni="U+005D" data-unicaps="U+007D">}
            <span>]</span>
          </key>
          <key class="double bs" data-key="220" data-encode="%5C" data-encodecaps="%7C"
          data-uni="U+005C" data-unicaps="U+007C">|
            <span>\</span>
          </key>
          <div class="clearfix"></div>
        </row>
        <row class="four">
          <key class="caps left" data-key="20">Caps lock</key>
          <key class="single a" data-key="65" data-encode="%61" data-encodecaps="%41"
          data-uni="U+0061" data-unicaps="U+0041">a</key>
          <key class="single s" data-key="83" data-encode="%73" data-encodecaps="%53"
          data-uni="U+0073" data-unicaps="U+0053">s</key>
          <key class="single d" data-key="68" data-encode="%64" data-encodecaps="%44"
          data-uni="U+0064" data-unicaps="U+0044">d</key>
          <key class="single f" data-key="70" data-encode="%66" data-encodecaps="%46"
          data-uni="U+0066" data-unicaps="U+0046">f</key>
          <key class="single g" data-key="71" data-encode="%67" data-encodecaps="%47"
          data-uni="U+0067" data-unicaps="U+0047">g</key>
          <key class="single h" data-key="72" data-encode="%68" data-encodecaps="%48"
          data-uni="U+0068" data-unicaps="U+0048">h</key>
          <key class="single j" data-key="74" data-encode="%6A" data-encodecaps="%4A"
          data-uni="U+006A" data-unicaps="U+004A">j</key>
          <key class="single k" data-key="75" data-encode="%6B" data-encodecaps="%4B"
          data-uni="U+006B" data-unicaps="U+004B">k</key>
          <key class="single l" data-key="76" data-encode="%6C" data-encodecaps="%4C"
          data-uni="U+006C" data-unicaps="U+004C">l</key>
          <key class="double col" data-key="186" data-encode="%3B" data-encodecaps="%3A"
          data-uni="U+003B" data-unicaps="U+003A">:
            <span>;</span>
          </key>
          <key class="double apos" data-key="222" data-encode="%27" data-encodecaps="%22"
          data-uni="U+0027" data-unicaps="U+0022">"
            <span>'</span>
          </key>
          <key class="return right" data-key="13" data-encode="%0D" data-encodecaps="%0D"
          data-uni="U+000D">Enter</key>
          <span class="cap">caps lock on</span>
          <div class="clearfix"></div>
        </row>
        <row class="five">
          <key class="shft left" data-key="16">Shift</key>
          <key class="single z" data-key="90" data-encode="%7A" data-encodecaps="%5A"
          data-uni="U+007A" data-unicaps="U+005A">z</key>
          <key class="single x" data-key="88" data-encode="%78" data-encodecaps="%58"
          data-uni="U+0078" data-unicaps="U+0058">x</key>
          <key class="single c" data-key="67" data-encode="%63" data-encodecaps="%43"
          data-uni="U+0063" data-unicaps="U+0043">c</key>
          <key class="single v" data-key="86" data-encode="%76" data-encodecaps="%56"
          data-uni="U+0076" data-unicaps="U+0056">v</key>
          <key class="single b" data-key="66" data-encode="%62" data-encodecaps="%42"
          data-uni="U+0062" data-unicaps="U+0042">b</key>
          <key class="single n" data-key="78" data-encode="%6E" data-encodecaps="%4E"
          data-uni="U+006E" data-unicaps="U+004E">n</key>
          <key class="single m" data-key="77" data-encode="%6D" data-encodecaps="%4D"
          data-uni="U+006D" data-unicaps="U+004D">m</key>
          <key class="double comm" data-key="188" data-encode="%2C" data-encodecaps="%3C"
          data-uni="U+002C" data-unicaps="U+003C">
            <<span>,</span>
          </key>
          <key class="double great" data-key="190" data-encode="%2E" data-encodecaps="%3E"
          data-uni="U+002E" data-unicaps="U+003E">>
            <span>.</span>
          </key>
          <key class="double quest" data-key="191" data-encode="%2F" data-encodecaps="%3F"
          data-uni="U+002F" data-unicaps="U+003F">?
            <span>/</span>
          </key>
          <key class="shft right" data-key="16">Shift</key>
          <div class="clearfix"></div>
        </row>
        <row class="six">
          <key class="single ctrl left" data-key="17">control</key>
          <key class="single opt left" data-key="18">option</key>
          <key class="single cmd left" data-key="91">command</key>
          <key class="single space left" data-key="32" data-encode="%20"
          data-encodecaps="%20"></key>
          <key class="single cmd right" data-key="91">command</key>
          <key class="single opt right" data-key="18">option</key>
          <key class="single ctrl right" data-key="17">control</key>
          <div class="clearfix"></div>
        </row>
        <h1 id="logo" class="gray">
          <a href="/">KeyCodes</a>
        </h1>
      </div>
      <div id="keypad"></div>
      <display id="codebox">
        <div class="code-inner dark">
          <p>I have grown tired of searching online through tables of character codes,
            so I built Keycodes to help me out. Feel free to use it, that's why it's
            here. Check back periodically or follow me on Twitter (
            <span>@jayjo</span>) for updates and other cool stuff.</p>
        </div>
        <div class="code-inner">
          <input type="text" value="" name="codebox" />
        </div>
      </display>
    </div>
    <footer>
      <div class="copyright">
        <p>
          <a href="http://twitter.com/jayjo" target="_blank">@jayjo</a>|
          <a href="https://github.com/jayjo/keymap/fork">github</a>
        </p>
      </div>
    </footer>
  </section>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>

</html>

/*! normalize.css v1.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0;
}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
          
@charset "UTF-8";body{-webkit-backface-visibility:hidden}.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-moz-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-o-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px)}}@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0)}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}20%,40%,60%,80%{-moz-transform:translateX(10px)}}@-o-keyframes shake{0%,100%{-o-transform:translateX(0)}10%,30%,50%,70%,90%{-o-transform:translateX(-10px)}20%,40%,60%,80%{-o-transform:translateX(10px)}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px)}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}40%{-moz-transform:translateY(-30px)}60%{-moz-transform:translateY(-15px)}}@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0)}40%{-o-transform:translateY(-30px)}60%{-o-transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce}@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0)}}@-moz-keyframes tada{0%{-moz-transform:scale(1)}10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}100%{-moz-transform:scale(1) rotate(0)}}@-o-keyframes tada{0%{-o-transform:scale(1)}10%,20%{-o-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg)}100%{-o-transform:scale(1) rotate(0)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada}@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg)}}@-moz-keyframes swing{20%{-moz-transform:rotate(15deg)}40%{-moz-transform:rotate(-10deg)}60%{-moz-transform:rotate(5deg)}80%{-moz-transform:rotate(-5deg)}100%{-moz-transform:rotate(0deg)}}@-o-keyframes swing{20%{-o-transform:rotate(15deg)}40%{-o-transform:rotate(-10deg)}60%{-o-transform:rotate(5deg)}80%{-o-transform:rotate(-5deg)}100%{-o-transform:rotate(0deg)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%)}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0%)}15%{-moz-transform:translateX(-25%) rotate(-5deg)}30%{-moz-transform:translateX(20%) rotate(3deg)}45%{-moz-transform:translateX(-15%) rotate(-3deg)}60%{-moz-transform:translateX(10%) rotate(2deg)}75%{-moz-transform:translateX(-5%) rotate(-1deg)}100%{-moz-transform:translateX(0%)}}@-o-keyframes wobble{0%{-o-transform:translateX(0%)}15%{-o-transform:translateX(-25%) rotate(-5deg)}30%{-o-transform:translateX(20%) rotate(3deg)}45%{-o-transform:translateX(-15%) rotate(-3deg)}60%{-o-transform:translateX(10%) rotate(2deg)}75%{-o-transform:translateX(-5%) rotate(-1deg)}100%{-o-transform:translateX(0%)}}@keyframes wobble{0%{transform:translateX(0%)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}100%{transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}@-moz-keyframes pulse{0%{-moz-transform:scale(1)}50%{-moz-transform:scale(1.1)}100%{-moz-transform:scale(1)}}@-o-keyframes pulse{0%{-o-transform:scale(1)}50%{-o-transform:scale(1.1)}100%{-o-transform:scale(1)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}}@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}}@-o-keyframes flip{0%{-o-transform:perspective(400px) rotateY(0);-o-animation-timing-function:ease-out}40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function:ease-out}50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in}80%{-o-transform:perspective(400px) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in}100%{-o-transform:perspective(400px) scale(1);-o-animation-timing-function:ease-in}}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}.flip{-webkit-backface-visibility:visible!important;-webkit-animation-name:flip;-moz-backface-visibility:visible!important;-moz-animation-name:flip;-o-backface-visibility:visible!important;-o-animation-name:flip;backface-visibility:visible!important;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}}@-moz-keyframes flipInX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateX(-10deg)}70%{-moz-transform:perspective(400px) rotateX(10deg)}100%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}}@-o-keyframes flipInX{0%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-o-transform:perspective(400px) rotateX(-10deg)}70%{-o-transform:perspective(400px) rotateX(10deg)}100%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg)}100%{transform:perspective(400px) rotateX(0deg);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible!important;-moz-animation-name:flipInX;-o-backface-visibility:visible!important;-o-animation-name:flipInX;backface-visibility:visible!important;animation-name:flipInX}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}}@-moz-keyframes flipOutX{0%{-moz-transform:perspective(400px) rotateX(0deg);opacity:1}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}}@-o-keyframes flipOutX{0%{-o-transform:perspective(400px) rotateX(0deg);opacity:1}100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1}100%{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible!important;-o-animation-name:flipOutX;-o-backface-visibility:visible!important;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1}}@-moz-keyframes flipInY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateY(-10deg)}70%{-moz-transform:perspective(400px) rotateY(10deg)}100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1}}@-o-keyframes flipInY{0%{-o-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-o-transform:perspective(400px) rotateY(-10deg)}70%{-o-transform:perspective(400px) rotateY(10deg)}100%{-o-transform:perspective(400px) rotateY(0deg);opacity:1}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0deg);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible!important;-moz-animation-name:flipInY;-o-backface-visibility:visible!important;-o-animation-name:flipInY;backface-visibility:visible!important;animation-name:flipInY}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}}@-moz-keyframes flipOutY{0%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}}@-o-keyframes flipOutY{0%{-o-transform:perspective(400px) rotateY(0deg);opacity:1}100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1}100%{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible!important;-moz-animation-name:flipOutY;-o-backface-visibility:visible!important;-o-animation-name:flipOutY;backface-visibility:visible!important;animation-name:flipOutY}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-o-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}100%{opacity:1;transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px)}100%{opacity:1;transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px)}100%{opacity:1;transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-o-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px)}}@-moz-keyframes fadeOutUp{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-20px)}}@-o-keyframes fadeOutUp{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px)}}@-moz-keyframes fadeOutDown{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(20px)}}@-o-keyframes fadeOutDown{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px)}}@-moz-keyframes fadeOutLeft{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-20px)}}@-o-keyframes fadeOutLeft{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px)}}@-moz-keyframes fadeOutRight{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(20px)}}@-o-keyframes fadeOutRight{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes fadeOutUpBig{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes fadeOutUpBig{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes fadeOutDownBig{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes fadeOutDownBig{0%{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@-moz-keyframes fadeOutLeftBig{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-2000px)}}@-o-keyframes fadeOutLeftBig{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@-moz-keyframes fadeOutRightBig{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(2000px)}}@-o-keyframes fadeOutRightBig{0%{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px)}80%{-webkit-transform:translateY(10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(2000px)}60%{opacity:1;-moz-transform:translateY(-30px)}80%{-moz-transform:translateY(10px)}100%{-moz-transform:translateY(0)}}@-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(2000px)}60%{opacity:1;-o-transform:translateY(-30px)}80%{-o-transform:translateY(10px)}100%{-o-transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px)}60%{opacity:1;transform:translateY(-30px)}80%{transform:translateY(10px)}100%{transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceInDown{0%{opacity:0;-moz-transform:translateY(-2000px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}@-o-keyframes bounceInDown{0%{opacity:0;-o-transform:translateY(-2000px)}60%{opacity:1;-o-transform:translateY(30px)}80%{-o-transform:translateY(-10px)}100%{-o-transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px)}80%{-webkit-transform:translateX(-10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceInLeft{0%{opacity:0;-moz-transform:translateX(-2000px)}60%{opacity:1;-moz-transform:translateX(30px)}80%{-moz-transform:translateX(-10px)}100%{-moz-transform:translateX(0)}}@-o-keyframes bounceInLeft{0%{opacity:0;-o-transform:translateX(-2000px)}60%{opacity:1;-o-transform:translateX(30px)}80%{-o-transform:translateX(-10px)}100%{-o-transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px)}80%{-webkit-transform:translateX(10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceInRight{0%{opacity:0;-moz-transform:translateX(2000px)}60%{opacity:1;-moz-transform:translateX(-30px)}80%{-moz-transform:translateX(10px)}100%{-moz-transform:translateX(0)}}@-o-keyframes bounceInRight{0%{opacity:0;-o-transform:translateX(2000px)}60%{opacity:1;-o-transform:translateX(-30px)}80%{-o-transform:translateX(10px)}100%{-o-transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px)}60%{opacity:1;transform:translateX(-30px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3)}}@-moz-keyframes bounceOut{0%{-moz-transform:scale(1)}25%{-moz-transform:scale(.95)}50%{opacity:1;-moz-transform:scale(1.1)}100%{opacity:0;-moz-transform:scale(.3)}}@-o-keyframes bounceOut{0%{-o-transform:scale(1)}25%{-o-transform:scale(.95)}50%{opacity:1;-o-transform:scale(1.1)}100%{opacity:0;-o-transform:scale(.3)}}@keyframes bounceOut{0%{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes bounceOutUp{0%{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(20px)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes bounceOutUp{0%{-o-transform:translateY(0)}20%{opacity:1;-o-transform:translateY(20px)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes bounceOutDown{0%{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(-20px)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes bounceOutDown{0%{-o-transform:translateY(0)}20%{opacity:1;-o-transform:translateY(-20px)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes bounceOutDown{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}100%{opacity:0;transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@-moz-keyframes bounceOutLeft{0%{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(20px)}100%{opacity:0;-moz-transform:translateX(-2000px)}}@-o-keyframes bounceOutLeft{0%{-o-transform:translateX(0)}20%{opacity:1;-o-transform:translateX(20px)}100%{opacity:0;-o-transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@-moz-keyframes bounceOutRight{0%{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(-20px)}100%{opacity:0;-moz-transform:translateX(2000px)}}@-o-keyframes bounceOutRight{0%{-o-transform:translateX(0)}20%{opacity:1;-o-transform:translateX(-20px)}100%{opacity:0;-o-transform:translateX(2000px)}}@keyframes bounceOutRight{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateIn{0%{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0}100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateIn{0%{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0}100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0}100%{transform-origin:center center;transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}}@-moz-keyframes rotateOut{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}}@-o-keyframes rotateOut{0%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1}100%{transform-origin:center center;transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateOutUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}}@-o-keyframes rotateOutUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateOutDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}}@-o-keyframes rotateOutDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateOutUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}}@-o-keyframes rotateOutUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateOutDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}}@-o-keyframes rotateOutDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);opacity:0}}@-moz-keyframes hinge{0%{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}100%{-moz-transform:translateY(700px);opacity:0}}@-o-keyframes hinge{0%{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}100%{-o-transform:translateY(700px);opacity:0}}@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out}100%{transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)}}@-moz-keyframes rollIn{0%{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-moz-transform:translateX(0px) rotate(0deg)}}@-o-keyframes rollIn{0%{opacity:0;-o-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-o-transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;transform:translateX(0px) rotate(0deg)}}.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg)}}@-moz-keyframes rollOut{0%{opacity:1;-moz-transform:translateX(0px) rotate(0deg)}100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg)}}@-o-keyframes rollOut{0%{opacity:1;-o-transform:translateX(0px) rotate(0deg)}100%{opacity:0;-o-transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg)}100%{opacity:0;transform:translateX(100%) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1}}@-moz-keyframes lightSpeedIn{0%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-moz-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-moz-transform:translateX(0%) skewX(-15deg);opacity:1}100%{-moz-transform:translateX(0%) skewX(0deg);opacity:1}}@-o-keyframes lightSpeedIn{0%{-o-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-o-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-o-transform:translateX(0%) skewX(-15deg);opacity:1}100%{-o-transform:translateX(0%) skewX(0deg);opacity:1}}@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0}60%{transform:translateX(-20%) skewX(30deg);opacity:1}80%{transform:translateX(0%) skewX(-15deg);opacity:1}100%{transform:translateX(0%) skewX(0deg);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out}.animated.lightSpeedIn{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}}@-moz-keyframes lightSpeedOut{0%{-moz-transform:translateX(0%) skewX(0deg);opacity:1}100%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0}}@-o-keyframes lightSpeedOut{0%{-o-transform:translateX(0%) skewX(0deg);opacity:1}100%{-o-transform:translateX(100%) skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1}100%{transform:translateX(100%) skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.lightSpeedOut{-webkit-animation-duration:.25s;-moz-animation-duration:.25s;-o-animation-duration:.25s;animation-duration:.25s}@-webkit-keyframes wiggle{0%{-webkit-transform:skewX(9deg)}10%{-webkit-transform:skewX(-8deg)}20%{-webkit-transform:skewX(7deg)}30%{-webkit-transform:skewX(-6deg)}40%{-webkit-transform:skewX(5deg)}50%{-webkit-transform:skewX(-4deg)}60%{-webkit-transform:skewX(3deg)}70%{-webkit-transform:skewX(-2deg)}80%{-webkit-transform:skewX(1deg)}90%{-webkit-transform:skewX(0deg)}100%{-webkit-transform:skewX(0deg)}}@-moz-keyframes wiggle{0%{-moz-transform:skewX(9deg)}10%{-moz-transform:skewX(-8deg)}20%{-moz-transform:skewX(7deg)}30%{-moz-transform:skewX(-6deg)}40%{-moz-transform:skewX(5deg)}50%{-moz-transform:skewX(-4deg)}60%{-moz-transform:skewX(3deg)}70%{-moz-transform:skewX(-2deg)}80%{-moz-transform:skewX(1deg)}90%{-moz-transform:skewX(0deg)}100%{-moz-transform:skewX(0deg)}}@-o-keyframes wiggle{0%{-o-transform:skewX(9deg)}10%{-o-transform:skewX(-8deg)}20%{-o-transform:skewX(7deg)}30%{-o-transform:skewX(-6deg)}40%{-o-transform:skewX(5deg)}50%{-o-transform:skewX(-4deg)}60%{-o-transform:skewX(3deg)}70%{-o-transform:skewX(-2deg)}80%{-o-transform:skewX(1deg)}90%{-o-transform:skewX(0deg)}100%{-o-transform:skewX(0deg)}}@keyframes wiggle{0%{transform:skewX(9deg)}10%{transform:skewX(-8deg)}20%{transform:skewX(7deg)}30%{transform:skewX(-6deg)}40%{transform:skewX(5deg)}50%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}70%{transform:skewX(-2deg)}80%{transform:skewX(1deg)}90%{transform:skewX(0deg)}100%{transform:skewX(0deg)}}.wiggle{-webkit-animation-name:wiggle;-moz-animation-name:wiggle;-o-animation-name:wiggle;animation-name:wiggle;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.wiggle{-webkit-animation-duration:.75s;-moz-animation-duration:.75s;-o-animation-duration:.75s;animation-duration:.75s}

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/* @group Base */
/************** Icon Fonts ***************/
/************** Font Fonts ***************/
/************** Colors ***************/
body {
  margin: 0;
  /*background: #F3F3F3;*/
  -webkit-font-smoothing: antialiased;
  font-size: 9px;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #000;
  color: #FFF;
  text-shadow: none;
}

::selection {
  color: #FFF;
  background: #000;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
  max-width: 100%;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Remove the dotted link in Firefox
   ========================================================================== */
a:active,
a.active {
  outline: 0;
  -moz-outline-style: none;
}

:focus,
a.active {
  -moz-outline-style: none;
  outline: 0;
}

a,
a.active {
  -moz-outline-style: none;
  outline: 0;
}

/* ==========================================================================
   Remove the dotted link in Firefox
   ========================================================================== */
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* @group Global */
/* @end */
/* @group Home */
html {
  /*background: #4099FF;
  background: -webkit-linear-gradient(25deg, #3B5998, #4099FF);
  background: -moz-linear-gradient(25deg, #3B5998, #4099FF);
  background: -o-linear-gradient(25deg, #3B5998, #4099FF);
  background: linear-gradient(25deg, #3B5998, #4099FF);*/
  height: 100%;
  width: 100%;
  height: 100%;
}

body {
  /*background: #4099FF;
  background: -webkit-linear-gradient(25deg, #3B5998, #4099FF);
  background: -moz-linear-gradient(25deg, #3B5998, #4099FF);
  background: -o-linear-gradient(25deg, #3B5998, #4099FF);
  background: linear-gradient(25deg, #3B5998, #4099FF);*/
  background: #27313e;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: omnes-pro;
  font-weight: 100;
}

#keyboard *, #codebox * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

.clearfix {
  clear: both;
}

header, footer {
  width: 100%;
  text-align: center;
  margin: 0;
}

header {
  padding: 30px 0 0;
}
header .theme-switcher {
  background: #27313e;
  color: #16a085;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1;
  margin: 0;
  font-weight: 500;
  border-radius: 0 0 0 3px;
  padding: 3px 9px 5px;
  text-transform: lowercase;
}
header .theme-switcher a {
  color: #16a085;
  text-decoration: none;
  padding: 0 5px;
}
header .theme-switcher a:hover {
  color: #fccd43;
}

header h1, header h2 {
  color: #033141;
}

header h1 {
  font-size: 26px;
  margin-bottom: 5px;
}

header h2 {
  font-size: 16px;
  margin-top: 0;
}

footer {
  position: fixed;
  bottom: 80px;
  width: 100%;
}

.copyright p {
  margin: 0;
  text-align: center;
}

.wrapper {
  background: #151d26;
  position: fixed;
  top: 20px;
  right: 20px;
  left: 20px;
  bottom: 20px;
  border-radius: 3px;
  opacity: 0;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

.wrapper.active {
  left: 145px;
  border-radius: 0 3px 3px 0;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

aside {
  padding: 20px;
  width: 105px;
  position: fixed;
  min-height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  background: #27313e;
  /*box-sizing: border-box;
  -moz-box-sizing: border-box;*/
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

aside.inactive {
  left: -145px;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

.settings {
  display: block;
  width: 50px;
  height: 50px;
  position: relative;
  left: 20px;
  top: -10px;
  z-index: 4;
  background: #27313e;
  border-radius: 0 0 3px 0;
  cursor: pointer;
}

.settings.close {
  border-radius: 3px;
  background: #151d26;
}

.settings.close:hover {
  background: #27313e;
}

.settings span {
  display: block;
  text-indent: -9999em;
  height: 0;
}

.settings:before {
  color: #16a085;
  font: 39px "icomoon";
  position: relative;
  top: 3px;
  content: "\e000";
}

.settings.close:before {
  color: #c51e32;
  content: "\e001";
}

h1#logo {
  background: url(../images/logo.svg) no-repeat;
  text-indent: -9999em;
  position: relative;
  display: block;
  text-align: center;
  width: 184px;
  margin: 26px auto 0;
  cursor: pointer;
}

h1#logo.blue {
  z-index: 5;
  background: url(../images/blue-logo.svg) no-repeat;
}

h1#logo.green {
  z-index: 5;
  background: url(../images/green-logo.svg) no-repeat;
}

h1#logo.gray {
  z-index: 5;
  background: url(../images/gray-logo.svg) no-repeat;
}

aside.inactive menu {
  position: relative;
  margin: 70px 0 0 0;
  left: -380px;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

aside menu {
  position: relative;
  margin: 70px 0 0 0;
  left: 0;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

menu a {
  /*width: 86px;*/
  width: 100%;
  margin: 0 0 8px 0;
  border-radius: 3px;
  background: rgba(22, 160, 133, 0.2);
  padding: 7px 0 7px;
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -1px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  /*@include btn;*/
}

@-moz-document url-prefix() {
  menu a {
    letter-spacing: 0;
  }
}

menu a:hover {
  background: #16a085;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF260000');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwLjA4KSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.08)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 100%);
  -webkit-box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.08);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF260000');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwKSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwLjI1KSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.25)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
  -webkit-box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1);
}

menu a:active {
  -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.45);
  box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.45);
  cursor: auto;
  color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.08);
}

menu a.active {
  color: white;
  background: #16a085;
  cursor: auto;
}

#keyboard {
  margin: -193px 0 0 -517px;
  width: 1034px;
  height: 386px;
  position: absolute;
  top: 42%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

#keyboard.showing {
  opacity: .28;
}

#keyboard.unicode,
#keyboard.charcode,
#keyboard.entities,
#keyboard.encoded,
#keyboard.ascii {
  opacity: 1;
  pointer-events: auto;
}

row {
  display: block;
  margin: 0 auto;
  list-style: none;
  margin-bottom: 6px;
  position: relative;
}

key {
  border-radius: 3px;
  border: 2px solid rgba(22, 160, 133, 0.35);
  background: transparent;
  font-family: Helvetica;
  font-weight: normal;
  font-size: 19px;
  line-height: 26px;
  text-align: center;
  margin: 0 2px;
  display: inline-block;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
  display: inline-block;
  color: #fccd43;
  /*@include key;*/
  /*@include keyshadow;*/
}

key.double {
  color: rgba(255, 255, 255, 0.25);
}

key.double:hover {
  color: rgba(255, 255, 255, 0.25);
}

key.double.uppercase {
  color: #fccd43;
}

key.double.uppercase:hover {
  color: #fff;
}

key.double.uppercase:active,
key.double.uppercase.active {
  color: rgba(255, 255, 255, 0.25);
}

key.double.uppercase:hover span {
  color: rgba(255, 255, 255, 0.25);
}

key.double.uppercase span {
  color: rgba(255, 255, 255, 0.25);
}

key.double span {
  color: #fccd43;
}

key.double:hover span {
  color: #fff;
}

key.double.active span,
key.double:active span {
  color: rgba(255, 255, 255, 0.25);
}

key.deactivated {
  top: 4px;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
}

key:hover {
  border: 2px solid #16a085;
  color: white;
  /*@include keyshadowhover;*/
}

key.single,
key.tab {
  text-transform: lowercase;
}

key:active,
key.active {
  top: 3px;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

key.uppercase {
  text-transform: uppercase;
}

key.tab,
key.shft,
key.caps,
key.delete,
key.return,
key.ctrl,
key.opt,
key.cmd {
  font-size: 15px;
  padding: .5em 0;
}

row.one key {
  padding: .2em 0;
  width: 63px;
  font-size: 14px;
}

key.double {
  padding: .175em 0;
}

row.two .delete {
  padding: 31px 14px 0;
  height: 27px;
}

row.three .tab,
row.six .ctrl,
row.six .cmd {
  padding: 28px 14px 0 14px;
  height: 30px;
}

row.six .opt.left {
  padding: 28px 0px 0 12px;
  height: 30px;
}

row.six .opt.right {
  padding: 28px 12px 0 0px;
  height: 30px;
}

row.six .space {
  padding: 28px 6px 0 6px;
  height: 30px;
  top: 14px;
  width: 445px;
}

row.six .space.active {
  top: 18px;
}

row.three .lbrack,
row.three .rbrack,
row.three .bs,
row.four .col,
row.five .comm,
row.five .great,
row.five .quest {
  padding: 0 0 8px 0;
  height: 50px;
}

row.three key.single,
row.four key.single,
row.five key.single {
  height: 43px;
  padding: 15px 0 0 0;
  top: -11px;
}

row.three key.single:active,
row.three key.single.active {
  top: -7px;
}

row.one key.single.esc {
  font-size: 16px;
}

row.two key,
row.three key,
row.four key,
row.five key,
row.six key {
  width: 61px;
  height: 55px;
  padding: 3px 0 0 0;
}

row.three {
  top: 1px;
}

row.four {
  top: -15px;
}

row.five {
  top: -25px;
}

row.six {
  top: -49px;
}

row.four key.caps,
row.four key.return {
  width: 83px;
  padding: 28px 14px 0 14px;
  height: 30px;
  text-transform: lowercase;
}

row.five key.shft {
  width: 119px;
  padding: 28px 14px 0 14px;
  height: 30px;
  text-transform: lowercase;
}

key span {
  display: block;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

row.four key.apos {
  line-height: 22px;
  padding-top: 12px;
  height: 46px;
  top: 6px;
}

row.four key.single:active,
row.five key.single:active {
  top: -8px;
}

row.four key.apos:active {
  top: 9px;
}

.cap {
  position: absolute;
  top: 16px;
  left: 11px;
  text-indent: -9999em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 2px solid rgba(22, 160, 133, 0.45);
  cursor: pointer;
  transition: all 0.05s;
  -moz-transition: all 0.05s;
  -webkit-transition: all 0.05s;
}

.cap:hover,
.cap.capsOn {
  background: #16a085;
  transition: all 0.05s;
  -moz-transition: all 0.05s;
  -webkit-transition: all 0.05s;
}

.cap.capsOn {
  top: 18px;
}

.caps.activated {
  top: 2px;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.caps.activated span {
  pointer-events: auto;
}

#codebox {
  font-family: brandon-grotesque;
  font-weight: 300;
  line-height: 0;
  width: 560px;
  height: 390px;
  vertical-align: baseline;
  position: fixed;
  outline: none;
  top: 41%;
  left: 50%;
  margin-left: -280px;
  margin-top: -204px;
  border: none;
  border-radius: 7px;
  background: rgba(118, 118, 118, 0);
  text-align: center;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -ms-transform: scale(1.25);
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
#codebox.active {
  width: 560px;
  height: 390px;
  line-height: 0;
  background: rgba(3, 49, 65, 0.05);
  top: 44%;
  left: 50%;
  margin-left: -280px;
  margin-top: -204px;
  -webkit-box-shadow: 0 0 0px 2px #16a085;
  box-shadow: 0 0 0px 2px #16a085;
  z-index: 5;
  opacity: 1;
  font-size: 19px;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -ms-transform: scale(1.25);
  transition: all 0.05s;
  -moz-transition: all 0.05s;
  -webkit-transition: all 0.05s;
}

#codebox .code-inner {
  background: rgba(0, 0, 0, 0.45);
  font-size: 1200%;
  margin: 0;
  border-radius: 5px;
  position: relative;
  display: block;
  padding: 55px 0;
}

input[type=text] {
  font-family: brandon-grotesque;
  font-weight: 300;
  opacity: 0;
  letter-spacing: -12px;
  width: 100%;
  height: auto;
  text-align: center;
  background: none;
  outline: none;
  border: none;
  line-height: 0;
  padding: 0;
  position: relative;
  color: white;
  top: 0;
  pointer-events: none;
}

#codebox.active input[type=text] {
  opacity: 1;
  pointer-events: none;
}

#codebox.unicode .code-inner {
  font-size: 740%;
}

#codebox.unicode .code-inner {
  padding: 109px 0;
}

#codebox .code-inner.dark {
  background: rgba(0, 0, 0, 0.75);
}

#codebox .code-inner.dark {
  font-size: 28px;
}

#codebox.unicode .code-inner.dark {
  padding: 55px 0;
}

#codebox .code-inner.dark p {
  color: #fff;
  line-height: 38px;
  padding: 26px 48px;
  margin: 0;
}

#codebox .code-inner p span {
  color: #fccd43;
}

.copyright p {
  background: #27313e;
  border-radius: 3px 0 0 0;
  padding: 3px 9px 5px;
  font-weight: 500;
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #16a085;
}

.copyright p a {
  color: #16a085;
  text-decoration: none;
}

.copyright p a:hover {
  color: #fccd43;
}

.twitter-share {
  position: fixed;
  bottom: 25px;
  left: 29px;
  z-index: 1;
}

/* ==========================================================================
   DEACTIVATED KEYS BY CODE TYPE
   ========================================================================== */
#keyboard.unicode row.one key,
#keyboard.unicode row.six key,
#keyboard.unicode key.shft,
#keyboard.unicode .caps,
#keyboard.unicode.capslock .tab,
#keyboard.unicode.capslock .return,
#keyboard.unicode.capslock .delete,
#keyboard.encoded key.f1,
#keyboard.encoded key.f2,
#keyboard.encoded key.f3,
#keyboard.encoded key.f4,
#keyboard.encoded key.f5,
#keyboard.encoded key.f6,
#keyboard.encoded key.f7,
#keyboard.encoded key.f8,
#keyboard.encoded key.f9,
#keyboard.encoded key.f10,
#keyboard.encoded key.f11,
#keyboard.encoded key.f12,
#keyboard.encoded key.f13,
#keyboard.encoded .caps,
#keyboard.encoded .shft,
#keyboard.encoded .ctrl,
#keyboard.encoded .opt,
#keyboard.encoded .cmd {
  top: 2px;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
}

/*#keyboard.encoded row.six key.space {
    top: 16px;
    @include keyshadowactive;
    pointer-events: none;
}*/
#keyboard.unicode row.six key.space {
  top: 16px;
}

/* ==========================================================================
   LMTH classes
   ========================================================================== */
#codebox.lmth {
  font-size: 720%;
}

#codebox.lmth .code-inner {
  padding: 50px 0 63px 0;
}

#codebox.lmth input[type=text] {
  letter-spacing: -5px;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media screen and (min-width: 1025px) and (max-width: 1189px) {
  #keyboard {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
  }
}
@media screen and (min-width: 1190px) and (max-width: 1220px) {
  #keyboard {
    transform: scale(0.94);
    -webkit-transform: scale(0.94);
    -ms-transform: scale(0.94);
  }
}
@media screen and (min-width: 1444px) and (max-width: 2010px) {
  #keyboard {
    transform: scale(1.18);
    -webkit-transform: scale(1.18);
    -ms-transform: scale(1.18);
  }
}
@media screen and (min-width: 1444px) and (max-width: 2010px) {
  #keyboard {
    transform: scale(1.18);
    -webkit-transform: scale(1.18);
    -ms-transform: scale(1.18);
  }
}
@media screen and (min-width: 2010px) and (max-width: 2560px) {
  #keyboard {
    transform: scale(1.75);
    -webkit-transform: scale(1.75);
    -ms-transform: scale(1.75);
  }
}
/* ==========================================================================
   Light Theme
   ========================================================================== */
body.light {
  background: #e6e6e6;
}
body.light header .theme-switcher {
  background: #e6e6e6;
  color: #033141;
}
body.light header .theme-switcher a {
  color: #033141;
}
body.light header .theme-switcher a:hover {
  color: #16a085;
}
body.light .wrapper {
  background: #cdcdcd;
}
body.light .settings {
  background: #cdcdcd;
}
body.light .settings.close {
  background: #cdcdcd;
}
body.light aside {
  width: 145px;
  padding: 20px 0;
  background: #e6e6e6;
}
body.light menu a {
  background: #e6e6e6;
  border-bottom: 1px solid #cdcdcd;
  border-radius: 0;
  color: rgba(0, 0, 0, 0.32);
  margin: 0;
}
body.light menu a:last-child {
  border-bottom: none;
}
body.light menu a:hover {
  background: #f3f3f3;
}
body.light menu a.active {
  background: #cdcdcd;
  color: #033141;
  border-bottom: none;
}
body.light key {
  background: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
  /*@include filter-gradient(#1fffff, #00ffff, vertical); // IE6-9
  @include background-image(linear-gradient(top,  rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 100%));	*/
  border: 2px solid rgba(255, 255, 255, 0.35);
}
body.light key:hover {
  background: white;
  -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.1);
  /*@include filter-gradient(#1fffff, #00ffff, vertical); // IE6-9
  @include background-image(linear-gradient(top,  rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 100%));	*/
}
body.light key:active, body.light key.active, body.light key.caps.activated {
  top: 3px;
  color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
body.light key.double {
  color: rgba(0, 0, 0, 0.1);
}
body.light key.double span {
  color: rgba(0, 0, 0, 0.4);
}
body.light key.double.uppercase {
  color: rgba(0, 0, 0, 0.4);
}
body.light key.double.uppercase span {
  color: rgba(0, 0, 0, 0.1);
}
body.light row.four key.single:active,
body.light row.five key.single:active,
body.light row.four key.single.active,
body.light row.five key.single.active {
  top: -8px !important;
}
body.light .copyright p {
  background: #e6e6e6;
  color: #033141;
}
body.light .copyright a {
  color: #033141;
}
body.light .copyright a:hover {
  color: #16a085;
}
body.light #keyboard.unicode row.one key,
body.light #keyboard.unicode row.six key,
body.light #keyboard.unicode key.shft,
body.light #keyboard.unicode .caps,
body.light #keyboard.unicode.capslock .tab,
body.light #keyboard.unicode.capslock .return,
body.light #keyboard.unicode.capslock .delete,
body.light #keyboard.encoded key.f1,
body.light #keyboard.encoded key.f2,
body.light #keyboard.encoded key.f3,
body.light #keyboard.encoded key.f4,
body.light #keyboard.encoded key.f5,
body.light #keyboard.encoded key.f6,
body.light #keyboard.encoded key.f7,
body.light #keyboard.encoded key.f8,
body.light #keyboard.encoded key.f9,
body.light #keyboard.encoded key.f10,
body.light #keyboard.encoded key.f11,
body.light #keyboard.encoded key.f12,
body.light #keyboard.encoded key.f13,
body.light #keyboard.encoded .caps,
body.light #keyboard.encoded .shft,
body.light #keyboard.encoded .ctrl,
body.light #keyboard.encoded .opt,
body.light #keyboard.encoded .cmd {
  color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(0, 0, 0, 0.17);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  pointer-events: none;
}
body.light #keyboard.unicode row.six key.space {
  top: 16px;
}
body.light #codebox {
  background: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}
body.light #codebox .code-inner.dark {
  background: none;
}
body.light #codebox .code-inner.dark p {
  color: #033141;
}
body.light #codebox .code-inner.dark p span {
  color: #16a085;
}
body.light #codebox .code-inner {
  background: none;
}
body.light input[type=text] {
  color: #16a085;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
  *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
/* @end */
/* @group Main Nav */
/* @end */
/* @end */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

a,
  a:visited {
    text-decoration: underline;
  }

a[href]:after {
    content: " (" attr(href) ")";
  }

abbr[title]:after {
    content: " (" attr(title) ")";
  }

/*
   * Don't show links for images, or javascript/internal links
   */
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

thead {
    display: table-header-group;
    /* h5bp.com/t */
  }

tr,
  img {
    page-break-inside: avoid;
  }

img {
    max-width: 100% !important;
  }

@page {
    margin: 0.5cm;
}

p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

h2,
  h3 {
    page-break-after: avoid;
  }
}