:star:

34 files changed, 6067 insertions, 0 deletions

diff --git a/assets/README.md b/assets/README.md
new file mode 100644
index 0000000..34766f9
--- /dev/null
+++ b/assets/README.md
@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
diff --git a/assets/fonts/envy-code-r/envy-code-r-webfont.eot b/assets/fonts/envy-code-r/envy-code-r-webfont.eot
new file mode 100644
index 0000000..2709277
--- /dev/null
+++ b/assets/fonts/envy-code-r/envy-code-r-webfont.eot
diff --git a/assets/fonts/envy-code-r/envy-code-r-webfont.ttf b/assets/fonts/envy-code-r/envy-code-r-webfont.ttf
new file mode 100644
index 0000000..f53474c
--- /dev/null
+++ b/assets/fonts/envy-code-r/envy-code-r-webfont.ttf
diff --git a/assets/fonts/envy-code-r/envy-code-r-webfontd41d.eot b/assets/fonts/envy-code-r/envy-code-r-webfontd41d.eot
new file mode 100644
index 0000000..2709277
--- /dev/null
+++ b/assets/fonts/envy-code-r/envy-code-r-webfontd41d.eot
diff --git a/assets/images/contacts-flash.gif b/assets/images/contacts-flash.gif
new file mode 100644
index 0000000..b4aab2f
--- /dev/null
+++ b/assets/images/contacts-flash.gif
diff --git a/assets/images/home-glitter.gif b/assets/images/home-glitter.gif
new file mode 100644
index 0000000..dfa3dc2
--- /dev/null
+++ b/assets/images/home-glitter.gif
diff --git a/assets/images/home-spin.gif b/assets/images/home-spin.gif
new file mode 100644
index 0000000..2d4fcf0
--- /dev/null
+++ b/assets/images/home-spin.gif
diff --git a/assets/images/manipal.gif b/assets/images/manipal.gif
new file mode 100644
index 0000000..7b07f6e
--- /dev/null
+++ b/assets/images/manipal.gif
diff --git a/assets/images/nosmovimos.gif b/assets/images/nosmovimos.gif
new file mode 100644
index 0000000..81406c1
--- /dev/null
+++ b/assets/images/nosmovimos.gif
diff --git a/assets/images/underconstruction-flash.gif b/assets/images/underconstruction-flash.gif
new file mode 100644
index 0000000..4b4a342
--- /dev/null
+++ b/assets/images/underconstruction-flash.gif
diff --git a/assets/json/interests.json b/assets/json/interests.json
new file mode 100644
index 0000000..5ba9985
--- /dev/null
+++ b/assets/json/interests.json
@@ -0,0 +1,30 @@
+{
+  "languages": [
+    "angelscript",
+    "purescript",
+    "crystal",
+    "haskell",
+    "cython",
+    "julia",
+    "gradle",
+    "kotlin",
+    "scala",
+    "dart",
+    "haxe",
+    "ruby",
+    "nim",
+    "go",
+    "v"
+  ],
+  "frameworks": [
+    "flutter",
+    "svelte",
+    "amber",
+    "forge",
+    "rails"
+  ],
+  "tools": [
+    "travis ci",
+    "jenkins"
+  ]
+}
diff --git a/assets/json/skills.dev.json b/assets/json/skills.dev.json
new file mode 100644
index 0000000..387dc60
--- /dev/null
+++ b/assets/json/skills.dev.json
@@ -0,0 +1,8 @@
+{
+  "c-c++": [
+    "internal, injectable modifications via OpenGL and DirectX",
+    "remote PE image injections",
+    "ImGui",
+    "GBDK"
+  ]
+}
diff --git a/assets/json/skills.json b/assets/json/skills.json
new file mode 100644
index 0000000..4ca6b84
--- /dev/null
+++ b/assets/json/skills.json
@@ -0,0 +1,71 @@
+{
+  "acknowledgements": [
+    "lead developer and proprietor of the Minecraft ghost client; Vespertine",
+    "lead development positions on various CS:GO clients",
+    "verified discord bot developer",
+    "verified discord bots",
+    "multi-langual"
+  ],
+  "tech-stacks": {
+    "javascript-typescript": {
+      "node-js": [
+        "discord.js",
+        "angular",
+        "express",
+        "akairo",
+        "react",
+        "nuxt",
+        "vue"
+      ],
+      "deno": [
+        "..."
+      ]
+    },
+    "python": [
+      "..."
+    ],
+    "java": {
+      "minecraft": [
+        "bukkit"
+      ],
+      "...": [
+        "spark",
+        "jda"
+      ]
+    },
+    "rust": [
+      "serenity",
+      "rocket",
+      "actix"
+    ],
+    "php": [
+      "mybb",
+      "fluxbb"
+    ]
+  },
+  "tools-accessories": {
+    "document-preparation.": [
+      "markdown",
+      "latex"
+    ],
+    "build-tools": [
+      "vs solutions",
+      "cmake",
+      "make"
+    ],
+    "version-control": [
+      "github",
+      "gitlab",
+      "git"
+    ],
+    "game-engines": [
+      "unity"
+    ],
+    "databases": [
+      "postgresql",
+      "sqlite",
+      "mongo",
+      "mysql"
+    ]
+  }
+}
diff --git a/assets/json/socials.json b/assets/json/socials.json
new file mode 100644
index 0000000..4a09b51
--- /dev/null
+++ b/assets/json/socials.json
@@ -0,0 +1,5 @@
+{
+  "twitter": "fuwnzy",
+  "github": "fuwn",
+  "email": "[email protected]"
+}
diff --git a/assets/scripts/libraries/t.min.js b/assets/scripts/libraries/t.min.js
new file mode 100644
index 0000000..c85c4ce
--- /dev/null
+++ b/assets/scripts/libraries/t.min.js
@@ -0,0 +1,2 @@
+/*t.js-1.3.1;(c)2014-2018 - Mntn(r) <https://mn.tn/> c/o Benjamin Lips <g--[AT]--mn.tn>;MIT-Licensed <https://mit-license.org/>;For documentation, see <https://mntn-dev.github.io/t.js/>*/
+;(function(c){c.fn.t=function(p,B){return this.each(function(){var a=B,l=p,b=c(this),r,t,u=-1,n=!1,y=-1,w="12qwertyuiop[]asdfghjkl;zxcvbnm,./~!@#$%^&*()_+:1234567890-=op".split([]),e=function(a,b){return c.type(a)[0]==(b||"n")},z=function(){g=c.grep(k,function(a){return"&"==a[0]||!a[1]}).length-1;return-1<g?g:0},x=function(b){y!=b&&a.blink&&(a.blink_perm||m.parent().data("blinking",y=b?1:0))},f={c:0,beep:function(){0==f.c&&(f.c=c("html").data().__TAC);f.o&&f.o.stop();f.o=f.c.createOscillator();f.o.frequency.setValueAtTime(1,f.c.currentTime);f.g=f.c.createGain();f.o.connect(f.g);f.g.connect(f.c.destination);f.o.start();f.o.stop(f.c.currentTime+.03)}};if("beep"==l&&!b.data().is_typing&&c("html").data().__TAC)return f.beep(),this;""===l&&(l="<del>*</del>");if(b.data().is_typing)return l=="paused".slice(0,-1)&&(b.data("paused",e(a,"b")?oo_=a:b.data("paused")?oo_=!1:oo_=!0),b.data().blink&&b.data("blinking",oo_)),this;if(l=="paused".slice(0,-1))return this;b.data("is_typing",1);e(l,"o")&&(a=l);if(/t\-/.test(b.attr("class")))return this;if("add"==l&&b.data().t){var q=a;a=c.extend({},b.data());var m=b=c(":first",b),A=e(a.typing,"f");q="<"+a.tag+' class="typing-add">'+q+"</"+a.tag+">"}else{"add"==l&&(l=a,a={});a=c.extend({t:!0,delay:!1,speed:50,speed_vary:!1,caret:"\u258e",tag:"span",blink:!0,beep:!1,blink_perm:!1,repeat:-3,pause_on_click:!1,pause_on_tab_switch:0,wrap:!1,mistype:!1,locale:"en",init:!1,typing:!1,fin:!1},a?a:b.data());q=t=!1;var d;b.data().t||(b.wrapInner(c("<"+a.tag+"/>",{"class":"t-container",style:"top:auto;bottom:auto;"})),/^[ar]/.test(b.css("position"))||b.css({position:"relative"}),b.css({overflow:"hidden"}));a.wrap&&!b.parent().data().t_wrap&&(b.wrap(c("<div/>",/[.#]/.test(a.wrap[0])?"#"==a.wrap[0]?{id:a.wrap.substr(1)}:{"class":a.wrap.substr(1)}:{style:a.wrap})),b.parent().data("t_wrap",1));e(a.beep,"b")||(a.beep=!1);!0===a.beep&&e(c("html").data().__TAC,"u")&&(c("html").data("__TAC",__TAC=(window.AudioContext=window.AudioContext||window.webkitAudioContext)?new AudioContext:!1),__TAC||(a.beep=!1));!1===a.repeat&&(a.repeat=-3);!0===a.caret&&(a.caret="\u258e");e(a.caret,"s")&&!c(".t-caret",b)[0]&&(!0===a.blink&&(a.blink=3*a.speed),e(a.blink)&&100>a.blink&&(a.blink=100),!e(a.blink)&&(a.blink=!1),t=c("<"+a.tag+"/>",{"class":"t-caret",html:a.caret}).appendTo(b),a.blink&&b.append("\u200b")&&b.data("bi",setInterval(function(){(m.parent().data().blinking|(v="h"==t.css("visibility")[0])||a.blink_perm)&&t.css({visibility:v?"visible":"hidden"})},a.blink)));a.blink||b.data().bi&&clearInterval(b.data().bi)&&b.removeData("bi");!e(a.blink_perm,"b")&&(a.blink_perm=!0);a.speed=!e(a.speed)||10>a.speed?10:a.speed;a.speed_vary&&(a.speed/=2.5);1<a.mistype||(a.mistype=!1);b.data(a);c(".typing-0",b).replaceWith(function(){return this.childNodes});c(".typing-add",b).remove();m=b=c(":first",b);var k=e(l,"s")?l:b.html();""==k&&(k="\u200b");b.empty();m.parent().show().css({visibility:"visible"});e(a.delay)&&0<a.delay&&(d=~~(1E3*a.delay/a.speed))&&a.blink_perm||x(1);A=e(a.typing,"f");!0===a.pause_on_click&&b.parent().off("click").click(function(a){"1"!=c(a.target).data().click&&c(this).t("pause")});!0===a.pause_on_tab_switch?e(c("html").data().__TAB,"u")&&(c("html").data("__TAB",1),c(document).on("visibilitychange",function(){c(".t-container").parent().each(function(){h=c(document).attr("visibilityState").charAt(0);"h"==h&&c(this).data().paused&&c(this).data("keep_paused",1);c(this).p("h"==h?!0:c(this).data().keep_paused&&c(this).removeData("keep_paused")?!0:!1)})})):!1===a.pause_on_tab_switch&&c("html").data().__TAB&&(c("html").removeData("__TAB"),c(document).off("visibilitychange"))}/<kbd.*?>/i.test(k=String(q||k))&&b.parent().data("kbd",j_=1)&&b.parent().data("mistype",b.parent().data("mistype")?_j=b.parent().data().mistype:_j=10)&&(a.mistype=_j)&&(a.kbd=j_?j_:!1);k=k.replace(/(.*?)[\u200b]+$/,"$1").replace(/<!\-\-([\s\S]+?)\-\->/g,"$1").replace(/<ins>([^0-9])<\/ins>/g,"$1").replace(/<(embed|command|col|wbr|img|br|input|hr|area|source|track|keygen|param)(.*?)[\/]?>/g,"<#$1$2/>").replace(/<ins>\s*(\d*[.]?\d*)\s*(<\/ins>)/g,'<ins data-ins="$1"></ins>').replace(/<ins(.*?)>([\s\S]*?)(<\/ins>)/g,function(a,b,c){return"<#ins"+b+">"+c.replace(/<(?!#)/g,"<#")+"<#/ins>"+(c?"":"</ins>")}).replace(/<(del.*?data-del=")(.*?)(".*?)><\/(del>)/g,"<#$1$2$3><#/$4$2</$4").replace(/<del(.*?)>([\s\S]*?)<\/del>/g,function(a,b,c,d){s=(s=c.match(/<s>\s*(.*?)\s*<\/s>/i))&&s[0]?' data-s="'+(s[1]||"1")+'"':"";i=(i=c.match(/data-ins="(.*?)"/))&&i[1]?i[1]:""==s?.25:.75;c=c.replace(/(<s>.*?<\/s>|<[\/]?.*?>)/g,"");return"<del"+b+s+' data-del="'+c.replace(/\n/,"\\n")+'" data-ins="'+i+'">'+("*"!=c?c:"")+"</del>"}).replace(/<(\w+)(.*?)>/g,"<$1$2><#/$1>").replace(/<\/(\w+)>/g,"</> ($1)").replace(/<[#]+/g,"<").replace(/(\/del>)\*</g,"$1<").match(/<ins.*?>[\s\S]*?<\/ins>|<[^<]+\/>|<\/> \(\w+\)|<[\s\S]+?><\/\w+>|&[#x]?[a-z0-9]+;|\r|\n|\t|\S|\s/ig);!e(d)&&(d=k.shift());k.push("\u200b");"de"==a.locale&&(w='12qwertzuiop\u00fc+asdfghjkl\u00f6\u00e4#<yxcvbnm,.-!"\u00a7$%&/(()=?1234567890\u00df*p+');var C=z()+1;!q&&e(a.init,"f")&&a.init(m.parent());var D=setInterval(function(){if(m.parent().data("paused"))u=1;else if(!n){n=!n;if(e(d)){if(0<--d){n=!n;x(.25>=b.data().ins?0:1==u?u=-1:1);return}d=b.data().ins?"</>":k.shift()}else if(a.speed_vary&&~~(4*Math.random())){n=!n;return}x(0);if(b.data().del&&(!0===m.parent().data().beep&&f.beep(),b.data().s&&!d[0]&&b.text(""),r=String(b.data().del),!e(d,"a")&&"/"==d[1]&&(d=r.replace(/\\n/g,"\n").split([])),e(d,"a"))){if(u=d.pop()){b.data().s?b.html(d.join([])+"<mark "+("."==(_=String(b.data().s))[0]?'class="'+_.substr(1)+'"':'style="background:'+("1"==_?"yellow":_.split(",")[0])+((_=_.split(",")[1])?";color:"+_:"")+';"')+">"+b.data().del.substr(d.length)+"</mark>"):b.text(d.join([]));n=!n;return}"*"==r&&(m.wrapInner(c("<"+a.tag+"/>",{"class":"typing-0",style:"display:none;"})),b=b.parent(),q&&(k=c.merge(["<"+a.tag+' class="typing-add"></'+a.tag+">"],k,["</"+a.tag+">"]),b=b.parent()));b=b.parent();"\u200b"==r&&b.find(":last").remove();d=""}for(;"/"==d[1];)b=b.parent(),d=k.shift()||"";for(;;)if(!0===m.parent().data().beep&&f.beep(),b.append(d),A&&a.typing(m.parent(),d,z(),C),!/<ins.*?>[\s\S]+</.test(d)&&/></.test(d)&&(b=b.find(":last")),k[0]&&/<\w+/.test(k[0]))d=k.shift();else break;(d=k.shift())?((a.mistype&&!a.kbd||a.kbd&&/kbd/i.test(b.prop("tagName")))&&d&&!d[1]&&"\u200b"!=b.data().del&&" "!=d&&!~~(Math.random()*a.mistype)&&-1<(__=c.inArray(d.toLowerCase(),w,2))&&(__+=~~(2*Math.random())+1,~~(2*Math.random())&&(__-=3),k=c.merge([90>d.charCodeAt(0)?w[__].toUpperCase():w[__],"</del>",d],k),d='<del data-ins=".25" data-del="\u200b"></del>'),d&&"/"==d[1]&&b.data().ins&&(d=~~(1E3*Number(b.data().ins)/a.speed)),n=!n):(clearInterval(D),m.parent().removeData(["is_typing","paused"]),e(a.repeat)&&--a.repeat,-1<a.repeat?(a.init=!1,m.parent().t(e(l,"o")?a:l,a)):(x(1),e(a.fin,"f")&&a.fin(m.parent())))}},a.speed)})};c.fn.a=function(p){return this.each(function(){c(this).data().t&&c(this).t("add",p)})};c.fn.p=function(p){return this.each(function(){c(this).data().is_typing&&c(this).t("pause",p?!1===p||!0===p?p:void 0:void 0)})};c.fn.b=function(p){return this.each(function(){c(this).t("beep")})}})(jQuery);
diff --git a/assets/scripts/libraries/wow.min.js b/assets/scripts/libraries/wow.min.js
new file mode 100644
index 0000000..2a9cc46
--- /dev/null
+++ b/assets/scripts/libraries/wow.min.js
@@ -0,0 +1,3 @@
+/*! WOW wow.js - v1.3.0 - 2016-10-04
+* https://wowjs.uk
+* Copyright (c) 2016 Thomas Grainger; Licensed MIT */!function(a,b){if("function"==typeof define&&define.amd)define(["module","exports"],b);else if("undefined"!=typeof exports)b(module,exports);else{var c={exports:{}};b(c,c.exports),a.WOW=c.exports}}(this,function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){return b.indexOf(a)>=0}function e(a,b){for(var c in b)if(null==a[c]){var d=b[c];a[c]=d}return a}function f(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)}function g(a){var b=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],c=arguments.length<=2||void 0===arguments[2]?!1:arguments[2],d=arguments.length<=3||void 0===arguments[3]?null:arguments[3],e=void 0;return null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e}function h(a,b){null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)&&a["on"+b]()}function i(a,b,c){null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c}function j(a,b,c){null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]}function k(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight}Object.defineProperty(b,"__esModule",{value:!0});var l,m,n=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),o=window.WeakMap||window.MozWeakMap||function(){function a(){c(this,a),this.keys=[],this.values=[]}return n(a,[{key:"get",value:function(a){for(var b=0;b<this.keys.length;b++){var c=this.keys[b];if(c===a)return this.values[b]}}},{key:"set",value:function(a,b){for(var c=0;c<this.keys.length;c++){var d=this.keys[c];if(d===a)return this.values[c]=b,this}return this.keys.push(a),this.values.push(b),this}}]),a}(),p=window.MutationObserver||window.WebkitMutationObserver||window.MozMutationObserver||(m=l=function(){function a(){c(this,a),"undefined"!=typeof console&&null!==console&&(console.warn("MutationObserver is not supported by your browser."),console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content."))}return n(a,[{key:"observe",value:function(){}}]),a}(),l.notSupported=!0,m),q=window.getComputedStyle||function(a){var b=/(\-([a-z]){1})/g;return{getPropertyValue:function(c){"float"===c&&(c="styleFloat"),b.test(c)&&c.replace(b,function(a,b){return b.toUpperCase()});var d=a.currentStyle;return(null!=d?d[c]:void 0)||null}}},r=function(){function a(){var b=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];c(this,a),this.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null,scrollContainer:null,resetAnimation:!0},this.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),this.vendors=["moz","webkit"],this.start=this.start.bind(this),this.resetAnimation=this.resetAnimation.bind(this),this.scrollHandler=this.scrollHandler.bind(this),this.scrollCallback=this.scrollCallback.bind(this),this.scrolled=!0,this.config=e(b,this.defaults),null!=b.scrollContainer&&(this.config.scrollContainer=document.querySelector(b.scrollContainer)),this.animationNameCache=new o,this.wowEvent=g(this.config.boxClass)}return n(a,[{key:"init",value:function(){this.element=window.document.documentElement,d(document.readyState,["interactive","complete"])?this.start():i(document,"DOMContentLoaded",this.start),this.finished=[]}},{key:"start",value:function(){var a=this;if(this.stopped=!1,this.boxes=[].slice.call(this.element.querySelectorAll("."+this.config.boxClass)),this.all=this.boxes.slice(0),this.boxes.length)if(this.disabled())this.resetStyle();else for(var b=0;b<this.boxes.length;b++){var c=this.boxes[b];this.applyStyle(c,!0)}if(this.disabled()||(i(this.config.scrollContainer||window,"scroll",this.scrollHandler),i(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live){var d=new p(function(b){for(var c=0;c<b.length;c++)for(var d=b[c],e=0;e<d.addedNodes.length;e++){var f=d.addedNodes[e];a.doSync(f)}});d.observe(document.body,{childList:!0,subtree:!0})}}},{key:"stop",value:function(){this.stopped=!0,j(this.config.scrollContainer||window,"scroll",this.scrollHandler),j(window,"resize",this.scrollHandler),null!=this.interval&&clearInterval(this.interval)}},{key:"sync",value:function(){p.notSupported&&this.doSync(this.element)}},{key:"doSync",value:function(a){if("undefined"!=typeof a&&null!==a||(a=this.element),1===a.nodeType){a=a.parentNode||a;for(var b=a.querySelectorAll("."+this.config.boxClass),c=0;c<b.length;c++){var e=b[c];d(e,this.all)||(this.boxes.push(e),this.all.push(e),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(e,!0),this.scrolled=!0)}}}},{key:"show",value:function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),h(a,this.wowEvent),this.config.resetAnimation&&(i(a,"animationend",this.resetAnimation),i(a,"oanimationend",this.resetAnimation),i(a,"webkitAnimationEnd",this.resetAnimation),i(a,"MSAnimationEnd",this.resetAnimation)),a}},{key:"applyStyle",value:function(a,b){var c=this,d=a.getAttribute("data-wow-duration"),e=a.getAttribute("data-wow-delay"),f=a.getAttribute("data-wow-iteration");return this.animate(function(){return c.customStyle(a,b,d,e,f)})}},{key:"resetStyle",value:function(){for(var a=0;a<this.boxes.length;a++){var b=this.boxes[a];b.style.visibility="visible"}}},{key:"resetAnimation",value:function(a){if(a.type.toLowerCase().indexOf("animationend")>=0){var b=a.target||a.srcElement;b.className=b.className.replace(this.config.animateClass,"").trim()}}},{key:"customStyle",value:function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a}},{key:"vendorSet",value:function(a,b){for(var c in b)if(b.hasOwnProperty(c)){var d=b[c];a[""+c]=d;for(var e=0;e<this.vendors.length;e++){var f=this.vendors[e];a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=d}}}},{key:"vendorCSS",value:function(a,b){for(var c=q(a),d=c.getPropertyCSSValue(b),e=0;e<this.vendors.length;e++){var f=this.vendors[e];d=d||c.getPropertyCSSValue("-"+f+"-"+b)}return d}},{key:"animationName",value:function(a){var b=void 0;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=q(a).getPropertyValue("animation-name")}return"none"===b?"":b}},{key:"cacheAnimationName",value:function(a){return this.animationNameCache.set(a,this.animationName(a))}},{key:"cachedAnimationName",value:function(a){return this.animationNameCache.get(a)}},{key:"scrollHandler",value:function(){this.scrolled=!0}},{key:"scrollCallback",value:function(){if(this.scrolled){this.scrolled=!1;for(var a=[],b=0;b<this.boxes.length;b++){var c=this.boxes[b];if(c){if(this.isVisible(c)){this.show(c);continue}a.push(c)}}this.boxes=a,this.boxes.length||this.config.live||this.stop()}}},{key:"offsetTop",value:function(a){for(;void 0===a.offsetTop;)a=a.parentNode;for(var b=a.offsetTop;a.offsetParent;)a=a.offsetParent,b+=a.offsetTop;return b}},{key:"isVisible",value:function(a){var b=a.getAttribute("data-wow-offset")||this.config.offset,c=this.config.scrollContainer&&this.config.scrollContainer.scrollTop||window.pageYOffset,d=c+Math.min(this.element.clientHeight,k())-b,e=this.offsetTop(a),f=e+a.clientHeight;return d>=e&&f>=c}},{key:"disabled",value:function(){return!this.config.mobile&&f(navigator.userAgent)}}]),a}();b["default"]=r,a.exports=b["default"]});
diff --git a/assets/scripts/scroll-indicator.js b/assets/scripts/scroll-indicator.js
new file mode 100644
index 0000000..833c979
--- /dev/null
+++ b/assets/scripts/scroll-indicator.js
@@ -0,0 +1,35 @@
+const counter = document.querySelector('.percent')
+
+TweenLite.set(counter, {
+  xPercent: -5,
+  yPercent: -5
+})
+
+window.addEventListener('mousemove', moveCounter)
+
+function moveCounter (e) {
+  TweenLite.to(counter, 0.5, {
+    x: e.clientX,
+    y: e.clientY
+  })
+}
+
+function progress () {
+  const windowScrollTop = $(window).scrollTop()
+  const docHeight = $(document).height()
+  const windowHeight = $(window).height()
+  const progress = (windowScrollTop / (docHeight - windowHeight)) * 100
+
+  const $bgColor = progress > 99 ? '#fff' : '#fff'
+  const $textColor = progress > 99 ? '#fff' : '#333'
+
+  $('h1')
+    .text(Math.round(progress) + '%')
+    .css({ color: $textColor })
+
+  $('.fill')
+    .height(progress + '%')
+    .css({ backgroundColor: $bgColor })
+}
+progress()
+$(document).on('scroll', progress)
diff --git a/assets/styles/DarkReader.css b/assets/styles/DarkReader.css
new file mode 100644
index 0000000..8b83862
--- /dev/null
+++ b/assets/styles/DarkReader.css
@@ -0,0 +1,2531 @@
+/*
+                        _______
+                       /       \
+                      .==.    .==.
+                     ((  ))==((  ))
+                    / "=="    "=="\
+                   /____|| || ||___\
+       ________     ____    ________  ___    ___
+       |  ___  \   /    \   |  ___  \ |  |  /  /
+       |  |  \  \ /  /\  \  |  |  \  \|  |_/  /
+       |  |   )  /  /__\  \ |  |__/  /|  ___  \
+       |  |__/  /  ______  \|  ____  \|  |  \  \
+_______|_______/__/ ____ \__\__|___\__\__|___\__\____
+|  ___  \ |  ____/ /    \   |  ___  \ |  ____|  ___  \
+|  |  \  \|  |___ /  /\  \  |  |  \  \|  |___|  |  \  \
+|  |__/  /|  ____/  /__\  \ |  |   )  |  ____|  |__/  /
+|  ____  \|  |__/  ______  \|  |__/  /|  |___|  ____  \
+|__|   \__\____/__/      \__\_______/ |______|__|   \__\
+                https://darkreader.org
+*/
+/* User-Agent Style */
+html {
+    background-color: #1b1b1a !important;
+}
+html, body, input, textarea, select, button {
+    background-color: #1b1b1a;
+}
+html, body, input, textarea, select, button {
+    border-color: #7c7260;
+    color: #fff4e0;
+}
+a {
+    color: #5a96d8;
+}
+table {
+    border-color: #5f605b;
+}
+::placeholder {
+    color: #c2b6a1;
+}
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+    background-color: #5b5b16 !important;
+    color: #fff4e0 !important;
+}
+::-webkit-scrollbar {
+    background-color: #242523;
+    color: #baae99;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #4e4e4a;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #62635f;
+}
+::-webkit-scrollbar-thumb:active {
+    background-color: #51524e;
+}
+::-webkit-scrollbar-corner {
+    background-color: #1b1b1a;
+}
+* {
+    scrollbar-color: #242523 #4e4e4a;
+}
+::selection {
+    background-color: #1b4e8a !important;
+    color: #fff4e0 !important;
+}
+::-moz-selection {
+    background-color: #1b4e8a !important;
+    color: #fff4e0 !important;
+}
+
+/* Invert Style */
+.jfk-bubble.gtx-bubble, .captcheck_answer_label > input + img, embed[type="application/pdf"] {
+    filter: invert(100%) hue-rotate(180deg) contrast(90%) sepia(30%) !important;
+}
+
+/* Variables Style */
+:root {
+   --darkreader-neutral-background: #161615;
+   --darkreader-neutral-text: #ede1cd;
+   --darkreader-selection-background: #1b4e8a;
+   --darkreader-selection-text: #fff4e0;
+}
+
+/* Modified CSS */
+html {
+    -webkit-tap-highlight-color: transparent;
+}
+body {
+    color: rgb(230, 218, 197);
+    background-color: rgb(27, 27, 26);
+}
+[tabindex="-1"]:focus {
+    outline-color: initial !important;
+}
+abbr[data-original-title],
+abbr[title] {
+    text-decoration-color: initial;
+    border-bottom-color: initial;
+}
+a {
+    color: rgb(94, 165, 219);
+    text-decoration-color: initial;
+    background-color: transparent;
+}
+a:hover {
+    color: rgb(136, 189, 226);
+    text-decoration-color: initial;
+}
+a:not([href]):not([tabindex]) {
+    color: inherit;
+    text-decoration-color: initial;
+}
+a:not([href]):not([tabindex]):focus,
+a:not([href]):not([tabindex]):hover {
+    color: inherit;
+    text-decoration-color: initial;
+}
+a:not([href]):not([tabindex]):focus {
+    outline-color: initial;
+}
+caption {
+    color: rgb(172, 159, 138);
+}
+button:focus {
+    outline-color: rgb(181, 131, 35);
+}
+fieldset {
+    border-color: initial;
+}
+legend {
+    color: inherit;
+}
+hr {
+    border-right-color: initial;
+    border-bottom-color: initial;
+    border-left-color: initial;
+    border-top-color: rgba(151, 138, 117, 0.1);
+}
+.mark,
+mark {
+    background-color: rgb(64, 56, 19);
+}
+.list-unstyled {
+    list-style-image: initial;
+}
+.list-inline {
+    list-style-image: initial;
+}
+.blockquote-footer {
+    color: rgb(172, 159, 138);
+}
+.img-thumbnail {
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61);
+}
+.figure-caption {
+    color: rgb(172, 159, 138);
+}
+code {
+    color: rgb(216, 99, 140);
+}
+a > code {
+    color: inherit;
+}
+kbd {
+    color: rgb(255, 244, 224);
+    background-color: rgb(32, 32, 30);
+}
+pre {
+    color: rgb(230, 218, 197);
+}
+pre code {
+    color: inherit;
+}
+.table {
+    color: rgb(230, 218, 197);
+}
+.table td,
+.table th {
+    border-top-color: rgb(63, 64, 61);
+}
+.table thead th {
+    border-bottom-color: rgb(63, 64, 61);
+}
+.table tbody + tbody {
+    border-top-color: rgb(63, 64, 61);
+}
+.table-bordered {
+    border-color: rgb(63, 64, 61);
+}
+.table-bordered td,
+.table-bordered th {
+    border-color: rgb(63, 64, 61);
+}
+.table-borderless tbody + tbody,
+.table-borderless td,
+.table-borderless th,
+.table-borderless thead th {
+    border-color: initial;
+}
+.table-striped tbody tr:nth-of-type(2n+1) {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+.table-hover tbody tr:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table-primary,
+.table-primary > td,
+.table-primary > th {
+    background-color: rgb(50, 51, 48);
+}
+.table-primary tbody + tbody,
+.table-primary td,
+.table-primary th,
+.table-primary thead th {
+    border-color: rgb(24, 69, 116);
+}
+.table-hover .table-primary:hover {
+    background-color: rgb(58, 58, 55);
+}
+.table-hover .table-primary:hover > td,
+.table-hover .table-primary:hover > th {
+    background-color: rgb(58, 58, 55);
+}
+.table-secondary,
+.table-secondary > td,
+.table-secondary > th {
+    background-color: rgb(52, 53, 49);
+}
+.table-secondary tbody + tbody,
+.table-secondary td,
+.table-secondary th,
+.table-secondary thead th {
+    border-color: rgb(77, 78, 74);
+}
+.table-hover .table-secondary:hover {
+    background-color: rgb(60, 61, 58);
+}
+.table-hover .table-secondary:hover > td,
+.table-hover .table-secondary:hover > th {
+    background-color: rgb(60, 61, 58);
+}
+.table-success,
+.table-success > td,
+.table-success > th {
+    background-color: rgb(44, 71, 49);
+}
+.table-success tbody + tbody,
+.table-success td,
+.table-success th,
+.table-success thead th {
+    border-color: rgb(63, 103, 63);
+}
+.table-hover .table-success:hover {
+    background-color: rgb(50, 81, 56);
+}
+.table-hover .table-success:hover > td,
+.table-hover .table-success:hover > th {
+    background-color: rgb(50, 81, 56);
+}
+.table-info,
+.table-info > td,
+.table-info > th {
+    background-color: rgb(40, 71, 71);
+}
+.table-info tbody + tbody,
+.table-info td,
+.table-info th,
+.table-info thead th {
+    border-color: rgb(59, 104, 104);
+}
+.table-hover .table-info:hover {
+    background-color: rgb(47, 81, 81);
+}
+.table-hover .table-info:hover > td,
+.table-hover .table-info:hover > th {
+    background-color: rgb(47, 81, 81);
+}
+.table-warning,
+.table-warning > td,
+.table-warning > th {
+    background-color: rgb(91, 73, 19);
+}
+.table-warning tbody + tbody,
+.table-warning td,
+.table-warning th,
+.table-warning thead th {
+    border-color: rgb(140, 111, 28);
+}
+.table-hover .table-warning:hover {
+    background-color: rgb(106, 85, 22);
+}
+.table-hover .table-warning:hover > td,
+.table-hover .table-warning:hover > th {
+    background-color: rgb(106, 85, 22);
+}
+.table-danger,
+.table-danger > td,
+.table-danger > th {
+    background-color: rgb(68, 22, 23);
+}
+.table-danger tbody + tbody,
+.table-danger td,
+.table-danger th,
+.table-danger thead th {
+    border-color: rgb(104, 32, 34);
+}
+.table-hover .table-danger:hover {
+    background-color: rgb(79, 25, 28);
+}
+.table-hover .table-danger:hover > td,
+.table-hover .table-danger:hover > th {
+    background-color: rgb(79, 25, 28);
+}
+.table-light,
+.table-light > td,
+.table-light > th {
+    background-color: rgb(28, 28, 27);
+}
+.table-light tbody + tbody,
+.table-light td,
+.table-light th,
+.table-light thead th {
+    border-color: rgb(55, 56, 53);
+}
+.table-hover .table-light:hover {
+    background-color: rgb(36, 37, 35);
+}
+.table-hover .table-light:hover > td,
+.table-hover .table-light:hover > th {
+    background-color: rgb(36, 37, 35);
+}
+.table-dark,
+.table-dark > td,
+.table-dark > th {
+    background-color: rgb(62, 63, 60);
+}
+.table-dark tbody + tbody,
+.table-dark td,
+.table-dark th,
+.table-dark thead th {
+    border-color: rgb(87, 88, 84);
+}
+.table-hover .table-dark:hover {
+    background-color: rgb(70, 71, 68);
+}
+.table-hover .table-dark:hover > td,
+.table-hover .table-dark:hover > th {
+    background-color: rgb(70, 71, 68);
+}
+.table-active,
+.table-active > td,
+.table-active > th {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table-hover .table-active:hover {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table-hover .table-active:hover > td,
+.table-hover .table-active:hover > th {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+.table .thead-dark th {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(124, 113, 96);
+}
+.table .thead-light th {
+    color: rgb(198, 186, 166);
+    background-color: rgb(40, 40, 38);
+    border-color: rgb(63, 64, 61);
+}
+.table-dark {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+}
+.table-dark td,
+.table-dark th,
+.table-dark thead th {
+    border-color: rgb(124, 113, 96);
+}
+.table-dark.table-bordered {
+    border-color: initial;
+}
+.table-dark.table-striped tbody tr:nth-of-type(2n+1) {
+    background-color: rgba(27, 27, 26, 0.05);
+}
+.table-dark.table-hover tbody tr:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgba(27, 27, 26, 0.07);
+}
+@media (max-width: 575.98px) {
+    .table-responsive-sm > .table-bordered {
+        border-color: initial;
+    }
+}
+@media (max-width: 767.98px) {
+    .table-responsive-md > .table-bordered {
+        border-color: initial;
+    }
+}
+@media (max-width: 991.98px) {
+    .table-responsive-lg > .table-bordered {
+        border-color: initial;
+    }
+}
+@media (max-width: 1199.98px) {
+    .table-responsive-xl > .table-bordered {
+        border-color: initial;
+    }
+}
+.table-responsive > .table-bordered {
+    border-color: initial;
+}
+.form-control {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(68, 69, 66);
+}
+.form-control:focus {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(23, 68, 114);
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.form-control::-webkit-input-placeholder {
+    color: rgb(172, 159, 138);
+}
+.form-control::placeholder {
+    color: rgb(172, 159, 138);
+}
+.form-control:disabled,
+.form-control[readonly] {
+    background-color: rgb(40, 40, 38);
+}
+.form-control-plaintext {
+    color: rgb(230, 218, 197);
+    background-color: transparent;
+    border-color: transparent;
+}
+.form-check-input:disabled ~ .form-check-label {
+    color: rgb(172, 159, 138);
+}
+.valid-feedback {
+    color: rgb(136, 213, 134);
+}
+.valid-tooltip {
+    color: rgb(255, 244, 224);
+    background-color: rgba(60, 127, 65, 0.9);
+}
+.form-control.is-valid,
+.was-validated .form-control:valid {
+    border-color: rgb(70, 148, 75);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+}
+.form-control.is-valid:focus,
+.was-validated .form-control:valid:focus {
+    border-color: rgb(70, 148, 75);
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-select.is-valid,
+.was-validated .custom-select:valid {
+    border-color: rgb(70, 148, 75);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-color: rgb(27, 27, 26);
+}
+.custom-select.is-valid:focus,
+.was-validated .custom-select:valid:focus {
+    border-color: rgb(70, 148, 75);
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.form-check-input.is-valid ~ .form-check-label,
+.was-validated .form-check-input:valid ~ .form-check-label {
+    color: rgb(136, 213, 134);
+}
+.custom-control-input.is-valid ~ .custom-control-label,
+.was-validated .custom-control-input:valid ~ .custom-control-label {
+    color: rgb(136, 213, 134);
+}
+.custom-control-input.is-valid ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid ~ .custom-control-label::before {
+    border-color: rgb(70, 148, 75);
+}
+.custom-control-input.is-valid:checked ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before {
+    border-color: rgb(65, 136, 69);
+    background-color: rgb(75, 156, 97);
+}
+.custom-control-input.is-valid:focus ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before {
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before,
+.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: rgb(70, 148, 75);
+}
+.custom-file-input.is-valid ~ .custom-file-label,
+.was-validated .custom-file-input:valid ~ .custom-file-label {
+    border-color: rgb(70, 148, 75);
+}
+.custom-file-input.is-valid:focus ~ .custom-file-label,
+.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
+    border-color: rgb(70, 148, 75);
+    box-shadow: rgba(60, 127, 65, 0.25) 0px 0px 0px 0.2rem;
+}
+.invalid-feedback {
+    color: rgb(203, 91, 92);
+}
+.invalid-tooltip {
+    color: rgb(255, 244, 224);
+    background-color: rgba(144, 46, 49, 0.9);
+}
+.form-control.is-invalid,
+.was-validated .form-control:invalid {
+    border-color: rgb(129, 41, 44);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+}
+.form-control.is-invalid:focus,
+.was-validated .form-control:invalid:focus {
+    border-color: rgb(129, 41, 44);
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-select.is-invalid,
+.was-validated .custom-select:invalid {
+    border-color: rgb(129, 41, 44);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+    background-color: rgb(27, 27, 26);
+}
+.custom-select.is-invalid:focus,
+.was-validated .custom-select:invalid:focus {
+    border-color: rgb(129, 41, 44);
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.form-check-input.is-invalid ~ .form-check-label,
+.was-validated .form-check-input:invalid ~ .form-check-label {
+    color: rgb(203, 91, 92);
+}
+.custom-control-input.is-invalid ~ .custom-control-label,
+.was-validated .custom-control-input:invalid ~ .custom-control-label {
+    color: rgb(203, 91, 92);
+}
+.custom-control-input.is-invalid ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
+    border-color: rgb(129, 41, 44);
+}
+.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before {
+    border-color: rgb(118, 37, 40);
+    background-color: rgb(121, 38, 41);
+}
+.custom-control-input.is-invalid:focus ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before {
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before,
+.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: rgb(129, 41, 44);
+}
+.custom-file-input.is-invalid ~ .custom-file-label,
+.was-validated .custom-file-input:invalid ~ .custom-file-label {
+    border-color: rgb(129, 41, 44);
+}
+.custom-file-input.is-invalid:focus ~ .custom-file-label,
+.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
+    border-color: rgb(129, 41, 44);
+    box-shadow: rgba(144, 46, 49, 0.25) 0px 0px 0px 0.2rem;
+}
+.btn {
+    color: rgb(230, 218, 197);
+    background-color: transparent;
+    border-color: transparent;
+}
+.btn:hover {
+    color: rgb(230, 218, 197);
+    text-decoration-color: initial;
+}
+.btn.focus,
+.btn:focus {
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.btn-primary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(29, 85, 142);
+    border-color: rgb(32, 94, 158);
+}
+.btn-primary.focus,
+.btn-primary:focus {
+    box-shadow: rgba(31, 89, 148, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-primary.disabled,
+.btn-primary:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-primary:not(:disabled):not(.disabled).active,
+.btn-primary:not(:disabled):not(.disabled):active,
+.show > .btn-primary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 79, 133);
+    border-color: rgb(33, 96, 162);
+}
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+    box-shadow: rgba(31, 89, 148, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-secondary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-secondary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(83, 83, 79);
+    border-color: rgb(119, 108, 92);
+}
+.btn-secondary.focus,
+.btn-secondary:focus {
+    box-shadow: rgba(102, 103, 98, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-secondary.disabled,
+.btn-secondary:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-secondary:not(:disabled):not(.disabled).active,
+.btn-secondary:not(:disabled):not(.disabled):active,
+.show > .btn-secondary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(78, 78, 74);
+    border-color: rgb(121, 111, 94);
+}
+.btn-secondary:not(:disabled):not(.disabled).active:focus,
+.btn-secondary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-secondary.dropdown-toggle:focus {
+    box-shadow: rgba(102, 103, 98, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-success {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-success:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(49, 104, 53);
+    border-color: rgb(75, 160, 81);
+}
+.btn-success.focus,
+.btn-success:focus {
+    box-shadow: rgba(85, 140, 85, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-success.disabled,
+.btn-success:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-success:not(:disabled):not(.disabled).active,
+.btn-success:not(:disabled):not(.disabled):active,
+.show > .btn-success.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(45, 96, 49);
+    border-color: rgb(77, 163, 83);
+}
+.btn-success:not(:disabled):not(.disabled).active:focus,
+.btn-success:not(:disabled):not(.disabled):active:focus,
+.show > .btn-success.dropdown-toggle:focus {
+    box-shadow: rgba(85, 140, 85, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-info {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-info:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(44, 104, 107);
+    border-color: rgb(67, 159, 165);
+}
+.btn-info.focus,
+.btn-info:focus {
+    box-shadow: rgba(79, 140, 142, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-info.disabled,
+.btn-info:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-info:not(:disabled):not(.disabled).active,
+.btn-info:not(:disabled):not(.disabled):active,
+.show > .btn-info.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(40, 96, 99);
+    border-color: rgb(69, 162, 168);
+}
+.btn-info:not(:disabled):not(.disabled).active:focus,
+.btn-info:not(:disabled):not(.disabled):active:focus,
+.show > .btn-info.dropdown-toggle:focus {
+    box-shadow: rgba(79, 140, 142, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-warning {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-warning:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(177, 140, 36);
+    border-color: rgb(190, 151, 39);
+}
+.btn-warning.focus,
+.btn-warning:focus {
+    box-shadow: rgba(178, 142, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-warning.disabled,
+.btn-warning:disabled {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-warning:not(:disabled):not(.disabled).active,
+.btn-warning:not(:disabled):not(.disabled):active,
+.show > .btn-warning.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(167, 132, 34);
+    border-color: rgb(194, 154, 40);
+}
+.btn-warning:not(:disabled):not(.disabled).active:focus,
+.btn-warning:not(:disabled):not(.disabled):active:focus,
+.show > .btn-warning.dropdown-toggle:focus {
+    box-shadow: rgba(178, 142, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-danger {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-danger:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(140, 44, 48);
+    border-color: rgb(140, 44, 48);
+}
+.btn-danger.focus,
+.btn-danger:focus {
+    box-shadow: rgba(128, 41, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-danger.disabled,
+.btn-danger:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-danger:not(:disabled):not(.disabled).active,
+.btn-danger:not(:disabled):not(.disabled):active,
+.show > .btn-danger.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(132, 41, 45);
+    border-color: rgb(143, 46, 48);
+}
+.btn-danger:not(:disabled):not(.disabled).active:focus,
+.btn-danger:not(:disabled):not(.disabled):active:focus,
+.show > .btn-danger.dropdown-toggle:focus {
+    box-shadow: rgba(128, 41, 44, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-light {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-light:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(43, 43, 41);
+    border-color: rgb(65, 65, 62);
+}
+.btn-light.focus,
+.btn-light:focus {
+    box-shadow: rgba(51, 52, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-light.disabled,
+.btn-light:disabled {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-light:not(:disabled):not(.disabled).active,
+.btn-light:not(:disabled):not(.disabled):active,
+.show > .btn-light.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(47, 48, 45);
+    border-color: rgb(67, 67, 64);
+}
+.btn-light:not(:disabled):not(.disabled).active:focus,
+.btn-light:not(:disabled):not(.disabled):active:focus,
+.show > .btn-light.dropdown-toggle:focus {
+    box-shadow: rgba(51, 52, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-dark {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-dark:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(33, 34, 32);
+    border-color: rgb(139, 128, 108);
+}
+.btn-dark.focus,
+.btn-dark:focus {
+    box-shadow: rgba(75, 75, 71, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-dark.disabled,
+.btn-dark:disabled {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-dark:not(:disabled):not(.disabled).active,
+.btn-dark:not(:disabled):not(.disabled):active,
+.show > .btn-dark.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 28, 27);
+    border-color: rgb(141, 130, 110);
+}
+.btn-dark:not(:disabled):not(.disabled).active:focus,
+.btn-dark:not(:disabled):not(.disabled):active:focus,
+.show > .btn-dark.dropdown-toggle:focus {
+    box-shadow: rgba(75, 75, 71, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-primary {
+    color: rgb(94, 165, 219);
+    border-color: rgb(30, 87, 146);
+}
+.btn-outline-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-outline-primary.focus,
+.btn-outline-primary:focus {
+    box-shadow: rgba(34, 99, 167, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-primary.disabled,
+.btn-outline-primary:disabled {
+    color: rgb(94, 165, 219);
+    background-color: transparent;
+}
+.btn-outline-primary:not(:disabled):not(.disabled).active,
+.btn-outline-primary:not(:disabled):not(.disabled):active,
+.show > .btn-outline-primary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+    box-shadow: rgba(34, 99, 167, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-secondary {
+    color: rgb(172, 159, 138);
+    border-color: rgb(110, 100, 85);
+}
+.btn-outline-secondary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-outline-secondary.focus,
+.btn-outline-secondary:focus {
+    box-shadow: rgba(100, 100, 96, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-secondary.disabled,
+.btn-outline-secondary:disabled {
+    color: rgb(172, 159, 138);
+    background-color: transparent;
+}
+.btn-outline-secondary:not(:disabled):not(.disabled).active,
+.btn-outline-secondary:not(:disabled):not(.disabled):active,
+.show > .btn-outline-secondary.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+    border-color: rgb(110, 100, 85);
+}
+.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+    box-shadow: rgba(100, 100, 96, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-success {
+    color: rgb(136, 213, 134);
+    border-color: rgb(70, 148, 75);
+}
+.btn-outline-success:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-outline-success.focus,
+.btn-outline-success:focus {
+    box-shadow: rgba(60, 127, 65, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-success.disabled,
+.btn-outline-success:disabled {
+    color: rgb(136, 213, 134);
+    background-color: transparent;
+}
+.btn-outline-success:not(:disabled):not(.disabled).active,
+.btn-outline-success:not(:disabled):not(.disabled):active,
+.show > .btn-outline-success.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+    border-color: rgb(70, 148, 75);
+}
+.btn-outline-success:not(:disabled):not(.disabled).active:focus,
+.btn-outline-success:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-success.dropdown-toggle:focus {
+    box-shadow: rgba(60, 127, 65, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-info {
+    color: rgb(128, 212, 213);
+    border-color: rgb(62, 148, 152);
+}
+.btn-outline-info:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-outline-info.focus,
+.btn-outline-info:focus {
+    box-shadow: rgba(53, 127, 131, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-info.disabled,
+.btn-outline-info:disabled {
+    color: rgb(128, 212, 213);
+    background-color: transparent;
+}
+.btn-outline-info:not(:disabled):not(.disabled).active,
+.btn-outline-info:not(:disabled):not(.disabled):active,
+.show > .btn-outline-info.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+    border-color: rgb(62, 148, 152);
+}
+.btn-outline-info:not(:disabled):not(.disabled).active:focus,
+.btn-outline-info:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-info.dropdown-toggle:focus {
+    box-shadow: rgba(53, 127, 131, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-warning {
+    color: rgb(255, 208, 75);
+    border-color: rgb(174, 138, 36);
+}
+.btn-outline-warning:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-outline-warning.focus,
+.btn-outline-warning:focus {
+    box-shadow: rgba(198, 157, 40, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-warning.disabled,
+.btn-outline-warning:disabled {
+    color: rgb(255, 208, 75);
+    background-color: transparent;
+}
+.btn-outline-warning:not(:disabled):not(.disabled).active,
+.btn-outline-warning:not(:disabled):not(.disabled):active,
+.show > .btn-outline-warning.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+    border-color: rgb(174, 138, 36);
+}
+.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
+.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-warning.dropdown-toggle:focus {
+    box-shadow: rgba(198, 157, 40, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-danger {
+    color: rgb(203, 91, 92);
+    border-color: rgb(129, 41, 44);
+}
+.btn-outline-danger:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-outline-danger.focus,
+.btn-outline-danger:focus {
+    box-shadow: rgba(144, 46, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-danger.disabled,
+.btn-outline-danger:disabled {
+    color: rgb(203, 91, 92);
+    background-color: transparent;
+}
+.btn-outline-danger:not(:disabled):not(.disabled).active,
+.btn-outline-danger:not(:disabled):not(.disabled):active,
+.show > .btn-outline-danger.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+    border-color: rgb(129, 41, 44);
+}
+.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
+.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-danger.dropdown-toggle:focus {
+    box-shadow: rgba(144, 46, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-light {
+    color: rgb(251, 240, 219);
+    border-color: rgb(57, 57, 54);
+}
+.btn-outline-light:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-outline-light.focus,
+.btn-outline-light:focus {
+    box-shadow: rgba(31, 32, 30, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-light.disabled,
+.btn-outline-light:disabled {
+    color: rgb(251, 240, 219);
+    background-color: transparent;
+}
+.btn-outline-light:not(:disabled):not(.disabled).active,
+.btn-outline-light:not(:disabled):not(.disabled):active,
+.show > .btn-outline-light.dropdown-toggle {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+    border-color: rgb(57, 57, 54);
+}
+.btn-outline-light:not(:disabled):not(.disabled).active:focus,
+.btn-outline-light:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-light.dropdown-toggle:focus {
+    box-shadow: rgba(31, 32, 30, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-dark {
+    color: rgb(214, 202, 181);
+    border-color: rgb(130, 119, 101);
+}
+.btn-outline-dark:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-outline-dark.focus,
+.btn-outline-dark:focus {
+    box-shadow: rgba(50, 50, 47, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-outline-dark.disabled,
+.btn-outline-dark:disabled {
+    color: rgb(214, 202, 181);
+    background-color: transparent;
+}
+.btn-outline-dark:not(:disabled):not(.disabled).active,
+.btn-outline-dark:not(:disabled):not(.disabled):active,
+.show > .btn-outline-dark.dropdown-toggle {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+    border-color: rgb(130, 119, 101);
+}
+.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
+.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
+.show > .btn-outline-dark.dropdown-toggle:focus {
+    box-shadow: rgba(50, 50, 47, 0.5) 0px 0px 0px 0.2rem;
+}
+.btn-link {
+    color: rgb(94, 165, 219);
+    text-decoration-color: initial;
+}
+.btn-link:hover {
+    color: rgb(136, 189, 226);
+    text-decoration-color: initial;
+}
+.btn-link.focus,
+.btn-link:focus {
+    text-decoration-color: initial;
+    box-shadow: none;
+}
+.btn-link.disabled,
+.btn-link:disabled {
+    color: rgb(172, 159, 138);
+}
+.dropdown-toggle::after {
+    border-top-color: initial;
+    border-right-color: transparent;
+    border-bottom-color: initial;
+    border-left-color: transparent;
+}
+.dropdown-menu {
+    color: rgb(230, 218, 197);
+    list-style-image: initial;
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.15);
+}
+.dropup .dropdown-toggle::after {
+    border-top-color: initial;
+    border-right-color: transparent;
+    border-bottom-color: initial;
+    border-left-color: transparent;
+}
+.dropright .dropdown-toggle::after {
+    border-top-color: transparent;
+    border-right-color: initial;
+    border-bottom-color: transparent;
+    border-left-color: initial;
+}
+.dropleft .dropdown-toggle::before {
+    border-top-color: transparent;
+    border-right-color: initial;
+    border-bottom-color: transparent;
+}
+.dropdown-divider {
+    border-top-color: rgb(60, 61, 58);
+}
+.dropdown-item {
+    color: rgb(230, 218, 197);
+    background-color: transparent;
+    border-color: initial;
+}
+.dropdown-item:focus,
+.dropdown-item:hover {
+    color: rgb(238, 226, 206);
+    text-decoration-color: initial;
+    background-color: rgb(31, 32, 30);
+}
+.dropdown-item.active,
+.dropdown-item:active {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+    background-color: rgb(34, 99, 167);
+}
+.dropdown-item.disabled,
+.dropdown-item:disabled {
+    color: rgb(172, 159, 138);
+    background-color: transparent;
+}
+.dropdown-header {
+    color: rgb(172, 159, 138);
+}
+.dropdown-item-text {
+    color: rgb(230, 218, 197);
+}
+.input-group-text {
+    color: rgb(198, 186, 166);
+    background-color: rgb(40, 40, 38);
+    border-color: rgb(68, 69, 66);
+}
+.custom-control-input:checked ~ .custom-control-label::before {
+    color: rgb(255, 244, 224);
+    border-color: rgb(30, 87, 146);
+    background-color: rgb(34, 99, 167);
+}
+.custom-control-input:focus ~ .custom-control-label::before {
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: rgb(23, 68, 114);
+}
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+    color: rgb(255, 244, 224);
+    background-color: rgb(51, 52, 49);
+    border-color: rgb(21, 60, 102);
+}
+.custom-control-input:disabled ~ .custom-control-label {
+    color: rgb(172, 159, 138);
+}
+.custom-control-input:disabled ~ .custom-control-label::before {
+    background-color: rgb(40, 40, 38);
+}
+.custom-control-label::before {
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(78, 79, 75);
+}
+.custom-control-label::after {
+    background-image: initial;
+    background-color: initial;
+}
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+}
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
+    border-color: rgb(30, 87, 146);
+    background-color: rgb(34, 99, 167);
+}
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
+}
+.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+}
+.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-switch .custom-control-label::after {
+    background-color: rgb(75, 75, 71);
+}
+.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+    background-color: rgb(27, 27, 26);
+}
+.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
+    background-color: rgba(34, 99, 167, 0.5);
+}
+.custom-select {
+    color: rgb(198, 186, 166);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(68, 69, 66);
+}
+.custom-select:focus {
+    border-color: rgb(23, 68, 114);
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-select[multiple],
+.custom-select[size]:not([size="1"]) {
+    background-image: none;
+}
+.custom-select:disabled {
+    color: rgb(172, 159, 138);
+    background-color: rgb(40, 40, 38);
+}
+.custom-file-input:focus ~ .custom-file-label {
+    border-color: rgb(23, 68, 114);
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-file-input:disabled ~ .custom-file-label {
+    background-color: rgb(40, 40, 38);
+}
+.custom-file-label {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(68, 69, 66);
+}
+.custom-file-label::after {
+    color: rgb(198, 186, 166);
+    background-color: rgb(40, 40, 38);
+    border-left-color: inherit;
+}
+.custom-range {
+    background-color: transparent;
+}
+.custom-range:focus {
+    outline-color: initial;
+}
+.custom-range:focus::-webkit-slider-thumb {
+    box-shadow: rgb(27, 27, 26) 0px 0px 0px 1px,
+    rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.custom-range::-webkit-slider-thumb {
+    background-color: rgb(34, 99, 167);
+    border-color: initial;
+}
+.custom-range::-webkit-slider-thumb:active {
+    background-color: rgb(51, 52, 49);
+}
+.custom-range::-webkit-slider-runnable-track {
+    color: transparent;
+    background-color: rgb(45, 46, 44);
+    border-color: transparent;
+}
+.custom-range:disabled::-webkit-slider-thumb {
+    background-color: rgb(75, 75, 71);
+}
+.nav {
+    list-style-image: initial;
+}
+.nav-link:focus,
+.nav-link:hover {
+    text-decoration-color: initial;
+}
+.nav-link.disabled {
+    color: rgb(172, 159, 138);
+}
+.nav-tabs {
+    border-bottom-color: rgb(63, 64, 61);
+}
+.nav-tabs .nav-link {
+    border-color: transparent;
+}
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link:hover {
+    border-color: rgb(60, 61, 58) rgb(60, 61, 58) rgb(63, 64, 61);
+}
+.nav-tabs .nav-link.disabled {
+    color: rgb(172, 159, 138);
+    background-color: transparent;
+    border-color: transparent;
+}
+.nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+    color: rgb(198, 186, 166);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61) rgb(63, 64, 61) rgb(54, 55, 52);
+}
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+}
+.navbar-brand:focus,
+.navbar-brand:hover {
+    text-decoration-color: initial;
+}
+.navbar-nav {
+    list-style-image: initial;
+}
+.navbar-toggler {
+    background-color: transparent;
+    border-color: transparent;
+}
+.navbar-toggler:focus,
+.navbar-toggler:hover {
+    text-decoration-color: initial;
+}
+.navbar-toggler-icon {
+    background-image: initial;
+    background-color: initial;
+}
+.navbar-light .navbar-brand {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-brand:focus,
+.navbar-light .navbar-brand:hover {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-nav .nav-link {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+    color: rgba(255, 244, 224, 0.7);
+}
+.navbar-light .navbar-nav .nav-link.disabled {
+    color: rgba(255, 244, 224, 0.3);
+}
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link.active,
+.navbar-light .navbar-nav .nav-link.show,
+.navbar-light .navbar-nav .show > .nav-link {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-toggler {
+    color: rgba(255, 244, 224, 0.5);
+    border-color: rgba(151, 138, 117, 0.1);
+}
+.navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml, %3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-light .navbar-text {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-light .navbar-text a {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-light .navbar-text a:focus,
+.navbar-light .navbar-text a:hover {
+    color: rgba(255, 244, 224, 0.9);
+}
+.navbar-dark .navbar-brand {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-brand:focus,
+.navbar-dark .navbar-brand:hover {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-dark .navbar-nav .nav-link:focus,
+.navbar-dark .navbar-nav .nav-link:hover {
+    color: rgba(255, 244, 224, 0.75);
+}
+.navbar-dark .navbar-nav .nav-link.disabled {
+    color: rgba(255, 244, 224, 0.25);
+}
+.navbar-dark .navbar-nav .active > .nav-link,
+.navbar-dark .navbar-nav .nav-link.active,
+.navbar-dark .navbar-nav .nav-link.show,
+.navbar-dark .navbar-nav .show > .nav-link {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-toggler {
+    color: rgba(255, 244, 224, 0.5);
+    border-color: rgba(54, 55, 52, 0.1);
+}
+.navbar-dark .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml, %3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar-dark .navbar-text {
+    color: rgba(255, 244, 224, 0.5);
+}
+.navbar-dark .navbar-text a {
+    color: rgb(255, 244, 224);
+}
+.navbar-dark .navbar-text a:focus,
+.navbar-dark .navbar-text a:hover {
+    color: rgb(255, 244, 224);
+}
+.card {
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.13);
+}
+.card-link:hover {
+    text-decoration-color: initial;
+}
+.card-header {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-bottom-color: rgba(151, 138, 117, 0.13);
+}
+.card-header + .list-group .list-group-item:first-child {
+    border-top-color: initial;
+}
+.card-footer {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-top-color: rgba(151, 138, 117, 0.13);
+}
+.card-header-tabs {
+    border-bottom-color: initial;
+}
+@media (min-width: 576px) {
+    .card-group > .card + .card {
+        border-left-color: initial;
+    }
+}
+.accordion > .card:not(:first-of-type):not(:last-of-type) {
+    border-bottom-color: initial;
+}
+.accordion > .card:first-of-type {
+    border-bottom-color: initial;
+}
+.breadcrumb {
+    list-style-image: initial;
+    background-color: rgb(40, 40, 38);
+}
+.breadcrumb-item + .breadcrumb-item::before {
+    color: rgb(172, 159, 138);
+}
+.breadcrumb-item + .breadcrumb-item:hover::before {
+    text-decoration-color: initial;
+}
+.breadcrumb-item + .breadcrumb-item:hover::before {
+    text-decoration-color: initial;
+}
+.breadcrumb-item.active {
+    color: rgb(172, 159, 138);
+}
+.pagination {
+    list-style-image: initial;
+}
+.page-link {
+    color: rgb(94, 165, 219);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61);
+}
+.page-link:hover {
+    color: rgb(136, 189, 226);
+    text-decoration-color: initial;
+    background-color: rgb(40, 40, 38);
+    border-color: rgb(63, 64, 61);
+}
+.page-link:focus {
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.25) 0px 0px 0px 0.2rem;
+}
+.page-item.active .page-link {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.page-item.disabled .page-link {
+    color: rgb(172, 159, 138);
+    background-color: rgb(27, 27, 26);
+    border-color: rgb(63, 64, 61);
+}
+a.badge:focus,
+a.badge:hover {
+    text-decoration-color: initial;
+}
+.badge-primary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+}
+a.badge-primary:focus,
+a.badge-primary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 79, 133);
+}
+a.badge-primary.focus,
+a.badge-primary:focus {
+    outline-color: initial;
+    box-shadow: rgba(34, 99, 167, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-secondary {
+    color: rgb(255, 244, 224);
+    background-color: rgb(100, 100, 96);
+}
+a.badge-secondary:focus,
+a.badge-secondary:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(78, 78, 74);
+}
+a.badge-secondary.focus,
+a.badge-secondary:focus {
+    outline-color: initial;
+    box-shadow: rgba(100, 100, 96, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-success {
+    color: rgb(255, 244, 224);
+    background-color: rgb(60, 127, 65);
+}
+a.badge-success:focus,
+a.badge-success:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(45, 96, 49);
+}
+a.badge-success.focus,
+a.badge-success:focus {
+    outline-color: initial;
+    box-shadow: rgba(60, 127, 65, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-info {
+    color: rgb(255, 244, 224);
+    background-color: rgb(53, 127, 131);
+}
+a.badge-info:focus,
+a.badge-info:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(40, 96, 99);
+}
+a.badge-info.focus,
+a.badge-info:focus {
+    outline-color: initial;
+    box-shadow: rgba(53, 127, 131, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-warning {
+    color: rgb(230, 218, 197);
+    background-color: rgb(198, 157, 40);
+}
+a.badge-warning:focus,
+a.badge-warning:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(167, 132, 34);
+}
+a.badge-warning.focus,
+a.badge-warning:focus {
+    outline-color: initial;
+    box-shadow: rgba(198, 157, 40, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-danger {
+    color: rgb(255, 244, 224);
+    background-color: rgb(144, 46, 49);
+}
+a.badge-danger:focus,
+a.badge-danger:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(132, 41, 45);
+}
+a.badge-danger.focus,
+a.badge-danger:focus {
+    outline-color: initial;
+    box-shadow: rgba(144, 46, 49, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-light {
+    color: rgb(230, 218, 197);
+    background-color: rgb(31, 32, 30);
+}
+a.badge-light:focus,
+a.badge-light:hover {
+    color: rgb(230, 218, 197);
+    background-color: rgb(47, 48, 45);
+}
+a.badge-light.focus,
+a.badge-light:focus {
+    outline-color: initial;
+    box-shadow: rgba(31, 32, 30, 0.5) 0px 0px 0px 0.2rem;
+}
+.badge-dark {
+    color: rgb(255, 244, 224);
+    background-color: rgb(50, 50, 47);
+}
+a.badge-dark:focus,
+a.badge-dark:hover {
+    color: rgb(255, 244, 224);
+    background-color: rgb(27, 28, 27);
+}
+a.badge-dark.focus,
+a.badge-dark:focus {
+    outline-color: initial;
+    box-shadow: rgba(50, 50, 47, 0.5) 0px 0px 0px 0.2rem;
+}
+.jumbotron {
+    background-color: rgb(40, 40, 38);
+}
+.alert {
+    border-color: transparent;
+}
+.alert-heading {
+    color: inherit;
+}
+.alert-dismissible .close {
+    color: inherit;
+}
+.alert-primary {
+    color: rgb(161, 202, 230);
+    background-color: rgb(43, 44, 42);
+    border-color: rgb(21, 60, 100);
+}
+.alert-primary hr {
+    border-top-color: rgb(22, 64, 107);
+}
+.alert-primary .alert-link {
+    color: rgb(226, 214, 193);
+}
+.alert-secondary {
+    color: rgb(212, 200, 179);
+    background-color: rgb(45, 45, 43);
+    border-color: rgb(67, 67, 64);
+}
+.alert-secondary hr {
+    border-top-color: rgb(71, 72, 68);
+}
+.alert-secondary .alert-link {
+    color: rgb(231, 219, 198);
+}
+.alert-success {
+    color: rgb(188, 233, 176);
+    background-color: rgb(38, 61, 42);
+    border-color: rgb(54, 88, 54);
+}
+.alert-success hr {
+    border-top-color: rgb(57, 94, 57);
+}
+.alert-success .alert-link {
+    color: rgb(235, 223, 203);
+}
+.alert-info {
+    color: rgb(182, 233, 226);
+    background-color: rgb(34, 59, 61);
+    border-color: rgb(51, 89, 88);
+}
+.alert-info hr {
+    border-top-color: rgb(53, 93, 94);
+}
+.alert-info .alert-link {
+    color: rgb(235, 223, 203);
+}
+.alert-warning {
+    color: rgb(255, 227, 138);
+    background-color: rgb(81, 65, 17);
+    border-color: rgb(122, 96, 25);
+}
+.alert-warning hr {
+    border-top-color: rgb(129, 102, 26);
+}
+.alert-warning .alert-link {
+    color: rgb(225, 212, 192);
+}
+.alert-danger {
+    color: rgb(223, 152, 146);
+    background-color: rgb(59, 19, 20);
+    border-color: rgb(91, 29, 31);
+}
+.alert-danger hr {
+    border-top-color: rgb(96, 31, 34);
+}
+.alert-danger .alert-link {
+    color: rgb(223, 211, 190);
+}
+.alert-light {
+    color: rgb(166, 153, 132);
+    background-color: rgb(28, 28, 27);
+    border-color: rgb(40, 38, 59);
+}
+.alert-light hr {
+    border-top-color: rgb(41, 39, 64);
+}
+.alert-light .alert-link {
+    color: rgb(181, 169, 148);
+}
+.alert-dark {
+    color: rgb(234, 222, 202);
+    background-color: rgb(52, 53, 50);
+    border-color: rgb(72, 73, 69);
+}
+.alert-dark hr {
+    border-top-color: rgb(76, 77, 73);
+}
+.alert-dark .alert-link {
+    color: rgb(252, 241, 221);
+}
+.progress {
+    background-color: rgb(40, 40, 38);
+}
+.progress-bar {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+}
+.progress-bar-striped {
+    background-image: linear-gradient(45deg,
+    rgba(27, 27, 26, 0.15) 25%,
+    rgba(0, 0, 0, 0) 25%,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(27, 27, 26, 0.15) 50%,
+    rgba(27, 27, 26, 0.15) 75%,
+    rgba(0, 0, 0, 0) 75%,
+    rgba(0, 0, 0, 0));
+}
+.list-group-item-action {
+    color: rgb(198, 186, 166);
+}
+.list-group-item-action:focus,
+.list-group-item-action:hover {
+    color: rgb(198, 186, 166);
+    text-decoration-color: initial;
+    background-color: rgb(31, 32, 30);
+}
+.list-group-item-action:active {
+    color: rgb(230, 218, 197);
+    background-color: rgb(40, 40, 38);
+}
+.list-group-item {
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.13);
+}
+.list-group-item.disabled,
+.list-group-item:disabled {
+    color: rgb(172, 159, 138);
+    background-color: rgb(27, 27, 26);
+}
+.list-group-item.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(34, 99, 167);
+    border-color: rgb(30, 87, 146);
+}
+.list-group-flush .list-group-item {
+    border-right-color: initial;
+    border-left-color: initial;
+}
+.list-group-flush:first-child .list-group-item:first-child {
+    border-top-color: initial;
+}
+.list-group-flush:last-child .list-group-item:last-child {
+    border-bottom-color: initial;
+}
+.list-group-item-primary {
+    color: rgb(161, 202, 230);
+    background-color: rgb(50, 51, 48);
+}
+.list-group-item-primary.list-group-item-action:focus,
+.list-group-item-primary.list-group-item-action:hover {
+    color: rgb(161, 202, 230);
+    background-color: rgb(58, 58, 55);
+}
+.list-group-item-primary.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(18, 52, 87);
+    border-color: rgb(36, 105, 176);
+}
+.list-group-item-secondary {
+    color: rgb(212, 200, 179);
+    background-color: rgb(52, 53, 49);
+}
+.list-group-item-secondary.list-group-item-action:focus,
+.list-group-item-secondary.list-group-item-action:hover {
+    color: rgb(212, 200, 179);
+    background-color: rgb(60, 61, 58);
+}
+.list-group-item-secondary.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(52, 52, 49);
+    border-color: rgb(129, 118, 101);
+}
+.list-group-item-success {
+    color: rgb(188, 233, 176);
+    background-color: rgb(44, 71, 49);
+}
+.list-group-item-success.list-group-item-action:focus,
+.list-group-item-success.list-group-item-action:hover {
+    color: rgb(188, 233, 176);
+    background-color: rgb(50, 81, 56);
+}
+.list-group-item-success.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(32, 67, 34);
+    border-color: rgb(81, 170, 87);
+}
+.list-group-item-info {
+    color: rgb(182, 233, 226);
+    background-color: rgb(40, 71, 71);
+}
+.list-group-item-info.list-group-item-action:focus,
+.list-group-item-info.list-group-item-action:hover {
+    color: rgb(182, 233, 226);
+    background-color: rgb(47, 81, 81);
+}
+.list-group-item-info.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(28, 66, 68);
+    border-color: rgb(72, 169, 176);
+}
+.list-group-item-warning {
+    color: rgb(255, 227, 138);
+    background-color: rgb(91, 73, 19);
+}
+.list-group-item-warning.list-group-item-action:focus,
+.list-group-item-warning.list-group-item-action:hover {
+    color: rgb(255, 227, 138);
+    background-color: rgb(106, 85, 22);
+}
+.list-group-item-warning.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(105, 84, 24);
+    border-color: rgb(206, 163, 46);
+}
+.list-group-item-danger {
+    color: rgb(223, 152, 146);
+    background-color: rgb(68, 22, 23);
+}
+.list-group-item-danger.list-group-item-action:focus,
+.list-group-item-danger.list-group-item-action:hover {
+    color: rgb(223, 152, 146);
+    background-color: rgb(79, 25, 28);
+}
+.list-group-item-danger.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(81, 31, 32);
+    border-color: rgb(153, 59, 61);
+}
+.list-group-item-light {
+    color: rgb(166, 153, 132);
+    background-color: rgb(28, 28, 27);
+}
+.list-group-item-light.list-group-item-action:focus,
+.list-group-item-light.list-group-item-action:hover {
+    color: rgb(166, 153, 132);
+    background-color: rgb(36, 37, 35);
+}
+.list-group-item-light.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(108, 109, 103);
+    border-color: rgb(94, 95, 91);
+}
+.list-group-item-dark {
+    color: rgb(234, 222, 202);
+    background-color: rgb(62, 63, 60);
+}
+.list-group-item-dark.list-group-item-action:focus,
+.list-group-item-dark.list-group-item-action:hover {
+    color: rgb(234, 222, 202);
+    background-color: rgb(70, 71, 68);
+}
+.list-group-item-dark.list-group-item-action.active {
+    color: rgb(255, 244, 224);
+    background-color: rgb(26, 25, 24);
+    border-color: rgb(140, 129, 109);
+}
+.close {
+    color: rgb(255, 244, 224);
+    text-shadow: rgb(27, 27, 26) 0px 1px 0px;
+}
+.close:hover {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+}
+button.close {
+    background-color: transparent;
+    border-color: initial;
+}
+.toast {
+    background-color: rgba(27, 27, 26, 0.85);
+    border-color: rgba(151, 138, 117, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25rem 0.75rem;
+}
+.toast-header {
+    color: rgb(172, 159, 138);
+    background-color: rgba(27, 27, 26, 0.85);
+    border-bottom-color: rgba(151, 138, 117, 0.05);
+}
+.modal {
+    outline-color: initial;
+}
+.modal-content {
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.2);
+    outline-color: initial;
+}
+.modal-backdrop {
+    background-color: rgb(0, 0, 0);
+}
+.modal-header {
+    border-bottom-color: rgb(63, 64, 61);
+}
+.modal-footer {
+    border-top-color: rgb(63, 64, 61);
+}
+.tooltip {
+    text-decoration-color: initial; text-shadow: none;
+}
+.tooltip .arrow::before {
+    border-color: transparent;
+}
+.bs-tooltip-auto[x-placement^="top"] .arrow::before,
+.bs-tooltip-top .arrow::before {
+    border-top-color: rgb(151, 138, 117);
+}
+.bs-tooltip-auto[x-placement^="right"] .arrow::before,
+.bs-tooltip-right .arrow::before {
+    border-right-color: rgb(151, 138, 117);
+}
+.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
+.bs-tooltip-bottom .arrow::before {
+    border-bottom-color: rgb(151, 138, 117);
+}
+.bs-tooltip-auto[x-placement^="left"] .arrow::before,
+.bs-tooltip-left .arrow::before {
+    border-left-color: rgb(151, 138, 117);
+}
+.tooltip-inner {
+    color: rgb(255, 244, 224);
+    background-color: rgb(0, 0, 0);
+}
+.popover {
+    text-decoration-color: initial;
+    text-shadow: none;
+    background-color: rgb(27, 27, 26);
+    border-color: rgba(151, 138, 117, 0.2);
+}
+.popover .arrow::after, .popover .arrow::before {
+    border-color: transparent;
+}
+.bs-popover-auto[x-placement^="top"] > .arrow::before,
+.bs-popover-top > .arrow::before {
+    border-top-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="top"] > .arrow::after,
+.bs-popover-top > .arrow::after {
+    border-top-color: rgb(54, 55, 52);
+}
+.bs-popover-auto[x-placement^="right"] > .arrow::before,
+.bs-popover-right > .arrow::before {
+    border-right-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="right"] > .arrow::after,
+.bs-popover-right > .arrow::after {
+    border-right-color: rgb(54, 55, 52);
+}
+.bs-popover-auto[x-placement^="bottom"] > .arrow::before,
+.bs-popover-bottom > .arrow::before {
+    border-bottom-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
+.bs-popover-bottom > .arrow::after {
+    border-bottom-color: rgb(54, 55, 52);
+}
+.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
+.bs-popover-bottom .popover-header::before {
+    border-bottom-color: rgb(57, 57, 55);
+}
+.bs-popover-auto[x-placement^="left"] > .arrow::before,
+.bs-popover-left > .arrow::before {
+    border-left-color: rgba(151, 138, 117, 0.25);
+}
+.bs-popover-auto[x-placement^="left"] > .arrow::after,
+.bs-popover-left > .arrow::after {
+    border-left-color: rgb(54, 55, 52);
+}
+.popover-header {
+    background-color: rgb(33, 33, 31);
+    border-bottom-color: rgb(61, 61, 58);
+}
+.popover-body {
+    color: rgb(230, 218, 197);
+}
+.carousel-control-next,
+.carousel-control-prev {
+    color: rgb(255, 244, 224);
+}
+.carousel-control-next:focus,
+.carousel-control-next:hover,
+.carousel-control-prev:focus,
+.carousel-control-prev:hover {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+    outline-color: initial;
+}
+.carousel-control-next-icon,
+.carousel-control-prev-icon {
+    background-image: initial;
+    background-color: initial;
+}
+.carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
+}
+.carousel-control-next-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
+}
+.carousel-indicators {
+    list-style-image: initial;
+}
+.carousel-indicators li {
+    background-color: rgb(27, 27, 26);
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+}
+.carousel-caption {
+    color: rgb(255, 244, 224);
+}
+.spinner-border {
+    border-color: currentcolor transparent currentcolor currentcolor;
+}
+.spinner-grow {
+    background-color: currentcolor;
+}
+.bg-primary {
+    background-color: rgb(34, 99, 167) !important;
+}
+a.bg-primary:focus,
+a.bg-primary:hover,
+button.bg-primary:focus,
+button.bg-primary:hover {
+    background-color: rgb(27, 79, 133) !important;
+}
+.bg-secondary {
+    background-color: rgb(100, 100, 96) !important;
+}
+a.bg-secondary:focus,
+a.bg-secondary:hover,
+button.bg-secondary:focus,
+button.bg-secondary:hover {
+    background-color: rgb(78, 78, 74) !important;
+}
+.bg-success {
+    background-color: rgb(60, 127, 65) !important;
+}
+a.bg-success:focus,
+a.bg-success:hover,
+button.bg-success:focus,
+button.bg-success:hover {
+    background-color: rgb(45, 96, 49) !important;
+}
+.bg-info {
+    background-color: rgb(53, 127, 131) !important;
+}
+a.bg-info:focus,
+a.bg-info:hover,
+button.bg-info:focus,
+button.bg-info:hover {
+    background-color: rgb(40, 96, 99) !important;
+}
+.bg-warning {
+    background-color: rgb(198, 157, 40) !important;
+}
+a.bg-warning:focus,
+a.bg-warning:hover,
+button.bg-warning:focus,
+button.bg-warning:hover {
+    background-color: rgb(167, 132, 34) !important;
+}
+.bg-danger {
+    background-color: rgb(144, 46, 49) !important;
+}
+a.bg-danger:focus,
+a.bg-danger:hover,
+button.bg-danger:focus,
+button.bg-danger:hover {
+    background-color: rgb(132, 41, 45) !important;
+}
+.bg-light {
+    background-color: rgb(31, 32, 30) !important;
+}
+a.bg-light:focus,
+a.bg-light:hover,
+button.bg-light:focus,
+button.bg-light:hover {
+    background-color: rgb(47, 48, 45) !important;
+}
+.bg-dark {
+    background-color: rgb(50, 50, 47) !important;
+}
+a.bg-dark:focus,
+a.bg-dark:hover,
+button.bg-dark:focus,
+button.bg-dark:hover {
+    background-color: rgb(27, 28, 27) !important;
+}
+.bg-white {
+    background-color: rgb(27, 27, 26) !important;
+}
+.bg-transparent {
+    background-color: transparent !important;
+}
+.border {
+    border-color: rgb(63, 64, 61) !important;
+}
+.border-top {
+    border-top-color: rgb(63, 64, 61) !important;
+}
+.border-right {
+    border-right-color: rgb(63, 64, 61) !important;
+}
+.border-bottom {
+    border-bottom-color: rgb(63, 64, 61) !important;
+}
+.border-left {
+    border-left-color: rgb(63, 64, 61) !important;
+}
+.border-0 {
+    border-color: initial !important;
+}
+.border-top-0 {
+    border-top-color: initial !important;
+}
+.border-right-0 {
+    border-right-color: initial !important;
+}
+.border-bottom-0 {
+    border-bottom-color: initial !important;
+}
+.border-left-0 {
+    border-left-color: initial !important;
+}
+.border-primary {
+    border-color: rgb(30, 87, 146) !important;
+}
+.border-secondary {
+    border-color: rgb(110, 100, 85) !important;
+}
+.border-success {
+    border-color: rgb(70, 148, 75) !important;
+}
+.border-info {
+    border-color: rgb(62, 148, 152) !important;
+}
+.border-warning {
+    border-color: rgb(174, 138, 36) !important;
+}
+.border-danger {
+    border-color: rgb(129, 41, 44) !important;
+}
+.border-light {
+    border-color: rgb(57, 57, 54) !important;
+}
+.border-dark {
+    border-color: rgb(130, 119, 101) !important;
+}
+.border-white {
+    border-color: rgb(54, 55, 52) !important;
+}
+.embed-responsive .embed-responsive-item,
+.embed-responsive embed,
+.embed-responsive iframe,
+.embed-responsive object,
+.embed-responsive video {
+    border-color: initial;
+}
+.sr-only {
+    border-color: initial;
+}
+.shadow-sm {
+    box-shadow: rgba(0, 0, 0, 0.07) 0px 0.125rem 0.25rem !important;
+}
+.shadow {
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem !important;
+}
+.shadow-lg {
+    box-shadow: rgba(0, 0, 0, 0.18) 0px 1rem 3rem !important;
+}
+.shadow-none {
+    box-shadow: none !important;
+}
+.stretched-link::after {
+    background-color: rgba(0, 0, 0, 0);
+}
+.text-white {
+    color: rgb(255, 244, 224) !important;
+}
+.text-primary {
+    color: rgb(94, 165, 219) !important;
+}
+a.text-primary:focus,
+a.text-primary:hover {
+    color: rgb(136, 189, 226) !important;
+}
+.text-secondary {
+    color: rgb(172, 159, 138) !important;
+}
+a.text-secondary:focus,
+a.text-secondary:hover {
+    color: rgb(199, 187, 167) !important;
+}
+.text-success {
+    color: rgb(136, 213, 134) !important;
+}
+a.text-success:focus,
+a.text-success:hover {
+    color: rgb(176, 229, 167) !important;
+}
+.text-info {
+    color: rgb(128, 212, 213) !important;
+}
+a.text-info:focus,
+a.text-info:hover {
+    color: rgb(171, 228, 223) !important;
+}
+.text-warning {
+    color: rgb(255, 208, 75) !important;
+}
+a.text-warning:focus,
+a.text-warning:hover {
+    color: rgb(255, 220, 109) !important;
+}
+.text-danger {
+    color: rgb(203, 91, 92) !important;
+}
+a.text-danger:focus,
+a.text-danger:hover {
+    color: rgb(214, 115, 113) !important;
+}
+.text-light {
+    color: rgb(251, 240, 219) !important;
+}
+a.text-light:focus,
+a.text-light:hover {
+    color: rgb(224, 211, 191) !important;
+}
+.text-dark {
+    color: rgb(214, 202, 181) !important;
+}
+a.text-dark:focus,
+a.text-dark:hover {
+    color: rgb(241, 229, 209) !important;
+}
+.text-body {
+    color: rgb(230, 218, 197) !important;
+}
+.text-muted {
+    color: rgb(172, 159, 138) !important;
+}
+.text-black-50 {
+    color: rgba(255, 244, 224, 0.5) !important;
+}
+.text-white-50 {
+    color: rgba(255, 244, 224, 0.5) !important;
+}
+.text-hide {
+    color: transparent; text-shadow: none; background-color: transparent; border-color: initial;
+}
+.text-decoration-none {
+    text-decoration-color: initial !important;
+}
+.text-reset {
+    color: inherit !important;
+}
+code[class*="language-"], pre[class*="language-"] {
+    color: rgb(255, 244, 224);
+    background-image: none;
+    background-color: initial;
+    text-shadow: rgb(27, 27, 26) 0px 1px;
+}
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background-image: initial;
+    background-color: rgb(52, 53, 50);
+}
+:not(pre) > code[class*="language-"], pre[class*="language-"] {
+    background-image: initial;
+    background-color: rgb(42, 34, 28);
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: rgb(165, 152, 131);
+}
+.token.punctuation {
+    color: rgb(183, 170, 149);
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: rgb(241, 124, 173);
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: rgb(230, 255, 129);
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: rgb(206, 171, 123);
+    background-image: initial;
+    background-color: rgba(27, 27, 26, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: rgb(131, 207, 228);
+}
+.token.function,
+.token.class-name {
+    color: rgb(208, 106, 115);
+}
+.token.regex,
+.token.important,
+.token.variable {
+    color: rgb(251, 189, 77);
+}
+.nuxt-progress {
+    background-color: rgb(0, 0, 0);
+}
+.nuxt-progress-failed {
+    background-color: rgb(167, 21, 17);
+}
+.nuxt__build_indicator[data-v-71e9e103] {
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0px;
+}
+.hr {
+    background-image: initial;
+    background-color: rgba(27, 27, 26, 0.2);
+}
+.info p {
+    color: rgb(165, 152, 131);
+}
+.info li {
+    color: rgb(255, 244, 224);
+}
+#fb::before {
+    background-image: initial;
+    background-color: rgb(62, 75, 105);
+}
+#ig::before {
+    background-image: initial;
+    background-color: rgb(155, 103, 31);
+}
+#tw::before {
+    background-image: initial;
+    background-color: rgb(42, 91, 125);
+}
+#yt::before {
+    background-image: initial;
+    background-color: rgb(139, 53, 44);
+}
+#gh::before {
+    background-image: initial;
+    background-color: rgb(33, 35, 35);
+}
+#media ul {
+    list-style-image: initial;
+}
+div #no-h,
+#personal a,
+a:hover,
+#media a,
+a:hover,
+#address a,
+a:hover {
+    color: inherit;
+    text-decoration-color: initial;
+}
+nav {
+    background-image: initial;
+    background-color: rgb(13, 13, 12);
+}
+nav #brand a {
+    color: rgb(255, 244, 224);
+}
+nav #brand a:hover {
+    text-decoration-color: initial;
+}
+nav #menu li a {
+    color: rgb(255, 244, 224);
+}
+nav #menu li a:hover {
+    text-decoration-color: initial;
+}
+#menu-item-4:hover {
+    text-decoration-color: initial !important;
+}
+#resize {
+    background-image: initial;
+    background-color: rgb(13, 13, 12);
+}
+#resize #menu li a {
+    color: rgb(255, 244, 224);
+}
+#resize #menu li a:hover {
+    text-decoration-color: initial;
+}
+.vertical {
+    border-left-color: rgb(54, 55, 52);
+}
+#contact-form ul {
+    list-style-image: initial;
+}
+#contact-form li:last-of-type {
+    border-bottom-color: initial;
+}
+#contact-form label {
+    color: rgb(183, 170, 149);
+}
+#contact-form input,
+#contact-form textarea {
+    border-color: initial;
+    background-image: initial;
+    background-color: transparent;
+    color: rgb(255, 244, 224);
+}
+input:focus {
+    outline-color: initial;
+    border-color: initial;
+}
+textarea:focus {
+    outline-color: initial;
+    border-color: initial;
+}
+.textarea {
+    border-bottom-color: rgb(65, 65, 62);
+}
+.send {
+    background-image: initial;
+    background-color: transparent;
+    color: rgb(233, 221, 200);
+}
+.send:hover {
+    background-image: initial;
+    background-color: rgb(48, 48, 46);
+    color: rgb(244, 232, 212);
+}
+.mobile-txt2 {
+    color: rgb(255, 244, 224);
+}
+.line {
+    border-right-color: rgba(54, 55, 52, 0.75);
+}
+.scroll-down {
+    text-decoration-color: initial;
+    border-bottom-color: rgb(54, 55, 52);
+    border-right-color: rgb(54, 55, 52);
+}
+.prev,
+.next p {
+    color: rgb(165, 152, 131);
+}
+.image {
+    background-image: url("https://images.unsplash.com/photo-1540885762261-a2ca01f290f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2468&q=80");
+    background-color: initial;
+}
+.hero-content p {
+    color: rgb(165, 152, 131);
+}
+html,
+body {
+    background-image: initial !important;
+    background-color: rgb(13, 13, 12) !important;
+    color: rgb(255, 244, 224) !important;
+}
+.logo[data-v-51704dc2] {
+    color: rgb(255, 244, 224);
+}
+.logo a[data-v-51704dc2] {
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+}
+nav ul li a[data-v-51704dc2] {
+    outline-color: initial;
+    color: rgb(255, 244, 224);
+    text-decoration-color: initial;
+}
+@media screen and (max-width: 864px) {
+    .nav-wrapper[data-v-51704dc2] {
+        background-image: initial;
+        background-color: rgb(13, 13, 12);
+    }
+    .nav-wrapper ul li a[data-v-51704dc2] {
+        color: rgb(255, 244, 224);
+    }
+    .nav-btn i[data-v-51704dc2] {
+        background-image: initial;
+        background-color: rgb(27, 27, 26);
+    }
+}
+#nav:checked + .nav-btn i[data-v-51704dc2] {
+    background-image: initial;
+    background-color: rgb(27, 27, 26);
+}
+
+/* Override Style */
+.vimvixen-hint {
+    background-color: #775707 !important;
+    border-color: #dab73c !important;
+    color: #fff6cd !important;
+}
+::placeholder {
+    opacity: 0.5 !important;
+}
diff --git a/assets/styles/components/category-section.scss b/assets/styles/components/category-section.scss
new file mode 100644
index 0000000..893a91b
--- /dev/null
+++ b/assets/styles/components/category-section.scss
@@ -0,0 +1,17 @@
+@media(max-width: 768px) {
+  .project {
+    width: 90% !important;
+    margin: 14px auto;
+  }
+
+  .vertical {
+    display: none;
+  }
+
+  .project1::after, .project2::after, .project3::after, .project4::after,
+  .graphic1::after, .graphic2::after, .graphic3::after, .graphic4::after,
+  .render1::after, .render2::after, .render3::after, .render4::after,
+  .category1::after, .category2::after, .category3::after, .category4::after {
+    display: none;
+  }
+}
diff --git a/assets/styles/components/contact-form.scss b/assets/styles/components/contact-form.scss
new file mode 100644
index 0000000..ef48d1c
--- /dev/null
+++ b/assets/styles/components/contact-form.scss
@@ -0,0 +1,70 @@
+#contact-form {
+  margin: 5% 1.4%;
+}
+
+#contact-form ul {
+  list-style: none;
+  border-radius: 5px;
+  margin-bottom: 40px;
+}
+
+#contact-form li {
+  padding: 10px;
+}
+
+#contact-form li:last-of-type {
+  border-bottom: none;
+}
+
+#contact-form label {
+  display: block;
+  font-size: .8em;
+  color: #999;
+  padding-left: 5px;
+}
+
+#contact-form input, #contact-form textarea {
+  width: 100%;
+  padding: 5px;
+  border: none;
+  resize: vertical;
+  background: transparent;
+  color: #fff;
+  font-weight: bolder;
+}
+
+input:focus {
+  outline: none;
+  border: none;
+}
+
+textarea:focus {
+  outline: none;
+  border: none;
+}
+
+.textarea {
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.send {
+  margin-left: 50px;
+  text-transform: uppercase;
+  padding: 20px 30px;
+  background: transparent;
+  color: #dfdfdf;
+  font-size: 14px;
+  letter-spacing: 2px;
+}
+
+.send:hover {
+  background: #dfdfdf;
+  color: #101010;
+}
+
+@media(max-width: 768px) {
+  #contact-form {
+    margin: 5% -8%;
+    width: 98%;
+  }
+}
diff --git a/assets/styles/components/footer.scss b/assets/styles/components/footer.scss
new file mode 100644
index 0000000..e0df638
--- /dev/null
+++ b/assets/styles/components/footer.scss
@@ -0,0 +1,115 @@
+.collab {
+  text-align: right;
+}
+
+.collab p {
+  font-weight: lighter !important;
+  margin-bottom: 20px;
+}
+
+.hr {
+  background: rgba(255, 255, 255, 0.2);
+  height: 1px;
+}
+
+.info h4 {
+  font-size: 18px;
+  font-weight: lighter;
+}
+
+.info p {
+  color: grey;
+  font-weight: lighter;
+}
+
+.info li {
+  font-weight: lighter;
+  color: #fff;
+  font-size: 18px;
+  padding-left: 20px;
+}
+
+#fb::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #3b5998;
+}
+
+
+#ig::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #fcaf45;
+}
+
+
+#tw::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #55acee;
+}
+
+
+#yt::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #c4302b;
+}
+
+#gh::before {
+  display: inline-block;
+  content: '';
+  border-radius: 100%;
+  height: 4px;
+  width: 4px;
+  margin-right: 6px;
+  background: #24292e;
+}
+
+#media, #address {
+  text-align: right;
+}
+
+#media ul {
+  list-style: none;
+}
+
+#media ul li {
+  display: inline-block;
+}
+
+@media(max-width: 768px) {
+  .collab, #personal, #media, #address {
+    text-align: center;
+  }
+
+  .info ul {
+    margin: 0 0 0 -22px;
+    padding: 0;
+  }
+}
+
+/* Honestly, this took way longer to figure out than it should've. I scoured the internet for so long, at one point, I think
+// I had around 20+ tabs open, no idea how I really figured it out, just tried as many solutions until it was solved. - 17:27, 10/20/2018
+*/
+div #no-h, #personal a, a:hover, #media a, a:hover, #address a, a:hover {
+  color: inherit;
+  text-decoration: none;
+  transition: 0.5s;
+}
diff --git a/assets/styles/components/hero.scss b/assets/styles/components/hero.scss
new file mode 100644
index 0000000..db99439
--- /dev/null
+++ b/assets/styles/components/hero.scss
@@ -0,0 +1,19 @@
+.hero {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero h1 {
+  font-weight: lighter;
+  text-align: center;
+  letter-spacing: -2px;
+  line-height: 58px;
+}
+
+@media(max-width: 768px) {
+  .header h1 {
+    font-size: 26px;
+  }
+}
diff --git a/assets/styles/components/navgiation.scss b/assets/styles/components/navgiation.scss
new file mode 100644
index 0000000..53ff6b8
--- /dev/null
+++ b/assets/styles/components/navgiation.scss
@@ -0,0 +1,178 @@
+nav {
+  width: 100%;
+  background: #0f0f0f;
+  height: 80px;
+  position: fixed;
+  z-index: 1;
+}
+
+nav #brand {
+  float: left;
+  display: block;
+  margin-left: 82px;
+  line-height: 80px;
+  font-weight: bold;
+}
+
+nav #brand a {
+  color: #fff;
+  transition: all 0.3s ease-out;
+}
+
+nav #brand a:hover {
+  text-decoration: none;
+}
+
+nav #menu {
+  float: left;
+  right: 80px;
+  position: fixed;
+}
+
+nav #menu li {
+  padding-left: 30px; /* 40px */
+  display: inline-block;
+  cursor: pointer;
+  font-weight: 300;
+  line-height: 80px;
+  position: relative;
+  transition: all 0.3s ease-out;
+}
+
+nav #menu li span {
+  font-weight: 700;
+}
+
+nav #menu li a {
+  color: #fff;
+  transition: 0.5s;
+}
+
+nav #menu li a:hover {
+  text-decoration: none;
+  transition: 0.5s;
+}
+
+#menu-item-1:hover { letter-spacing: 1px; font-family: cursive; }
+#menu-item-2:hover { font-weight: bold; font-family: monospace; }
+#menu-item-3:hover { font-style: italic; font-family: Arial, Helvetica, sans-serif; }
+#menu-item-4:hover { text-decoration: underline !important; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+#menu-item-5:hover { font-style: bold; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }
+
+#toggle {
+  position: absolute;
+  right: 30px;
+  top: 20px;
+  font-weight: 300;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  float: right;
+  transition: all 0.3s ease-out;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.close-btn {
+  position: absolute;
+  right: 16px;
+  font-weight: 300;
+  z-index: 2;
+  cursor: pointer;
+  top: -2px;
+  line-height: 80px;
+}
+
+#resize {
+  z-index: 1;
+  top: 0; // px
+  position: fixed;
+  background: #0f0f0f;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 1s ease-out;
+}
+
+#resize #menu {
+  height: 90px;
+  position: absolute;
+  left: 43%;
+  transform: translateX(-40%);
+  text-align: center;
+  display: table-cell;
+  vertical-align: center;
+}
+
+#resize #menu li {
+  display: block;
+  text-align: center;
+  padding: 10px 0;
+  font-size: 50px;
+  min-height: 50px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease-out;
+}
+
+#resize li:nth-child(1) {
+  margin-top: 100px; /* 140px */
+}
+
+#resize #menu li a {
+  color: #fff;
+}
+
+#resize #menu li a:hover {
+  text-decoration: none;
+}
+
+#resize.active {
+  visibility: visible;
+  opacity: 1;
+}
+
+@media(max-width: 768px) {
+  #toggle {
+    visibility: visible;
+    opacity: 1;
+    margin-top: 6px;
+    margin-right: 4px;
+  }
+
+  nav #brand {
+    margin-left: 24px;
+  }
+
+  #menu a {
+    font-size: 20px;
+    font-weight: 300;
+  }
+
+  #resize li span {
+    font-weight: bolder;
+  }
+
+  nav #menu {
+    display: none;
+  }
+}
+
+@media(min-width: 768px) {
+  #resize {
+    visibility: hidden !important;
+  }
+}
+
+/* .blur {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	min-height: 50px;
+	margin-bottom: 20px;
+	background: rgba(15, 15, 15, 1);
+	z-index: 1010;
+	filter: blur(20px);
+} */
diff --git a/assets/styles/components/project-section.scss b/assets/styles/components/project-section.scss
new file mode 100644
index 0000000..7ba669a
--- /dev/null
+++ b/assets/styles/components/project-section.scss
@@ -0,0 +1,15 @@
+h6 {
+  text-align: center;
+}
+
+.vertical {
+  margin-top: 40px;
+  border-left: 1px solid #fff;
+  height: 80px;
+  position: absolute;
+  left: 50%;
+}
+
+.project {
+  height: 500px;
+}
diff --git a/assets/styles/extra/animate.scss b/assets/styles/extra/animate.scss
new file mode 100644
index 0000000..60f0c96
--- /dev/null
+++ b/assets/styles/extra/animate.scss
@@ -0,0 +1,2744 @@
+@charset "UTF-8";
+
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license
+
+Copyright (c) 2013 Daniel Eden
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    -ms-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+}
+
+@-webkit-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;
+  animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  50% {
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+}
+
+.shake {
+  -webkit-animation-name: shake;
+  animation-name: shake;
+}
+
+@-webkit-keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes swing {
+  20% {
+    -webkit-transform: rotate(15deg);
+    -ms-transform: rotate(15deg);
+    transform: rotate(15deg);
+  }
+
+  40% {
+    -webkit-transform: rotate(-10deg);
+    -ms-transform: rotate(-10deg);
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    -webkit-transform: rotate(5deg);
+    -ms-transform: rotate(5deg);
+    transform: rotate(5deg);
+  }
+
+  80% {
+    -webkit-transform: rotate(-5deg);
+    -ms-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
+.swing {
+  -webkit-transform-origin: top center;
+  -ms-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tada {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  10%, 20% {
+    -webkit-transform: scale(0.9) rotate(-3deg);
+    -ms-transform: scale(0.9) rotate(-3deg);
+    transform: scale(0.9) rotate(-3deg);
+  }
+
+  30%, 50%, 70%, 90% {
+    -webkit-transform: scale(1.1) rotate(3deg);
+    -ms-transform: scale(1.1) rotate(3deg);
+    transform: scale(1.1) rotate(3deg);
+  }
+
+  40%, 60%, 80% {
+    -webkit-transform: scale(1.1) rotate(-3deg);
+    -ms-transform: scale(1.1) rotate(-3deg);
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  100% {
+    -webkit-transform: scale(1) rotate(0);
+    -ms-transform: scale(1) rotate(0);
+    transform: scale(1) rotate(0);
+  }
+}
+
+.tada {
+  -webkit-animation-name: tada;
+  animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  15% {
+    -webkit-transform: translateX(-25%) rotate(-5deg);
+    -ms-transform: translateX(-25%) rotate(-5deg);
+    transform: translateX(-25%) rotate(-5deg);
+  }
+
+  30% {
+    -webkit-transform: translateX(20%) rotate(3deg);
+    -ms-transform: translateX(20%) rotate(3deg);
+    transform: translateX(20%) rotate(3deg);
+  }
+
+  45% {
+    -webkit-transform: translateX(-15%) rotate(-3deg);
+    -ms-transform: translateX(-15%) rotate(-3deg);
+    transform: translateX(-15%) rotate(-3deg);
+  }
+
+  60% {
+    -webkit-transform: translateX(10%) rotate(2deg);
+    -ms-transform: translateX(10%) rotate(2deg);
+    transform: translateX(10%) rotate(2deg);
+  }
+
+  75% {
+    -webkit-transform: translateX(-5%) rotate(-1deg);
+    -ms-transform: translateX(-5%) rotate(-1deg);
+    transform: translateX(-5%) rotate(-1deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+}
+
+.wobble {
+  -webkit-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+    -ms-transform: scale(1.05);
+    transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(.9);
+    -ms-transform: scale(.9);
+    transform: scale(.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.bounceIn {
+  -webkit-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(30px);
+    -ms-transform: translateY(30px);
+    transform: translateY(30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(-10px);
+    -ms-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInDown {
+  -webkit-animation-name: bounceInDown;
+  animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(30px);
+    -ms-transform: translateX(30px);
+    transform: translateX(30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(-10px);
+    -ms-transform: translateX(-10px);
+    transform: translateX(-10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInLeft {
+  -webkit-animation-name: bounceInLeft;
+  animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounceInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateX(-30px);
+    -ms-transform: translateX(-30px);
+    transform: translateX(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateX(10px);
+    -ms-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.bounceInRight {
+  -webkit-animation-name: bounceInRight;
+  animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  60% {
+    opacity: 1;
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  80% {
+    -webkit-transform: translateY(10px);
+    -ms-transform: translateY(10px);
+    transform: translateY(10px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.bounceInUp {
+  -webkit-animation-name: bounceInUp;
+  animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+@keyframes bounceOut {
+  0% {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+  }
+
+  25% {
+    -webkit-transform: scale(.95);
+    -ms-transform: scale(.95);
+    transform: scale(.95);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(.3);
+    -ms-transform: scale(.3);
+    transform: scale(.3);
+  }
+}
+
+.bounceOut {
+  -webkit-animation-name: bounceOut;
+  animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes bounceOutDown {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.bounceOutDown {
+  -webkit-animation-name: bounceOutDown;
+  animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes bounceOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.bounceOutLeft {
+  -webkit-animation-name: bounceOutLeft;
+  animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes bounceOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.bounceOutRight {
+  -webkit-animation-name: bounceOutRight;
+  animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes bounceOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  20% {
+    opacity: 1;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.bounceOutUp {
+  -webkit-animation-name: bounceOutUp;
+  animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInDownBig {
+  -webkit-animation-name: fadeInDownBig;
+  animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeftBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInLeftBig {
+  -webkit-animation-name: fadeInLeftBig;
+  animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRightBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.fadeInRightBig {
+  -webkit-animation-name: fadeInRightBig;
+  animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUp {
+  -webkit-animation-name: fadeInUp;
+  animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUpBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.fadeInUpBig {
+  -webkit-animation-name: fadeInUpBig;
+  animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+@keyframes fadeOutDown {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(20px);
+    -ms-transform: translateY(20px);
+    transform: translateY(20px);
+  }
+}
+
+.fadeOutDown {
+  -webkit-animation-name: fadeOutDown;
+  animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+@keyframes fadeOutDownBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(2000px);
+    -ms-transform: translateY(2000px);
+    transform: translateY(2000px);
+  }
+}
+
+.fadeOutDownBig {
+  -webkit-animation-name: fadeOutDownBig;
+  animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+@keyframes fadeOutLeft {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-20px);
+    -ms-transform: translateX(-20px);
+    transform: translateX(-20px);
+  }
+}
+
+.fadeOutLeft {
+  -webkit-animation-name: fadeOutLeft;
+  animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes fadeOutLeftBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.fadeOutLeftBig {
+  -webkit-animation-name: fadeOutLeftBig;
+  animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+@keyframes fadeOutRight {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+}
+
+.fadeOutRight {
+  -webkit-animation-name: fadeOutRight;
+  animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes fadeOutRightBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.fadeOutRightBig {
+  -webkit-animation-name: fadeOutRightBig;
+  animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes fadeOutUp {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
+}
+
+.fadeOutUp {
+  -webkit-animation-name: fadeOutUp;
+  animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes fadeOutUpBig {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.fadeOutUpBig {
+  -webkit-animation-name: fadeOutUpBig;
+  animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes flip {
+  0% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+}
+
+.animated.flip {
+  -webkit-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation-name: flip;
+  animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateX(-10deg);
+    -ms-transform: perspective(400px) rotateX(-10deg);
+    transform: perspective(400px) rotateX(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateX(10deg);
+    -ms-transform: perspective(400px) rotateX(10deg);
+    transform: perspective(400px) rotateX(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInX {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInX;
+  animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes flipInY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+
+  40% {
+    -webkit-transform: perspective(400px) rotateY(-10deg);
+    -ms-transform: perspective(400px) rotateY(-10deg);
+    transform: perspective(400px) rotateY(-10deg);
+  }
+
+  70% {
+    -webkit-transform: perspective(400px) rotateY(10deg);
+    -ms-transform: perspective(400px) rotateY(10deg);
+    transform: perspective(400px) rotateY(10deg);
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.flipInY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipInY;
+  animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutX {
+  0% {
+    -webkit-transform: perspective(400px) rotateX(0deg);
+    -ms-transform: perspective(400px) rotateX(0deg);
+    transform: perspective(400px) rotateX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateX(90deg);
+    -ms-transform: perspective(400px) rotateX(90deg);
+    transform: perspective(400px) rotateX(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutX {
+  -webkit-animation-name: flipOutX;
+  animation-name: flipOutX;
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipOutY {
+  0% {
+    -webkit-transform: perspective(400px) rotateY(0deg);
+    -ms-transform: perspective(400px) rotateY(0deg);
+    transform: perspective(400px) rotateY(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: perspective(400px) rotateY(90deg);
+    -ms-transform: perspective(400px) rotateY(90deg);
+    transform: perspective(400px) rotateY(90deg);
+    opacity: 0;
+  }
+}
+
+.flipOutY {
+  -webkit-backface-visibility: visible !important;
+  -ms-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  -webkit-animation-name: flipOutY;
+  animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+@keyframes lightSpeedIn {
+  0% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+
+  60% {
+    -webkit-transform: translateX(-20%) skewX(30deg);
+    -ms-transform: translateX(-20%) skewX(30deg);
+    transform: translateX(-20%) skewX(30deg);
+    opacity: 1;
+  }
+
+  80% {
+    -webkit-transform: translateX(0%) skewX(-15deg);
+    -ms-transform: translateX(0%) skewX(-15deg);
+    transform: translateX(0%) skewX(-15deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+}
+
+.lightSpeedIn {
+  -webkit-animation-name: lightSpeedIn;
+  animation-name: lightSpeedIn;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+@keyframes lightSpeedOut {
+  0% {
+    -webkit-transform: translateX(0%) skewX(0deg);
+    -ms-transform: translateX(0%) skewX(0deg);
+    transform: translateX(0%) skewX(0deg);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: translateX(100%) skewX(-30deg);
+    -ms-transform: translateX(100%) skewX(-30deg);
+    transform: translateX(100%) skewX(-30deg);
+    opacity: 0;
+  }
+}
+
+.lightSpeedOut {
+  -webkit-animation-name: lightSpeedOut;
+  animation-name: lightSpeedOut;
+  -webkit-animation-timing-function: ease-in;
+  animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateIn {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(-200deg);
+    -ms-transform: rotate(-200deg);
+    transform: rotate(-200deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateIn {
+  -webkit-animation-name: rotateIn;
+  animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownLeft {
+  -webkit-animation-name: rotateInDownLeft;
+  animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInDownRight {
+  -webkit-animation-name: rotateInDownRight;
+  animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpLeft {
+  -webkit-animation-name: rotateInUpLeft;
+  animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes rotateInUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+}
+
+.rotateInUpRight {
+  -webkit-animation-name: rotateInUpRight;
+  animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOut {
+  0% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    transform: rotate(200deg);
+    opacity: 0;
+  }
+}
+
+.rotateOut {
+  -webkit-animation-name: rotateOut;
+  animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownLeft {
+  -webkit-animation-name: rotateOutDownLeft;
+  animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutDownRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutDownRight {
+  -webkit-animation-name: rotateOutDownRight;
+  animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpLeft {
+  0% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: left bottom;
+    -ms-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpLeft {
+  -webkit-animation-name: rotateOutUpLeft;
+  animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateOutUpRight {
+  0% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform-origin: right bottom;
+    -ms-transform-origin: right bottom;
+    transform-origin: right bottom;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+    opacity: 0;
+  }
+}
+
+.rotateOutUpRight {
+  -webkit-animation-name: rotateOutUpRight;
+  animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+
+.slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+
+  100% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+@keyframes slideOutLeft {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-2000px);
+    -ms-transform: translateX(-2000px);
+    transform: translateX(-2000px);
+  }
+}
+
+.slideOutLeft {
+  -webkit-animation-name: slideOutLeft;
+  animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+@keyframes slideOutRight {
+  0% {
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(2000px);
+    -ms-transform: translateX(2000px);
+    transform: translateX(2000px);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+@keyframes slideOutUp {
+  0% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    -ms-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
+}
+
+.slideOutUp {
+  -webkit-animation-name: slideOutUp;
+  animation-name: slideOutUp;
+}
+
+@-webkit-keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    opacity: 1;
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+@keyframes hinge {
+  0% {
+    -webkit-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  20%, 60% {
+    -webkit-transform: rotate(80deg);
+    -ms-transform: rotate(80deg);
+    transform: rotate(80deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  40% {
+    -webkit-transform: rotate(60deg);
+    -ms-transform: rotate(60deg);
+    transform: rotate(60deg);
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  80% {
+    -webkit-transform: rotate(60deg) translateY(0);
+    -ms-transform: rotate(60deg) translateY(0);
+    transform: rotate(60deg) translateY(0);
+    opacity: 1;
+    -webkit-transform-origin: top left;
+    -ms-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+
+  100% {
+    -webkit-transform: translateY(700px);
+    -ms-transform: translateY(700px);
+    transform: translateY(700px);
+    opacity: 0;
+  }
+}
+
+.hinge {
+  -webkit-animation-name: hinge;
+  animation-name: hinge;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+@keyframes rollIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100%) rotate(-120deg);
+    -ms-transform: translateX(-100%) rotate(-120deg);
+    transform: translateX(-100%) rotate(-120deg);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+}
+
+.rollIn {
+  -webkit-animation-name: rollIn;
+  animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+@keyframes rollOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0px) rotate(0deg);
+    -ms-transform: translateX(0px) rotate(0deg);
+    transform: translateX(0px) rotate(0deg);
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100%) rotate(120deg);
+    -ms-transform: translateX(100%) rotate(120deg);
+    transform: translateX(100%) rotate(120deg);
+  }
+}
+
+.rollOut {
+  -webkit-animation-name: rollOut;
+  animation-name: rollOut;
+}
diff --git a/assets/styles/extra/components/footer-effects.scss b/assets/styles/extra/components/footer-effects.scss
new file mode 100644
index 0000000..882573d
--- /dev/null
+++ b/assets/styles/extra/components/footer-effects.scss
@@ -0,0 +1,5 @@
+#info-item-1:hover { font-weight: bold; font-family: monospace; }
+#media-item-1:hover { text-decoration: underline !important; font-family: Arial, Helvetica, sans-serif; }
+#media-item-2:hover { font-style: italic; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; }
+#media-item-3:hover { letter-spacing: 1px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+#address-item-1:hover {font-style: italic; font-family: cursive; }
diff --git a/assets/styles/extra/mobile.scss b/assets/styles/extra/mobile.scss
new file mode 100644
index 0000000..6da0ac4
--- /dev/null
+++ b/assets/styles/extra/mobile.scss
@@ -0,0 +1,18 @@
+@media(min-width: 768px) {
+  .mobile-txt2 {
+    display: none;
+  }
+}
+
+@media(max-width: 768px) {
+  .mobile-txt3 {
+    display: none;
+  }
+}
+
+.mobile-txt2 {
+  content: "absence.";
+  font-family: "Roboto Mono", serif;
+  font-size: 16px;
+  color: #fff;
+}
diff --git a/assets/styles/extra/scroll-down-icon-animation.scss b/assets/styles/extra/scroll-down-icon-animation.scss
new file mode 100644
index 0000000..0a8ec5c
--- /dev/null
+++ b/assets/styles/extra/scroll-down-icon-animation.scss
@@ -0,0 +1,32 @@
+.scroll-down {
+  position: absolute;
+  left: 50%;
+  bottom: 100px;
+  display: block;
+  text-align: center;
+  font-size: 20px;
+  z-index: 0;
+  text-decoration: none;
+  text-shadow: 0;
+  width: 13px;
+  height: 13px;
+  border-bottom: 2px solid #fff;
+  border-right: 2px solid #fff;
+  -webkit-transform: translate(-50%, 0) rotate(45deg);
+  transform: translate(-50%, 0) rotate(45deg);
+  animation: fade_move_down 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
+}
+
+@keyframes fade_move_down {
+  0% {
+    transform: translate(0, -20px) rotate(45deg);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(0, 20px) rotate(45deg);
+    opacity: 0;
+  }
+}
diff --git a/assets/styles/extra/scroll-indicator.scss b/assets/styles/extra/scroll-indicator.scss
new file mode 100644
index 0000000..e35abd9
--- /dev/null
+++ b/assets/styles/extra/scroll-indicator.scss
@@ -0,0 +1,32 @@
+.percent {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.2);
+  height: 140px;
+  width: 1px;
+  margin: -60px 0 0 40px;
+}
+
+/*---
+.percent {
+    position: fixed;
+    display: flex;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 100px;
+    flex-direction: column;
+    background: rgba(255, 255, 255, 0.2);
+    height: 140px;
+    width: 1px;
+}
+--*/
+
+.fill {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transition: background 0.15s ease;
+}
diff --git a/assets/styles/extra/typewriter-effect.scss b/assets/styles/extra/typewriter-effect.scss
new file mode 100644
index 0000000..e96af76
--- /dev/null
+++ b/assets/styles/extra/typewriter-effect.scss
@@ -0,0 +1,41 @@
+.line {
+  width: 24em;
+  top: 50%;
+  margin: auto;
+  border-right: 2px solid rgba(255, 255, 255, 0.75);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  transform: translateY(-50%);
+}
+
+.anim-typewriter {
+  animation: typewriter 4s steps(46) 1s 1 normal both,
+  blinkTextCursor 500ms steps(46) infinite normal;
+}
+
+@keyframes typewriter {
+  from {
+    width: 0;
+  } to {
+      width: 11.5em; /* 11.5em */
+    }
+}
+
+@media(max-width: 768px) {
+  @keyframes typewriter {
+    from {
+      width: 0;
+    } to {
+        width: 10.5em; /* 10.5em */
+      }
+  }
+}
+
+@keyframes blinkTextCursor {
+  from {
+    border-right-color: rgba(255, 255, 255, 0.75);
+  } to {
+      border-right-color: transparent;
+    }
+}
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
new file mode 100644
index 0000000..b5b543d
--- /dev/null
+++ b/assets/styles/global.scss
@@ -0,0 +1,49 @@
+/* ---- Includes ---- */
+// --- Components
+@import "components/footer";
+@import "components/navgiation";
+@import "components/project-section";
+@import "components/hero";
+@import "components/category-section";
+@import "components/contact-form";
+
+// --- Extras
+@import "extra/mobile";
+@import "extra/typewriter-effect";
+@import "extra/scroll-down-icon-animation";
+@import "extra/animate";
+
+// --- Pages
+@import "pages/project-page";
+@import "pages/about-page";
+@import "pages/work-page";
+
+/* ---- Global Styling ---- */
+* {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: 'Roboto Mono', serif !important;
+  background: #0f0f0f !important;
+  color: #fff !important;
+}
+
+.whitespace {
+  width: 100%;
+  height: 100px;
+}
+
+@media(max-width: 768px) {
+  .whitespace {
+    display: none;
+  }
+}
diff --git a/assets/styles/pages/about-page.scss b/assets/styles/pages/about-page.scss
new file mode 100644
index 0000000..557a381
--- /dev/null
+++ b/assets/styles/pages/about-page.scss
@@ -0,0 +1,8 @@
+.about {
+  height: 500px;
+  margin-top: 120px;
+}
+
+.image {
+  background: url(https://images.unsplash.com/photo-1540885762261-a2ca01f290f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2468&q=80) no-repeat 50% 70%;
+}
diff --git a/assets/styles/pages/project-page.scss b/assets/styles/pages/project-page.scss
new file mode 100644
index 0000000..4674ec7
--- /dev/null
+++ b/assets/styles/pages/project-page.scss
@@ -0,0 +1,11 @@
+.prev, .next p {
+  color: grey;
+}
+
+.prev p {
+  text-align: left;
+}
+
+.next p {
+  text-align: right;
+}
diff --git a/assets/styles/pages/work-page.scss b/assets/styles/pages/work-page.scss
new file mode 100644
index 0000000..a976664
--- /dev/null
+++ b/assets/styles/pages/work-page.scss
@@ -0,0 +1,21 @@
+.hero-content {
+  margin-left: 0%;
+}
+
+.hero-content p {
+  font-weight: 300;
+  line-height: 36px;
+  color: grey;
+}
+
+.hero-content h6 {
+  text-align: left;
+}
+
+@media(max-width: 768px) {
+  .hero-content {
+    padding-top: 50px;
+    width: 96%;
+    margin: 0 auto;
+  }
+}