├── t.min.js
├── wow.min.js
├── about.html
├── index.html
├── work.html
├── contact.html
├── project.html
├── style.css
└── animate.css


/t.min.js:
--------------------------------------------------------------------------------
1 | /*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/>*/
2 | ;(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);
3 | 


--------------------------------------------------------------------------------
/wow.min.js:
--------------------------------------------------------------------------------
1 | /*! WOW wow.js - v1.3.0 - 2016-10-04
2 | * https://wowjs.uk
3 | * 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"]});


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |       <meta charset="UTF-8">
  5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |       <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |       <meta name="author" content="harrnish">
  8 | 
  9 |       <title>About Me | Portfolio Website Template | CODEGRID</title>
 10 | 
 11 |       <!-- stylesheet -->
 12 |       <link rel="stylesheet" href="style.css">
 13 | 
 14 |       <!-- bootstrap cdns -->
 15 |       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 16 |       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 17 | 
 18 |       <!-- google fonts -->
 19 |       <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
 20 | 
 21 |       <!-- for on scroll animations -->
 22 |       <link rel="stylesheet" href="animate.css">
 23 |       <script src="wow.min.js"></script>
 24 | 
 25 | </head>
 26 | <body>
 27 |       <div class="wrapper">
 28 | 
 29 |             <!--------------- navbar starts here --------------->
 30 |             <nav>
 31 |                   <span id="brand">
 32 |                         <a href="index.html">harrnish</a>
 33 |                   </span>
 34 | 
 35 |                   <ul id="menu">
 36 |                         <li><a href="index.html">home<span>.</span></a></li>
 37 |                         <li><a href="work.html">work<span>.</span></a></li>
 38 |                         <li><a href="about.html">about me<span>.</span></a></li>
 39 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 40 |                   </ul>
 41 | 
 42 |                   <div id="toggle">
 43 |                         <div class="span">menu</div>
 44 |                   </div>
 45 | 
 46 |             </nav>
 47 | 
 48 |             <div id="resize">
 49 |                   <div class="close-btn">close</div>
 50 | 
 51 |                   <ul id="menu">
 52 |                         <li><a href="index.html">home<span>.</span></a></li>
 53 |                         <li><a href="work.html">work<span>.</span></a></li>
 54 |                         <li><a href="about.html">about me<span>.</span></a></li>
 55 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 56 |                   </ul>
 57 |             </div>
 58 | 
 59 |             <!--------------- navbar ends here --------------->
 60 | 
 61 | 
 62 |             <!--------------- hero image starts here --------------->
 63 |             <div class="container">
 64 |                   <div class="row">
 65 |                         <div class="col-lg-12 about image wow fadeInUp" data-wow-delay="1s"></div>
 66 |                   </div>
 67 |             </div>
 68 |             <!--------------- hero image ends here --------------->
 69 | 
 70 | 
 71 |             <!--------------- hero section starts here --------------->
 72 |             <div class="container">
 73 |                   <div class="hero-content">
 74 |                         <br><br>
 75 | 
 76 |                         <div class="row">
 77 |                               <div class="col-lg-12">
 78 |                                     <h3 class="wow fadeInUp" data-wow-delay="1.2s">about me.</h3><br>
 79 | 
 80 |                                     <p class="wow fadeInUp">Living with passion is what I strictly adhere to. “Always do what you love” how much ever hackneyed this sounds it holds absolutely true. That's why I travel a lot. Not for the sole reason of “loving” to travel but it helps me to get rid of the world and escape into a different dimension of my own. As I am a travel freak I love freezing the moments I relish. The art of capturing photos is something I am always fascinated by.</p>
 81 | 
 82 |                                     <p class="wow fadeInUp" data-wow-delay="0.2s">I am a continuous learner. Learning for me equates to exploring new ideas and growing as an individual. I just cannot imagine my life devoid of designing. I freely express my creativity and imagination by designing. And to give my passion of designing a platform I have a YouTube channel named, Codegrid.</p>
 83 | 
 84 |                               </div>
 85 |                         </div>
 86 |                   </div>
 87 |             </div>
 88 |             <!--------------- hero section ends here --------------->
 89 | 
 90 |             <div class="whitespace"></div>
 91 | 
 92 |             <!--------------- footer starts here --------------->
 93 |             <div class="footer">
 94 |                   <div class="container">
 95 |                         <br><br>
 96 | 
 97 |                         <div class="collab">
 98 |                               <div class="row">
 99 |                                     <div class="col-lg-12">
100 |                                           <p class="wow fadeInUp">Got an interesting project? I can help you.</p>
101 |                                     </div>
102 |                               </div>
103 |                         </div>
104 | 
105 |                         <br>
106 | 
107 |                         <div class="hr">
108 |                               <div class="row"></div>
109 |                         </div>
110 | 
111 |                         <br><br>
112 | 
113 |                         <div class="info">
114 |                               <div class="row">
115 |                                     <div class="col-lg-4" id="personal">
116 |                                           <p class="wow fadeInUp">connect with me</p>
117 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">ig @harrnish</h4>
118 |                                           <br><br>
119 |                                     </div>
120 | 
121 |                                     <div class="col-lg-4" id="media">
122 |                                           <p class="wow fadeInUp" data-wow-delay="0s">follow me</p>
123 | 
124 |                                           <ul>
125 |                                                 <li id="fb" class="wow fadeInUp" data-wow-delay="0.4s">fb</li>
126 |                                                 <li id="ig" class="wow fadeInUp" data-wow-delay="0.6s">ig</li>
127 |                                                 <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">tw</li>
128 |                                                 <li id="yt" class="wow fadeInUp" data-wow-delay="1s">yt</li>
129 |                                           </ul>
130 | 
131 |                                           <br><br>
132 |                                     </div>
133 | 
134 |                                     <div class="col-lg-4" id="address">
135 |                                           <p class="wow fadeInUp" data-wow-delay="0s">say hello</p>
136 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">harrnish@gmail.com</h4>
137 |                                           <br><br>
138 |                                     </div>
139 |                               </div>
140 |                         </div>
141 |                   </div>
142 |             </div>
143 | 
144 |             <!--------------- footer ends here --------------->
145 | 
146 |             <br><br><br><br>
147 | 
148 |       </div>
149 | 
150 |       <!-- greensock cdn -->
151 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
152 | 
153 |       <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
154 |       <script type="text/javascript">
155 | 
156 |       // navigation starts here
157 |       $("#toggle").click(function() {
158 |             $(this).toggleClass('on');
159 |             $("#resize").toggleClass("active");
160 |       });
161 | 
162 |       $("#resize ul li a").click(function() {
163 |             $(this).toggleClass('on');
164 |             $("#resize").toggleClass("active");
165 |       });
166 | 
167 |       $(".close-btn").click(function() {
168 |             $(this).toggleClass('on');
169 |             $("#resize").toggleClass("active");
170 |       });
171 | 
172 |       // navigation ends here
173 | 
174 |       // nav animation
175 | 
176 |       TweenMax.from("#brand", 1, {
177 |             delay: 0.4,
178 |             y: 10,
179 |             opacity: 0,
180 |             ease: Expo.easeInOut
181 |       })
182 | 
183 |       TweenMax.staggerFrom("#menu li a", 1, {
184 |             delay: 0.4,
185 |             opacity: 0,
186 |             ease: Expo.easeInOut
187 |       }, 0.1);
188 | 
189 |       // nav animation ends
190 | 
191 |       new WOW().init();
192 | 
193 | 
194 |       </script>
195 | </body>
196 | </html>
197 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |       <meta charset="UTF-8">
  5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |       <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |       <meta name="author" content="harrnish">
  8 | 
  9 |       <title>Portfolio Website Template | CODEGRID</title>
 10 | 
 11 |       <!-- stylesheet -->
 12 |       <link rel="stylesheet" href="style.css">
 13 | 
 14 |       <!-- bootstrap cdns -->
 15 |       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 16 |       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 17 | 
 18 |       <!-- google fonts -->
 19 |       <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
 20 | 
 21 |       <!-- terminal effect -->
 22 |       <script src="t.min.js"></script>
 23 | 
 24 |       <!-- for on scroll animations -->
 25 |       <link rel="stylesheet" href="animate.css">
 26 |       <script src="wow.min.js"></script>
 27 | 
 28 | </head>
 29 | <body>
 30 |       <div class="wrapper">
 31 | 
 32 |             <!--------------- navbar starts here --------------->
 33 |             <nav>
 34 |                   <span id="brand">
 35 |                         <a href="index.html">harrnish</a>
 36 |                   </span>
 37 | 
 38 |                   <ul id="menu">
 39 |                         <li><a href="index.html">home<span>.</span></a></li>
 40 |                         <li><a href="work.html">work<span>.</span></a></li>
 41 |                         <li><a href="about.html">about me<span>.</span></a></li>
 42 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 43 |                   </ul>
 44 | 
 45 |                   <div id="toggle">
 46 |                         <div class="span">menu</div>
 47 |                   </div>
 48 | 
 49 |             </nav>
 50 | 
 51 |             <div id="resize">
 52 |                   <div class="close-btn">close</div>
 53 | 
 54 |                   <ul id="menu">
 55 |                         <li><a href="index.html">home<span>.</span></a></li>
 56 |                         <li><a href="work.html">work<span>.</span></a></li>
 57 |                         <li><a href="about.html">about me<span>.</span></a></li>
 58 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 59 |                   </ul>
 60 |             </div>
 61 |             <!--------------- navbar ends here --------------->
 62 | 
 63 | 
 64 | 
 65 |             <!--------------- hero section starts here --------------->
 66 |             <div class="hero">
 67 |                   <div class="header">
 68 |                         <h1 class="line anim-typewriter">I make brands matter in culture.</h1>
 69 |                   </div>
 70 |             </div>
 71 | 
 72 |             <div class="scroll-down"></div>
 73 |             <!--------------- hero section ends here --------------->
 74 | 
 75 | 
 76 | 
 77 |             <!--------------- projects section starts here --------------->
 78 |             <div class="container-fluid">
 79 |                   <br><br><br>
 80 | 
 81 |                   <h6>Selected projects</h6>
 82 | 
 83 |                   <div class="vertical"></div>
 84 |                   <br>
 85 | 
 86 |                   <div class="whitespace"></div>
 87 |                   <div class="whitespace"></div>
 88 | 
 89 |                   <div class="row">
 90 |                         <div class="col-lg-8"></div>
 91 | 
 92 |                         <div class="col-lg-4 project project1 wow fadeInUp" onclick="location.href='project.html'"></div>
 93 |                   </div>
 94 | 
 95 |                   <div class="whitespace"></div>
 96 | 
 97 |                   <div class="row">
 98 |                         <div class="col-lg-6 project project2 wow fadeInUp" onclick="location.href='project.html'"></div>
 99 | 
100 |                         <div class="col-lg-6"></div>
101 |                   </div>
102 | 
103 |                   <div class="whitespace"></div>
104 | 
105 |                   <div class="row">
106 |                         <div class="col-lg-7"></div>
107 | 
108 |                         <div class="col-lg-4 project project3 wow fadeInUp" onclick="location.href='project.html'"></div>
109 | 
110 |                         <div class="col-lg-1"></div>
111 |                   </div>
112 | 
113 |                   <div class="whitespace"></div>
114 | 
115 |                   <div class="row">
116 |                         <div class="col-lg-1"></div>
117 | 
118 |                         <div class="col-lg-5 project project4 wow fadeInUp" onclick="location.href='project.html'"></div>
119 | 
120 |                         <div class="col-lg-6"></div>
121 |                   </div>
122 | 
123 |                   <div class="whitespace"></div>
124 |             </div>
125 |             <!--------------- projects section ends here --------------->
126 | 
127 | 
128 | 
129 |             <!--------------- footer starts here --------------->
130 |             <div class="footer">
131 |                   <div class="container">
132 |                         <br><br>
133 | 
134 |                         <div class="collab">
135 |                               <div class="row">
136 |                                     <div class="col-lg-12">
137 |                                           <p class="wow fadeInUp">Got an interesting project? I can help you.</p>
138 |                                     </div>
139 |                               </div>
140 |                         </div>
141 | 
142 |                         <br>
143 | 
144 |                         <div class="hr">
145 |                               <div class="row"></div>
146 |                         </div>
147 | 
148 |                         <br><br>
149 | 
150 |                         <div class="info">
151 |                               <div class="row">
152 |                                     <div class="col-lg-4" id="personal">
153 |                                           <p class="wow fadeInUp">connect with me</p>
154 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">ig @harrnish</h4>
155 |                                           <br><br>
156 |                                     </div>
157 | 
158 |                                     <div class="col-lg-4" id="media">
159 |                                           <p class="wow fadeInUp" data-wow-delay="0s">follow me</p>
160 | 
161 |                                           <ul>
162 |                                                 <li id="fb" class="wow fadeInUp" data-wow-delay="0.4s">fb</li>
163 |                                                 <li id="ig" class="wow fadeInUp" data-wow-delay="0.6s">ig</li>
164 |                                                 <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">tw</li>
165 |                                                 <li id="yt" class="wow fadeInUp" data-wow-delay="1s">yt</li>
166 |                                           </ul>
167 | 
168 |                                           <br><br>
169 |                                     </div>
170 | 
171 |                                     <div class="col-lg-4" id="address">
172 |                                           <p class="wow fadeInUp" data-wow-delay="0s">say hello</p>
173 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">harrnish@gmail.com</h4>
174 |                                           <br><br>
175 |                                     </div>
176 |                               </div>
177 |                         </div>
178 |                   </div>
179 |             </div>
180 |             <!--------------- footer ends here --------------->
181 | 
182 |             <br><br><br><br>
183 | 
184 |       </div>
185 | 
186 |       <!-- greensock cdn -->
187 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
188 | 
189 |       <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
190 |       <script type="text/javascript">
191 | 
192 |       // navigation starts here
193 | 
194 |       $("#toggle").click(function() {
195 |             $(this).toggleClass('on');
196 |             $("#resize").toggleClass("active");
197 |       });
198 | 
199 |       $("#resize ul li a").click(function() {
200 |             $(this).toggleClass('on');
201 |             $("#resize").toggleClass("active");
202 |       });
203 | 
204 |       $(".close-btn").click(function() {
205 |             $(this).toggleClass('on');
206 |             $("#resize").toggleClass("active");
207 |       });
208 | 
209 |       // navigation ends here
210 | 
211 |       // nav animation
212 | 
213 |       TweenMax.from("#brand", 1, {
214 |             delay: 0.4,
215 |             y: 10,
216 |             opacity: 0,
217 |             ease: Expo.easeInOut
218 |       })
219 | 
220 |       TweenMax.staggerFrom("#menu li a", 1, {
221 |             delay: 0.4,
222 |             opacity: 0,
223 |             ease: Expo.easeInOut
224 |       }, 0.1);
225 | 
226 |       // nav animation ends
227 | 
228 |       new WOW().init();
229 | 
230 |       </script>
231 | </body>
232 | </html>
233 | 


--------------------------------------------------------------------------------
/work.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |       <meta charset="UTF-8">
  5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |       <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |       <meta name="author" content="harrnish">
  8 | 
  9 |       <title>Work | Portfolio Website Template | CODEGRID</title>
 10 | 
 11 |       <!-- stylesheet -->
 12 |       <link rel="stylesheet" href="style.css">
 13 | 
 14 |       <!-- bootstrap cdns -->
 15 |       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 16 |       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 17 | 
 18 |       <!-- google fonts -->
 19 |       <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
 20 | 
 21 |       <!-- for on scroll animations -->
 22 |       <link rel="stylesheet" href="animate.css">
 23 |       <script src="wow.min.js"></script>
 24 | 
 25 | </head>
 26 | <body>
 27 |       <div class="wrapper">
 28 | 
 29 |             <!--------------- navbar starts here --------------->
 30 |             <nav>
 31 |                   <span id="brand">
 32 |                         <a href="index.html">harrnish</a>
 33 |                   </span>
 34 | 
 35 |                   <ul id="menu">
 36 |                         <li><a href="index.html">home<span>.</span></a></li>
 37 |                         <li><a href="work.html">work<span>.</span></a></li>
 38 |                         <li><a href="about.html">about me<span>.</span></a></li>
 39 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 40 |                   </ul>
 41 | 
 42 |                   <div id="toggle">
 43 |                         <div class="span">menu</div>
 44 |                   </div>
 45 | 
 46 |             </nav>
 47 | 
 48 |             <div id="resize">
 49 |                   <div class="close-btn">close</div>
 50 | 
 51 |                   <ul id="menu">
 52 |                         <li><a href="index.html">home<span>.</span></a></li>
 53 |                         <li><a href="work.html">work<span>.</span></a></li>
 54 |                         <li><a href="about.html">about me<span>.</span></a></li>
 55 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 56 |                   </ul>
 57 |             </div>
 58 | 
 59 |             <!--------------- navbar ends here --------------->
 60 | 
 61 |             <div class="whitespace"></div>
 62 | 
 63 |             <!--------------- hero section starts here --------------->
 64 |             <div class="container">
 65 |                   <div class="hero-content">
 66 |                         <br><br>
 67 | 
 68 |                         <div class="row">
 69 |                               <div class="col-lg-8">
 70 | 
 71 |                                     <h3 class="wow fadeInUp" data-wow-delay="1s">work.</h3><br>
 72 |                                     <p class="wow fadeInUp" data-wow-delay="1.2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, accusantium sint quod voluptatem dolorum, quaerat, ut iusto cumque magni ab repudiandae, quasi minus unde temporibus nulla eum eaque! Placeat praesentium sunt suscipit laboriosam deserunt commodi atque corporis, iure maiores dicta, fugit similique.</p>
 73 | 
 74 |                               </div>
 75 |                         </div>
 76 |                   </div>
 77 |             </div>
 78 | 
 79 |             <!--------------- hero section ends here --------------->
 80 | 
 81 |             <!--------------- projects section starts here --------------->
 82 |             <div class="container-fluid">
 83 | 
 84 |                   <div class="whitespace"></div>
 85 |                   <div class="whitespace"></div>
 86 | 
 87 |                   <div class="row">
 88 |                         <div class="col-lg-8"></div>
 89 | 
 90 |                         <div class="col-lg-4 project project1 wow fadeInUp" data-wow-delay="1.4s" onclick="location.href='project.html'"></div>
 91 |                   </div>
 92 | 
 93 |                   <div class="whitespace"></div>
 94 | 
 95 |                   <div class="row">
 96 |                         <div class="col-lg-6 project project2 wow fadeInUp" onclick="location.href='project.html'"></div>
 97 | 
 98 |                         <div class="col-lg-6"></div>
 99 |                   </div>
100 | 
101 |                   <div class="whitespace"></div>
102 | 
103 |                   <div class="row">
104 |                         <div class="col-lg-7"></div>
105 | 
106 |                         <div class="col-lg-4 project project3 wow fadeInUp" onclick="location.href='project.html'"></div>
107 | 
108 |                         <div class="col-lg-1"></div>
109 |                   </div>
110 | 
111 |                   <div class="whitespace"></div>
112 | 
113 |                   <div class="row">
114 |                         <div class="col-lg-1"></div>
115 | 
116 |                         <div class="col-lg-5 project project4 wow fadeInUp" onclick="location.href='project.html'"></div>
117 | 
118 |                         <div class="col-lg-6"></div>
119 |                   </div>
120 | 
121 |                   <div class="whitespace"></div>
122 |             </div>
123 | 
124 |             <!--------------- projects section ends here --------------->
125 | 
126 |             <!--------------- footer starts here --------------->
127 |             <div class="footer">
128 |                   <div class="container">
129 |                         <br><br>
130 | 
131 |                         <div class="collab">
132 |                               <div class="row">
133 |                                     <div class="col-lg-12">
134 |                                           <p class="wow fadeInUp">Got an interesting project? I can help you.</p>
135 |                                     </div>
136 |                               </div>
137 |                         </div>
138 | 
139 |                         <br>
140 | 
141 |                         <div class="hr">
142 |                               <div class="row"></div>
143 |                         </div>
144 | 
145 |                         <br><br>
146 | 
147 |                         <div class="info">
148 |                               <div class="row">
149 |                                     <div class="col-lg-4" id="personal">
150 |                                           <p class="wow fadeInUp">connect with me</p>
151 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">ig @harrnish</h4>
152 |                                           <br><br>
153 |                                     </div>
154 | 
155 |                                     <div class="col-lg-4" id="media">
156 |                                           <p class="wow fadeInUp" data-wow-delay="0s">follow me</p>
157 | 
158 |                                           <ul>
159 |                                                 <li id="fb" class="wow fadeInUp" data-wow-delay="0.4s">fb</li>
160 |                                                 <li id="ig" class="wow fadeInUp" data-wow-delay="0.6s">ig</li>
161 |                                                 <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">tw</li>
162 |                                                 <li id="yt" class="wow fadeInUp" data-wow-delay="1s">yt</li>
163 |                                           </ul>
164 | 
165 |                                           <br><br>
166 |                                     </div>
167 | 
168 |                                     <div class="col-lg-4" id="address">
169 |                                           <p class="wow fadeInUp" data-wow-delay="0s">say hello</p>
170 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">harrnish@gmail.com</h4>
171 |                                           <br><br>
172 |                                     </div>
173 |                               </div>
174 |                         </div>
175 |                   </div>
176 |             </div>
177 | 
178 |             <!--------------- footer ends here --------------->
179 | 
180 |             <br><br><br><br>
181 | 
182 |       </div>
183 | 
184 |       <!-- greensock cdn -->
185 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
186 | 
187 |       <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
188 |       <script type="text/javascript">
189 | 
190 |       // navigation starts here
191 |       $("#toggle").click(function() {
192 |             $(this).toggleClass('on');
193 |             $("#resize").toggleClass("active");
194 |       });
195 | 
196 |       $("#resize ul li a").click(function() {
197 |             $(this).toggleClass('on');
198 |             $("#resize").toggleClass("active");
199 |       });
200 | 
201 |       $(".close-btn").click(function() {
202 |             $(this).toggleClass('on');
203 |             $("#resize").toggleClass("active");
204 |       });
205 | 
206 |       // navigation ends here
207 | 
208 |       // nav animation
209 | 
210 |       TweenMax.from("#brand", 1, {
211 |             delay: 0.4,
212 |             y: 10,
213 |             opacity: 0,
214 |             ease: Expo.easeInOut
215 |       })
216 | 
217 |       TweenMax.staggerFrom("#menu li a", 1, {
218 |             delay: 0.4,
219 |             opacity: 0,
220 |             ease: Expo.easeInOut
221 |       }, 0.1);
222 | 
223 |       // nav animation ends
224 | 
225 |       new WOW().init();
226 | 
227 | 
228 |       </script>
229 | </body>
230 | </html>
231 | 


--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |       <meta charset="UTF-8">
  5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |       <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |       <meta name="author" content="harrnish">
  8 | 
  9 |       <title>Contact | Portfolio Website Template | CODEGRID</title>
 10 | 
 11 |       <!-- stylesheet -->
 12 |       <link rel="stylesheet" href="style.css">
 13 | 
 14 |       <!-- bootstrap cdns -->
 15 |       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 16 |       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 17 | 
 18 |       <!-- google fonts -->
 19 |       <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
 20 | 
 21 |       <!-- for on scroll animations -->
 22 |       <link rel="stylesheet" href="animate.css">
 23 |       <script src="wow.min.js"></script>
 24 | 
 25 | </head>
 26 | <body>
 27 |       <div class="wrapper">
 28 | 
 29 |             <!--------------- navbar starts here --------------->
 30 |             <nav>
 31 |                   <span id="brand">
 32 |                         <a href="index.html">harrnish</a>
 33 |                   </span>
 34 | 
 35 |                   <ul id="menu">
 36 |                         <li><a href="index.html">home<span>.</span></a></li>
 37 |                         <li><a href="work.html">work<span>.</span></a></li>
 38 |                         <li><a href="about.html">about me<span>.</span></a></li>
 39 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 40 |                   </ul>
 41 | 
 42 |                   <div id="toggle">
 43 |                         <div class="span">menu</div>
 44 |                   </div>
 45 | 
 46 |             </nav>
 47 | 
 48 |             <div id="resize">
 49 |                   <div class="close-btn">close</div>
 50 | 
 51 |                   <ul id="menu">
 52 |                         <li><a href="index.html">home<span>.</span></a></li>
 53 |                         <li><a href="work.html">work<span>.</span></a></li>
 54 |                         <li><a href="about.html">about me<span>.</span></a></li>
 55 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 56 |                   </ul>
 57 |             </div>
 58 | 
 59 |             <!--------------- navbar ends here --------------->
 60 | 
 61 |             <div class="whitespace"></div>
 62 | 
 63 |             <!--------------- hero section starts here say hello 👋 --------------->
 64 |             <div class="container">
 65 |                   <div class="hero-content">
 66 |                         <br><br>
 67 | 
 68 |                         <div class="row">
 69 |                               <div class="col-lg-8">
 70 | 
 71 |                                     <h3 class="wow fadeInUp" data-wow-delay="1s">say hello 👋</h3><br>
 72 |                                     <p class="wow fadeInUp" data-wow-delay="1.2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, accusantium sint quod voluptatem dolorum, quaerat, ut iusto cumque magni ab repudiandae, quasi minus unde temporibus nulla eum eaque! Placeat praesentium sunt suscipit laboriosam deserunt commodi atque corporis, iure maiores dicta, fugit similique.</p>
 73 | 
 74 |                               </div>
 75 |                         </div>
 76 |                   </div>
 77 |             </div>
 78 |             <!--------------- hero section ends here --------------->
 79 | 
 80 |             <!-- <div class="whitespace"></div> -->
 81 | 
 82 |             <!--------------- form section starts here --------------->
 83 |             <div class="container-fluid">
 84 |                   <div class="row">
 85 |                         <div class="col-lg-8">
 86 |                               <form name="contact-form" id="contact-form" method="post" action="">
 87 | 
 88 |                               <ul>
 89 | 
 90 |                               <li class="wow fadeInUp" data-wow-delay="1.4s">
 91 |                                     <label for="contact-name">Name :</label>
 92 |                                     <div class="textarea">
 93 |                                           <input type="text" name="contact-name" id="contact-name" value="" required>
 94 |                                     </div>
 95 |                               </li>
 96 | 
 97 |                               <li class="wow fadeInUp" data-wow-delay="1.6s">
 98 |                                     <label for="contact-email">Email :</label>
 99 |                                     <div class="textarea">
100 |                                           <input type="email" name="contact-email" id="contact-email" value="" required>
101 |                                     </div>
102 |                               </li>
103 | 
104 |                               <li class="wow fadeInUp" data-wow-delay="1.6s">
105 |                                     <label for="contact-project">Message :</label>
106 |                                     <div class="textarea">
107 |                                           <textarea type="email" name="contact-project" id="contact-project" rows="6" value="" required>
108 |                                           </textarea>
109 |                                     </div>
110 |                               </li>
111 | 
112 |                               </ul>
113 | 
114 |                               <button type="submit" name="contact-submit" id="contact-submit" class="send wow fadeInUp">Send Message</button>
115 | 
116 |                               </form>
117 |                         </div>
118 |                   </div>
119 |             </div>
120 | 
121 |             <!--------------- form section ends here --------------->
122 | 
123 |             <div class="whitespace"></div>
124 | 
125 |             <!--------------- footer starts here --------------->
126 |             <div class="footer">
127 |                   <div class="container">
128 |                         <br><br>
129 | 
130 |                         <div class="collab">
131 |                               <div class="row">
132 |                                     <div class="col-lg-12">
133 |                                           <p class="wow fadeInUp">Got an interesting project? I can help you.</p>
134 |                                     </div>
135 |                               </div>
136 |                         </div>
137 | 
138 |                         <br>
139 | 
140 |                         <div class="hr">
141 |                               <div class="row"></div>
142 |                         </div>
143 | 
144 |                         <br><br>
145 | 
146 |                         <div class="info">
147 |                               <div class="row">
148 |                                     <div class="col-lg-4" id="personal">
149 |                                           <p class="wow fadeInUp">connect with me</p>
150 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">ig @harrnish</h4>
151 |                                           <br><br>
152 |                                     </div>
153 | 
154 |                                     <div class="col-lg-4" id="media">
155 |                                           <p class="wow fadeInUp" data-wow-delay="0s">follow me</p>
156 | 
157 |                                           <ul>
158 |                                                 <li id="fb" class="wow fadeInUp" data-wow-delay="0.4s">fb</li>
159 |                                                 <li id="ig" class="wow fadeInUp" data-wow-delay="0.6s">ig</li>
160 |                                                 <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">tw</li>
161 |                                                 <li id="yt" class="wow fadeInUp" data-wow-delay="1s">yt</li>
162 |                                           </ul>
163 | 
164 |                                           <br><br>
165 |                                     </div>
166 | 
167 |                                     <div class="col-lg-4" id="address">
168 |                                           <p class="wow fadeInUp" data-wow-delay="0s">say hello</p>
169 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">harrnish@gmail.com</h4>
170 |                                           <br><br>
171 |                                     </div>
172 |                               </div>
173 |                         </div>
174 |                   </div>
175 |             </div>
176 |             <!--------------- footer ends here --------------->
177 | 
178 |             <br><br><br><br>
179 | 
180 |       </div>
181 | 
182 |       <!-- greensock cdn -->
183 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
184 | 
185 |       <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
186 |       <script type="text/javascript">
187 | 
188 |       // navigation starts here
189 |       $("#toggle").click(function() {
190 |             $(this).toggleClass('on');
191 |             $("#resize").toggleClass("active");
192 |       });
193 | 
194 |       $("#resize ul li a").click(function() {
195 |             $(this).toggleClass('on');
196 |             $("#resize").toggleClass("active");
197 |       });
198 | 
199 |       $(".close-btn").click(function() {
200 |             $(this).toggleClass('on');
201 |             $("#resize").toggleClass("active");
202 |       });
203 | 
204 |       // navigation ends here
205 | 
206 |       // nav animation
207 | 
208 |       TweenMax.from("#brand", 1, {
209 |             delay: 0.4,
210 |             y: 10,
211 |             opacity: 0,
212 |             ease: Expo.easeInOut
213 |       })
214 | 
215 |       TweenMax.staggerFrom("#menu li a", 1, {
216 |             delay: 0.4,
217 |             opacity: 0,
218 |             ease: Expo.easeInOut
219 |       }, 0.1);
220 | 
221 |       // nav animation ends
222 | 
223 | 
224 |       new WOW().init();
225 | 
226 | 
227 |       </script>
228 | </body>
229 | </html>
230 | 


--------------------------------------------------------------------------------
/project.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |       <meta charset="UTF-8">
  5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |       <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7 |       <meta name="author" content="harrnish">
  8 | 
  9 |       <title>Project | Portfolio Website Template | CODEGRID</title>
 10 | 
 11 |       <!-- stylesheet -->
 12 |       <link rel="stylesheet" href="style.css">
 13 | 
 14 |       <!-- bootstrap cdns -->
 15 |       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 16 |       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 17 | 
 18 |       <!-- google fonts -->
 19 |       <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
 20 | 
 21 |       <!-- ionicons cdn -->
 22 |       <script src="https://unpkg.com/ionicons@4.5.5/dist/ionicons.js"></script>
 23 | 
 24 | 
 25 |       <!-- for on scroll animations -->
 26 |       <link rel="stylesheet" href="animate.css">
 27 |       <script src="wow.min.js"></script>
 28 | 
 29 | </head>
 30 | <body>
 31 |       <div class="wrapper">
 32 | 
 33 |             <!--------------- navbar starts here --------------->
 34 |             <nav>
 35 |                   <span id="brand">
 36 |                         <a href="index.html">harrnish</a>
 37 |                   </span>
 38 | 
 39 |                   <ul id="menu">
 40 |                         <li><a href="index.html">home<span>.</span></a></li>
 41 |                         <li><a href="work.html">work<span>.</span></a></li>
 42 |                         <li><a href="about.html">about me<span>.</span></a></li>
 43 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 44 |                   </ul>
 45 | 
 46 |                   <div id="toggle">
 47 |                         <div class="span">menu</div>
 48 |                   </div>
 49 | 
 50 |             </nav>
 51 | 
 52 |             <div id="resize">
 53 |                   <div class="close-btn">close</div>
 54 | 
 55 |                   <ul id="menu">
 56 |                         <li><a href="index.html">home<span>.</span></a></li>
 57 |                         <li><a href="work.html">work<span>.</span></a></li>
 58 |                         <li><a href="about.html">about me<span>.</span></a></li>
 59 |                         <li><a href="contact.html">contact<span>.</span></a></li>
 60 |                   </ul>
 61 |             </div>
 62 | 
 63 |             <!--------------- navbar ends here --------------->
 64 | 
 65 |             <div class="whitespace"></div>
 66 | 
 67 |             <!--------------- hero section starts here --------------->
 68 |             <div class="container">
 69 |                   <div class="hero-content">
 70 |                         <br><br>
 71 |                         <div class="row">
 72 |                               <div class="col-lg-12">
 73 |                                     <br>
 74 | 
 75 |                                     <h1 class="wow fadeInUp" data-wow-delay="1s">Project Name</h1><br><br>
 76 | 
 77 |                                     <div class="row">
 78 |                                           <div class="col-lg-4">
 79 |                                                 <p class="wow fadeInUp" data-wow-delay="1.2s">service :</p>
 80 |                                                 <h6 class="wow fadeInUp" data-wow-delay="1.3s">Web Development</h6>
 81 |                                           </div>
 82 | 
 83 |                                           <div class="col-lg-4">
 84 |                                                 <p class="wow fadeInUp" data-wow-delay="1.4s">started :</p>
 85 |                                                 <h6 class="wow fadeInUp" data-wow-delay="1.5s">8 May 2019</h6>
 86 |                                           </div>
 87 | 
 88 |                                           <div class="col-lg-4">
 89 |                                                 <p class="wow fadeInUp" data-wow-delay="1.6s">completed :</p>
 90 |                                                 <h6 class="wow fadeInUp" data-wow-delay="1.7s">15 May 2019</h6>
 91 |                                           </div>
 92 |                                     </div>
 93 |                                     <br>
 94 |                                     <p class="wow fadeInUp" data-wow-delay="1.8s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum officia molestiae laboriosam, rem reprehenderit. Laboriosam quae alias, iure nesciunt dolorum. Eaque, magni, enim. Dolores, provident voluptas dicta commodi vel magni nesciunt sed maiores aperiam illo officiis voluptate at quod, praesentium excepturi enim.</p>
 95 |                               </div>
 96 |                         </div>
 97 |                   </div>
 98 |             </div>
 99 |             <!--------------- hero section ends here --------------->
100 | 
101 | 
102 |             <!--------------- project image section starts here --------------->
103 | 
104 |             <div class="project-img">
105 |                   <div class="container">
106 |                         <br><br>
107 |                         <div class="row">
108 |                               <div class="col-md-8">
109 |                                     <div class="project image wow fadeInUp" data-wow-delay="0.8s"></div>
110 |                               </div>
111 |                               <div class="col-md-4">
112 |                                     <div class="project image wow fadeInUp" data-wow-delay="0.8s"></div>
113 |                               </div>
114 |                         </div>
115 |                   </div>
116 |             </div>
117 | 
118 |             <!--------------- project image section ends here --------------->
119 | 
120 |             <br><br>
121 | 
122 |             <!--------------- project nav starts here --------------->
123 | 
124 |             <div class="project-nav">
125 |                   <div class="container">
126 |                         <div class="row">
127 |                               <div class="col-lg-6 prev">
128 |                                     <p><ion-icon name="arrow-back"></ion-icon>previous</p>
129 |                               </div>
130 |                               <div class="col-lg-6 next">
131 |                                     <p>next<ion-icon name="arrow-forward"></ion-icon></p>
132 |                               </div>
133 |                         </div>
134 |                   </div>
135 |             </div>
136 | 
137 |             <!--------------- project nav starts here --------------->
138 | 
139 |             <div class="whitespace"></div>
140 | 
141 | 
142 |             <!--------------- footer starts here --------------->
143 |             <div class="footer">
144 |                   <div class="container">
145 |                         <br><br>
146 | 
147 |                         <div class="collab">
148 |                               <div class="row">
149 |                                     <div class="col-lg-12">
150 |                                           <p class="wow fadeInUp">Got an interesting project? I can help you.</p>
151 |                                     </div>
152 |                               </div>
153 |                         </div>
154 | 
155 |                         <br>
156 | 
157 |                         <div class="hr">
158 |                               <div class="row"></div>
159 |                         </div>
160 | 
161 |                         <br><br>
162 | 
163 |                         <div class="info">
164 |                               <div class="row">
165 |                                     <div class="col-lg-4" id="personal">
166 |                                           <p class="wow fadeInUp">connect with me</p>
167 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">ig @harrnish</h4>
168 |                                           <br><br>
169 |                                     </div>
170 | 
171 |                                     <div class="col-lg-4" id="media">
172 |                                           <p class="wow fadeInUp" data-wow-delay="0s">follow me</p>
173 | 
174 |                                           <ul>
175 |                                                 <li id="fb" class="wow fadeInUp" data-wow-delay="0.4s">fb</li>
176 |                                                 <li id="ig" class="wow fadeInUp" data-wow-delay="0.6s">ig</li>
177 |                                                 <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">tw</li>
178 |                                                 <li id="yt" class="wow fadeInUp" data-wow-delay="1s">yt</li>
179 |                                           </ul>
180 | 
181 |                                           <br><br>
182 |                                     </div>
183 | 
184 |                                     <div class="col-lg-4" id="address">
185 |                                           <p class="wow fadeInUp" data-wow-delay="0s">say hello</p>
186 |                                           <h4 class="wow fadeInUp" data-wow-delay="0.2s">harrnish@gmail.com</h4>
187 |                                           <br><br>
188 |                                     </div>
189 |                               </div>
190 |                         </div>
191 |                   </div>
192 |             </div>
193 | 
194 |             <!--------------- footer ends here --------------->
195 | 
196 |             <br><br><br><br>
197 | 
198 |       </div>
199 | 
200 |       <!-- greensock cdn -->
201 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
202 | 
203 |       <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
204 |       <script type="text/javascript">
205 | 
206 |       // navigation starts here
207 |       $("#toggle").click(function() {
208 |             $(this).toggleClass('on');
209 |             $("#resize").toggleClass("active");
210 |       });
211 | 
212 |       $("#resize ul li a").click(function() {
213 |             $(this).toggleClass('on');
214 |             $("#resize").toggleClass("active");
215 |       });
216 | 
217 |       $(".close-btn").click(function() {
218 |             $(this).toggleClass('on');
219 |             $("#resize").toggleClass("active");
220 |       });
221 | 
222 |       // navigation ends here
223 | 
224 |       // nav animation
225 | 
226 |       TweenMax.from("#brand", 1, {
227 |             delay: 0.4,
228 |             y: 10,
229 |             opacity: 0,
230 |             ease: Expo.easeInOut
231 |       })
232 | 
233 |       TweenMax.staggerFrom("#menu li a", 1, {
234 |             delay: 0.4,
235 |             opacity: 0,
236 |             ease: Expo.easeInOut
237 |       }, 0.1);
238 | 
239 |       // nav animation ends
240 | 
241 | 
242 | 
243 |       new WOW().init();
244 | 
245 | 
246 |       </script>
247 | </body>
248 | </html>
249 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /*--------------- basic styling --------------- */
  3 | html, body {
  4 |       margin: 0;
  5 |       padding: 0;
  6 |       width: 100%;
  7 |       height: 100%;
  8 |       font-family: "Roboto Mono" !important;
  9 |       background: #0f0f0f !important;
 10 |       color: #fff !important;
 11 | }
 12 | 
 13 | .whitespace {
 14 |       width: 100%;
 15 |       height: 100px;
 16 | }
 17 | 
 18 | @media(max-width: 768px) {
 19 |       .whitespace {
 20 |             display: none;
 21 |       }
 22 | }
 23 | 
 24 | /*--------------- typewriter effect --------------- */
 25 | .line {
 26 |       width: 24em;
 27 |       top: 50%;
 28 |       margin: auto;
 29 |       border-right: 2px solid rgba(255, 255, 255, 0.75);
 30 |       text-align: center;
 31 |       white-space: nowrap;
 32 |       overflow: hidden;
 33 |       transform: translateY(-50%);
 34 | }
 35 | 
 36 | .anim-typewriter {
 37 |       animation: typewriter 4s steps(40) 1s 1 normal both,
 38 |       blinkTextCussor 500ms steps(40) infinite normal;
 39 | }
 40 | 
 41 | @keyframes typewriter {
 42 |       from {
 43 |             width: 0;
 44 |       }
 45 |       to {
 46 |             width: 18em;
 47 |       }
 48 | }
 49 | 
 50 | @media(max-width: 768px) {
 51 |       @keyframes typewriter {
 52 |             from {
 53 |                   width: 0;
 54 |             }
 55 |             to {
 56 |                   width: 17em;
 57 |             }
 58 |       }
 59 | }
 60 | 
 61 | @keyframes blinkTextCussor {
 62 |       from {
 63 |             border-right-color: rgba(255, 255, 255, 0.75);
 64 |       }
 65 |       to {
 66 |             border-right-color: transparent;
 67 |       }
 68 | }
 69 | 
 70 | /*--------------- navigation --------------- */
 71 | nav {
 72 |       width: 100%;
 73 |       background: #0f0f0f;
 74 |       height: 80px;
 75 |       position: fixed;
 76 |       z-index: 1;
 77 | }
 78 | 
 79 | nav #brand {
 80 |       float: left;
 81 |       display: block;
 82 |       margin-left: 82px;
 83 |       line-height: 80px;
 84 |       font-weight: bold;
 85 | }
 86 | 
 87 | nav #brand a {
 88 |       color: #fff;
 89 |       transition: all 0.3s ease-out;
 90 | }
 91 | 
 92 | nav #brand a:hover {
 93 |       text-decoration: none;
 94 | }
 95 | 
 96 | nav #menu {
 97 |       float: left;
 98 |       right: 80px;
 99 |       position: fixed;
100 | }
101 | 
102 | nav #menu li {
103 |       padding-left: 40px;
104 |       display: inline-block;
105 |       cursor: pointer;
106 |       font-weight: 300;
107 |       line-height: 80px;
108 |       position: relative;
109 |       transition: all 0.3s ease-out;
110 | }
111 | 
112 | nav #menu li span {
113 |       font-weight: 700;
114 | }
115 | 
116 | nav #menu li a {
117 |       color: #fff;
118 | }
119 | 
120 | nav #menu li a:hover {
121 |       text-decoration: none;
122 | }
123 | 
124 | #toggle {
125 |       position: absolute;
126 |       right: 30px;
127 |       top: 20px;
128 |       font-weight: 300;
129 |       z-index: 2;
130 |       width: 30px;
131 |       height: 30px;
132 |       cursor: pointer;
133 |       float: right;
134 |       transition: all 0.3s ease-out;
135 |       visibility: hidden;
136 |       opacity: 0;
137 | }
138 | 
139 | .close-btn {
140 |       position: absolute;
141 |       right: 16px;
142 |       font-weight: 300;
143 |       z-index: 2;
144 |       cursor: pointer;
145 |       top: -2px;
146 |       line-height: 80px;
147 | }
148 | 
149 | #resize {
150 |       z-index: 1;
151 |       top: 0px;
152 |       position: fixed;
153 |       background: #0f0f0f;
154 |       width: 100%;
155 |       height: 100%;
156 |       visibility: hidden;
157 |       opacity: 0;
158 |       transition: all 1s ease-out;
159 | }
160 | 
161 | #resize #menu {
162 |       height: 90px;
163 |       position: absolute;
164 |       left: 45%;
165 |       transform: translateX(-40%);
166 |       text-align: center;
167 |       display: table-cell;
168 |       vertical-align: center;
169 | }
170 | 
171 | #resize #menu li {
172 |       display: block;
173 |       text-align: center;
174 |       padding: 10px 0;
175 |       font-size: 50px;
176 |       min-height: 50px;
177 |       font-weight: bold;
178 |       cursor: pointer;
179 |       transition: all 0.3s ease-out;
180 | }
181 | 
182 | #resize li:nth-child(1) {
183 |       margin-top: 140px;
184 | }
185 | 
186 | #resize #menu li a {
187 |       color: #fff;
188 | }
189 | 
190 | #resize #menu li a:hover {
191 |       text-decoration: none;
192 | }
193 | 
194 | #resize.active {
195 |       visibility: visible;
196 |       opacity: 1;
197 | }
198 | 
199 | @media(max-width: 768px) {
200 |       #toggle {
201 |             visibility: visible;
202 |             opacity: 1;
203 |             margin-top: 6px;
204 |             margin-right: 4px;
205 |       }
206 | 
207 |       nav #brand {
208 |             margin-left: 24px;
209 |       }
210 | 
211 |       #menu a {
212 |             font-size: 20px;
213 |             font-weight: 300;
214 |       }
215 | 
216 |       #resize li span {
217 |             font-weight: bolder;
218 |       }
219 | 
220 |       nav #menu {
221 |             display: none;
222 |       }
223 | }
224 | 
225 | @media(min-width: 768px) {
226 |       #resize {
227 |             visibility: hidden !important;
228 |       }
229 | }
230 | 
231 | /*--------------- hero section --------------- */
232 | .hero {
233 |       height: 100vh;
234 |       display: flex;
235 |       align-items: center;
236 |       justify-content: center;
237 | }
238 | 
239 | .hero h1 {
240 |       font-weight: lighter;
241 |       text-align: center;
242 |       letter-spacing: -2px;
243 |       line-height: 58px;
244 | }
245 | 
246 | @media(max-width: 768px) {
247 |       .header h1 {
248 |             font-size: 26px;
249 |       }
250 | }
251 | 
252 | /*--------------- scroll down icon animation --------------- */
253 | .scroll-down {
254 |       position: absolute;
255 |       left: 50%;
256 |       bottom: 100px;
257 |       display: block;
258 |       text-align: center;
259 |       font-size: 20px;
260 |       z-index: 0;
261 |       text-decoration: none;
262 |       text-shadow: 0;
263 |       width: 13px;
264 |       height: 13px;
265 |       border-bottom: 2px solid #fff;
266 |       border-right: 2px solid #fff;
267 |       -webkit-transform: translate(-50%, 0) rotate(45deg);
268 |       animation: fade_move_down 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
269 | }
270 | 
271 | @keyframes fade_move_down {
272 |       0% {
273 |             transform: translate(0, -20px) rotate(45deg);
274 |             opacity: 0;
275 |       }
276 |       50% {
277 |             opacity: 1;
278 |       }
279 |       100% {
280 |             transform: translate(0, 20px) rotate(45deg);
281 |             opacity: 0;
282 |       }
283 | }
284 | 
285 | /*--------------- projects section --------------- */
286 | h6 {
287 |       text-align: center;
288 | }
289 | 
290 | .vertical {
291 |       margin-top: 40px;
292 |       border-left: 1px solid #fff;
293 |       height: 80px;
294 |       position: absolute;
295 |       left: 50%;
296 | }
297 | 
298 | .project {
299 |       height: 500px;
300 | }
301 | 
302 | .project1 {
303 |       background: url(https://images.unsplash.com/photo-1540349220179-09d3866f2e74?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80) no-repeat 50% 50%;
304 |       background-size: cover;
305 | }
306 | 
307 | .project1::after {
308 |       content: "timeless flow.";
309 |       font-family: "Roboto Mono";
310 |       font-size: 36px;
311 |       position: relative;
312 |       color: #fff;
313 |       display: block;
314 |       top: 8%;
315 |       left: -60%;
316 |       right: 0;
317 |       bottom: 0;
318 | }
319 | 
320 | .project2 {
321 |       background: url(https://images.unsplash.com/photo-1468870045442-e7d799d8c98a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2448&q=80) no-repeat 50% 50%;
322 |       background-size: cover;
323 | }
324 | 
325 | .project2::after {
326 |       content: "foretime.";
327 |       font-family: "Roboto Mono";
328 |       font-size: 36px;
329 |       position: relative;
330 |       color: #fff;
331 |       display: block;
332 |       top: 80%;
333 |       left: 90%;
334 |       right: 0;
335 |       bottom: 0;
336 | }
337 | 
338 | .project3 {
339 |       background: url(https://images.unsplash.com/photo-1482501157762-56897a411e05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80) no-repeat 50% 50%;
340 |       background-size: cover;
341 | }
342 | 
343 | .project3::after {
344 |       content: "never again.";
345 |       font-family: "Roboto Mono";
346 |       font-size: 36px;
347 |       position: relative;
348 |       color: #fff;
349 |       display: block;
350 |       top: 80%;
351 |       left: -50%;
352 |       right: 0;
353 |       bottom: 0;
354 | }
355 | 
356 | .project4 {
357 |       background: url(https://images.unsplash.com/photo-1435685813800-51ba4ceb9c4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1785&q=80) no-repeat 50% 50%;
358 |       background-size: cover;
359 | }
360 | 
361 | .project4::after {
362 |       content: "departure.";
363 |       font-family: "Roboto Mono";
364 |       font-size: 36px;
365 |       position: relative;
366 |       color: #fff;
367 |       display: block;
368 |       top: 10%;
369 |       left: 90%;
370 |       right: 0;
371 |       bottom: 0;
372 | }
373 | 
374 | @media(max-width: 768px) {
375 |       .project {
376 |             width: 90% !important;
377 |             margin: 14px auto;
378 |       }
379 | 
380 |       .vertical {
381 |             display: none;
382 |       }
383 | 
384 |       .project1::after, .project2::after, .project3::after, .project4::after {
385 |             display: none;
386 |       }
387 | }
388 | 
389 | /*--------------- footer section --------------- */
390 | .collab {
391 |       text-align: right;
392 | }
393 | 
394 | .collab p {
395 |       font-weight: lighter !important;
396 |       margin-bottom: 20px;
397 | }
398 | 
399 | .hr {
400 |       background: rgba(255, 255, 255, 0.2);
401 |       height: 1px;
402 | }
403 | 
404 | .info h4 {
405 |       font-size: 18px;
406 |       font-weight: lighter;
407 | }
408 | 
409 | .info p {
410 |       color: grey;
411 |       font-weight: lighter;
412 | }
413 | 
414 | .info li {
415 |       font-weight: lighter;
416 |       color: #fff;
417 |       font-size: 18px;
418 |       padding-left: 20px;
419 | }
420 | 
421 | #fb::before {
422 |       display: inline-block;
423 |       content: '';
424 |       border-radius: 100%;
425 |       height: 4px;
426 |       width: 4px;
427 |       margin-right: 6px;
428 |       background: #3b5998;
429 | }
430 | 
431 | 
432 | #ig::before {
433 |       display: inline-block;
434 |       content: '';
435 |       border-radius: 100%;
436 |       height: 4px;
437 |       width: 4px;
438 |       margin-right: 6px;
439 |       background: #fcaf45;
440 | }
441 | 
442 | 
443 | #tw::before {
444 |       display: inline-block;
445 |       content: '';
446 |       border-radius: 100%;
447 |       height: 4px;
448 |       width: 4px;
449 |       margin-right: 6px;
450 |       background: #55acee;
451 | }
452 | 
453 | 
454 | #yt::before {
455 |       display: inline-block;
456 |       content: '';
457 |       border-radius: 100%;
458 |       height: 4px;
459 |       width: 4px;
460 |       margin-right: 6px;
461 |       background: #c4302b;
462 | }
463 | 
464 | #media, #address {
465 |       text-align: right;
466 | }
467 | 
468 | #media ul {
469 |       list-style: none;
470 | }
471 | 
472 | #media ul li {
473 |       display: inline-block;
474 | }
475 | 
476 | @media(max-width: 768px) {
477 |       .collab, #personal, #media, #address {
478 |             text-align: center;
479 |       }
480 | 
481 |       .info ul {
482 |             margin: 0 0 0 -22px;
483 |             padding: 0;
484 |       }
485 | }
486 | 
487 | /*--------------- work page --------------- */
488 | 
489 | .hero-content {
490 |       margin-left: 0%;
491 | }
492 | 
493 | .hero-content p {
494 |       font-weight: 300;
495 |       line-height: 36px;
496 |       color: grey;
497 | }
498 | 
499 | .hero-content h6 {
500 |       text-align: left;
501 | }
502 | 
503 | @media(max-width: 768px) {
504 |       .hero-content {
505 |             padding-top: 50px;
506 |             width: 96%;
507 |             margin: 0 auto;
508 |       }
509 | }
510 | 
511 | /*---------------about page --------------- */
512 | 
513 | .about {
514 |       height: 500px;
515 |       margin-top: 120px;
516 | }
517 | 
518 | .image {
519 |       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%;
520 | }
521 | 
522 | /*--------------- contact form --------------- */
523 | 
524 | #contact-form {
525 |       margin: 5% 1.4%;
526 | }
527 | 
528 | #contact-form ul {
529 |       list-style: none;
530 |       border-radius: 5px;
531 |       margin-bottom: 40px;
532 | }
533 | 
534 | #contact-form li {
535 |       padding: 10px;
536 | }
537 | 
538 | #contact-form li:last-of-type {
539 |       border-bottom: none;
540 | }
541 | 
542 | #contact-form label {
543 |       display: block;
544 |       font-size: .8em;
545 |       color: #999;
546 |       padding-left: 5px;
547 | }
548 | 
549 | #contact-form input, #contact-form textarea {
550 |       width: 100%;
551 |       padding: 5px;
552 |       border: none;
553 |       resize: vertical;
554 |       background: transparent;
555 |       color: #fff;
556 |       font-weight: bolder;
557 | }
558 | 
559 | input:focus {
560 |       outline: none;
561 |       border: none;
562 | }
563 | 
564 | textarea:focus {
565 |       outline: none;
566 |       border: none;
567 | }
568 | 
569 | .textarea {
570 |       border-bottom: 1px solid #dfdfdf;
571 | }
572 | 
573 | .send {
574 |       margin-left: 50px;
575 |       text-transform: uppercase;
576 |       padding: 20px 30px;
577 |       background: transparent;
578 |       color: #dfdfdf;
579 |       font-size: 14px;
580 |       letter-spacing: 2px;
581 | }
582 | 
583 | .send:hover {
584 |       background: #dfdfdf;
585 |       color: #101010;
586 | }
587 | 
588 | @media(max-width: 768px) {
589 |       #contact-form {
590 |             margin: 5% -8%;
591 |             width: 98%;
592 |       }
593 | }
594 | 
595 | /*--------------- project page --------------- */
596 | 
597 | .prev, .next p {
598 |       color: grey;
599 | }
600 | 
601 | .prev p {
602 |       text-align: left;
603 | }
604 | 
605 | .next p {
606 |       text-align: right;
607 | }
608 | 


--------------------------------------------------------------------------------
/animate.css:
--------------------------------------------------------------------------------
   1 | @charset "UTF-8";
   2 | 
   3 | 
   4 | /*!
   5 | Animate.css - http://daneden.me/animate
   6 | Licensed under the MIT license
   7 | 
   8 | Copyright (c) 2013 Daniel Eden
   9 | 
  10 | 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:
  11 | 
  12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  13 | 
  14 | 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.
  15 | */
  16 | 
  17 | .animated {
  18 |   -webkit-animation-duration: 1s;
  19 |   animation-duration: 1s;
  20 |   -webkit-animation-fill-mode: both;
  21 |   animation-fill-mode: both;
  22 | }
  23 | 
  24 | .animated.hinge {
  25 |   -webkit-animation-duration: 2s;
  26 |   animation-duration: 2s;
  27 | }
  28 | 
  29 | @-webkit-keyframes bounce {
  30 |   0%, 20%, 50%, 80%, 100% {
  31 |     -webkit-transform: translateY(0);
  32 |     transform: translateY(0);
  33 |   }
  34 | 
  35 |   40% {
  36 |     -webkit-transform: translateY(-30px);
  37 |     transform: translateY(-30px);
  38 |   }
  39 | 
  40 |   60% {
  41 |     -webkit-transform: translateY(-15px);
  42 |     transform: translateY(-15px);
  43 |   }
  44 | }
  45 | 
  46 | @keyframes bounce {
  47 |   0%, 20%, 50%, 80%, 100% {
  48 |     -webkit-transform: translateY(0);
  49 |     -ms-transform: translateY(0);
  50 |     transform: translateY(0);
  51 |   }
  52 | 
  53 |   40% {
  54 |     -webkit-transform: translateY(-30px);
  55 |     -ms-transform: translateY(-30px);
  56 |     transform: translateY(-30px);
  57 |   }
  58 | 
  59 |   60% {
  60 |     -webkit-transform: translateY(-15px);
  61 |     -ms-transform: translateY(-15px);
  62 |     transform: translateY(-15px);
  63 |   }
  64 | }
  65 | 
  66 | .bounce {
  67 |   -webkit-animation-name: bounce;
  68 |   animation-name: bounce;
  69 | }
  70 | 
  71 | @-webkit-keyframes flash {
  72 |   0%, 50%, 100% {
  73 |     opacity: 1;
  74 |   }
  75 | 
  76 |   25%, 75% {
  77 |     opacity: 0;
  78 |   }
  79 | }
  80 | 
  81 | @keyframes flash {
  82 |   0%, 50%, 100% {
  83 |     opacity: 1;
  84 |   }
  85 | 
  86 |   25%, 75% {
  87 |     opacity: 0;
  88 |   }
  89 | }
  90 | 
  91 | .flash {
  92 |   -webkit-animation-name: flash;
  93 |   animation-name: flash;
  94 | }
  95 | 
  96 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  97 | 
  98 | @-webkit-keyframes pulse {
  99 |   0% {
 100 |     -webkit-transform: scale(1);
 101 |     transform: scale(1);
 102 |   }
 103 | 
 104 |   50% {
 105 |     -webkit-transform: scale(1.1);
 106 |     transform: scale(1.1);
 107 |   }
 108 | 
 109 |   100% {
 110 |     -webkit-transform: scale(1);
 111 |     transform: scale(1);
 112 |   }
 113 | }
 114 | 
 115 | @keyframes pulse {
 116 |   0% {
 117 |     -webkit-transform: scale(1);
 118 |     -ms-transform: scale(1);
 119 |     transform: scale(1);
 120 |   }
 121 | 
 122 |   50% {
 123 |     -webkit-transform: scale(1.1);
 124 |     -ms-transform: scale(1.1);
 125 |     transform: scale(1.1);
 126 |   }
 127 | 
 128 |   100% {
 129 |     -webkit-transform: scale(1);
 130 |     -ms-transform: scale(1);
 131 |     transform: scale(1);
 132 |   }
 133 | }
 134 | 
 135 | .pulse {
 136 |   -webkit-animation-name: pulse;
 137 |   animation-name: pulse;
 138 | }
 139 | 
 140 | @-webkit-keyframes shake {
 141 |   0%, 100% {
 142 |     -webkit-transform: translateX(0);
 143 |     transform: translateX(0);
 144 |   }
 145 | 
 146 |   10%, 30%, 50%, 70%, 90% {
 147 |     -webkit-transform: translateX(-10px);
 148 |     transform: translateX(-10px);
 149 |   }
 150 | 
 151 |   20%, 40%, 60%, 80% {
 152 |     -webkit-transform: translateX(10px);
 153 |     transform: translateX(10px);
 154 |   }
 155 | }
 156 | 
 157 | @keyframes shake {
 158 |   0%, 100% {
 159 |     -webkit-transform: translateX(0);
 160 |     -ms-transform: translateX(0);
 161 |     transform: translateX(0);
 162 |   }
 163 | 
 164 |   10%, 30%, 50%, 70%, 90% {
 165 |     -webkit-transform: translateX(-10px);
 166 |     -ms-transform: translateX(-10px);
 167 |     transform: translateX(-10px);
 168 |   }
 169 | 
 170 |   20%, 40%, 60%, 80% {
 171 |     -webkit-transform: translateX(10px);
 172 |     -ms-transform: translateX(10px);
 173 |     transform: translateX(10px);
 174 |   }
 175 | }
 176 | 
 177 | .shake {
 178 |   -webkit-animation-name: shake;
 179 |   animation-name: shake;
 180 | }
 181 | 
 182 | @-webkit-keyframes swing {
 183 |   20% {
 184 |     -webkit-transform: rotate(15deg);
 185 |     transform: rotate(15deg);
 186 |   }
 187 | 
 188 |   40% {
 189 |     -webkit-transform: rotate(-10deg);
 190 |     transform: rotate(-10deg);
 191 |   }
 192 | 
 193 |   60% {
 194 |     -webkit-transform: rotate(5deg);
 195 |     transform: rotate(5deg);
 196 |   }
 197 | 
 198 |   80% {
 199 |     -webkit-transform: rotate(-5deg);
 200 |     transform: rotate(-5deg);
 201 |   }
 202 | 
 203 |   100% {
 204 |     -webkit-transform: rotate(0deg);
 205 |     transform: rotate(0deg);
 206 |   }
 207 | }
 208 | 
 209 | @keyframes swing {
 210 |   20% {
 211 |     -webkit-transform: rotate(15deg);
 212 |     -ms-transform: rotate(15deg);
 213 |     transform: rotate(15deg);
 214 |   }
 215 | 
 216 |   40% {
 217 |     -webkit-transform: rotate(-10deg);
 218 |     -ms-transform: rotate(-10deg);
 219 |     transform: rotate(-10deg);
 220 |   }
 221 | 
 222 |   60% {
 223 |     -webkit-transform: rotate(5deg);
 224 |     -ms-transform: rotate(5deg);
 225 |     transform: rotate(5deg);
 226 |   }
 227 | 
 228 |   80% {
 229 |     -webkit-transform: rotate(-5deg);
 230 |     -ms-transform: rotate(-5deg);
 231 |     transform: rotate(-5deg);
 232 |   }
 233 | 
 234 |   100% {
 235 |     -webkit-transform: rotate(0deg);
 236 |     -ms-transform: rotate(0deg);
 237 |     transform: rotate(0deg);
 238 |   }
 239 | }
 240 | 
 241 | .swing {
 242 |   -webkit-transform-origin: top center;
 243 |   -ms-transform-origin: top center;
 244 |   transform-origin: top center;
 245 |   -webkit-animation-name: swing;
 246 |   animation-name: swing;
 247 | }
 248 | 
 249 | @-webkit-keyframes tada {
 250 |   0% {
 251 |     -webkit-transform: scale(1);
 252 |     transform: scale(1);
 253 |   }
 254 | 
 255 |   10%, 20% {
 256 |     -webkit-transform: scale(0.9) rotate(-3deg);
 257 |     transform: scale(0.9) rotate(-3deg);
 258 |   }
 259 | 
 260 |   30%, 50%, 70%, 90% {
 261 |     -webkit-transform: scale(1.1) rotate(3deg);
 262 |     transform: scale(1.1) rotate(3deg);
 263 |   }
 264 | 
 265 |   40%, 60%, 80% {
 266 |     -webkit-transform: scale(1.1) rotate(-3deg);
 267 |     transform: scale(1.1) rotate(-3deg);
 268 |   }
 269 | 
 270 |   100% {
 271 |     -webkit-transform: scale(1) rotate(0);
 272 |     transform: scale(1) rotate(0);
 273 |   }
 274 | }
 275 | 
 276 | @keyframes tada {
 277 |   0% {
 278 |     -webkit-transform: scale(1);
 279 |     -ms-transform: scale(1);
 280 |     transform: scale(1);
 281 |   }
 282 | 
 283 |   10%, 20% {
 284 |     -webkit-transform: scale(0.9) rotate(-3deg);
 285 |     -ms-transform: scale(0.9) rotate(-3deg);
 286 |     transform: scale(0.9) rotate(-3deg);
 287 |   }
 288 | 
 289 |   30%, 50%, 70%, 90% {
 290 |     -webkit-transform: scale(1.1) rotate(3deg);
 291 |     -ms-transform: scale(1.1) rotate(3deg);
 292 |     transform: scale(1.1) rotate(3deg);
 293 |   }
 294 | 
 295 |   40%, 60%, 80% {
 296 |     -webkit-transform: scale(1.1) rotate(-3deg);
 297 |     -ms-transform: scale(1.1) rotate(-3deg);
 298 |     transform: scale(1.1) rotate(-3deg);
 299 |   }
 300 | 
 301 |   100% {
 302 |     -webkit-transform: scale(1) rotate(0);
 303 |     -ms-transform: scale(1) rotate(0);
 304 |     transform: scale(1) rotate(0);
 305 |   }
 306 | }
 307 | 
 308 | .tada {
 309 |   -webkit-animation-name: tada;
 310 |   animation-name: tada;
 311 | }
 312 | 
 313 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 314 | 
 315 | @-webkit-keyframes wobble {
 316 |   0% {
 317 |     -webkit-transform: translateX(0%);
 318 |     transform: translateX(0%);
 319 |   }
 320 | 
 321 |   15% {
 322 |     -webkit-transform: translateX(-25%) rotate(-5deg);
 323 |     transform: translateX(-25%) rotate(-5deg);
 324 |   }
 325 | 
 326 |   30% {
 327 |     -webkit-transform: translateX(20%) rotate(3deg);
 328 |     transform: translateX(20%) rotate(3deg);
 329 |   }
 330 | 
 331 |   45% {
 332 |     -webkit-transform: translateX(-15%) rotate(-3deg);
 333 |     transform: translateX(-15%) rotate(-3deg);
 334 |   }
 335 | 
 336 |   60% {
 337 |     -webkit-transform: translateX(10%) rotate(2deg);
 338 |     transform: translateX(10%) rotate(2deg);
 339 |   }
 340 | 
 341 |   75% {
 342 |     -webkit-transform: translateX(-5%) rotate(-1deg);
 343 |     transform: translateX(-5%) rotate(-1deg);
 344 |   }
 345 | 
 346 |   100% {
 347 |     -webkit-transform: translateX(0%);
 348 |     transform: translateX(0%);
 349 |   }
 350 | }
 351 | 
 352 | @keyframes wobble {
 353 |   0% {
 354 |     -webkit-transform: translateX(0%);
 355 |     -ms-transform: translateX(0%);
 356 |     transform: translateX(0%);
 357 |   }
 358 | 
 359 |   15% {
 360 |     -webkit-transform: translateX(-25%) rotate(-5deg);
 361 |     -ms-transform: translateX(-25%) rotate(-5deg);
 362 |     transform: translateX(-25%) rotate(-5deg);
 363 |   }
 364 | 
 365 |   30% {
 366 |     -webkit-transform: translateX(20%) rotate(3deg);
 367 |     -ms-transform: translateX(20%) rotate(3deg);
 368 |     transform: translateX(20%) rotate(3deg);
 369 |   }
 370 | 
 371 |   45% {
 372 |     -webkit-transform: translateX(-15%) rotate(-3deg);
 373 |     -ms-transform: translateX(-15%) rotate(-3deg);
 374 |     transform: translateX(-15%) rotate(-3deg);
 375 |   }
 376 | 
 377 |   60% {
 378 |     -webkit-transform: translateX(10%) rotate(2deg);
 379 |     -ms-transform: translateX(10%) rotate(2deg);
 380 |     transform: translateX(10%) rotate(2deg);
 381 |   }
 382 | 
 383 |   75% {
 384 |     -webkit-transform: translateX(-5%) rotate(-1deg);
 385 |     -ms-transform: translateX(-5%) rotate(-1deg);
 386 |     transform: translateX(-5%) rotate(-1deg);
 387 |   }
 388 | 
 389 |   100% {
 390 |     -webkit-transform: translateX(0%);
 391 |     -ms-transform: translateX(0%);
 392 |     transform: translateX(0%);
 393 |   }
 394 | }
 395 | 
 396 | .wobble {
 397 |   -webkit-animation-name: wobble;
 398 |   animation-name: wobble;
 399 | }
 400 | 
 401 | @-webkit-keyframes bounceIn {
 402 |   0% {
 403 |     opacity: 0;
 404 |     -webkit-transform: scale(.3);
 405 |     transform: scale(.3);
 406 |   }
 407 | 
 408 |   50% {
 409 |     opacity: 1;
 410 |     -webkit-transform: scale(1.05);
 411 |     transform: scale(1.05);
 412 |   }
 413 | 
 414 |   70% {
 415 |     -webkit-transform: scale(.9);
 416 |     transform: scale(.9);
 417 |   }
 418 | 
 419 |   100% {
 420 |     -webkit-transform: scale(1);
 421 |     transform: scale(1);
 422 |   }
 423 | }
 424 | 
 425 | @keyframes bounceIn {
 426 |   0% {
 427 |     opacity: 0;
 428 |     -webkit-transform: scale(.3);
 429 |     -ms-transform: scale(.3);
 430 |     transform: scale(.3);
 431 |   }
 432 | 
 433 |   50% {
 434 |     opacity: 1;
 435 |     -webkit-transform: scale(1.05);
 436 |     -ms-transform: scale(1.05);
 437 |     transform: scale(1.05);
 438 |   }
 439 | 
 440 |   70% {
 441 |     -webkit-transform: scale(.9);
 442 |     -ms-transform: scale(.9);
 443 |     transform: scale(.9);
 444 |   }
 445 | 
 446 |   100% {
 447 |     -webkit-transform: scale(1);
 448 |     -ms-transform: scale(1);
 449 |     transform: scale(1);
 450 |   }
 451 | }
 452 | 
 453 | .bounceIn {
 454 |   -webkit-animation-name: bounceIn;
 455 |   animation-name: bounceIn;
 456 | }
 457 | 
 458 | @-webkit-keyframes bounceInDown {
 459 |   0% {
 460 |     opacity: 0;
 461 |     -webkit-transform: translateY(-2000px);
 462 |     transform: translateY(-2000px);
 463 |   }
 464 | 
 465 |   60% {
 466 |     opacity: 1;
 467 |     -webkit-transform: translateY(30px);
 468 |     transform: translateY(30px);
 469 |   }
 470 | 
 471 |   80% {
 472 |     -webkit-transform: translateY(-10px);
 473 |     transform: translateY(-10px);
 474 |   }
 475 | 
 476 |   100% {
 477 |     -webkit-transform: translateY(0);
 478 |     transform: translateY(0);
 479 |   }
 480 | }
 481 | 
 482 | @keyframes bounceInDown {
 483 |   0% {
 484 |     opacity: 0;
 485 |     -webkit-transform: translateY(-2000px);
 486 |     -ms-transform: translateY(-2000px);
 487 |     transform: translateY(-2000px);
 488 |   }
 489 | 
 490 |   60% {
 491 |     opacity: 1;
 492 |     -webkit-transform: translateY(30px);
 493 |     -ms-transform: translateY(30px);
 494 |     transform: translateY(30px);
 495 |   }
 496 | 
 497 |   80% {
 498 |     -webkit-transform: translateY(-10px);
 499 |     -ms-transform: translateY(-10px);
 500 |     transform: translateY(-10px);
 501 |   }
 502 | 
 503 |   100% {
 504 |     -webkit-transform: translateY(0);
 505 |     -ms-transform: translateY(0);
 506 |     transform: translateY(0);
 507 |   }
 508 | }
 509 | 
 510 | .bounceInDown {
 511 |   -webkit-animation-name: bounceInDown;
 512 |   animation-name: bounceInDown;
 513 | }
 514 | 
 515 | @-webkit-keyframes bounceInLeft {
 516 |   0% {
 517 |     opacity: 0;
 518 |     -webkit-transform: translateX(-2000px);
 519 |     transform: translateX(-2000px);
 520 |   }
 521 | 
 522 |   60% {
 523 |     opacity: 1;
 524 |     -webkit-transform: translateX(30px);
 525 |     transform: translateX(30px);
 526 |   }
 527 | 
 528 |   80% {
 529 |     -webkit-transform: translateX(-10px);
 530 |     transform: translateX(-10px);
 531 |   }
 532 | 
 533 |   100% {
 534 |     -webkit-transform: translateX(0);
 535 |     transform: translateX(0);
 536 |   }
 537 | }
 538 | 
 539 | @keyframes bounceInLeft {
 540 |   0% {
 541 |     opacity: 0;
 542 |     -webkit-transform: translateX(-2000px);
 543 |     -ms-transform: translateX(-2000px);
 544 |     transform: translateX(-2000px);
 545 |   }
 546 | 
 547 |   60% {
 548 |     opacity: 1;
 549 |     -webkit-transform: translateX(30px);
 550 |     -ms-transform: translateX(30px);
 551 |     transform: translateX(30px);
 552 |   }
 553 | 
 554 |   80% {
 555 |     -webkit-transform: translateX(-10px);
 556 |     -ms-transform: translateX(-10px);
 557 |     transform: translateX(-10px);
 558 |   }
 559 | 
 560 |   100% {
 561 |     -webkit-transform: translateX(0);
 562 |     -ms-transform: translateX(0);
 563 |     transform: translateX(0);
 564 |   }
 565 | }
 566 | 
 567 | .bounceInLeft {
 568 |   -webkit-animation-name: bounceInLeft;
 569 |   animation-name: bounceInLeft;
 570 | }
 571 | 
 572 | @-webkit-keyframes bounceInRight {
 573 |   0% {
 574 |     opacity: 0;
 575 |     -webkit-transform: translateX(2000px);
 576 |     transform: translateX(2000px);
 577 |   }
 578 | 
 579 |   60% {
 580 |     opacity: 1;
 581 |     -webkit-transform: translateX(-30px);
 582 |     transform: translateX(-30px);
 583 |   }
 584 | 
 585 |   80% {
 586 |     -webkit-transform: translateX(10px);
 587 |     transform: translateX(10px);
 588 |   }
 589 | 
 590 |   100% {
 591 |     -webkit-transform: translateX(0);
 592 |     transform: translateX(0);
 593 |   }
 594 | }
 595 | 
 596 | @keyframes bounceInRight {
 597 |   0% {
 598 |     opacity: 0;
 599 |     -webkit-transform: translateX(2000px);
 600 |     -ms-transform: translateX(2000px);
 601 |     transform: translateX(2000px);
 602 |   }
 603 | 
 604 |   60% {
 605 |     opacity: 1;
 606 |     -webkit-transform: translateX(-30px);
 607 |     -ms-transform: translateX(-30px);
 608 |     transform: translateX(-30px);
 609 |   }
 610 | 
 611 |   80% {
 612 |     -webkit-transform: translateX(10px);
 613 |     -ms-transform: translateX(10px);
 614 |     transform: translateX(10px);
 615 |   }
 616 | 
 617 |   100% {
 618 |     -webkit-transform: translateX(0);
 619 |     -ms-transform: translateX(0);
 620 |     transform: translateX(0);
 621 |   }
 622 | }
 623 | 
 624 | .bounceInRight {
 625 |   -webkit-animation-name: bounceInRight;
 626 |   animation-name: bounceInRight;
 627 | }
 628 | 
 629 | @-webkit-keyframes bounceInUp {
 630 |   0% {
 631 |     opacity: 0;
 632 |     -webkit-transform: translateY(2000px);
 633 |     transform: translateY(2000px);
 634 |   }
 635 | 
 636 |   60% {
 637 |     opacity: 1;
 638 |     -webkit-transform: translateY(-30px);
 639 |     transform: translateY(-30px);
 640 |   }
 641 | 
 642 |   80% {
 643 |     -webkit-transform: translateY(10px);
 644 |     transform: translateY(10px);
 645 |   }
 646 | 
 647 |   100% {
 648 |     -webkit-transform: translateY(0);
 649 |     transform: translateY(0);
 650 |   }
 651 | }
 652 | 
 653 | @keyframes bounceInUp {
 654 |   0% {
 655 |     opacity: 0;
 656 |     -webkit-transform: translateY(2000px);
 657 |     -ms-transform: translateY(2000px);
 658 |     transform: translateY(2000px);
 659 |   }
 660 | 
 661 |   60% {
 662 |     opacity: 1;
 663 |     -webkit-transform: translateY(-30px);
 664 |     -ms-transform: translateY(-30px);
 665 |     transform: translateY(-30px);
 666 |   }
 667 | 
 668 |   80% {
 669 |     -webkit-transform: translateY(10px);
 670 |     -ms-transform: translateY(10px);
 671 |     transform: translateY(10px);
 672 |   }
 673 | 
 674 |   100% {
 675 |     -webkit-transform: translateY(0);
 676 |     -ms-transform: translateY(0);
 677 |     transform: translateY(0);
 678 |   }
 679 | }
 680 | 
 681 | .bounceInUp {
 682 |   -webkit-animation-name: bounceInUp;
 683 |   animation-name: bounceInUp;
 684 | }
 685 | 
 686 | @-webkit-keyframes bounceOut {
 687 |   0% {
 688 |     -webkit-transform: scale(1);
 689 |     transform: scale(1);
 690 |   }
 691 | 
 692 |   25% {
 693 |     -webkit-transform: scale(.95);
 694 |     transform: scale(.95);
 695 |   }
 696 | 
 697 |   50% {
 698 |     opacity: 1;
 699 |     -webkit-transform: scale(1.1);
 700 |     transform: scale(1.1);
 701 |   }
 702 | 
 703 |   100% {
 704 |     opacity: 0;
 705 |     -webkit-transform: scale(.3);
 706 |     transform: scale(.3);
 707 |   }
 708 | }
 709 | 
 710 | @keyframes bounceOut {
 711 |   0% {
 712 |     -webkit-transform: scale(1);
 713 |     -ms-transform: scale(1);
 714 |     transform: scale(1);
 715 |   }
 716 | 
 717 |   25% {
 718 |     -webkit-transform: scale(.95);
 719 |     -ms-transform: scale(.95);
 720 |     transform: scale(.95);
 721 |   }
 722 | 
 723 |   50% {
 724 |     opacity: 1;
 725 |     -webkit-transform: scale(1.1);
 726 |     -ms-transform: scale(1.1);
 727 |     transform: scale(1.1);
 728 |   }
 729 | 
 730 |   100% {
 731 |     opacity: 0;
 732 |     -webkit-transform: scale(.3);
 733 |     -ms-transform: scale(.3);
 734 |     transform: scale(.3);
 735 |   }
 736 | }
 737 | 
 738 | .bounceOut {
 739 |   -webkit-animation-name: bounceOut;
 740 |   animation-name: bounceOut;
 741 | }
 742 | 
 743 | @-webkit-keyframes bounceOutDown {
 744 |   0% {
 745 |     -webkit-transform: translateY(0);
 746 |     transform: translateY(0);
 747 |   }
 748 | 
 749 |   20% {
 750 |     opacity: 1;
 751 |     -webkit-transform: translateY(-20px);
 752 |     transform: translateY(-20px);
 753 |   }
 754 | 
 755 |   100% {
 756 |     opacity: 0;
 757 |     -webkit-transform: translateY(2000px);
 758 |     transform: translateY(2000px);
 759 |   }
 760 | }
 761 | 
 762 | @keyframes bounceOutDown {
 763 |   0% {
 764 |     -webkit-transform: translateY(0);
 765 |     -ms-transform: translateY(0);
 766 |     transform: translateY(0);
 767 |   }
 768 | 
 769 |   20% {
 770 |     opacity: 1;
 771 |     -webkit-transform: translateY(-20px);
 772 |     -ms-transform: translateY(-20px);
 773 |     transform: translateY(-20px);
 774 |   }
 775 | 
 776 |   100% {
 777 |     opacity: 0;
 778 |     -webkit-transform: translateY(2000px);
 779 |     -ms-transform: translateY(2000px);
 780 |     transform: translateY(2000px);
 781 |   }
 782 | }
 783 | 
 784 | .bounceOutDown {
 785 |   -webkit-animation-name: bounceOutDown;
 786 |   animation-name: bounceOutDown;
 787 | }
 788 | 
 789 | @-webkit-keyframes bounceOutLeft {
 790 |   0% {
 791 |     -webkit-transform: translateX(0);
 792 |     transform: translateX(0);
 793 |   }
 794 | 
 795 |   20% {
 796 |     opacity: 1;
 797 |     -webkit-transform: translateX(20px);
 798 |     transform: translateX(20px);
 799 |   }
 800 | 
 801 |   100% {
 802 |     opacity: 0;
 803 |     -webkit-transform: translateX(-2000px);
 804 |     transform: translateX(-2000px);
 805 |   }
 806 | }
 807 | 
 808 | @keyframes bounceOutLeft {
 809 |   0% {
 810 |     -webkit-transform: translateX(0);
 811 |     -ms-transform: translateX(0);
 812 |     transform: translateX(0);
 813 |   }
 814 | 
 815 |   20% {
 816 |     opacity: 1;
 817 |     -webkit-transform: translateX(20px);
 818 |     -ms-transform: translateX(20px);
 819 |     transform: translateX(20px);
 820 |   }
 821 | 
 822 |   100% {
 823 |     opacity: 0;
 824 |     -webkit-transform: translateX(-2000px);
 825 |     -ms-transform: translateX(-2000px);
 826 |     transform: translateX(-2000px);
 827 |   }
 828 | }
 829 | 
 830 | .bounceOutLeft {
 831 |   -webkit-animation-name: bounceOutLeft;
 832 |   animation-name: bounceOutLeft;
 833 | }
 834 | 
 835 | @-webkit-keyframes bounceOutRight {
 836 |   0% {
 837 |     -webkit-transform: translateX(0);
 838 |     transform: translateX(0);
 839 |   }
 840 | 
 841 |   20% {
 842 |     opacity: 1;
 843 |     -webkit-transform: translateX(-20px);
 844 |     transform: translateX(-20px);
 845 |   }
 846 | 
 847 |   100% {
 848 |     opacity: 0;
 849 |     -webkit-transform: translateX(2000px);
 850 |     transform: translateX(2000px);
 851 |   }
 852 | }
 853 | 
 854 | @keyframes bounceOutRight {
 855 |   0% {
 856 |     -webkit-transform: translateX(0);
 857 |     -ms-transform: translateX(0);
 858 |     transform: translateX(0);
 859 |   }
 860 | 
 861 |   20% {
 862 |     opacity: 1;
 863 |     -webkit-transform: translateX(-20px);
 864 |     -ms-transform: translateX(-20px);
 865 |     transform: translateX(-20px);
 866 |   }
 867 | 
 868 |   100% {
 869 |     opacity: 0;
 870 |     -webkit-transform: translateX(2000px);
 871 |     -ms-transform: translateX(2000px);
 872 |     transform: translateX(2000px);
 873 |   }
 874 | }
 875 | 
 876 | .bounceOutRight {
 877 |   -webkit-animation-name: bounceOutRight;
 878 |   animation-name: bounceOutRight;
 879 | }
 880 | 
 881 | @-webkit-keyframes bounceOutUp {
 882 |   0% {
 883 |     -webkit-transform: translateY(0);
 884 |     transform: translateY(0);
 885 |   }
 886 | 
 887 |   20% {
 888 |     opacity: 1;
 889 |     -webkit-transform: translateY(20px);
 890 |     transform: translateY(20px);
 891 |   }
 892 | 
 893 |   100% {
 894 |     opacity: 0;
 895 |     -webkit-transform: translateY(-2000px);
 896 |     transform: translateY(-2000px);
 897 |   }
 898 | }
 899 | 
 900 | @keyframes bounceOutUp {
 901 |   0% {
 902 |     -webkit-transform: translateY(0);
 903 |     -ms-transform: translateY(0);
 904 |     transform: translateY(0);
 905 |   }
 906 | 
 907 |   20% {
 908 |     opacity: 1;
 909 |     -webkit-transform: translateY(20px);
 910 |     -ms-transform: translateY(20px);
 911 |     transform: translateY(20px);
 912 |   }
 913 | 
 914 |   100% {
 915 |     opacity: 0;
 916 |     -webkit-transform: translateY(-2000px);
 917 |     -ms-transform: translateY(-2000px);
 918 |     transform: translateY(-2000px);
 919 |   }
 920 | }
 921 | 
 922 | .bounceOutUp {
 923 |   -webkit-animation-name: bounceOutUp;
 924 |   animation-name: bounceOutUp;
 925 | }
 926 | 
 927 | @-webkit-keyframes fadeIn {
 928 |   0% {
 929 |     opacity: 0;
 930 |   }
 931 | 
 932 |   100% {
 933 |     opacity: 1;
 934 |   }
 935 | }
 936 | 
 937 | @keyframes fadeIn {
 938 |   0% {
 939 |     opacity: 0;
 940 |   }
 941 | 
 942 |   100% {
 943 |     opacity: 1;
 944 |   }
 945 | }
 946 | 
 947 | .fadeIn {
 948 |   -webkit-animation-name: fadeIn;
 949 |   animation-name: fadeIn;
 950 | }
 951 | 
 952 | @-webkit-keyframes fadeInDown {
 953 |   0% {
 954 |     opacity: 0;
 955 |     -webkit-transform: translateY(-20px);
 956 |     transform: translateY(-20px);
 957 |   }
 958 | 
 959 |   100% {
 960 |     opacity: 1;
 961 |     -webkit-transform: translateY(0);
 962 |     transform: translateY(0);
 963 |   }
 964 | }
 965 | 
 966 | @keyframes fadeInDown {
 967 |   0% {
 968 |     opacity: 0;
 969 |     -webkit-transform: translateY(-20px);
 970 |     -ms-transform: translateY(-20px);
 971 |     transform: translateY(-20px);
 972 |   }
 973 | 
 974 |   100% {
 975 |     opacity: 1;
 976 |     -webkit-transform: translateY(0);
 977 |     -ms-transform: translateY(0);
 978 |     transform: translateY(0);
 979 |   }
 980 | }
 981 | 
 982 | .fadeInDown {
 983 |   -webkit-animation-name: fadeInDown;
 984 |   animation-name: fadeInDown;
 985 | }
 986 | 
 987 | @-webkit-keyframes fadeInDownBig {
 988 |   0% {
 989 |     opacity: 0;
 990 |     -webkit-transform: translateY(-2000px);
 991 |     transform: translateY(-2000px);
 992 |   }
 993 | 
 994 |   100% {
 995 |     opacity: 1;
 996 |     -webkit-transform: translateY(0);
 997 |     transform: translateY(0);
 998 |   }
 999 | }
1000 | 
1001 | @keyframes fadeInDownBig {
1002 |   0% {
1003 |     opacity: 0;
1004 |     -webkit-transform: translateY(-2000px);
1005 |     -ms-transform: translateY(-2000px);
1006 |     transform: translateY(-2000px);
1007 |   }
1008 | 
1009 |   100% {
1010 |     opacity: 1;
1011 |     -webkit-transform: translateY(0);
1012 |     -ms-transform: translateY(0);
1013 |     transform: translateY(0);
1014 |   }
1015 | }
1016 | 
1017 | .fadeInDownBig {
1018 |   -webkit-animation-name: fadeInDownBig;
1019 |   animation-name: fadeInDownBig;
1020 | }
1021 | 
1022 | @-webkit-keyframes fadeInLeft {
1023 |   0% {
1024 |     opacity: 0;
1025 |     -webkit-transform: translateX(-20px);
1026 |     transform: translateX(-20px);
1027 |   }
1028 | 
1029 |   100% {
1030 |     opacity: 1;
1031 |     -webkit-transform: translateX(0);
1032 |     transform: translateX(0);
1033 |   }
1034 | }
1035 | 
1036 | @keyframes fadeInLeft {
1037 |   0% {
1038 |     opacity: 0;
1039 |     -webkit-transform: translateX(-20px);
1040 |     -ms-transform: translateX(-20px);
1041 |     transform: translateX(-20px);
1042 |   }
1043 | 
1044 |   100% {
1045 |     opacity: 1;
1046 |     -webkit-transform: translateX(0);
1047 |     -ms-transform: translateX(0);
1048 |     transform: translateX(0);
1049 |   }
1050 | }
1051 | 
1052 | .fadeInLeft {
1053 |   -webkit-animation-name: fadeInLeft;
1054 |   animation-name: fadeInLeft;
1055 | }
1056 | 
1057 | @-webkit-keyframes fadeInLeftBig {
1058 |   0% {
1059 |     opacity: 0;
1060 |     -webkit-transform: translateX(-2000px);
1061 |     transform: translateX(-2000px);
1062 |   }
1063 | 
1064 |   100% {
1065 |     opacity: 1;
1066 |     -webkit-transform: translateX(0);
1067 |     transform: translateX(0);
1068 |   }
1069 | }
1070 | 
1071 | @keyframes fadeInLeftBig {
1072 |   0% {
1073 |     opacity: 0;
1074 |     -webkit-transform: translateX(-2000px);
1075 |     -ms-transform: translateX(-2000px);
1076 |     transform: translateX(-2000px);
1077 |   }
1078 | 
1079 |   100% {
1080 |     opacity: 1;
1081 |     -webkit-transform: translateX(0);
1082 |     -ms-transform: translateX(0);
1083 |     transform: translateX(0);
1084 |   }
1085 | }
1086 | 
1087 | .fadeInLeftBig {
1088 |   -webkit-animation-name: fadeInLeftBig;
1089 |   animation-name: fadeInLeftBig;
1090 | }
1091 | 
1092 | @-webkit-keyframes fadeInRight {
1093 |   0% {
1094 |     opacity: 0;
1095 |     -webkit-transform: translateX(20px);
1096 |     transform: translateX(20px);
1097 |   }
1098 | 
1099 |   100% {
1100 |     opacity: 1;
1101 |     -webkit-transform: translateX(0);
1102 |     transform: translateX(0);
1103 |   }
1104 | }
1105 | 
1106 | @keyframes fadeInRight {
1107 |   0% {
1108 |     opacity: 0;
1109 |     -webkit-transform: translateX(20px);
1110 |     -ms-transform: translateX(20px);
1111 |     transform: translateX(20px);
1112 |   }
1113 | 
1114 |   100% {
1115 |     opacity: 1;
1116 |     -webkit-transform: translateX(0);
1117 |     -ms-transform: translateX(0);
1118 |     transform: translateX(0);
1119 |   }
1120 | }
1121 | 
1122 | .fadeInRight {
1123 |   -webkit-animation-name: fadeInRight;
1124 |   animation-name: fadeInRight;
1125 | }
1126 | 
1127 | @-webkit-keyframes fadeInRightBig {
1128 |   0% {
1129 |     opacity: 0;
1130 |     -webkit-transform: translateX(2000px);
1131 |     transform: translateX(2000px);
1132 |   }
1133 | 
1134 |   100% {
1135 |     opacity: 1;
1136 |     -webkit-transform: translateX(0);
1137 |     transform: translateX(0);
1138 |   }
1139 | }
1140 | 
1141 | @keyframes fadeInRightBig {
1142 |   0% {
1143 |     opacity: 0;
1144 |     -webkit-transform: translateX(2000px);
1145 |     -ms-transform: translateX(2000px);
1146 |     transform: translateX(2000px);
1147 |   }
1148 | 
1149 |   100% {
1150 |     opacity: 1;
1151 |     -webkit-transform: translateX(0);
1152 |     -ms-transform: translateX(0);
1153 |     transform: translateX(0);
1154 |   }
1155 | }
1156 | 
1157 | .fadeInRightBig {
1158 |   -webkit-animation-name: fadeInRightBig;
1159 |   animation-name: fadeInRightBig;
1160 | }
1161 | 
1162 | @-webkit-keyframes fadeInUp {
1163 |   0% {
1164 |     opacity: 0;
1165 |     -webkit-transform: translateY(20px);
1166 |     transform: translateY(20px);
1167 |   }
1168 | 
1169 |   100% {
1170 |     opacity: 1;
1171 |     -webkit-transform: translateY(0);
1172 |     transform: translateY(0);
1173 |   }
1174 | }
1175 | 
1176 | @keyframes fadeInUp {
1177 |   0% {
1178 |     opacity: 0;
1179 |     -webkit-transform: translateY(20px);
1180 |     -ms-transform: translateY(20px);
1181 |     transform: translateY(20px);
1182 |   }
1183 | 
1184 |   100% {
1185 |     opacity: 1;
1186 |     -webkit-transform: translateY(0);
1187 |     -ms-transform: translateY(0);
1188 |     transform: translateY(0);
1189 |   }
1190 | }
1191 | 
1192 | .fadeInUp {
1193 |   -webkit-animation-name: fadeInUp;
1194 |   animation-name: fadeInUp;
1195 | }
1196 | 
1197 | @-webkit-keyframes fadeInUpBig {
1198 |   0% {
1199 |     opacity: 0;
1200 |     -webkit-transform: translateY(2000px);
1201 |     transform: translateY(2000px);
1202 |   }
1203 | 
1204 |   100% {
1205 |     opacity: 1;
1206 |     -webkit-transform: translateY(0);
1207 |     transform: translateY(0);
1208 |   }
1209 | }
1210 | 
1211 | @keyframes fadeInUpBig {
1212 |   0% {
1213 |     opacity: 0;
1214 |     -webkit-transform: translateY(2000px);
1215 |     -ms-transform: translateY(2000px);
1216 |     transform: translateY(2000px);
1217 |   }
1218 | 
1219 |   100% {
1220 |     opacity: 1;
1221 |     -webkit-transform: translateY(0);
1222 |     -ms-transform: translateY(0);
1223 |     transform: translateY(0);
1224 |   }
1225 | }
1226 | 
1227 | .fadeInUpBig {
1228 |   -webkit-animation-name: fadeInUpBig;
1229 |   animation-name: fadeInUpBig;
1230 | }
1231 | 
1232 | @-webkit-keyframes fadeOut {
1233 |   0% {
1234 |     opacity: 1;
1235 |   }
1236 | 
1237 |   100% {
1238 |     opacity: 0;
1239 |   }
1240 | }
1241 | 
1242 | @keyframes fadeOut {
1243 |   0% {
1244 |     opacity: 1;
1245 |   }
1246 | 
1247 |   100% {
1248 |     opacity: 0;
1249 |   }
1250 | }
1251 | 
1252 | .fadeOut {
1253 |   -webkit-animation-name: fadeOut;
1254 |   animation-name: fadeOut;
1255 | }
1256 | 
1257 | @-webkit-keyframes fadeOutDown {
1258 |   0% {
1259 |     opacity: 1;
1260 |     -webkit-transform: translateY(0);
1261 |     transform: translateY(0);
1262 |   }
1263 | 
1264 |   100% {
1265 |     opacity: 0;
1266 |     -webkit-transform: translateY(20px);
1267 |     transform: translateY(20px);
1268 |   }
1269 | }
1270 | 
1271 | @keyframes fadeOutDown {
1272 |   0% {
1273 |     opacity: 1;
1274 |     -webkit-transform: translateY(0);
1275 |     -ms-transform: translateY(0);
1276 |     transform: translateY(0);
1277 |   }
1278 | 
1279 |   100% {
1280 |     opacity: 0;
1281 |     -webkit-transform: translateY(20px);
1282 |     -ms-transform: translateY(20px);
1283 |     transform: translateY(20px);
1284 |   }
1285 | }
1286 | 
1287 | .fadeOutDown {
1288 |   -webkit-animation-name: fadeOutDown;
1289 |   animation-name: fadeOutDown;
1290 | }
1291 | 
1292 | @-webkit-keyframes fadeOutDownBig {
1293 |   0% {
1294 |     opacity: 1;
1295 |     -webkit-transform: translateY(0);
1296 |     transform: translateY(0);
1297 |   }
1298 | 
1299 |   100% {
1300 |     opacity: 0;
1301 |     -webkit-transform: translateY(2000px);
1302 |     transform: translateY(2000px);
1303 |   }
1304 | }
1305 | 
1306 | @keyframes fadeOutDownBig {
1307 |   0% {
1308 |     opacity: 1;
1309 |     -webkit-transform: translateY(0);
1310 |     -ms-transform: translateY(0);
1311 |     transform: translateY(0);
1312 |   }
1313 | 
1314 |   100% {
1315 |     opacity: 0;
1316 |     -webkit-transform: translateY(2000px);
1317 |     -ms-transform: translateY(2000px);
1318 |     transform: translateY(2000px);
1319 |   }
1320 | }
1321 | 
1322 | .fadeOutDownBig {
1323 |   -webkit-animation-name: fadeOutDownBig;
1324 |   animation-name: fadeOutDownBig;
1325 | }
1326 | 
1327 | @-webkit-keyframes fadeOutLeft {
1328 |   0% {
1329 |     opacity: 1;
1330 |     -webkit-transform: translateX(0);
1331 |     transform: translateX(0);
1332 |   }
1333 | 
1334 |   100% {
1335 |     opacity: 0;
1336 |     -webkit-transform: translateX(-20px);
1337 |     transform: translateX(-20px);
1338 |   }
1339 | }
1340 | 
1341 | @keyframes fadeOutLeft {
1342 |   0% {
1343 |     opacity: 1;
1344 |     -webkit-transform: translateX(0);
1345 |     -ms-transform: translateX(0);
1346 |     transform: translateX(0);
1347 |   }
1348 | 
1349 |   100% {
1350 |     opacity: 0;
1351 |     -webkit-transform: translateX(-20px);
1352 |     -ms-transform: translateX(-20px);
1353 |     transform: translateX(-20px);
1354 |   }
1355 | }
1356 | 
1357 | .fadeOutLeft {
1358 |   -webkit-animation-name: fadeOutLeft;
1359 |   animation-name: fadeOutLeft;
1360 | }
1361 | 
1362 | @-webkit-keyframes fadeOutLeftBig {
1363 |   0% {
1364 |     opacity: 1;
1365 |     -webkit-transform: translateX(0);
1366 |     transform: translateX(0);
1367 |   }
1368 | 
1369 |   100% {
1370 |     opacity: 0;
1371 |     -webkit-transform: translateX(-2000px);
1372 |     transform: translateX(-2000px);
1373 |   }
1374 | }
1375 | 
1376 | @keyframes fadeOutLeftBig {
1377 |   0% {
1378 |     opacity: 1;
1379 |     -webkit-transform: translateX(0);
1380 |     -ms-transform: translateX(0);
1381 |     transform: translateX(0);
1382 |   }
1383 | 
1384 |   100% {
1385 |     opacity: 0;
1386 |     -webkit-transform: translateX(-2000px);
1387 |     -ms-transform: translateX(-2000px);
1388 |     transform: translateX(-2000px);
1389 |   }
1390 | }
1391 | 
1392 | .fadeOutLeftBig {
1393 |   -webkit-animation-name: fadeOutLeftBig;
1394 |   animation-name: fadeOutLeftBig;
1395 | }
1396 | 
1397 | @-webkit-keyframes fadeOutRight {
1398 |   0% {
1399 |     opacity: 1;
1400 |     -webkit-transform: translateX(0);
1401 |     transform: translateX(0);
1402 |   }
1403 | 
1404 |   100% {
1405 |     opacity: 0;
1406 |     -webkit-transform: translateX(20px);
1407 |     transform: translateX(20px);
1408 |   }
1409 | }
1410 | 
1411 | @keyframes fadeOutRight {
1412 |   0% {
1413 |     opacity: 1;
1414 |     -webkit-transform: translateX(0);
1415 |     -ms-transform: translateX(0);
1416 |     transform: translateX(0);
1417 |   }
1418 | 
1419 |   100% {
1420 |     opacity: 0;
1421 |     -webkit-transform: translateX(20px);
1422 |     -ms-transform: translateX(20px);
1423 |     transform: translateX(20px);
1424 |   }
1425 | }
1426 | 
1427 | .fadeOutRight {
1428 |   -webkit-animation-name: fadeOutRight;
1429 |   animation-name: fadeOutRight;
1430 | }
1431 | 
1432 | @-webkit-keyframes fadeOutRightBig {
1433 |   0% {
1434 |     opacity: 1;
1435 |     -webkit-transform: translateX(0);
1436 |     transform: translateX(0);
1437 |   }
1438 | 
1439 |   100% {
1440 |     opacity: 0;
1441 |     -webkit-transform: translateX(2000px);
1442 |     transform: translateX(2000px);
1443 |   }
1444 | }
1445 | 
1446 | @keyframes fadeOutRightBig {
1447 |   0% {
1448 |     opacity: 1;
1449 |     -webkit-transform: translateX(0);
1450 |     -ms-transform: translateX(0);
1451 |     transform: translateX(0);
1452 |   }
1453 | 
1454 |   100% {
1455 |     opacity: 0;
1456 |     -webkit-transform: translateX(2000px);
1457 |     -ms-transform: translateX(2000px);
1458 |     transform: translateX(2000px);
1459 |   }
1460 | }
1461 | 
1462 | .fadeOutRightBig {
1463 |   -webkit-animation-name: fadeOutRightBig;
1464 |   animation-name: fadeOutRightBig;
1465 | }
1466 | 
1467 | @-webkit-keyframes fadeOutUp {
1468 |   0% {
1469 |     opacity: 1;
1470 |     -webkit-transform: translateY(0);
1471 |     transform: translateY(0);
1472 |   }
1473 | 
1474 |   100% {
1475 |     opacity: 0;
1476 |     -webkit-transform: translateY(-20px);
1477 |     transform: translateY(-20px);
1478 |   }
1479 | }
1480 | 
1481 | @keyframes fadeOutUp {
1482 |   0% {
1483 |     opacity: 1;
1484 |     -webkit-transform: translateY(0);
1485 |     -ms-transform: translateY(0);
1486 |     transform: translateY(0);
1487 |   }
1488 | 
1489 |   100% {
1490 |     opacity: 0;
1491 |     -webkit-transform: translateY(-20px);
1492 |     -ms-transform: translateY(-20px);
1493 |     transform: translateY(-20px);
1494 |   }
1495 | }
1496 | 
1497 | .fadeOutUp {
1498 |   -webkit-animation-name: fadeOutUp;
1499 |   animation-name: fadeOutUp;
1500 | }
1501 | 
1502 | @-webkit-keyframes fadeOutUpBig {
1503 |   0% {
1504 |     opacity: 1;
1505 |     -webkit-transform: translateY(0);
1506 |     transform: translateY(0);
1507 |   }
1508 | 
1509 |   100% {
1510 |     opacity: 0;
1511 |     -webkit-transform: translateY(-2000px);
1512 |     transform: translateY(-2000px);
1513 |   }
1514 | }
1515 | 
1516 | @keyframes fadeOutUpBig {
1517 |   0% {
1518 |     opacity: 1;
1519 |     -webkit-transform: translateY(0);
1520 |     -ms-transform: translateY(0);
1521 |     transform: translateY(0);
1522 |   }
1523 | 
1524 |   100% {
1525 |     opacity: 0;
1526 |     -webkit-transform: translateY(-2000px);
1527 |     -ms-transform: translateY(-2000px);
1528 |     transform: translateY(-2000px);
1529 |   }
1530 | }
1531 | 
1532 | .fadeOutUpBig {
1533 |   -webkit-animation-name: fadeOutUpBig;
1534 |   animation-name: fadeOutUpBig;
1535 | }
1536 | 
1537 | @-webkit-keyframes flip {
1538 |   0% {
1539 |     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1540 |     transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1541 |     -webkit-animation-timing-function: ease-out;
1542 |     animation-timing-function: ease-out;
1543 |   }
1544 | 
1545 |   40% {
1546 |     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1547 |     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1548 |     -webkit-animation-timing-function: ease-out;
1549 |     animation-timing-function: ease-out;
1550 |   }
1551 | 
1552 |   50% {
1553 |     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1554 |     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1555 |     -webkit-animation-timing-function: ease-in;
1556 |     animation-timing-function: ease-in;
1557 |   }
1558 | 
1559 |   80% {
1560 |     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1561 |     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1562 |     -webkit-animation-timing-function: ease-in;
1563 |     animation-timing-function: ease-in;
1564 |   }
1565 | 
1566 |   100% {
1567 |     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1568 |     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1569 |     -webkit-animation-timing-function: ease-in;
1570 |     animation-timing-function: ease-in;
1571 |   }
1572 | }
1573 | 
1574 | @keyframes flip {
1575 |   0% {
1576 |     -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1577 |     -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1578 |     transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
1579 |     -webkit-animation-timing-function: ease-out;
1580 |     animation-timing-function: ease-out;
1581 |   }
1582 | 
1583 |   40% {
1584 |     -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1585 |     -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1586 |     transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
1587 |     -webkit-animation-timing-function: ease-out;
1588 |     animation-timing-function: ease-out;
1589 |   }
1590 | 
1591 |   50% {
1592 |     -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1593 |     -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1594 |     transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
1595 |     -webkit-animation-timing-function: ease-in;
1596 |     animation-timing-function: ease-in;
1597 |   }
1598 | 
1599 |   80% {
1600 |     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1601 |     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1602 |     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
1603 |     -webkit-animation-timing-function: ease-in;
1604 |     animation-timing-function: ease-in;
1605 |   }
1606 | 
1607 |   100% {
1608 |     -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1609 |     -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1610 |     transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
1611 |     -webkit-animation-timing-function: ease-in;
1612 |     animation-timing-function: ease-in;
1613 |   }
1614 | }
1615 | 
1616 | .animated.flip {
1617 |   -webkit-backface-visibility: visible;
1618 |   -ms-backface-visibility: visible;
1619 |   backface-visibility: visible;
1620 |   -webkit-animation-name: flip;
1621 |   animation-name: flip;
1622 | }
1623 | 
1624 | @-webkit-keyframes flipInX {
1625 |   0% {
1626 |     -webkit-transform: perspective(400px) rotateX(90deg);
1627 |     transform: perspective(400px) rotateX(90deg);
1628 |     opacity: 0;
1629 |   }
1630 | 
1631 |   40% {
1632 |     -webkit-transform: perspective(400px) rotateX(-10deg);
1633 |     transform: perspective(400px) rotateX(-10deg);
1634 |   }
1635 | 
1636 |   70% {
1637 |     -webkit-transform: perspective(400px) rotateX(10deg);
1638 |     transform: perspective(400px) rotateX(10deg);
1639 |   }
1640 | 
1641 |   100% {
1642 |     -webkit-transform: perspective(400px) rotateX(0deg);
1643 |     transform: perspective(400px) rotateX(0deg);
1644 |     opacity: 1;
1645 |   }
1646 | }
1647 | 
1648 | @keyframes flipInX {
1649 |   0% {
1650 |     -webkit-transform: perspective(400px) rotateX(90deg);
1651 |     -ms-transform: perspective(400px) rotateX(90deg);
1652 |     transform: perspective(400px) rotateX(90deg);
1653 |     opacity: 0;
1654 |   }
1655 | 
1656 |   40% {
1657 |     -webkit-transform: perspective(400px) rotateX(-10deg);
1658 |     -ms-transform: perspective(400px) rotateX(-10deg);
1659 |     transform: perspective(400px) rotateX(-10deg);
1660 |   }
1661 | 
1662 |   70% {
1663 |     -webkit-transform: perspective(400px) rotateX(10deg);
1664 |     -ms-transform: perspective(400px) rotateX(10deg);
1665 |     transform: perspective(400px) rotateX(10deg);
1666 |   }
1667 | 
1668 |   100% {
1669 |     -webkit-transform: perspective(400px) rotateX(0deg);
1670 |     -ms-transform: perspective(400px) rotateX(0deg);
1671 |     transform: perspective(400px) rotateX(0deg);
1672 |     opacity: 1;
1673 |   }
1674 | }
1675 | 
1676 | .flipInX {
1677 |   -webkit-backface-visibility: visible !important;
1678 |   -ms-backface-visibility: visible !important;
1679 |   backface-visibility: visible !important;
1680 |   -webkit-animation-name: flipInX;
1681 |   animation-name: flipInX;
1682 | }
1683 | 
1684 | @-webkit-keyframes flipInY {
1685 |   0% {
1686 |     -webkit-transform: perspective(400px) rotateY(90deg);
1687 |     transform: perspective(400px) rotateY(90deg);
1688 |     opacity: 0;
1689 |   }
1690 | 
1691 |   40% {
1692 |     -webkit-transform: perspective(400px) rotateY(-10deg);
1693 |     transform: perspective(400px) rotateY(-10deg);
1694 |   }
1695 | 
1696 |   70% {
1697 |     -webkit-transform: perspective(400px) rotateY(10deg);
1698 |     transform: perspective(400px) rotateY(10deg);
1699 |   }
1700 | 
1701 |   100% {
1702 |     -webkit-transform: perspective(400px) rotateY(0deg);
1703 |     transform: perspective(400px) rotateY(0deg);
1704 |     opacity: 1;
1705 |   }
1706 | }
1707 | 
1708 | @keyframes flipInY {
1709 |   0% {
1710 |     -webkit-transform: perspective(400px) rotateY(90deg);
1711 |     -ms-transform: perspective(400px) rotateY(90deg);
1712 |     transform: perspective(400px) rotateY(90deg);
1713 |     opacity: 0;
1714 |   }
1715 | 
1716 |   40% {
1717 |     -webkit-transform: perspective(400px) rotateY(-10deg);
1718 |     -ms-transform: perspective(400px) rotateY(-10deg);
1719 |     transform: perspective(400px) rotateY(-10deg);
1720 |   }
1721 | 
1722 |   70% {
1723 |     -webkit-transform: perspective(400px) rotateY(10deg);
1724 |     -ms-transform: perspective(400px) rotateY(10deg);
1725 |     transform: perspective(400px) rotateY(10deg);
1726 |   }
1727 | 
1728 |   100% {
1729 |     -webkit-transform: perspective(400px) rotateY(0deg);
1730 |     -ms-transform: perspective(400px) rotateY(0deg);
1731 |     transform: perspective(400px) rotateY(0deg);
1732 |     opacity: 1;
1733 |   }
1734 | }
1735 | 
1736 | .flipInY {
1737 |   -webkit-backface-visibility: visible !important;
1738 |   -ms-backface-visibility: visible !important;
1739 |   backface-visibility: visible !important;
1740 |   -webkit-animation-name: flipInY;
1741 |   animation-name: flipInY;
1742 | }
1743 | 
1744 | @-webkit-keyframes flipOutX {
1745 |   0% {
1746 |     -webkit-transform: perspective(400px) rotateX(0deg);
1747 |     transform: perspective(400px) rotateX(0deg);
1748 |     opacity: 1;
1749 |   }
1750 | 
1751 |   100% {
1752 |     -webkit-transform: perspective(400px) rotateX(90deg);
1753 |     transform: perspective(400px) rotateX(90deg);
1754 |     opacity: 0;
1755 |   }
1756 | }
1757 | 
1758 | @keyframes flipOutX {
1759 |   0% {
1760 |     -webkit-transform: perspective(400px) rotateX(0deg);
1761 |     -ms-transform: perspective(400px) rotateX(0deg);
1762 |     transform: perspective(400px) rotateX(0deg);
1763 |     opacity: 1;
1764 |   }
1765 | 
1766 |   100% {
1767 |     -webkit-transform: perspective(400px) rotateX(90deg);
1768 |     -ms-transform: perspective(400px) rotateX(90deg);
1769 |     transform: perspective(400px) rotateX(90deg);
1770 |     opacity: 0;
1771 |   }
1772 | }
1773 | 
1774 | .flipOutX {
1775 |   -webkit-animation-name: flipOutX;
1776 |   animation-name: flipOutX;
1777 |   -webkit-backface-visibility: visible !important;
1778 |   -ms-backface-visibility: visible !important;
1779 |   backface-visibility: visible !important;
1780 | }
1781 | 
1782 | @-webkit-keyframes flipOutY {
1783 |   0% {
1784 |     -webkit-transform: perspective(400px) rotateY(0deg);
1785 |     transform: perspective(400px) rotateY(0deg);
1786 |     opacity: 1;
1787 |   }
1788 | 
1789 |   100% {
1790 |     -webkit-transform: perspective(400px) rotateY(90deg);
1791 |     transform: perspective(400px) rotateY(90deg);
1792 |     opacity: 0;
1793 |   }
1794 | }
1795 | 
1796 | @keyframes flipOutY {
1797 |   0% {
1798 |     -webkit-transform: perspective(400px) rotateY(0deg);
1799 |     -ms-transform: perspective(400px) rotateY(0deg);
1800 |     transform: perspective(400px) rotateY(0deg);
1801 |     opacity: 1;
1802 |   }
1803 | 
1804 |   100% {
1805 |     -webkit-transform: perspective(400px) rotateY(90deg);
1806 |     -ms-transform: perspective(400px) rotateY(90deg);
1807 |     transform: perspective(400px) rotateY(90deg);
1808 |     opacity: 0;
1809 |   }
1810 | }
1811 | 
1812 | .flipOutY {
1813 |   -webkit-backface-visibility: visible !important;
1814 |   -ms-backface-visibility: visible !important;
1815 |   backface-visibility: visible !important;
1816 |   -webkit-animation-name: flipOutY;
1817 |   animation-name: flipOutY;
1818 | }
1819 | 
1820 | @-webkit-keyframes lightSpeedIn {
1821 |   0% {
1822 |     -webkit-transform: translateX(100%) skewX(-30deg);
1823 |     transform: translateX(100%) skewX(-30deg);
1824 |     opacity: 0;
1825 |   }
1826 | 
1827 |   60% {
1828 |     -webkit-transform: translateX(-20%) skewX(30deg);
1829 |     transform: translateX(-20%) skewX(30deg);
1830 |     opacity: 1;
1831 |   }
1832 | 
1833 |   80% {
1834 |     -webkit-transform: translateX(0%) skewX(-15deg);
1835 |     transform: translateX(0%) skewX(-15deg);
1836 |     opacity: 1;
1837 |   }
1838 | 
1839 |   100% {
1840 |     -webkit-transform: translateX(0%) skewX(0deg);
1841 |     transform: translateX(0%) skewX(0deg);
1842 |     opacity: 1;
1843 |   }
1844 | }
1845 | 
1846 | @keyframes lightSpeedIn {
1847 |   0% {
1848 |     -webkit-transform: translateX(100%) skewX(-30deg);
1849 |     -ms-transform: translateX(100%) skewX(-30deg);
1850 |     transform: translateX(100%) skewX(-30deg);
1851 |     opacity: 0;
1852 |   }
1853 | 
1854 |   60% {
1855 |     -webkit-transform: translateX(-20%) skewX(30deg);
1856 |     -ms-transform: translateX(-20%) skewX(30deg);
1857 |     transform: translateX(-20%) skewX(30deg);
1858 |     opacity: 1;
1859 |   }
1860 | 
1861 |   80% {
1862 |     -webkit-transform: translateX(0%) skewX(-15deg);
1863 |     -ms-transform: translateX(0%) skewX(-15deg);
1864 |     transform: translateX(0%) skewX(-15deg);
1865 |     opacity: 1;
1866 |   }
1867 | 
1868 |   100% {
1869 |     -webkit-transform: translateX(0%) skewX(0deg);
1870 |     -ms-transform: translateX(0%) skewX(0deg);
1871 |     transform: translateX(0%) skewX(0deg);
1872 |     opacity: 1;
1873 |   }
1874 | }
1875 | 
1876 | .lightSpeedIn {
1877 |   -webkit-animation-name: lightSpeedIn;
1878 |   animation-name: lightSpeedIn;
1879 |   -webkit-animation-timing-function: ease-out;
1880 |   animation-timing-function: ease-out;
1881 | }
1882 | 
1883 | @-webkit-keyframes lightSpeedOut {
1884 |   0% {
1885 |     -webkit-transform: translateX(0%) skewX(0deg);
1886 |     transform: translateX(0%) skewX(0deg);
1887 |     opacity: 1;
1888 |   }
1889 | 
1890 |   100% {
1891 |     -webkit-transform: translateX(100%) skewX(-30deg);
1892 |     transform: translateX(100%) skewX(-30deg);
1893 |     opacity: 0;
1894 |   }
1895 | }
1896 | 
1897 | @keyframes lightSpeedOut {
1898 |   0% {
1899 |     -webkit-transform: translateX(0%) skewX(0deg);
1900 |     -ms-transform: translateX(0%) skewX(0deg);
1901 |     transform: translateX(0%) skewX(0deg);
1902 |     opacity: 1;
1903 |   }
1904 | 
1905 |   100% {
1906 |     -webkit-transform: translateX(100%) skewX(-30deg);
1907 |     -ms-transform: translateX(100%) skewX(-30deg);
1908 |     transform: translateX(100%) skewX(-30deg);
1909 |     opacity: 0;
1910 |   }
1911 | }
1912 | 
1913 | .lightSpeedOut {
1914 |   -webkit-animation-name: lightSpeedOut;
1915 |   animation-name: lightSpeedOut;
1916 |   -webkit-animation-timing-function: ease-in;
1917 |   animation-timing-function: ease-in;
1918 | }
1919 | 
1920 | @-webkit-keyframes rotateIn {
1921 |   0% {
1922 |     -webkit-transform-origin: center center;
1923 |     transform-origin: center center;
1924 |     -webkit-transform: rotate(-200deg);
1925 |     transform: rotate(-200deg);
1926 |     opacity: 0;
1927 |   }
1928 | 
1929 |   100% {
1930 |     -webkit-transform-origin: center center;
1931 |     transform-origin: center center;
1932 |     -webkit-transform: rotate(0);
1933 |     transform: rotate(0);
1934 |     opacity: 1;
1935 |   }
1936 | }
1937 | 
1938 | @keyframes rotateIn {
1939 |   0% {
1940 |     -webkit-transform-origin: center center;
1941 |     -ms-transform-origin: center center;
1942 |     transform-origin: center center;
1943 |     -webkit-transform: rotate(-200deg);
1944 |     -ms-transform: rotate(-200deg);
1945 |     transform: rotate(-200deg);
1946 |     opacity: 0;
1947 |   }
1948 | 
1949 |   100% {
1950 |     -webkit-transform-origin: center center;
1951 |     -ms-transform-origin: center center;
1952 |     transform-origin: center center;
1953 |     -webkit-transform: rotate(0);
1954 |     -ms-transform: rotate(0);
1955 |     transform: rotate(0);
1956 |     opacity: 1;
1957 |   }
1958 | }
1959 | 
1960 | .rotateIn {
1961 |   -webkit-animation-name: rotateIn;
1962 |   animation-name: rotateIn;
1963 | }
1964 | 
1965 | @-webkit-keyframes rotateInDownLeft {
1966 |   0% {
1967 |     -webkit-transform-origin: left bottom;
1968 |     transform-origin: left bottom;
1969 |     -webkit-transform: rotate(-90deg);
1970 |     transform: rotate(-90deg);
1971 |     opacity: 0;
1972 |   }
1973 | 
1974 |   100% {
1975 |     -webkit-transform-origin: left bottom;
1976 |     transform-origin: left bottom;
1977 |     -webkit-transform: rotate(0);
1978 |     transform: rotate(0);
1979 |     opacity: 1;
1980 |   }
1981 | }
1982 | 
1983 | @keyframes rotateInDownLeft {
1984 |   0% {
1985 |     -webkit-transform-origin: left bottom;
1986 |     -ms-transform-origin: left bottom;
1987 |     transform-origin: left bottom;
1988 |     -webkit-transform: rotate(-90deg);
1989 |     -ms-transform: rotate(-90deg);
1990 |     transform: rotate(-90deg);
1991 |     opacity: 0;
1992 |   }
1993 | 
1994 |   100% {
1995 |     -webkit-transform-origin: left bottom;
1996 |     -ms-transform-origin: left bottom;
1997 |     transform-origin: left bottom;
1998 |     -webkit-transform: rotate(0);
1999 |     -ms-transform: rotate(0);
2000 |     transform: rotate(0);
2001 |     opacity: 1;
2002 |   }
2003 | }
2004 | 
2005 | .rotateInDownLeft {
2006 |   -webkit-animation-name: rotateInDownLeft;
2007 |   animation-name: rotateInDownLeft;
2008 | }
2009 | 
2010 | @-webkit-keyframes rotateInDownRight {
2011 |   0% {
2012 |     -webkit-transform-origin: right bottom;
2013 |     transform-origin: right bottom;
2014 |     -webkit-transform: rotate(90deg);
2015 |     transform: rotate(90deg);
2016 |     opacity: 0;
2017 |   }
2018 | 
2019 |   100% {
2020 |     -webkit-transform-origin: right bottom;
2021 |     transform-origin: right bottom;
2022 |     -webkit-transform: rotate(0);
2023 |     transform: rotate(0);
2024 |     opacity: 1;
2025 |   }
2026 | }
2027 | 
2028 | @keyframes rotateInDownRight {
2029 |   0% {
2030 |     -webkit-transform-origin: right bottom;
2031 |     -ms-transform-origin: right bottom;
2032 |     transform-origin: right bottom;
2033 |     -webkit-transform: rotate(90deg);
2034 |     -ms-transform: rotate(90deg);
2035 |     transform: rotate(90deg);
2036 |     opacity: 0;
2037 |   }
2038 | 
2039 |   100% {
2040 |     -webkit-transform-origin: right bottom;
2041 |     -ms-transform-origin: right bottom;
2042 |     transform-origin: right bottom;
2043 |     -webkit-transform: rotate(0);
2044 |     -ms-transform: rotate(0);
2045 |     transform: rotate(0);
2046 |     opacity: 1;
2047 |   }
2048 | }
2049 | 
2050 | .rotateInDownRight {
2051 |   -webkit-animation-name: rotateInDownRight;
2052 |   animation-name: rotateInDownRight;
2053 | }
2054 | 
2055 | @-webkit-keyframes rotateInUpLeft {
2056 |   0% {
2057 |     -webkit-transform-origin: left bottom;
2058 |     transform-origin: left bottom;
2059 |     -webkit-transform: rotate(90deg);
2060 |     transform: rotate(90deg);
2061 |     opacity: 0;
2062 |   }
2063 | 
2064 |   100% {
2065 |     -webkit-transform-origin: left bottom;
2066 |     transform-origin: left bottom;
2067 |     -webkit-transform: rotate(0);
2068 |     transform: rotate(0);
2069 |     opacity: 1;
2070 |   }
2071 | }
2072 | 
2073 | @keyframes rotateInUpLeft {
2074 |   0% {
2075 |     -webkit-transform-origin: left bottom;
2076 |     -ms-transform-origin: left bottom;
2077 |     transform-origin: left bottom;
2078 |     -webkit-transform: rotate(90deg);
2079 |     -ms-transform: rotate(90deg);
2080 |     transform: rotate(90deg);
2081 |     opacity: 0;
2082 |   }
2083 | 
2084 |   100% {
2085 |     -webkit-transform-origin: left bottom;
2086 |     -ms-transform-origin: left bottom;
2087 |     transform-origin: left bottom;
2088 |     -webkit-transform: rotate(0);
2089 |     -ms-transform: rotate(0);
2090 |     transform: rotate(0);
2091 |     opacity: 1;
2092 |   }
2093 | }
2094 | 
2095 | .rotateInUpLeft {
2096 |   -webkit-animation-name: rotateInUpLeft;
2097 |   animation-name: rotateInUpLeft;
2098 | }
2099 | 
2100 | @-webkit-keyframes rotateInUpRight {
2101 |   0% {
2102 |     -webkit-transform-origin: right bottom;
2103 |     transform-origin: right bottom;
2104 |     -webkit-transform: rotate(-90deg);
2105 |     transform: rotate(-90deg);
2106 |     opacity: 0;
2107 |   }
2108 | 
2109 |   100% {
2110 |     -webkit-transform-origin: right bottom;
2111 |     transform-origin: right bottom;
2112 |     -webkit-transform: rotate(0);
2113 |     transform: rotate(0);
2114 |     opacity: 1;
2115 |   }
2116 | }
2117 | 
2118 | @keyframes rotateInUpRight {
2119 |   0% {
2120 |     -webkit-transform-origin: right bottom;
2121 |     -ms-transform-origin: right bottom;
2122 |     transform-origin: right bottom;
2123 |     -webkit-transform: rotate(-90deg);
2124 |     -ms-transform: rotate(-90deg);
2125 |     transform: rotate(-90deg);
2126 |     opacity: 0;
2127 |   }
2128 | 
2129 |   100% {
2130 |     -webkit-transform-origin: right bottom;
2131 |     -ms-transform-origin: right bottom;
2132 |     transform-origin: right bottom;
2133 |     -webkit-transform: rotate(0);
2134 |     -ms-transform: rotate(0);
2135 |     transform: rotate(0);
2136 |     opacity: 1;
2137 |   }
2138 | }
2139 | 
2140 | .rotateInUpRight {
2141 |   -webkit-animation-name: rotateInUpRight;
2142 |   animation-name: rotateInUpRight;
2143 | }
2144 | 
2145 | @-webkit-keyframes rotateOut {
2146 |   0% {
2147 |     -webkit-transform-origin: center center;
2148 |     transform-origin: center center;
2149 |     -webkit-transform: rotate(0);
2150 |     transform: rotate(0);
2151 |     opacity: 1;
2152 |   }
2153 | 
2154 |   100% {
2155 |     -webkit-transform-origin: center center;
2156 |     transform-origin: center center;
2157 |     -webkit-transform: rotate(200deg);
2158 |     transform: rotate(200deg);
2159 |     opacity: 0;
2160 |   }
2161 | }
2162 | 
2163 | @keyframes rotateOut {
2164 |   0% {
2165 |     -webkit-transform-origin: center center;
2166 |     -ms-transform-origin: center center;
2167 |     transform-origin: center center;
2168 |     -webkit-transform: rotate(0);
2169 |     -ms-transform: rotate(0);
2170 |     transform: rotate(0);
2171 |     opacity: 1;
2172 |   }
2173 | 
2174 |   100% {
2175 |     -webkit-transform-origin: center center;
2176 |     -ms-transform-origin: center center;
2177 |     transform-origin: center center;
2178 |     -webkit-transform: rotate(200deg);
2179 |     -ms-transform: rotate(200deg);
2180 |     transform: rotate(200deg);
2181 |     opacity: 0;
2182 |   }
2183 | }
2184 | 
2185 | .rotateOut {
2186 |   -webkit-animation-name: rotateOut;
2187 |   animation-name: rotateOut;
2188 | }
2189 | 
2190 | @-webkit-keyframes rotateOutDownLeft {
2191 |   0% {
2192 |     -webkit-transform-origin: left bottom;
2193 |     transform-origin: left bottom;
2194 |     -webkit-transform: rotate(0);
2195 |     transform: rotate(0);
2196 |     opacity: 1;
2197 |   }
2198 | 
2199 |   100% {
2200 |     -webkit-transform-origin: left bottom;
2201 |     transform-origin: left bottom;
2202 |     -webkit-transform: rotate(90deg);
2203 |     transform: rotate(90deg);
2204 |     opacity: 0;
2205 |   }
2206 | }
2207 | 
2208 | @keyframes rotateOutDownLeft {
2209 |   0% {
2210 |     -webkit-transform-origin: left bottom;
2211 |     -ms-transform-origin: left bottom;
2212 |     transform-origin: left bottom;
2213 |     -webkit-transform: rotate(0);
2214 |     -ms-transform: rotate(0);
2215 |     transform: rotate(0);
2216 |     opacity: 1;
2217 |   }
2218 | 
2219 |   100% {
2220 |     -webkit-transform-origin: left bottom;
2221 |     -ms-transform-origin: left bottom;
2222 |     transform-origin: left bottom;
2223 |     -webkit-transform: rotate(90deg);
2224 |     -ms-transform: rotate(90deg);
2225 |     transform: rotate(90deg);
2226 |     opacity: 0;
2227 |   }
2228 | }
2229 | 
2230 | .rotateOutDownLeft {
2231 |   -webkit-animation-name: rotateOutDownLeft;
2232 |   animation-name: rotateOutDownLeft;
2233 | }
2234 | 
2235 | @-webkit-keyframes rotateOutDownRight {
2236 |   0% {
2237 |     -webkit-transform-origin: right bottom;
2238 |     transform-origin: right bottom;
2239 |     -webkit-transform: rotate(0);
2240 |     transform: rotate(0);
2241 |     opacity: 1;
2242 |   }
2243 | 
2244 |   100% {
2245 |     -webkit-transform-origin: right bottom;
2246 |     transform-origin: right bottom;
2247 |     -webkit-transform: rotate(-90deg);
2248 |     transform: rotate(-90deg);
2249 |     opacity: 0;
2250 |   }
2251 | }
2252 | 
2253 | @keyframes rotateOutDownRight {
2254 |   0% {
2255 |     -webkit-transform-origin: right bottom;
2256 |     -ms-transform-origin: right bottom;
2257 |     transform-origin: right bottom;
2258 |     -webkit-transform: rotate(0);
2259 |     -ms-transform: rotate(0);
2260 |     transform: rotate(0);
2261 |     opacity: 1;
2262 |   }
2263 | 
2264 |   100% {
2265 |     -webkit-transform-origin: right bottom;
2266 |     -ms-transform-origin: right bottom;
2267 |     transform-origin: right bottom;
2268 |     -webkit-transform: rotate(-90deg);
2269 |     -ms-transform: rotate(-90deg);
2270 |     transform: rotate(-90deg);
2271 |     opacity: 0;
2272 |   }
2273 | }
2274 | 
2275 | .rotateOutDownRight {
2276 |   -webkit-animation-name: rotateOutDownRight;
2277 |   animation-name: rotateOutDownRight;
2278 | }
2279 | 
2280 | @-webkit-keyframes rotateOutUpLeft {
2281 |   0% {
2282 |     -webkit-transform-origin: left bottom;
2283 |     transform-origin: left bottom;
2284 |     -webkit-transform: rotate(0);
2285 |     transform: rotate(0);
2286 |     opacity: 1;
2287 |   }
2288 | 
2289 |   100% {
2290 |     -webkit-transform-origin: left bottom;
2291 |     transform-origin: left bottom;
2292 |     -webkit-transform: rotate(-90deg);
2293 |     transform: rotate(-90deg);
2294 |     opacity: 0;
2295 |   }
2296 | }
2297 | 
2298 | @keyframes rotateOutUpLeft {
2299 |   0% {
2300 |     -webkit-transform-origin: left bottom;
2301 |     -ms-transform-origin: left bottom;
2302 |     transform-origin: left bottom;
2303 |     -webkit-transform: rotate(0);
2304 |     -ms-transform: rotate(0);
2305 |     transform: rotate(0);
2306 |     opacity: 1;
2307 |   }
2308 | 
2309 |   100% {
2310 |     -webkit-transform-origin: left bottom;
2311 |     -ms-transform-origin: left bottom;
2312 |     transform-origin: left bottom;
2313 |     -webkit-transform: rotate(-90deg);
2314 |     -ms-transform: rotate(-90deg);
2315 |     transform: rotate(-90deg);
2316 |     opacity: 0;
2317 |   }
2318 | }
2319 | 
2320 | .rotateOutUpLeft {
2321 |   -webkit-animation-name: rotateOutUpLeft;
2322 |   animation-name: rotateOutUpLeft;
2323 | }
2324 | 
2325 | @-webkit-keyframes rotateOutUpRight {
2326 |   0% {
2327 |     -webkit-transform-origin: right bottom;
2328 |     transform-origin: right bottom;
2329 |     -webkit-transform: rotate(0);
2330 |     transform: rotate(0);
2331 |     opacity: 1;
2332 |   }
2333 | 
2334 |   100% {
2335 |     -webkit-transform-origin: right bottom;
2336 |     transform-origin: right bottom;
2337 |     -webkit-transform: rotate(90deg);
2338 |     transform: rotate(90deg);
2339 |     opacity: 0;
2340 |   }
2341 | }
2342 | 
2343 | @keyframes rotateOutUpRight {
2344 |   0% {
2345 |     -webkit-transform-origin: right bottom;
2346 |     -ms-transform-origin: right bottom;
2347 |     transform-origin: right bottom;
2348 |     -webkit-transform: rotate(0);
2349 |     -ms-transform: rotate(0);
2350 |     transform: rotate(0);
2351 |     opacity: 1;
2352 |   }
2353 | 
2354 |   100% {
2355 |     -webkit-transform-origin: right bottom;
2356 |     -ms-transform-origin: right bottom;
2357 |     transform-origin: right bottom;
2358 |     -webkit-transform: rotate(90deg);
2359 |     -ms-transform: rotate(90deg);
2360 |     transform: rotate(90deg);
2361 |     opacity: 0;
2362 |   }
2363 | }
2364 | 
2365 | .rotateOutUpRight {
2366 |   -webkit-animation-name: rotateOutUpRight;
2367 |   animation-name: rotateOutUpRight;
2368 | }
2369 | 
2370 | @-webkit-keyframes slideInDown {
2371 |   0% {
2372 |     opacity: 0;
2373 |     -webkit-transform: translateY(-2000px);
2374 |     transform: translateY(-2000px);
2375 |   }
2376 | 
2377 |   100% {
2378 |     -webkit-transform: translateY(0);
2379 |     transform: translateY(0);
2380 |   }
2381 | }
2382 | 
2383 | @keyframes slideInDown {
2384 |   0% {
2385 |     opacity: 0;
2386 |     -webkit-transform: translateY(-2000px);
2387 |     -ms-transform: translateY(-2000px);
2388 |     transform: translateY(-2000px);
2389 |   }
2390 | 
2391 |   100% {
2392 |     -webkit-transform: translateY(0);
2393 |     -ms-transform: translateY(0);
2394 |     transform: translateY(0);
2395 |   }
2396 | }
2397 | 
2398 | .slideInDown {
2399 |   -webkit-animation-name: slideInDown;
2400 |   animation-name: slideInDown;
2401 | }
2402 | 
2403 | @-webkit-keyframes slideInLeft {
2404 |   0% {
2405 |     opacity: 0;
2406 |     -webkit-transform: translateX(-2000px);
2407 |     transform: translateX(-2000px);
2408 |   }
2409 | 
2410 |   100% {
2411 |     -webkit-transform: translateX(0);
2412 |     transform: translateX(0);
2413 |   }
2414 | }
2415 | 
2416 | @keyframes slideInLeft {
2417 |   0% {
2418 |     opacity: 0;
2419 |     -webkit-transform: translateX(-2000px);
2420 |     -ms-transform: translateX(-2000px);
2421 |     transform: translateX(-2000px);
2422 |   }
2423 | 
2424 |   100% {
2425 |     -webkit-transform: translateX(0);
2426 |     -ms-transform: translateX(0);
2427 |     transform: translateX(0);
2428 |   }
2429 | }
2430 | 
2431 | .slideInLeft {
2432 |   -webkit-animation-name: slideInLeft;
2433 |   animation-name: slideInLeft;
2434 | }
2435 | 
2436 | @-webkit-keyframes slideInRight {
2437 |   0% {
2438 |     opacity: 0;
2439 |     -webkit-transform: translateX(2000px);
2440 |     transform: translateX(2000px);
2441 |   }
2442 | 
2443 |   100% {
2444 |     -webkit-transform: translateX(0);
2445 |     transform: translateX(0);
2446 |   }
2447 | }
2448 | 
2449 | @keyframes slideInRight {
2450 |   0% {
2451 |     opacity: 0;
2452 |     -webkit-transform: translateX(2000px);
2453 |     -ms-transform: translateX(2000px);
2454 |     transform: translateX(2000px);
2455 |   }
2456 | 
2457 |   100% {
2458 |     -webkit-transform: translateX(0);
2459 |     -ms-transform: translateX(0);
2460 |     transform: translateX(0);
2461 |   }
2462 | }
2463 | 
2464 | .slideInRight {
2465 |   -webkit-animation-name: slideInRight;
2466 |   animation-name: slideInRight;
2467 | }
2468 | 
2469 | @-webkit-keyframes slideOutLeft {
2470 |   0% {
2471 |     -webkit-transform: translateX(0);
2472 |     transform: translateX(0);
2473 |   }
2474 | 
2475 |   100% {
2476 |     opacity: 0;
2477 |     -webkit-transform: translateX(-2000px);
2478 |     transform: translateX(-2000px);
2479 |   }
2480 | }
2481 | 
2482 | @keyframes slideOutLeft {
2483 |   0% {
2484 |     -webkit-transform: translateX(0);
2485 |     -ms-transform: translateX(0);
2486 |     transform: translateX(0);
2487 |   }
2488 | 
2489 |   100% {
2490 |     opacity: 0;
2491 |     -webkit-transform: translateX(-2000px);
2492 |     -ms-transform: translateX(-2000px);
2493 |     transform: translateX(-2000px);
2494 |   }
2495 | }
2496 | 
2497 | .slideOutLeft {
2498 |   -webkit-animation-name: slideOutLeft;
2499 |   animation-name: slideOutLeft;
2500 | }
2501 | 
2502 | @-webkit-keyframes slideOutRight {
2503 |   0% {
2504 |     -webkit-transform: translateX(0);
2505 |     transform: translateX(0);
2506 |   }
2507 | 
2508 |   100% {
2509 |     opacity: 0;
2510 |     -webkit-transform: translateX(2000px);
2511 |     transform: translateX(2000px);
2512 |   }
2513 | }
2514 | 
2515 | @keyframes slideOutRight {
2516 |   0% {
2517 |     -webkit-transform: translateX(0);
2518 |     -ms-transform: translateX(0);
2519 |     transform: translateX(0);
2520 |   }
2521 | 
2522 |   100% {
2523 |     opacity: 0;
2524 |     -webkit-transform: translateX(2000px);
2525 |     -ms-transform: translateX(2000px);
2526 |     transform: translateX(2000px);
2527 |   }
2528 | }
2529 | 
2530 | .slideOutRight {
2531 |   -webkit-animation-name: slideOutRight;
2532 |   animation-name: slideOutRight;
2533 | }
2534 | 
2535 | @-webkit-keyframes slideOutUp {
2536 |   0% {
2537 |     -webkit-transform: translateY(0);
2538 |     transform: translateY(0);
2539 |   }
2540 | 
2541 |   100% {
2542 |     opacity: 0;
2543 |     -webkit-transform: translateY(-2000px);
2544 |     transform: translateY(-2000px);
2545 |   }
2546 | }
2547 | 
2548 | @keyframes slideOutUp {
2549 |   0% {
2550 |     -webkit-transform: translateY(0);
2551 |     -ms-transform: translateY(0);
2552 |     transform: translateY(0);
2553 |   }
2554 | 
2555 |   100% {
2556 |     opacity: 0;
2557 |     -webkit-transform: translateY(-2000px);
2558 |     -ms-transform: translateY(-2000px);
2559 |     transform: translateY(-2000px);
2560 |   }
2561 | }
2562 | 
2563 | .slideOutUp {
2564 |   -webkit-animation-name: slideOutUp;
2565 |   animation-name: slideOutUp;
2566 | }
2567 | 
2568 | @-webkit-keyframes hinge {
2569 |   0% {
2570 |     -webkit-transform: rotate(0);
2571 |     transform: rotate(0);
2572 |     -webkit-transform-origin: top left;
2573 |     transform-origin: top left;
2574 |     -webkit-animation-timing-function: ease-in-out;
2575 |     animation-timing-function: ease-in-out;
2576 |   }
2577 | 
2578 |   20%, 60% {
2579 |     -webkit-transform: rotate(80deg);
2580 |     transform: rotate(80deg);
2581 |     -webkit-transform-origin: top left;
2582 |     transform-origin: top left;
2583 |     -webkit-animation-timing-function: ease-in-out;
2584 |     animation-timing-function: ease-in-out;
2585 |   }
2586 | 
2587 |   40% {
2588 |     -webkit-transform: rotate(60deg);
2589 |     transform: rotate(60deg);
2590 |     -webkit-transform-origin: top left;
2591 |     transform-origin: top left;
2592 |     -webkit-animation-timing-function: ease-in-out;
2593 |     animation-timing-function: ease-in-out;
2594 |   }
2595 | 
2596 |   80% {
2597 |     -webkit-transform: rotate(60deg) translateY(0);
2598 |     transform: rotate(60deg) translateY(0);
2599 |     opacity: 1;
2600 |     -webkit-transform-origin: top left;
2601 |     transform-origin: top left;
2602 |     -webkit-animation-timing-function: ease-in-out;
2603 |     animation-timing-function: ease-in-out;
2604 |   }
2605 | 
2606 |   100% {
2607 |     -webkit-transform: translateY(700px);
2608 |     transform: translateY(700px);
2609 |     opacity: 0;
2610 |   }
2611 | }
2612 | 
2613 | @keyframes hinge {
2614 |   0% {
2615 |     -webkit-transform: rotate(0);
2616 |     -ms-transform: rotate(0);
2617 |     transform: rotate(0);
2618 |     -webkit-transform-origin: top left;
2619 |     -ms-transform-origin: top left;
2620 |     transform-origin: top left;
2621 |     -webkit-animation-timing-function: ease-in-out;
2622 |     animation-timing-function: ease-in-out;
2623 |   }
2624 | 
2625 |   20%, 60% {
2626 |     -webkit-transform: rotate(80deg);
2627 |     -ms-transform: rotate(80deg);
2628 |     transform: rotate(80deg);
2629 |     -webkit-transform-origin: top left;
2630 |     -ms-transform-origin: top left;
2631 |     transform-origin: top left;
2632 |     -webkit-animation-timing-function: ease-in-out;
2633 |     animation-timing-function: ease-in-out;
2634 |   }
2635 | 
2636 |   40% {
2637 |     -webkit-transform: rotate(60deg);
2638 |     -ms-transform: rotate(60deg);
2639 |     transform: rotate(60deg);
2640 |     -webkit-transform-origin: top left;
2641 |     -ms-transform-origin: top left;
2642 |     transform-origin: top left;
2643 |     -webkit-animation-timing-function: ease-in-out;
2644 |     animation-timing-function: ease-in-out;
2645 |   }
2646 | 
2647 |   80% {
2648 |     -webkit-transform: rotate(60deg) translateY(0);
2649 |     -ms-transform: rotate(60deg) translateY(0);
2650 |     transform: rotate(60deg) translateY(0);
2651 |     opacity: 1;
2652 |     -webkit-transform-origin: top left;
2653 |     -ms-transform-origin: top left;
2654 |     transform-origin: top left;
2655 |     -webkit-animation-timing-function: ease-in-out;
2656 |     animation-timing-function: ease-in-out;
2657 |   }
2658 | 
2659 |   100% {
2660 |     -webkit-transform: translateY(700px);
2661 |     -ms-transform: translateY(700px);
2662 |     transform: translateY(700px);
2663 |     opacity: 0;
2664 |   }
2665 | }
2666 | 
2667 | .hinge {
2668 |   -webkit-animation-name: hinge;
2669 |   animation-name: hinge;
2670 | }
2671 | 
2672 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2673 | 
2674 | @-webkit-keyframes rollIn {
2675 |   0% {
2676 |     opacity: 0;
2677 |     -webkit-transform: translateX(-100%) rotate(-120deg);
2678 |     transform: translateX(-100%) rotate(-120deg);
2679 |   }
2680 | 
2681 |   100% {
2682 |     opacity: 1;
2683 |     -webkit-transform: translateX(0px) rotate(0deg);
2684 |     transform: translateX(0px) rotate(0deg);
2685 |   }
2686 | }
2687 | 
2688 | @keyframes rollIn {
2689 |   0% {
2690 |     opacity: 0;
2691 |     -webkit-transform: translateX(-100%) rotate(-120deg);
2692 |     -ms-transform: translateX(-100%) rotate(-120deg);
2693 |     transform: translateX(-100%) rotate(-120deg);
2694 |   }
2695 | 
2696 |   100% {
2697 |     opacity: 1;
2698 |     -webkit-transform: translateX(0px) rotate(0deg);
2699 |     -ms-transform: translateX(0px) rotate(0deg);
2700 |     transform: translateX(0px) rotate(0deg);
2701 |   }
2702 | }
2703 | 
2704 | .rollIn {
2705 |   -webkit-animation-name: rollIn;
2706 |   animation-name: rollIn;
2707 | }
2708 | 
2709 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
2710 | 
2711 | @-webkit-keyframes rollOut {
2712 |   0% {
2713 |     opacity: 1;
2714 |     -webkit-transform: translateX(0px) rotate(0deg);
2715 |     transform: translateX(0px) rotate(0deg);
2716 |   }
2717 | 
2718 |   100% {
2719 |     opacity: 0;
2720 |     -webkit-transform: translateX(100%) rotate(120deg);
2721 |     transform: translateX(100%) rotate(120deg);
2722 |   }
2723 | }
2724 | 
2725 | @keyframes rollOut {
2726 |   0% {
2727 |     opacity: 1;
2728 |     -webkit-transform: translateX(0px) rotate(0deg);
2729 |     -ms-transform: translateX(0px) rotate(0deg);
2730 |     transform: translateX(0px) rotate(0deg);
2731 |   }
2732 | 
2733 |   100% {
2734 |     opacity: 0;
2735 |     -webkit-transform: translateX(100%) rotate(120deg);
2736 |     -ms-transform: translateX(100%) rotate(120deg);
2737 |     transform: translateX(100%) rotate(120deg);
2738 |   }
2739 | }
2740 | 
2741 | .rollOut {
2742 |   -webkit-animation-name: rollOut;
2743 |   animation-name: rollOut;
2744 | }
2745 | 


--------------------------------------------------------------------------------