<<set $numtext=$statustext.length>>\n\n<<replace #lscroll>>\n<<for $i to 0; $i lt $numtext; $i++>>\n<<if $statustextperson[$i] eq "Will">>\n<span class="willtext">Will:</span>\n<</if>>\n<<if $statustextperson[$i] eq "Spencer">>\n<span class="spencertext">Spencer:</span>\n<</if>>\n<<print $statustext[$i]>>\n<<if $i neq $numtext-1>>\n<center>-----------------------------</center><br>\n<</if>>\n<</for>>\n<</replace>>

A furry cyberpunk adventure... with growth!

<div id="whole">\n/%%%variables for overlay text%%%%%%/\n<<set $overtext=["Okay Spence, let's move onto the <span class='emph'>Encounter Phase</span> of a netsprint. You'll notice that things look a little different.<br>","\nThe console keeps track of a few key stats. As we infiltrate hypercorps' servers, our activities generate <span class='emph'>suspicion</span>. The higher it is, the more aware the company is and the more aggressive they'll be at trying to stop us.<br>","\n<span class='emph'>Time</span> refers to how long the sprint has gone on for. Sometimes our windows of opportunity are limited, so try to be quick!<br>","\nLastly, <span class='emph'>health</span> refers to how much damage you've sustained. Too much, and your digital consciousness may be too corrupt to piece back together into your physical body. Let's try to not make that happen.<br>","\nAlright, let me load up a test cipher, and let's get this encounter started!"]>>\n<<set $overnum=1>>\n/%%%%%%%overlay%%%%%%%%%%%%%/\n<div id="overlay" class="overlayactive">\n<div id="overlaytextbox">\n<div id="textboxtaskbar">\nX\n</div>\n<div id="overlayicon">\n[img[$WILLICON[0]]]\n</div>\n<div id="ovtext">\n<<print $overtext[0]>>\n</div>\n<div id="ovnext" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $overnum ++>>\n<<if $overnum eq 2>>\n<<replace #ovtext>>\n<<print $overtext[1]>>\n<</replace>>\n<<addclass "#susp" "animated flash">>\n<</if>>\n<<if $overnum eq 3>>\n<<replace #ovtext>>\n<<print $overtext[2]>>\n<</replace>>\n<<addclass "#time" "animated flash">>\n<</if>>\n<<if $overnum eq 4>>\n<<replace #ovtext>>\n<<print $overtext[3]>>\n<</replace>>\n<<addclass "#health" "animated flash">>\n<</if>>\n<<if $overnum eq 5>>\n<<replace #ovtext>>\n<<print $overtext[4]>>\n<</replace>>\n<<replace #ovnext>>\n<</replace>>\n<<removeclass "#ovnext" "activebutt animated press">>\n<<replace #textboxtaskbar>>\n<<click "X">>\n\t<<removeclass "#overlay" "overlayactive">>\n\t<<addclass "#overlay" "overlayinactive">>\n\t<<replace .textoverstart>>\nREADY?\n\t<</replace>>\n\t<<display DispStatS>>\n<</click>>\n<</replace>>\n<</if>>\n<</click>>\n</div>\n</div>\n</div>\n\n\n\n<div id="gbox" class="circbg">\n/%%%%%%%title%%%%%%%%%%%%%%%/\n<div class="textoverstart">\n\n</div>\n/%%%%%%%start button%%%%%%%%/\n<div id="startbutt" class="animated press">\n[img[Down the rabbit hole.|http://imgur.com/Qj0fAOi.png][TutEncounter]]\n</div>\n\n</div>\n\n/%%%%%%%%%status bar%%%%%%%%/\n/%%%%%%%status variables%%%%/\n<<set $statustext=["Okay Spence, let's move onto the <b>Encounter Phase</b> of a netsprint. You'll notice that things look a little different.<br>\nThe console keeps track of a few key stats. As we infiltrate hypercorps' servers, our activities generate <b>suspicion</b>. The higher it is, the more aware the company is and the more aggressive they'll be at trying to stop us.<br>\n<b>Time</b> refers to how long the sprint has gone on for. Sometimes our windows of opportunity are limited, so try to be quick!<br>\nLastly, <b>health</b> refers to how much damage you've sustained. Too much, and your digital consciousness may be too corrupt to piece back together into your physical body. Let's try to not make that happen.<br>\nAlright, let me load up a test cipher, and let's get this encounter started!"]>>\n<<set $statustextperson=["Will"]>>\n<<set $suspicion=0>>\n<<set $time=0>>\n<<set $health=100>>\n/%%%%status content%%%%%%/\n<div id="statusbar" class="statusbarbg">\n<div id="statusbartitle">\nData Log\n</div>\n<div id="stats">\n<b>Stats</b><br>\n--------------------------------<br>\n<span id="susp">\nSuspicion: <<print $suspicion>>\n</span><br>\n<span id="time">\nTime: <<print $time>>\n</span><br>\n<span id="health">\nHealth: <<print $health>>\n</span>\n</div>\n<div id="sscroll">\n\n</div>\n\n</div>\n</div>

/%%%%%%%background%%%%%%%%%%/\n<div id="whole">\n<div id="gbox" class="statbg">\n/%%%%%%%title%%%%%%%%%%%%%%%/\n<div class="textoverstart">\n<div class="jackin">\n<span class="typed-speed80-delay1500">\nJACK IN\n</span>\n</div>\n</div>\n/%%%%%%%start button%%%%%%%%/\n<div id="startbutt" class="animated press">\n[img[Down the rabbit hole.|http://imgur.com/Qj0fAOi.png][Entry1]]\n</div>\n</div>\n</div>

<<set $numtext=$statustext.length>>\n\n<<replace #sscroll>>\n<<for $i to 0; $i lt $numtext; $i++>>\n<<if $statustextperson[$i] eq "Will">>\n<span class="willtext">Will:</span>\n<</if>>\n<<if $statustextperson[$i] eq "Spencer">>\n<span class="spencertext">Spencer:</span>\n<</if>>\n<<print $statustext[$i]>>\n<<if $i neq $numtext-1>>\n<center>-----------------------------</center><br>\n<</if>>\n<</for>>\n<</replace>>

/%%%%%%%background%%%%%%%%%%/\n<div id="whole">\n<div id="gbox" class="statbg">\n/%%%%%%%title%%%%%%%%%%%%%%%/\n<div id="starttext">\n<div class="chap1">\n<span class="typed-speed80-delay1500">\nChapter 1: Walk\n</span>\n</div>\n</div>\n\n<<timed 5s>>\n<<replace #starttext>>\n[[Chapter 1: Walk|Start]]\n<</replace>>\n<</timed>>\n/%%%%%%%start button%%%%%%%%/\n\n</div>\n</div>

/%%%%%set skill1 to current skill selecting%%%%%%%%/\n<<addclass "#load2" "picking">>\n<<addclass "#load1" "switchpick">>\n<<set $currentskill=2>>\n\n<<if $skill2 eq "None">>\n<<replace #load2>>Loading...<</replace>>\n<<else>>\n<<replace #load2>><<print $skill2>><</replace>>\n<</if>>\n\n<<if $skill1 eq "None">>\n<<set $stext="Slot Available">>\n<<else>>\n<<set $stext=$skill1>>\n<</if>>\n\n<<replace #load1>>\n<<click $stext>>\n<<removeclass "#load2" "picking">>\n<<removeclass "#load1" "switchpick">>\n<<display SkillSel1>>\n<</click>>\n<</replace>>\n\n

/%%%%%set skill1 to current skill selecting%%%%%%%%/\n<<addclass "#load1" "picking">>\n<<addclass "#load2" "switchpick">>\n<<set $currentskill=1>>\n\n<<if $skill1 eq "None">>\n<<replace #load1>>Loading...<</replace>>\n<<else>>\n<<replace #load1>><<print $skill1>><</replace>>\n<</if>>\n\n<<if $skill2 eq "None">>\n<<set $stext="Slot Available">>\n<<else>>\n<<set $stext=$skill2>>\n<</if>>\n\n<<replace #load2>>\n<<click $stext>>\n<<removeclass "#load1" "picking">>\n<<removeclass "#load2" "switchpick">>\n<<display SkillSel2>>\n<</click>>\n<</replace>>\n

/%%%% initialize variables%%%%/\n<<set $talknum = 1>>\n/%%%%content arrays%%%%%%%%%%%/\n\n<div id="whole">\n/%%%%%%%background%%%%%%%%%%%%/\n<div id="gbox" class="circbg">\n/%%%%%%character pictures%%%%%/\n<div id="charbox">\n<div id="charleft">\n\t<span id="charleftcontent">\n\t\t<<print '<img class="animated tada" src="'+$SPENCEREMOTE[0]+'">'>>\n\t</span>\n</div>\n<div id="charright">\n\t<span id="charrightcontent">\n\t\t<<print '<img src="'+$WILLEMOTE[0]+'">'>>\n\t</span>\n</div>\n</div>\n\n/%%%%%remembers%%%%%%%%%%%%%%%/\n<div id="remembers">\n\n</div>\n/%%%%%dialog divider%%%%%%%%%%/\n<div id="divideimg">\n[img[$dividercirc]]\n</div>\n/%%%%dialog icon%%%%%%%%%%%%%%/\n<div id="talkicon">\n<div id="talkiconcontent">\n[img[$SPENCERICON[0]]]\n</div>\n</div>\n/%%%%dialog words%%%%%%%%%%%%%/\n<div id="diabox">\n<span id="diaboxcontent">\n\t\tWill!~<span class="animated fadeOut infinite">|</span>\n</span>\n\n</div>\n/%%%%button & transitions!%%%%%%%%%%%%/\n<div id="nextbutt" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $talknum ++>>\n\n<<if $talknum eq 2>>\n<<replace #diaboxcontent>>\nTook you long enough to get here, eh?<br>\nSheesh, you were hooked up to your rig before I was! What took you?<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 3>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\nWell, hi to you too, Spencer...<br>\nSome of us have the insight to not jack in without running a diagnostic test beforehand.<br>\nI swear, one of these days, you're going to run into trouble with your rig and no one's going to be able to help you.<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 4>>\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\nWow, it's nice knowing you put //so// much faith in me. I'm feeling that primo, grade-A love coming //right// off you.<br>\nI know you worry about losing the love of your life, your //raison-d'être//. Hmmph, lucky for you, I happen to be an experienced netsprinter.<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 5>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n...<br>\nYou're joking, right?<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 6>>\n<<replace #diaboxcontent>>\n...<span class="animated fadeOut infinite">|</span><br>\n<img src="http://i.imgur.com/rKzEzTn.png">\n<<click "Remember that last solo sprint you did? You nearly killed yourself and fried your whole rig.">>\n<<display Entry3a>>\n<</click>><br>\n<img src="http://i.imgur.com/rKzEzTn.png"><<click "You do realize I could do so much better?">>\n<<display Entry3b>>\n<<set $spencernotlove=1>>\n<</click>>\n<</replace>>\n<<replace #nextbutt>>\n\n<</replace>>\n<<removeclass "#nextbutt" "activebutt animated press">>\n<</if>>\n<</click>>\n</div>\n\n</div>\n</div>

/%%%% initialize variables%%%%/\n<<set $talknum = 1>>\n/%%%%content arrays%%%%%%%%%%%/\n\n<div id="whole">\n/%%%%%%%background%%%%%%%%%%%%/\n<div id="gbox" class="circbg">\n/%%%%%%character pictures%%%%%/\n<div id="charbox">\n<div id="charleft">\n\t<span id="charleftcontent">\n\t</span>\n</div>\n<div id="charright">\n\t<span id="charrightcontent">\n\t\t<<print '<img class="animated bounceInUp" src="'+$WILLEMOTE[0]+'">'>>\n\t</span>\n</div>\n</div>\n\n/%%%%%remembers%%%%%%%%%%%%%%%/\n<div id="remembers">\n<span class="animated fadeIn">\n<span class="areaimage">\n[img[http://i.imgur.com/VHUH95V.png]]\n</span>\n</span>\n<span class="areatext animated fadeIn">\nNA Northwest Information Node\n</span>\n</div>\n/%%%%%dialog divider%%%%%%%%%%/\n<div id="divideimg">\n[img[$dividercirc]]\n</div>\n/%%%%dialog icon%%%%%%%%%%%%%%/\n<div id="talkicon">\n<div id="talkiconcontent">\n[img[$WILLICON[0]]]\n</div>\n</div>\n/%%%%dialog words%%%%%%%%%%%%%/\n<div id="diabox">\n<span id="diaboxcontent">\n//Whew//, what a rush!<br>\nI'm never going to get used to //digital consciouness transference//. Heh, or as Spencer likes to call it, 'jacking in.'<br>What a dork.<span class="animated fadeOut infinite">|</span>\n</span>\n</div>\n/%%%%button & transitions!%%%%%%%%%%%%/\n<div id="nextbutt" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $talknum ++>>\n\n<<if $talknum eq 2>>\n<<replace #remembers>>\n<span class="animated fadeOut">\n<span class="areaimage">\n[img[http://i.imgur.com/VHUH95V.png]]\n</span>\n</span>\n<span class="areatext animated fadeOut">\nNA Northwest Information Node\n</span>\n<</replace>>\n<<replace #diaboxcontent>>\nHmm...<br>\nOops, almost forgot, better do a systems check.<br>\nEndorphin levels: Check.<br>\nCortical brain activity: Stable.<br>\nWell, looks like I'm good to go.<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 3>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[1]]]\n<</replace>>\n<<replace #diaboxcontent>>\n*crick crack*<br>\nOof, I always do feel a little stiff after jacking in, though.<br>\nHopefully, I'll be able to sort that out in the next build of the immersion algorithm. Huh...\n<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 4>>\n<<replace #charrightcontent>>\n<<print '<img class="animated shake" src="'+$WILLEMOTE[0]+'">'>>\n<</replace>>\n<<replace #diaboxcontent>>\n*crack*<br>\nAhhh... That's better. Can't go on a netsprint with a bad back. Strange, when I think about it, sensations shouldn't manifest without an external stimulus within the simulation-\n<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<<replace #nextbutt>>\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png][Entry2]]>> <</click>>\n<</replace>>\n<</if>>\n<</click>>\n</div>\n\n\n</div>\n</div>

<<if $procnumlab eq 0>>\n<<set $statustext.unshift("There's no point in hitting a wall, Spence.<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatS>>\n<</if>>\n\n<<set $suspicion ++>>\n<<display UpdateSuspLab>>\n\n<<set $time ++>>\n<<display UpdateTimeLab>>\n\n<<set $procnumlab ++>>\n\n<<if $procnumlab eq 2>>\n<<set $statustext.unshift("Seriously, Spence, knock it off!")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatS>>\n<</if>>\n\n<<if $procnumlab eq 3>>\n<<set $statustext.unshift("//Something growls and snarls from with the labyrinth...//")>>\n<<set $statustextperson.unshift("None")>>\n<<display DispStatS>>\n<</if>>

/*! typed.js integration module for SugarCube */\n!function(){"use strict";function getInlineOptions(classNames){var match,options={},typedRe=/^typed(?:-(\sw+))+\sb$/,parseRe=/-(speed|delay)(\sd+)\sb/g;if("typed"!==classNames){classNames=classNames.toLowerCase().split(/\ss+/);for(var i=0;i<classNames.length;i++)if(typedRe.test(classNames[i])){for(;null!==(match=parseRe.exec(classNames[i]));)switch(match[1]){case"speed":options.typeSpeed=+match[2];break;case"delay":options.startDelay=+match[2]}break}}return options}function typedCallbackFactory(el,callback){return function(){var $outer=jQuery(el),$inner=jQuery('<div class="typedjs-text-wrapper" style="display:block;position:absolute;left:0;top:0;"><span class="typed"></span></div>'),$source=$outer.children('[class|="typed"]'),options=jQuery.extend({typeSpeed:40,startDelay:400},getInlineOptions($source.attr("class")),{strings:[$source.html()]});"function"==typeof callback&&(options.callback=callback),$outer.append($inner),$inner.children().typed(options)}}postrender.typedSetupHandler=function(content){jQuery('[class|="typed"]',content).addClass("typed").css("visibility","hidden").wrap('<div class="typedjs-outer-wrapper" style="display:block;position:relative;"></div>')},postdisplay.typedAnimationHandler=function(){for(var $elements=jQuery("#passages .typedjs-outer-wrapper"),callback=null,i=$elements.length-1;i>=0;--i)callback=typedCallbackFactory($elements[i],callback);"function"==typeof callback&&callback()}}();\n/*! Typed.js | (c) 2014 Matt Boldt | MIT License */\n!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.stringsElement=this.options.stringsElement,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){var s=this;if(this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.stringsElement){s.strings=[],this.stringsElement.hide();var e=this.stringsElement.find("p");t.each(e,function(e,i){s.strings.push(t(i).html())})}this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,i=this;i.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var o=1;/^\s^\sd+/.test(r)&&(r=/\sd+/.exec(r)[0],o+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+o)}if("html"===i.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var a="",h="";for(h="<"===n?">":";";t.substr(s).charAt(0)!==h;)a+=t.substr(s).charAt(0),s++;s++,a+=h}}i.timeout=setTimeout(function(){if(s===t.length){if(i.options.onStringTyped(i.arrayPos),i.arrayPos===i.strings.length-1&&(i.options.callback(),i.curLoop++,i.loop===!1||i.curLoop===i.loopCount))return;i.timeout=setTimeout(function(){i.backspace(t,s)},i.backDelay)}else{0===s&&i.options.preStringTyped(i.arrayPos);var e=t.substr(0,s+1);i.attr?i.el.attr(i.attr,e):i.isInput?i.el.val(e):"html"===i.contentType?i.el.html(e):i.el.text(e),s++,i.typewrite(t,s)}},e)},e)}},backspace:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.backSpeed,i=this;i.timeout=setTimeout(function(){if("html"===i.contentType&&">"===t.substr(s).charAt(0)){for(var e="";"<"!==t.substr(s).charAt(0);)e-=t.substr(s).charAt(0),s--;s--,e+="<"}var r=t.substr(0,s);i.attr?i.el.attr(i.attr,r):i.isInput?i.el.val(r):"html"===i.contentType?i.el.html(r):i.el.text(r),s>i.stopNum?(s--,i.backspace(t,s)):s<=i.stopNum&&(i.arrayPos++,i.arrayPos===i.strings.length?(i.arrayPos=0,i.shuffle&&(i.sequence=i.shuffleArray(i.sequence)),i.init()):i.typewrite(i.strings[i.sequence[i.arrayPos]],s))},e)}},shuffleArray:function(t){var s,e,i=t.length;if(i)for(;--i;)e=Math.floor(Math.random()*(i+1)),s=t[e],t[e]=t[i],t[i]=s;return t},reset:function(){var t=this;clearInterval(t.timeout);var s=this.el.attr("id");this.el.after('<span id="'+s+'"/>'),this.el.remove(),"undefined"!=typeof this.cursor&&this.cursor.remove(),t.options.resetCallback()}},t.fn.typed=function(e){return this.each(function(){var i=t(this),r=i.data("typed"),o="object"==typeof e&&e;r||i.data("typed",r=new s(this,o)),"string"==typeof e&&r[e]()})},t.fn.typed.defaults={strings:["These are the default values...","You know what you should do?","Use your own!","Have a great day!"],stringsElement:null,typeSpeed:0,startDelay:0,backSpeed:0,shuffle:!1,backDelay:500,loop:!1,loopCount:!1,showCursor:!0,cursorChar:"|",attr:null,contentType:"html",callback:function(){},preStringTyped:function(){},onStringTyped:function(){},resetCallback:function(){}}}(window.jQuery);\n

Jacked

/%%%%set variables%%%%%%/\n<<set $progressnum=0>>\n<<set $investnumlab=0>>\n<<set $procnumlab=0>>\n<<set $cloaknumlab=0>>\n/%%%game screen%%%%%/\n<div id="whole">\n/%%%%%%%overlay%%%%%%%%%%%%%/\n/%%%variables for overlay text%%%%%%/\n<<set $overtext=["At the top of the screen is the data pertaining the to cipher you're trying to bypass. A cipher can have up to three <span class='emph'>attributes</span>.","In this case, the cipher has one, <span class='emph'>Progress</span>. Judging from the sound of that, we should try to fill it. Different ciphers will have different attributes, not all of which more is better!<br>","At the bottom, you can choose the program you want to use. There will always be two <span class='emph'>generic skills</span> that you will always have access to. Beneath them are the two <b>picked skills</b> we chose in the <span class='emph'>Prep Phase</span>. Try using one!"]>>\n<<set $overnum=1>>\n<div id="overlay" class="overlayactive">\n<div id="overlaytextbox">\n<div id="textboxtaskbar">\nX\n</div>\n<div id="overlayicon">\n[img[$WILLICON[0]]]\n</div>\n<div id="ovtext">\n<<print $overtext[0]>>\n</div>\n<div id="ovnext" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $overnum ++>>\n<<if $overnum eq 2>>\n<<replace #ovtext>>\n<<print $overtext[1]>>\n<</replace>>\n<</if>>\n<</click>>\n</div>\n\n</div>\n</div>\n<div id="gbox" class="circbg">\n<div id="enemybox">\n\n<div id="enemyname" class="enemystatused">\nlabyrinth.exe\n</div>\n<div id="enemystat1" class="enemystatused">\nProgress: \n<<for $i to 1; $i lte 5;$i++>>\n<<if $i lte $progressnum>>\n<span class="tutprogress">&#9613; </span>\n<<else>>\n&#9613; \n<</if>>\n<</for>>\n</div>\n<div id="enemystat2" class="enemystatnotused">\n</div>\n<div id="enemystat3" class="enemystatnotused">\n</div>\n</div>\n\n<div id="playerbox">\n<div id="playername" class="enemystatused">\nSpencer\n</div>\n\n<div id="genericskill1" class="skillavail">\n<<click "investigate()">>\n<<display InvestigateTutLab>>\n<</click>>\n</div>\n\n<div id="genericskill2" class="skillavail">\n<<click "proc()">>\n<<display ProcTutLab>>\n<</click>>\n</div>\n\n<div id="pickedskill1" class="skillavail">\n<<if $skill1 eq $proglearn[0]>>\n<<click $skill1>>\n<<display CloakTutLab>>\n<</click>>\n<</if>>\n\n<<if $skill1 eq $proglearn[1]>>\n<<click $skill1>>\n\n<</click>>\n<</if>>\n<<if $skill1 eq $proglearn[2]>>\n<<click $skill1>>\n\n<</click>>\n<</if>>\n\n<<if $skill1 eq $proglearn[3]>>\n<<click $skill1>>\n\n<</click>>\n<</if>>\n</div>\n\n<div id="pickedskill2" class="skillavail">\n<<if $skill2 eq $proglearn[0]>>\n<<click $skill2>>\n<<display CloakTutLab>>\n<</click>>\n<</if>>\n\n<<if $skill2 eq $proglearn[1]>>\n<<click $skill2>>\n\n<</click>>\n<</if>>\n\n<<if $skill2 eq $proglearn[2]>>\n<<click $skill2>>\n\n<</click>>\n<</if>>\n\n<<if $skill2 eq $proglearn[3]>>\n<<click $skill2>>\n\n<</click>>\n<</if>>\n</div>\n\n</div>\n\n</div>\n\n/%%%%%%%%%status bar%%%%%%%%/\n/%%%%%%%status variables%%%%/\n<<set $statustext.unshift("At the top of the screen is the data pertaining the to cipher you're trying to bypass. A cipher can have up to three <b>attributes</b>. In this case, the cipher has one, <b>Progress</b>. Judging from the sound of that, we should try to fill it. Different ciphers will have different attributes, not all of which more is better!<br>\nAt the bottom, you can choose the program you want to use. There will always be two <b>generic skills</b> that you will always have access to. Beneath them are the two <b>picked skills</b> we chose in the <b>Prep Phase</b>. Try using one!")>>\n<<set $statustextperson.unshift("Will")>>\n/%%%%status content%%%%%%/\n<div id="statusbar" class="statusbarbg">\n<div id="statusbartitle">\nData Log\n</div>\n<div id="stats">\n<b>Stats</b><br>\n--------------------------------<br>\n<span id="susp">\nSuspicion: <<print $suspicion>>\n</span><br>\n<span id="time">\nTime: <<print $time>>\n</span><br>\n<span id="health">\nHealth: <<print $health>>\n</span>\n</div>\n<div id="sscroll">\n<<for $i to 0; $i lt $numtext; $i++>>\n<<if $statustextperson[$i] eq "Will">>\n<span class="willtext">Will:</span>\n<</if>>\n<<if $statustextperson[$i] eq "Spencer">>\n<span class="willtext">Spencer:</span>\n<</if>>\n<<print $statustext[$i]>>\n<<if $i neq $numtext-1>>\n<center>-----------------------------</center><br>\n<</if>>\n<</for>>\n</div>\n\n</div>\n</div>

/%%%%refreshes the skill selection list%%%%%/\n<<set $timeselect ++>>\n\n<<if $skill1 neq $proglearn[0] and $skill2 neq $proglearn[0]>>\n<<addclass "#prog0" "switchpick">>\n<<removeclass "#prog0" "nopick">>\n<<replace #prog0>>\n<<click $proglearn[0]>>\n<<if $timeselect eq 1>>\n<<set $statustext.unshift("Huh, never thought you'd go for something so subtle, hehe. Alright then, select the other available slot and pick another skill!<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatL>>\n<<replace #prepnotes>>\n<div class="notein animated bounce">\n<span class='willtext'>Will:</span> Huh, never thought you'd go for something so subtle, hehe. Alright then, select the other available slot and pick another skill!<br>\n</div>\n<</replace>>\n<</if>>\n<<if $currentskill eq 1>>\n<<set $skill1=$proglearn[0]>>\n<<replace #load1>>\n<<print $skill1>>\n<</replace>>\n<<display RefreshSkillSel>>\n<<else>>\n<<set $skill2=$proglearn[0]>>\n<<replace #load2>>\n<<print $skill2>>\n<</replace>>\n<<display RefreshSkillSel>>\n<</if>>\n<</click>>\n<</replace>>\n<<else>>\n<<addclass "#prog0" "picking">>\n<<removeclass "#prog0" "switchpick">>\n<<replace #prog0>>\n<<print $proglearn[0]>>\n<</replace>>\n<</if>>\n\n<<if $skill1 neq $proglearn[1] and $skill2 neq $proglearn[1]>>\n<<addclass "#prog1" "switchpick">>\n<<removeclass "#prog1" "nopick">>\n<<replace #prog1>>\n<<click $proglearn[1]>>\n<<if $timeselect eq 1>>\n<<set $statustext.unshift("How did I know you were gonna pick something like that? Ah well, when you're ready, select the other available slot and pick another skill.<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatL>>\n<<replace #prepnotes>>\n<div class="notein">\n<span class='willtext'>Will:</span> How did I know you were gonna pick something like that? Ah well, when you're ready, select the other available slot and pick another skill.<br>\n</div>\n<</replace>>\n<</if>>\n<<if $currentskill eq 1>>\n<<set $skill1=$proglearn[1]>>\n<<replace #load1>>\n<<print $skill1>>\n<</replace>>\n<<display RefreshSkillSel>>\n<<else>>\n<<set $skill2=$proglearn[1]>>\n<<replace #load2>>\n<<print $skill2>>\n<</replace>>\n<<display RefreshSkillSel>>\n<</if>>\n<</click>>\n<</replace>>\n<<else>>\n<<addclass "#prog1" "picking">>\n<<removeclass "#prog1" "switchpick">>\n<<replace #prog1>>\n<<print $proglearn[1]>>\n<</replace>>\n<</if>>\n\n<<if $skill1 neq $proglearn[2] and $skill2 neq $proglearn[2]>>\n<<addclass "#prog2" "switchpick">>\n<<removeclass "#prog2" "nopick">>\n<<replace #prog2>>\n<<click $proglearn[2]>>\n<<if $timeselect eq 1>>\n<<set $statustext.unshift("Heh, you're not exactly one to stab someone in the back, Spence. But hey, it's your choice. Now, select the other available slot and pick another skill.<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatL>>\n<<replace #prepnotes>>\n<div class="notein">\n<span class='willtext'>Will:</span> Heh, you're not exactly one to stab someone in the back, Spence. But hey, it's your choice. Now, select the other available slot and pick another skill.<br>\n</div>\n<</replace>>\n<</if>>\n<<if $currentskill eq 1>>\n<<set $skill1=$proglearn[2]>>\n<<replace #load1>>\n<<print $skill1>>\n<</replace>>\n<<display RefreshSkillSel>>\n<<else>>\n<<set $skill2=$proglearn[2]>>\n<<replace #load2>>\n<<print $skill2>>\n<</replace>>\n<<display RefreshSkillSel>>\n<</if>>\n<</click>>\n<</replace>>\n<<else>>\n<<addclass "#prog2" "picking">>\n<<removeclass "#prog2" "switchpick">>\n<<replace #prog2>>\n<<print $proglearn[2]>>\n<</replace>>\n<</if>>\n\n<<if $skill1 neq $proglearn[3] and $skill2 neq $proglearn[3]>>\n<<addclass "#prog3" "switchpick">>\n<<removeclass "#prog3" "nopick">>\n<<replace #prog3>>\n<<click $proglearn[3]>>\n<<if $timeselect eq 1>>\n<<set $statustext.unshift("Well, it's not like you'll find anything perverted here in the netspace... Oh, who am I kidding? Alright then, select the other available slot and pick another skill!<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatL>>\n<<replace #prepnotes>>\n<div class="notein">\n<span class='willtext'>Will:</span> Well, it's not like you'll find anything perverted here in the netspace... Oh, who am I kidding? Alright then, select the other available slot and pick another skill!<br>\n</div>\n<</replace>>\n<</if>>\n<<if $currentskill eq 1>>\n<<set $skill1=$proglearn[3]>>\n<<replace #load1>>\n<<print $skill1>>\n<</replace>>\n<<display RefreshSkillSel>>\n<<else>>\n<<set $skill2=$proglearn[3]>>\n<<replace #load2>>\n<<print $skill2>>\n<</replace>>\n<<display RefreshSkillSel>>\n<</if>>\n<</click>>\n<</replace>>\n<<else>>\n<<addclass "#prog3" "picking">>\n<<removeclass "#prog3" "switchpick">>\n<<replace #prog3>>\n<<print $proglearn[3]>>\n<</replace>>\n<</if>>\n<<if $timeselect eq 10>>\n<<set $statustext.unshift("C'mon, Spence... we don't have all day.<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatL>>\n<<replace #prepnotes>>\n<div class="notein">\n<span class='willtext'>Will:</span> C'mon, Spence... we don't have all day.<br>\n</div>\n<</replace>>\n<</if>>\n\n<<if $alreadycloakanddagger eq 0>>\n<<if $skill1 eq $proglearn[0] or $skill2 eq $proglearn[0]>>\n<<if $skill1 eq $proglearn[2] or $skill2 eq $proglearn[2]>>\n<<set $statustext.unshift("Cloak and dagger, hehe.<br>")>>\n<<set $statustextperson.unshift("Spencer")>>\n<<display DispStatL>>\n<<replace #prepnotes>>\n<div class="notein">\n<span class='spencertext'>Spencer:</span> Cloak and dagger, hehe.<br>\n</div>\n<</replace>>\n<<set $alreadycloakanddagger=1>>\n<</if>>\n<</if>>\n<</if>>\n\n<<if $skill1 neq "None" and $skill2 neq "None">>\n<<removeclass "#finalload" "nopick">>\n<<addclass "#finalload" "finalize">>\n<<replace #finalload>>\n[[Finalize|TutEncounterStart]]\n<</replace>>\n<<if $alreadyfinal eq 0>>\n<<set $statustext.unshift("Not a bad loadout, Spence! Okay, now you can <b>finalize</b> the setup, or you can continue to edit the programs by selecting the slot you want to change and then selecting the program you want to fill the slot with.<br>")>>\n<<set $statustextperson.unshift("Will")>>\n<<set $alreadyfinal=1>>\n\t<<removeclass "#overlay" "overlayinactive">>\n\t<<addclass "#overlay" "overlayactive">>\n\t<<replace #ovtext>>\nNot a bad loadout, Spence! Okay, now you can <span class='emph'>finalize</span> the setup, or you can continue to edit the programs by selecting the slot you want to change and then selecting the program you want to fill the slot with.<br>\n\t<</replace>>\n\t<<addclass "#finalload" "animated flash">>\n<</if>>\n<</if>>

<<replace #susp>>\nSuspicion: <<print $suspicion>>\n<</replace>>\n\n<<if $suspicion eq 3>>\n<<set $statustext.unshift("//Something stirs within the maze's ever-shifting walls...//")>>\n<<set $statustextperson.unshift("None")>>\n<<display DispStatS>>\n<</if>>

@charset "UTF-8";\n\n/*******no transition mode*****/\nbody.notrans .transition-in {\n\topacity: 0;\n\tposition: absolute;\n}\nbody.notrans .passage {\n\ttransition: 0s;\n\t-webkit-transition: 0s;\n}\nbody.notrans .transition-out {\n\topacity: 0 !important5\n\tposition: absolute;\n}\n/***********story/chapter title****************/\n#whole {\n\tposition: relative;\n\theight: 600px;\n\twidth: 1124px;\n\toverflow:hidden;\n}\n\n#gbox {\n\tposition: absolute;\n\ttop:0;\n\tleft:0;\n\theight: 600px;\n\twidth: 800px;\n\toverflow: hidden;\n\tborder-radius: 10px;\n}\n\n.statbg {\n\tbackground-image:url("http://i.imgur.com/CuNBDOc.gif");\n\t-moz-background-size:100% 100%;\n\t-webkit-background-size:100% 100%;\n\tbackground-size:100% 100%;\n}\n\nbody.chap .passage a{\n\tcolor:#5dd4fc;\n}\n\nbody.chap .passage a:hover{\n\tcolor:white;\n}\n\nbody.chap .passage{\n\tfont-family: "Courier New";\n\tfont-size: 40px;\n\tfont-weight: bold;\n\tcolor: white;\n}\n\nbody.chap #startbutt{\n\tposition: absolute;\n\ttop: 200px;\n\tleft: 300px;\n\tdisplay: block;\n\theight:200px;\n\twidth:200px;\n\tbackground-image:url("http://i.imgur.com/2xIvWYQ.png");\n}\n\n\nbody.chap #startbutt:hover{\n\tbackground-image:url("http://i.imgur.com/Nu4vFGD.png");\n}\nbody.chap .textoverstart {\n\tposition: absolute;\n\tdisplay: block;\n\theight: 50px;\n\twidth: 800px;\n\ttop: 125px;\n\tleft:0px;\n\ttext-align:center;\n}\n\nbody.chap #starttext {\n\tposition: absolute;\n\theight: 50px;\n\twidth: 800px;\n\ttop: 260px;\n\tleft:0px;\n\ttext-align:center;\n}\n\nbody.chap .jackin {\n\tposition: absolute;\n\twidth:500px;\n\ttop:0px;\n\tleft:320px;\n}\n\nbody.chap .chap1 {\n\tposition: absolute;\n\twidth:800px;\n\ttop:0px;\n\tleft:220px;\n}\n/***************dialog************************/\n.circbg{\n\tbackground-image:url("http://i.imgur.com/aAaJFXE.jpg");\n\t-moz-background-size:100% 100%;\n\t-webkit-background-size:100% 100%;\n\tbackground-size:100% 100%;\n}\n\nbody.dia .passage a{\n\tcolor:#5dd4fc;\n}\n\nbody.dia .passage a:hover{\n\tcolor: white;\n}\n\nbody.dia .passage br{\n\tdisplay: block;\n\t-webkit-margin-before:10px;\n\tmargin-top:10px;\n}\n\nbody.dia #divideimg{\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-margin:4;\n}\n\nbody.dia #charbox{\n\tposition:absolute;\n\theight:363px;\n\twidth:800px;\n\ttop:0;\n\tleft:0;\n\toverflow:hidden;\n}\n\nbody.dia #charleft{\n\tposition: absolute;\n\tbottom:0;\n\tleft: 70px;\n\tz-margin:1;\n}\n\nbody.dia #charleftcontent img{\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tdisplay: block;\n}\n\nbody.dia #charright{\n\tposition: absolute;\n\tbottom:0;\n\tright: 70px;\n\tz-margin:1;\n}\n\nbody.dia #charrightcontent img{\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tdisplay: block;\n}\n\nbody.dia #talkicon{\n\tposition: absolute;\n\theight: 90px;\n\twidth:92px;\n\tbottom:150px;\n\tleft:0;\n\tz-margin: 5;\n}\n\nbody.dia #remembers{\n\tposition: absolute;\n\tright:0;\n\ttop:30px;\n\theight:60px;\n\twidth:800px;\n}\n\nbody.dia .rememberimage{\n\topacity: 0.75;\n\tfilter: alpha(opacity=40);\n\tposition: absolute;\n\tright:0;\n\ttop:0;\n\tz-margin: 12;\n}\n\nbody.dia .areaimage{\n\topacity: 0.75;\n\tfilter: alpha(opacity=40);\n\tposition: absolute;\n\tleft:0;\n\ttop:0;\n\tz-margin: 12;\n\t-moz-transform: scaleX(-1);\n -o-transform: scaleX(-1);\n -webkit-transform: scaleX(-1);\n transform: scaleX(-1);\n filter: FlipH;\n -ms-filter: "FlipH";\n}\n\nbody.dia .remembertext{\n\tposition:absolute;\n\twidth:800px;\n\tright:0px;\n\ttop:10px;\n\tfont-size: 20px;\n\tfont-size: 20px;\n\tfont-weight: bold;\n\tfont-family: "Courier New";\n\tpadding-right:20px;\n\ttext-align:right;\n\tz-margin: 11;\n}\n\nbody.dia .areatext{\n\tposition:absolute;\n\twidth:800px;\n\tleft:0px;\n\ttop:10px;\n\tfont-size: 20px;\n\tfont-size: 20px;\n\tfont-weight: bold;\n\tfont-family: "Courier New";\n\tpadding-left:20px;\n\ttext-align:left;\n\tz-margin: 11;\n}\n\nbody.dia #talkiconcontent{\n\tposition: absolute;\n\tbottom:0px;\n\tright: 0px;\n}\n\nbody.dia #talkiconcontent img{\n\tposition: absolute;\n\tbottom:0px;\n\tright: 0px;\n}\n\nbody.dia #diabox{\n\theight: 215px;\n\twidth: 600px;\n\tposition: absolute;\n\tbottom: 0px;\n\tleft: 100px;\n\tfont-family: "Courier New";\n\tfont-size: 25px;\n\tfont-weight: bold;\n\tpadding: 10px;\n\tpadding-left: 30px;\n\tline-height: 110%;\n\tz-margin:6;\n}\n\nbody.dia #nextbutt{\n\tposition: absolute;\n\theight:50px;\n\twidth:50px;\n\tz-margin:10;\n\tbottom:15px;\n\tright:15px;\n}\n\n.activebutt{\n\tbackground-image:url("http://i.imgur.com/5qGDQb7.png");\n}\n\n.activebutt:hover{\n\tbackground-image:url("http://i.imgur.com/u3vuKxE.png");\n}\n\n/********overlay*********************************/\nbody.encounter #overlay{\n\tposition: absolute;\n\ttop:0;\n\tleft:0;\n\theight: 600px;\n\twidth: 800px;\n\toverflow: hidden;\n\tborder-radius: 10px;\n\tbackground-color: rgba(0,0,0,0.75);\n}\n\nbody.encounter .overlayinactive{\n\tz-index: -1;\n}\n\nbody.encounter .overlayactive{\n\tz-index: 50;\n}\n\nbody.encounter #overlaytextbox{\n\tposition: absolute;\n\tbottom:10px;\n\tleft:10px;\n\theight: 275px;\n\twidth: 780px;\n\tborder-radius: 8px;\n\tborder: 2px solid white;\n\tbackground-color:rgba(155,155,155,0.75);\n\tfont-family: "Courier New";\n\tfont-size: 25px;\n\tline-height: 110%;\n\tfont-weight: bold;\n}\n\nbody.encounter .textboxinactive{\n\tz-index:-1;\n}\n\nbody.encounter #textboxtaskbar{\n\tposition: absolute;\n\ttop:0px;\n\tleft:0px;\n\twidth: 770px;\n\theight: 30px;\n\tcolor: rgb(155,155,155);\n\tbackground: white;\n\tfont-family: "Courier New";\n\tfont-size: 25px;\n\tfont-weight: bold;\n\ttext-align: right;\n\tpadding-right:10px;\n\tline-height:100%;\n}\n\nbody.encounter #textboxtaskbar a{\n\tcolor:red;\n}\n\nbody.encounter #textboxtaskbar a:hover{\n\tcolor: rgb(200,0,0);\n\tbackground-color: red;\n}\n\nbody.encounter #overlayicon{\n\tposition: absolute;\n\twidth: 92px;\n\theight: 90px;\n\ttop:30px;\n\tleft:0px;\n}\n\nbody.encounter #overlayicon img{\n\tposition: absolute;\n\tbottom:0px;\n\tright: 0px;\n}\n\nbody.encounter #ovtext{\n\tposition: absolute;\n\theight: 215px;\n\twidth:660px;\n\tbottom:5px;\n\tright:5px;\n\tpadding: 10px;\n\tbackground-color: rgba(0,0,0,0.5);\n\tborder-radius:8px;\n}\n\nbody.encounter #ovtext br{\n\tdisplay: block;\n\t-webkit-margin-before:10px;\n\tmargin-top:10px;\t\n}\n\nbody.encounter #ovnext{\n\tposition: absolute;\n\theight:50px;\n\twidth:50px;\n\tz-margin:10;\n\tbottom:15px;\n\tright:15px;\n}\n/***************status bar********************/\n#statusbar{\n\tposition: absolute;\n\ttop:0;\n\tright:0;\n\theight: 600px;\n\twidth: 300px;\n\toverflow: hidden;\n\tborder-radius: 10px;\n}\n\n.statusbarbg{\n\tbackground-image:url("http://i.imgur.com/2NOB7bb.jpg");\n\t-moz-background-size:100% 100%;\n\t-webkit-background-size:100% 100%;\n\tbackground-size:100% 100%;\n}\n\nbody.encounter #statusbartitle{\n\tposition:absolute;\n\twidth:300px;\n\theight:50px;\n\tleft:0px;\n\ttop:10px;\n\tfont-size: 20px;\n\tfont-weight: bold;\n\tfont-family: "Courier New";\n\tpadding-left:20px;\n\ttext-align:left;\n\tz-index: 11;\n}\n\nbody.encounter #lscroll{\n\tposition: absolute;\n\twidth: 260px;\n\theight: 530px;\n\tleft: 10px;\n\ttop: 40px;\n\tborder: 1px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.66);\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\tfont-size: 18px;\n\tfont-weight: normal;\n\tfont-family: "Courier New";\n\tline-height: 90%;\n\tpadding:10px;\n}\n\nbody.encounter #stats{\n\tposition: absolute;\n\twidth: 260px;\n\theight: 100px;\n\tleft: 10px;\n\ttop: 40px;\n\tborder: 1px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.66);\n\tfont-size: 20px;\n\tfont-weight: normal;\n\tfont-family: "Courier New";\n\tline-height: 90%;\n\tpadding:10px;\n}\n\nbody.encounter #sscroll{\n\tposition: absolute;\n\twidth: 260px;\n\theight: 400px;\n\tleft: 10px;\n\ttop: 170px;\n\tborder: 1px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.66);\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\tfont-size: 18px;\n\tfont-weight: normal;\n\tfont-family: "Courier New";\n\tline-height: 90%;\n\tpadding:10px;\n}\n\n#lscroll br{\n\tdisplay: block;\n\t-webkit-margin-before:5px;\n\tmargin-top:5px;\n}\n\n#sscroll br{\n\tdisplay: block;\n\t-webkit-margin-before:5px;\n\tmargin-top:5px;\n}\n\n.willtext{\n\tcolor: rgb(0,172,191);\n\tfont-weight: bold;\n}\n\n.spencertext{\n\tcolor: rgb(31,144,6);\n\tfont-weight: bold;\n}\n\n.emph{\n\tcolor: orange;\n\tfont-weight: bold;\n}\n\n/**************prep stage***************************/\nbody.encounter .passage a{\n\tcolor: white;\n}\n\nbody.encouter .passage a:hover{\n\tcolor:#5dd4fc;\n}\n\nbody.encounter #loadoutbox{\n\tposition: absolute;\n\twidth: 780px;\n\theight: 180px;\n\tborder: 1px solid rgba(0,0,0,0.66);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.33);\n\ttop:10px;\n\tleft: 10px;\n\tfont-size: 25px;\n\tfont-weight: bold;\n\tfont-family: "Courier New";\n}\n\nbody.encounter #picklistbox{\n\tposition: absolute;\n\twidth: 780px;\n\theight: 300px;\n\tborder: 1px solid rgba(0,0,0,0.66);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.33);\n\tbottom:10px;\n\tleft: 10px;\n\tfont-size: 25px;\n\tfont-weight: bold;\n\tfont-family: "Courier New";\n}\n\nbody.encounter .pickmestart{\n\tborder: 3px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.33);\n}\n\nbody.encounter .pickmestart:hover{\n\tborder: 5px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(93,212,252,0.33);\n}\n\nbody.encounter .nopick{\n\tborder: 2px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.33);\n}\n\nbody.encounter .notavail{\n\tborder: 2px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.66);\n}\n\nbody.encounter .picking{\n\tborder: 2px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(93,212,252,1);\n}\n\nbody.encounter .switchpick{\n\tborder: 2px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(93,212,252,.33);\n}\n\nbody.encounter .switchpick:hover{\n\tborder: 5px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,.66);\n}\n\nbody.encounter .finalize{\n\tborder: 2px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(255,0,0,.33);\n}\n\nbody.encounter .finalize:hover{\n\tborder: 5px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(255,0,0,1);\n}\n\nbody.encounter #load1{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 35px;\n\tleft: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #load2{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 35px;\n\tright: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #finalload{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\tbottom: 10px;\n\tleft: 230px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog0{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 35px;\n\tleft: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog1{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 35px;\n\tright: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog2{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 115px;\n\tleft: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog3{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 115px;\n\tright: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog4{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 195px;\n\tleft: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog5{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 195px;\n\tright: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog6{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 275px;\n\tleft: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prog7{\n\tposition: absolute;\n\theight:60px;\n\twidth: 300px;\n\ttop: 275px;\n\tright: 50px;\n\tline-height: 60px;\n\ttext-align: center;\n}\n\nbody.encounter #prepnotes{\n\tposition: absolute;\n\toverflow: hidden;\n\twidth: 600px;\n\tmax-height: 100px;\n\tbottom: 320px;\n\tright: 10px;\n\tfont-size: 18px;\n\tfont-weight: normal;\n\tfont-family: "Courier New";\n}\n\nbody.encounter .notein{\n\tmax-width:570px;\n\tright:0px;\n\tbackground-color:rgba(0,0,0,0.5);\n\tborder-radius:8px;\n\tline-height: 90%;\n\tpadding:8px;\n\tborder: 2px solid white;\n}\n/************encounter phase*****************/\nbody.encounter #enemybox{\n\tposition: absolute;\n\twidth: 670px;\n\theight: 90px;\n\tborder: 1px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.66);\n\ttop:10px;\n\tleft: 10px;\n\tfont-size: 25px;\n\tfont-weight: bold;\n\tfont-family: monospace, "Courier New";\n}\n\nbody.encounter #enemyname{\n\tposition: absolute;\n\twidth:200px;\n\theight:70px;\n\tline-height:70px;\n\ttop:10px;\n\tleft:10px;\n\tpadding-left:10px;\n}\n\nbody.encounter #enemystat1{\n\tposition: absolute;\n\twidth: 400px;\n\theight: 26px;\n\tline-height:26px;\n\ttop:1px;\n\tleft: 240px;\n\tpadding-left:10px;\n}\n\nbody.encounter #enemystat2{\n\tposition: absolute;\n\twidth: 400px;\n\theight: 26px;\n\tline-height:26px;\n\ttop:31px;\n\tleft: 240px;\n\tpadding-left:10px;\n}\n\nbody.encounter #enemystat3{\n\tposition: absolute;\n\twidth: 400px;\n\theight: 26px;\n\tline-height:26px;\n\tbottom:1px;\n\tleft: 240px;\n\tpadding-left:10px;\n}\n\nbody.encounter .enemystatused{\n\tborder: 1px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.33);\n}\n\nbody.encounter .enemystatnotused{\n\tborder: 1px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(155,155,155,0.33);\n}\n\nbody.encounter #playerbox{\n\tposition: absolute;\n\twidth: 670px;\n\theight: 90px;\n\tborder: 1px solid rgba(0,0,0,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(0,0,0,0.66);\n\tbottom:10px;\n\tright: 10px;\n\tfont-size: 25px;\n\tfont-weight: bold;\n\tfont-family: "Courier New";\n}\n\nbody.encounter #playername{\n\tposition: absolute;\n\twidth:180px;\n\theight:70px;\n\tline-height:70px;\n\ttop:10px;\n\tright:10px;\n\tpadding-right:10px;\n\ttext-align:right;\n}\n\nbody.encounter #genericskill1{\n\tposition: absolute;\n\twidth: 220px;\n\theight: 30px;\n\tline-height:30px;\n\ttext-align: center;\n\ttop: 10px;\n\tleft: 10px;\n}\n\nbody.encounter #genericskill2{\n\tposition: absolute;\n\twidth: 220px;\n\theight: 30px;\n\tline-height:30px;\n\ttext-align: center;\n\ttop: 10px;\n\tleft: 240px;\n}\n\nbody.encounter #pickedskill1{\n\tposition: absolute;\n\twidth: 220px;\n\theight: 30px;\n\tline-height:30px;\n\ttext-align: center;\n\tbottom: 10px;\n\tleft: 10px;\n}\n\nbody.encounter #pickedskill2{\n\tposition: absolute;\n\twidth: 220px;\n\theight: 30px;\n\tline-height:30px;\n\ttext-align: center;\n\tbottom: 10px;\n\tleft: 240px;\n}\n\nbody.encounter .skillavail{\n\tborder: 1px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(93,212,252,0.33);\n}\n\nbody.encounter .skillavail:hover{\n\tborder: 3px solid rgba(255,255,255,1);\n\tborder-radius:8px;\n\tbackground-color: rgba(93,212,252,0.66);\n}\n\nbody.encounter .tutprogress{\n\tcolor: rgb(93,212,252);\n}\n/***************animations********************/\n/*!\n * animate.css -http://daneden.me/animate\n * Version - 3.5.1\n * Licensed under the MIT license - http://opensource.org/licenses/MIT\n *\n * Copyright (c) 2016 Daniel Eden\n */\n\n.animated {\n -webkit-animation-duration: 1s;\n animation-duration: 1s;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n}\n\n.animated.infinite {\n -webkit-animation-iteration-count: infinite;\n animation-iteration-count: infinite;\n}\n\n.animated.hinge {\n -webkit-animation-duration: 2s;\n animation-duration: 2s;\n}\n\n.animated.flipOutX,\n.animated.flipOutY,\n.animated.bounceIn,\n.animated.bounceOut {\n -webkit-animation-duration: .75s;\n animation-duration: .75s;\n}\n\n.animated.press:active{\n\ttransform:translateY(4px);\n}\n\n@-webkit-keyframes bounce {\n from, 20%, 53%, 80%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n -webkit-transform: translate3d(0,0,0);\n transform: translate3d(0,0,0);\n }\n\n 40%, 43% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n -webkit-transform: translate3d(0, -30px, 0);\n transform: translate3d(0, -30px, 0);\n }\n\n 70% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n -webkit-transform: translate3d(0, -15px, 0);\n transform: translate3d(0, -15px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0,-4px,0);\n transform: translate3d(0,-4px,0);\n }\n}\n\n@keyframes bounce {\n from, 20%, 53%, 80%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n -webkit-transform: translate3d(0,0,0);\n transform: translate3d(0,0,0);\n }\n\n 40%, 43% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n -webkit-transform: translate3d(0, -30px, 0);\n transform: translate3d(0, -30px, 0);\n }\n\n 70% {\n -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);\n -webkit-transform: translate3d(0, -15px, 0);\n transform: translate3d(0, -15px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0,-4px,0);\n transform: translate3d(0,-4px,0);\n }\n}\n\n.bounce {\n -webkit-animation-name: bounce;\n animation-name: bounce;\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n}\n\n@-webkit-keyframes flash {\n from, 50%, to {\n opacity: 1;\n }\n\n 25%, 75% {\n opacity: 0;\n }\n}\n\n@keyframes flash {\n from, 50%, to {\n opacity: 1;\n }\n\n 25%, 75% {\n opacity: 0;\n }\n}\n\n.flash {\n -webkit-animation-name: flash;\n animation-name: flash;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes pulse {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.05, 1.05, 1.05);\n transform: scale3d(1.05, 1.05, 1.05);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes pulse {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.05, 1.05, 1.05);\n transform: scale3d(1.05, 1.05, 1.05);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.pulse {\n -webkit-animation-name: pulse;\n animation-name: pulse;\n}\n\n@-webkit-keyframes rubberBand {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(.95, 1.05, 1);\n transform: scale3d(.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, .95, 1);\n transform: scale3d(1.05, .95, 1);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rubberBand {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n -webkit-transform: scale3d(1.25, 0.75, 1);\n transform: scale3d(1.25, 0.75, 1);\n }\n\n 40% {\n -webkit-transform: scale3d(0.75, 1.25, 1);\n transform: scale3d(0.75, 1.25, 1);\n }\n\n 50% {\n -webkit-transform: scale3d(1.15, 0.85, 1);\n transform: scale3d(1.15, 0.85, 1);\n }\n\n 65% {\n -webkit-transform: scale3d(.95, 1.05, 1);\n transform: scale3d(.95, 1.05, 1);\n }\n\n 75% {\n -webkit-transform: scale3d(1.05, .95, 1);\n transform: scale3d(1.05, .95, 1);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.rubberBand {\n -webkit-animation-name: rubberBand;\n animation-name: rubberBand;\n}\n\n@-webkit-keyframes shake {\n from, to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 10%, 30%, 50%, 70%, 90% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%, 40%, 60%, 80% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n}\n\n@keyframes shake {\n from, to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n 10%, 30%, 50%, 70%, 90% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 20%, 40%, 60%, 80% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n}\n\n.shake {\n -webkit-animation-name: shake;\n animation-name: shake;\n}\n\n@-webkit-keyframes headShake {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 6.5% {\n -webkit-transform: translateX(-6px) rotateY(-9deg);\n transform: translateX(-6px) rotateY(-9deg);\n }\n\n 18.5% {\n -webkit-transform: translateX(5px) rotateY(7deg);\n transform: translateX(5px) rotateY(7deg);\n }\n\n 31.5% {\n -webkit-transform: translateX(-3px) rotateY(-5deg);\n transform: translateX(-3px) rotateY(-5deg);\n }\n\n 43.5% {\n -webkit-transform: translateX(2px) rotateY(3deg);\n transform: translateX(2px) rotateY(3deg);\n }\n\n 50% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n@keyframes headShake {\n 0% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n\n 6.5% {\n -webkit-transform: translateX(-6px) rotateY(-9deg);\n transform: translateX(-6px) rotateY(-9deg);\n }\n\n 18.5% {\n -webkit-transform: translateX(5px) rotateY(7deg);\n transform: translateX(5px) rotateY(7deg);\n }\n\n 31.5% {\n -webkit-transform: translateX(-3px) rotateY(-5deg);\n transform: translateX(-3px) rotateY(-5deg);\n }\n\n 43.5% {\n -webkit-transform: translateX(2px) rotateY(3deg);\n transform: translateX(2px) rotateY(3deg);\n }\n\n 50% {\n -webkit-transform: translateX(0);\n transform: translateX(0);\n }\n}\n\n.headShake {\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n -webkit-animation-name: headShake;\n animation-name: headShake;\n}\n\n@-webkit-keyframes swing {\n 20% {\n -webkit-transform: rotate3d(0, 0, 1, 15deg);\n transform: rotate3d(0, 0, 1, 15deg);\n }\n\n 40% {\n -webkit-transform: rotate3d(0, 0, 1, -10deg);\n transform: rotate3d(0, 0, 1, -10deg);\n }\n\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 5deg);\n transform: rotate3d(0, 0, 1, 5deg);\n }\n\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, -5deg);\n transform: rotate3d(0, 0, 1, -5deg);\n }\n\n to {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n}\n\n@keyframes swing {\n 20% {\n -webkit-transform: rotate3d(0, 0, 1, 15deg);\n transform: rotate3d(0, 0, 1, 15deg);\n }\n\n 40% {\n -webkit-transform: rotate3d(0, 0, 1, -10deg);\n transform: rotate3d(0, 0, 1, -10deg);\n }\n\n 60% {\n -webkit-transform: rotate3d(0, 0, 1, 5deg);\n transform: rotate3d(0, 0, 1, 5deg);\n }\n\n 80% {\n -webkit-transform: rotate3d(0, 0, 1, -5deg);\n transform: rotate3d(0, 0, 1, -5deg);\n }\n\n to {\n -webkit-transform: rotate3d(0, 0, 1, 0deg);\n transform: rotate3d(0, 0, 1, 0deg);\n }\n}\n\n.swing {\n -webkit-transform-origin: top center;\n transform-origin: top center;\n -webkit-animation-name: swing;\n animation-name: swing;\n}\n\n@-webkit-keyframes tada {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 10%, 20% {\n -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n }\n\n 30%, 50%, 70%, 90% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n }\n\n 40%, 60%, 80% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes tada {\n from {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n\n 10%, 20% {\n -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);\n }\n\n 30%, 50%, 70%, 90% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\n }\n\n 40%, 60%, 80% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\n }\n\n to {\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.tada {\n -webkit-animation-name: tada;\n animation-name: tada;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes wobble {\n from {\n -webkit-transform: none;\n transform: none;\n }\n\n 15% {\n -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n\n 30% {\n -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n\n 45% {\n -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n\n 60% {\n -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n\n 75% {\n -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes wobble {\n from {\n -webkit-transform: none;\n transform: none;\n }\n\n 15% {\n -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);\n }\n\n 30% {\n -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);\n }\n\n 45% {\n -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);\n }\n\n 60% {\n -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);\n }\n\n 75% {\n -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.wobble {\n -webkit-animation-name: wobble;\n animation-name: wobble;\n}\n\n@-webkit-keyframes jello {\n from, 11.1%, to {\n -webkit-transform: none;\n transform: none;\n }\n\n 22.2% {\n -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n -webkit-transform: skewX(6.25deg) skewY(6.25deg);\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n}\n\n@keyframes jello {\n from, 11.1%, to {\n -webkit-transform: none;\n transform: none;\n }\n\n 22.2% {\n -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);\n transform: skewX(-12.5deg) skewY(-12.5deg);\n }\n\n 33.3% {\n -webkit-transform: skewX(6.25deg) skewY(6.25deg);\n transform: skewX(6.25deg) skewY(6.25deg);\n }\n\n 44.4% {\n -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);\n transform: skewX(-3.125deg) skewY(-3.125deg);\n }\n\n 55.5% {\n -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);\n transform: skewX(1.5625deg) skewY(1.5625deg);\n }\n\n 66.6% {\n -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);\n transform: skewX(-0.78125deg) skewY(-0.78125deg);\n }\n\n 77.7% {\n -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);\n transform: skewX(0.390625deg) skewY(0.390625deg);\n }\n\n 88.8% {\n -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n transform: skewX(-0.1953125deg) skewY(-0.1953125deg);\n }\n}\n\n.jello {\n -webkit-animation-name: jello;\n animation-name: jello;\n -webkit-transform-origin: center;\n transform-origin: center;\n}\n\n@-webkit-keyframes bounceIn {\n from, 20%, 40%, 60%, 80%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n\n 20% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n 40% {\n -webkit-transform: scale3d(.9, .9, .9);\n transform: scale3d(.9, .9, .9);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(1.03, 1.03, 1.03);\n transform: scale3d(1.03, 1.03, 1.03);\n }\n\n 80% {\n -webkit-transform: scale3d(.97, .97, .97);\n transform: scale3d(.97, .97, .97);\n }\n\n to {\n opacity: 1;\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes bounceIn {\n from, 20%, 40%, 60%, 80%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n\n 20% {\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n 40% {\n -webkit-transform: scale3d(.9, .9, .9);\n transform: scale3d(.9, .9, .9);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(1.03, 1.03, 1.03);\n transform: scale3d(1.03, 1.03, 1.03);\n }\n\n 80% {\n -webkit-transform: scale3d(.97, .97, .97);\n transform: scale3d(.97, .97, .97);\n }\n\n to {\n opacity: 1;\n -webkit-transform: scale3d(1, 1, 1);\n transform: scale3d(1, 1, 1);\n }\n}\n\n.bounceIn {\n -webkit-animation-name: bounceIn;\n animation-name: bounceIn;\n}\n\n@-webkit-keyframes bounceInDown {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(0, -3000px, 0);\n transform: translate3d(0, -3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, 25px, 0);\n transform: translate3d(0, 25px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, 5px, 0);\n transform: translate3d(0, 5px, 0);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes bounceInDown {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(0, -3000px, 0);\n transform: translate3d(0, -3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, 25px, 0);\n transform: translate3d(0, 25px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, 5px, 0);\n transform: translate3d(0, 5px, 0);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.bounceInDown {\n -webkit-animation-name: bounceInDown;\n animation-name: bounceInDown;\n}\n\n@-webkit-keyframes bounceInLeft {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(-3000px, 0, 0);\n transform: translate3d(-3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(25px, 0, 0);\n transform: translate3d(25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(5px, 0, 0);\n transform: translate3d(5px, 0, 0);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes bounceInLeft {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n 0% {\n opacity: 0;\n -webkit-transform: translate3d(-3000px, 0, 0);\n transform: translate3d(-3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(25px, 0, 0);\n transform: translate3d(25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(-10px, 0, 0);\n transform: translate3d(-10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(5px, 0, 0);\n transform: translate3d(5px, 0, 0);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.bounceInLeft {\n -webkit-animation-name: bounceInLeft;\n animation-name: bounceInLeft;\n}\n\n@-webkit-keyframes bounceInRight {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(3000px, 0, 0);\n transform: translate3d(3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(-25px, 0, 0);\n transform: translate3d(-25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(-5px, 0, 0);\n transform: translate3d(-5px, 0, 0);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes bounceInRight {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(3000px, 0, 0);\n transform: translate3d(3000px, 0, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(-25px, 0, 0);\n transform: translate3d(-25px, 0, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(10px, 0, 0);\n transform: translate3d(10px, 0, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(-5px, 0, 0);\n transform: translate3d(-5px, 0, 0);\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.bounceInRight {\n -webkit-animation-name: bounceInRight;\n animation-name: bounceInRight;\n}\n\n@-webkit-keyframes bounceInUp {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 3000px, 0);\n transform: translate3d(0, 3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, -5px, 0);\n transform: translate3d(0, -5px, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes bounceInUp {\n from, 60%, 75%, 90%, to {\n -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);\n }\n\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 3000px, 0);\n transform: translate3d(0, 3000px, 0);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n 75% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 90% {\n -webkit-transform: translate3d(0, -5px, 0);\n transform: translate3d(0, -5px, 0);\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.bounceInUp {\n -webkit-animation-name: bounceInUp;\n animation-name: bounceInUp;\n}\n\n@-webkit-keyframes bounceOut {\n 20% {\n -webkit-transform: scale3d(.9, .9, .9);\n transform: scale3d(.9, .9, .9);\n }\n\n 50%, 55% {\n opacity: 1;\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n}\n\n@keyframes bounceOut {\n 20% {\n -webkit-transform: scale3d(.9, .9, .9);\n transform: scale3d(.9, .9, .9);\n }\n\n 50%, 55% {\n opacity: 1;\n -webkit-transform: scale3d(1.1, 1.1, 1.1);\n transform: scale3d(1.1, 1.1, 1.1);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n}\n\n.bounceOut {\n -webkit-animation-name: bounceOut;\n animation-name: bounceOut;\n}\n\n@-webkit-keyframes bounceOutDown {\n 20% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 40%, 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n@keyframes bounceOutDown {\n 20% {\n -webkit-transform: translate3d(0, 10px, 0);\n transform: translate3d(0, 10px, 0);\n }\n\n 40%, 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, -20px, 0);\n transform: translate3d(0, -20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n.bounceOutDown {\n -webkit-animation-name: bounceOutDown;\n animation-name: bounceOutDown;\n}\n\n@-webkit-keyframes bounceOutLeft {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(20px, 0, 0);\n transform: translate3d(20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n@keyframes bounceOutLeft {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(20px, 0, 0);\n transform: translate3d(20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n.bounceOutLeft {\n -webkit-animation-name: bounceOutLeft;\n animation-name: bounceOutLeft;\n}\n\n@-webkit-keyframes bounceOutRight {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(-20px, 0, 0);\n transform: translate3d(-20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n@keyframes bounceOutRight {\n 20% {\n opacity: 1;\n -webkit-transform: translate3d(-20px, 0, 0);\n transform: translate3d(-20px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n.bounceOutRight {\n -webkit-animation-name: bounceOutRight;\n animation-name: bounceOutRight;\n}\n\n@-webkit-keyframes bounceOutUp {\n 20% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 40%, 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, 20px, 0);\n transform: translate3d(0, 20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n@keyframes bounceOutUp {\n 20% {\n -webkit-transform: translate3d(0, -10px, 0);\n transform: translate3d(0, -10px, 0);\n }\n\n 40%, 45% {\n opacity: 1;\n -webkit-transform: translate3d(0, 20px, 0);\n transform: translate3d(0, 20px, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n.bounceOutUp {\n -webkit-animation-name: bounceOutUp;\n animation-name: bounceOutUp;\n}\n\n@-webkit-keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.fadeIn {\n -webkit-animation-name: fadeIn;\n animation-name: fadeIn;\n}\n\n@-webkit-keyframes fadeInDown {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInDown {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInDown {\n -webkit-animation-name: fadeInDown;\n animation-name: fadeInDown;\n}\n\n@-webkit-keyframes fadeInDownBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInDownBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInDownBig {\n -webkit-animation-name: fadeInDownBig;\n animation-name: fadeInDownBig;\n}\n\n@-webkit-keyframes fadeInLeft {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInLeft {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInLeft {\n -webkit-animation-name: fadeInLeft;\n animation-name: fadeInLeft;\n}\n\n@-webkit-keyframes fadeInLeftBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInLeftBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInLeftBig {\n -webkit-animation-name: fadeInLeftBig;\n animation-name: fadeInLeftBig;\n}\n\n@-webkit-keyframes fadeInRight {\n from {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInRight {\n from {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInRight {\n -webkit-animation-name: fadeInRight;\n animation-name: fadeInRight;\n}\n\n@-webkit-keyframes fadeInRightBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInRightBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInRightBig {\n -webkit-animation-name: fadeInRightBig;\n animation-name: fadeInRightBig;\n}\n\n@-webkit-keyframes fadeInUp {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInUp {\n -webkit-animation-name: fadeInUp;\n animation-name: fadeInUp;\n}\n\n@-webkit-keyframes fadeInUpBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes fadeInUpBig {\n from {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.fadeInUpBig {\n -webkit-animation-name: fadeInUpBig;\n animation-name: fadeInUpBig;\n}\n\n@-webkit-keyframes fadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n.fadeOut {\n -webkit-animation-name: fadeOut;\n animation-name: fadeOut;\n}\n\n@-webkit-keyframes fadeOutDown {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n@keyframes fadeOutDown {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n.fadeOutDown {\n -webkit-animation-name: fadeOutDown;\n animation-name: fadeOutDown;\n}\n\n@-webkit-keyframes fadeOutDownBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n@keyframes fadeOutDownBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, 2000px, 0);\n transform: translate3d(0, 2000px, 0);\n }\n}\n\n.fadeOutDownBig {\n -webkit-animation-name: fadeOutDownBig;\n animation-name: fadeOutDownBig;\n}\n\n@-webkit-keyframes fadeOutLeft {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n@keyframes fadeOutLeft {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n.fadeOutLeft {\n -webkit-animation-name: fadeOutLeft;\n animation-name: fadeOutLeft;\n}\n\n@-webkit-keyframes fadeOutLeftBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n@keyframes fadeOutLeftBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(-2000px, 0, 0);\n transform: translate3d(-2000px, 0, 0);\n }\n}\n\n.fadeOutLeftBig {\n -webkit-animation-name: fadeOutLeftBig;\n animation-name: fadeOutLeftBig;\n}\n\n@-webkit-keyframes fadeOutRight {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n@keyframes fadeOutRight {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n.fadeOutRight {\n -webkit-animation-name: fadeOutRight;\n animation-name: fadeOutRight;\n}\n\n@-webkit-keyframes fadeOutRightBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n@keyframes fadeOutRightBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(2000px, 0, 0);\n transform: translate3d(2000px, 0, 0);\n }\n}\n\n.fadeOutRightBig {\n -webkit-animation-name: fadeOutRightBig;\n animation-name: fadeOutRightBig;\n}\n\n@-webkit-keyframes fadeOutUp {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n@keyframes fadeOutUp {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n.fadeOutUp {\n -webkit-animation-name: fadeOutUp;\n animation-name: fadeOutUp;\n}\n\n@-webkit-keyframes fadeOutUpBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n@keyframes fadeOutUpBig {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(0, -2000px, 0);\n transform: translate3d(0, -2000px, 0);\n }\n}\n\n.fadeOutUpBig {\n -webkit-animation-name: fadeOutUpBig;\n animation-name: fadeOutUpBig;\n}\n\n@-webkit-keyframes flip {\n from {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 40% {\n -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 50% {\n -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 80% {\n -webkit-transform: perspective(400px) scale3d(.95, .95, .95);\n transform: perspective(400px) scale3d(.95, .95, .95);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n}\n\n@keyframes flip {\n from {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -360deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 40% {\n -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n }\n\n 50% {\n -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 80% {\n -webkit-transform: perspective(400px) scale3d(.95, .95, .95);\n transform: perspective(400px) scale3d(.95, .95, .95);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n}\n\n.animated.flip {\n -webkit-backface-visibility: visible;\n backface-visibility: visible;\n -webkit-animation-name: flip;\n animation-name: flip;\n}\n\n@-webkit-keyframes flipInX {\n from {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n@keyframes flipInX {\n from {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n.flipInX {\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipInX;\n animation-name: flipInX;\n}\n\n@-webkit-keyframes flipInY {\n from {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n@keyframes flipInY {\n from {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n opacity: 0;\n }\n\n 40% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -20deg);\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n }\n\n 60% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 10deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -5deg);\n }\n\n to {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n}\n\n.flipInY {\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipInY;\n animation-name: flipInY;\n}\n\n@-webkit-keyframes flipOutX {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipOutX {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n opacity: 0;\n }\n}\n\n.flipOutX {\n -webkit-animation-name: flipOutX;\n animation-name: flipOutX;\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n}\n\n@-webkit-keyframes flipOutY {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n opacity: 0;\n }\n}\n\n@keyframes flipOutY {\n from {\n -webkit-transform: perspective(400px);\n transform: perspective(400px);\n }\n\n 30% {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n transform: perspective(400px) rotate3d(0, 1, 0, -15deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n transform: perspective(400px) rotate3d(0, 1, 0, 90deg);\n opacity: 0;\n }\n}\n\n.flipOutY {\n -webkit-backface-visibility: visible !important;\n backface-visibility: visible !important;\n -webkit-animation-name: flipOutY;\n animation-name: flipOutY;\n}\n\n@-webkit-keyframes lightSpeedIn {\n from {\n -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0;\n }\n\n 60% {\n -webkit-transform: skewX(20deg);\n transform: skewX(20deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: skewX(-5deg);\n transform: skewX(-5deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n@keyframes lightSpeedIn {\n from {\n -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);\n transform: translate3d(100%, 0, 0) skewX(-30deg);\n opacity: 0;\n }\n\n 60% {\n -webkit-transform: skewX(20deg);\n transform: skewX(20deg);\n opacity: 1;\n }\n\n 80% {\n -webkit-transform: skewX(-5deg);\n transform: skewX(-5deg);\n opacity: 1;\n }\n\n to {\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n.lightSpeedIn {\n -webkit-animation-name: lightSpeedIn;\n animation-name: lightSpeedIn;\n -webkit-animation-timing-function: ease-out;\n animation-timing-function: ease-out;\n}\n\n@-webkit-keyframes lightSpeedOut {\n from {\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);\n transform: translate3d(100%, 0, 0) skewX(30deg);\n opacity: 0;\n }\n}\n\n@keyframes lightSpeedOut {\n from {\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);\n transform: translate3d(100%, 0, 0) skewX(30deg);\n opacity: 0;\n }\n}\n\n.lightSpeedOut {\n -webkit-animation-name: lightSpeedOut;\n animation-name: lightSpeedOut;\n -webkit-animation-timing-function: ease-in;\n animation-timing-function: ease-in;\n}\n\n@-webkit-keyframes rotateIn {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, -200deg);\n transform: rotate3d(0, 0, 1, -200deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n@keyframes rotateIn {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, -200deg);\n transform: rotate3d(0, 0, 1, -200deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n.rotateIn {\n -webkit-animation-name: rotateIn;\n animation-name: rotateIn;\n}\n\n@-webkit-keyframes rotateInDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n@keyframes rotateInDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n.rotateInDownLeft {\n -webkit-animation-name: rotateInDownLeft;\n animation-name: rotateInDownLeft;\n}\n\n@-webkit-keyframes rotateInDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n@keyframes rotateInDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n.rotateInDownRight {\n -webkit-animation-name: rotateInDownRight;\n animation-name: rotateInDownRight;\n}\n\n@-webkit-keyframes rotateInUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n@keyframes rotateInUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n.rotateInUpLeft {\n -webkit-animation-name: rotateInUpLeft;\n animation-name: rotateInUpLeft;\n}\n\n@-webkit-keyframes rotateInUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -90deg);\n transform: rotate3d(0, 0, 1, -90deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n@keyframes rotateInUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -90deg);\n transform: rotate3d(0, 0, 1, -90deg);\n opacity: 0;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: none;\n transform: none;\n opacity: 1;\n }\n}\n\n.rotateInUpRight {\n -webkit-animation-name: rotateInUpRight;\n animation-name: rotateInUpRight;\n}\n\n@-webkit-keyframes rotateOut {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 200deg);\n transform: rotate3d(0, 0, 1, 200deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOut {\n from {\n -webkit-transform-origin: center;\n transform-origin: center;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transform: rotate3d(0, 0, 1, 200deg);\n transform: rotate3d(0, 0, 1, 200deg);\n opacity: 0;\n }\n}\n\n.rotateOut {\n -webkit-animation-name: rotateOut;\n animation-name: rotateOut;\n}\n\n@-webkit-keyframes rotateOutDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutDownLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n opacity: 0;\n }\n}\n\n.rotateOutDownLeft {\n -webkit-animation-name: rotateOutDownLeft;\n animation-name: rotateOutDownLeft;\n}\n\n@-webkit-keyframes rotateOutDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutDownRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n.rotateOutDownRight {\n -webkit-animation-name: rotateOutDownRight;\n animation-name: rotateOutDownRight;\n}\n\n@-webkit-keyframes rotateOutUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutUpLeft {\n from {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: left bottom;\n transform-origin: left bottom;\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n opacity: 0;\n }\n}\n\n.rotateOutUpLeft {\n -webkit-animation-name: rotateOutUpLeft;\n animation-name: rotateOutUpLeft;\n}\n\n@-webkit-keyframes rotateOutUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n opacity: 0;\n }\n}\n\n@keyframes rotateOutUpRight {\n from {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n opacity: 1;\n }\n\n to {\n -webkit-transform-origin: right bottom;\n transform-origin: right bottom;\n -webkit-transform: rotate3d(0, 0, 1, 90deg);\n transform: rotate3d(0, 0, 1, 90deg);\n opacity: 0;\n }\n}\n\n.rotateOutUpRight {\n -webkit-animation-name: rotateOutUpRight;\n animation-name: rotateOutUpRight;\n}\n\n@-webkit-keyframes hinge {\n 0% {\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 20%, 60% {\n -webkit-transform: rotate3d(0, 0, 1, 80deg);\n transform: rotate3d(0, 0, 1, 80deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 40%, 80% {\n -webkit-transform: rotate3d(0, 0, 1, 60deg);\n transform: rotate3d(0, 0, 1, 60deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(0, 700px, 0);\n transform: translate3d(0, 700px, 0);\n opacity: 0;\n }\n}\n\n@keyframes hinge {\n 0% {\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 20%, 60% {\n -webkit-transform: rotate3d(0, 0, 1, 80deg);\n transform: rotate3d(0, 0, 1, 80deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n }\n\n 40%, 80% {\n -webkit-transform: rotate3d(0, 0, 1, 60deg);\n transform: rotate3d(0, 0, 1, 60deg);\n -webkit-transform-origin: top left;\n transform-origin: top left;\n -webkit-animation-timing-function: ease-in-out;\n animation-timing-function: ease-in-out;\n opacity: 1;\n }\n\n to {\n -webkit-transform: translate3d(0, 700px, 0);\n transform: translate3d(0, 700px, 0);\n opacity: 0;\n }\n}\n\n.hinge {\n -webkit-animation-name: hinge;\n animation-name: hinge;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes rollIn {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n@keyframes rollIn {\n from {\n opacity: 0;\n -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);\n }\n\n to {\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n }\n}\n\n.rollIn {\n -webkit-animation-name: rollIn;\n animation-name: rollIn;\n}\n\n/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */\n\n@-webkit-keyframes rollOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n }\n}\n\n@keyframes rollOut {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);\n }\n}\n\n.rollOut {\n -webkit-animation-name: rollOut;\n animation-name: rollOut;\n}\n\n@-webkit-keyframes zoomIn {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes zoomIn {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n\n 50% {\n opacity: 1;\n }\n}\n\n.zoomIn {\n -webkit-animation-name: zoomIn;\n animation-name: zoomIn;\n}\n\n@-webkit-keyframes zoomInDown {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n@keyframes zoomInDown {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n.zoomInDown {\n -webkit-animation-name: zoomInDown;\n animation-name: zoomInDown;\n}\n\n@-webkit-keyframes zoomInLeft {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n@keyframes zoomInLeft {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n.zoomInLeft {\n -webkit-animation-name: zoomInLeft;\n animation-name: zoomInLeft;\n}\n\n@-webkit-keyframes zoomInRight {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n@keyframes zoomInRight {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n.zoomInRight {\n -webkit-animation-name: zoomInRight;\n animation-name: zoomInRight;\n}\n\n@-webkit-keyframes zoomInUp {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n@keyframes zoomInUp {\n from {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n 60% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n.zoomInUp {\n -webkit-animation-name: zoomInUp;\n animation-name: zoomInUp;\n}\n\n@-webkit-keyframes zoomOut {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n\n to {\n opacity: 0;\n }\n}\n\n@keyframes zoomOut {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n -webkit-transform: scale3d(.3, .3, .3);\n transform: scale3d(.3, .3, .3);\n }\n\n to {\n opacity: 0;\n }\n}\n\n.zoomOut {\n -webkit-animation-name: zoomOut;\n animation-name: zoomOut;\n}\n\n@-webkit-keyframes zoomOutDown {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n@keyframes zoomOutDown {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n.zoomOutDown {\n -webkit-animation-name: zoomOutDown;\n animation-name: zoomOutDown;\n}\n\n@-webkit-keyframes zoomOutLeft {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);\n transform: scale(.1) translate3d(-2000px, 0, 0);\n -webkit-transform-origin: left center;\n transform-origin: left center;\n }\n}\n\n@keyframes zoomOutLeft {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);\n transform: scale(.1) translate3d(-2000px, 0, 0);\n -webkit-transform-origin: left center;\n transform-origin: left center;\n }\n}\n\n.zoomOutLeft {\n -webkit-animation-name: zoomOutLeft;\n animation-name: zoomOutLeft;\n}\n\n@-webkit-keyframes zoomOutRight {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(.1) translate3d(2000px, 0, 0);\n transform: scale(.1) translate3d(2000px, 0, 0);\n -webkit-transform-origin: right center;\n transform-origin: right center;\n }\n}\n\n@keyframes zoomOutRight {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale(.1) translate3d(2000px, 0, 0);\n transform: scale(.1) translate3d(2000px, 0, 0);\n -webkit-transform-origin: right center;\n transform-origin: right center;\n }\n}\n\n.zoomOutRight {\n -webkit-animation-name: zoomOutRight;\n animation-name: zoomOutRight;\n}\n\n@-webkit-keyframes zoomOutUp {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n@keyframes zoomOutUp {\n 40% {\n opacity: 1;\n -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);\n -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);\n }\n\n to {\n opacity: 0;\n -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);\n -webkit-transform-origin: center bottom;\n transform-origin: center bottom;\n -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);\n }\n}\n\n.zoomOutUp {\n -webkit-animation-name: zoomOutUp;\n animation-name: zoomOutUp;\n}\n\n@-webkit-keyframes slideInDown {\n from {\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInDown {\n from {\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInDown {\n -webkit-animation-name: slideInDown;\n animation-name: slideInDown;\n}\n\n@-webkit-keyframes slideInLeft {\n from {\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInLeft {\n from {\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInLeft {\n -webkit-animation-name: slideInLeft;\n animation-name: slideInLeft;\n}\n\n@-webkit-keyframes slideInRight {\n from {\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInRight {\n from {\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInRight {\n -webkit-animation-name: slideInRight;\n animation-name: slideInRight;\n}\n\n@-webkit-keyframes slideInUp {\n from {\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n@keyframes slideInUp {\n from {\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n visibility: visible;\n }\n\n to {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n}\n\n.slideInUp {\n -webkit-animation-name: slideInUp;\n animation-name: slideInUp;\n}\n\n@-webkit-keyframes slideOutDown {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n@keyframes slideOutDown {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, 100%, 0);\n transform: translate3d(0, 100%, 0);\n }\n}\n\n.slideOutDown {\n -webkit-animation-name: slideOutDown;\n animation-name: slideOutDown;\n}\n\n@-webkit-keyframes slideOutLeft {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n@keyframes slideOutLeft {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(-100%, 0, 0);\n transform: translate3d(-100%, 0, 0);\n }\n}\n\n.slideOutLeft {\n -webkit-animation-name: slideOutLeft;\n animation-name: slideOutLeft;\n}\n\n@-webkit-keyframes slideOutRight {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n@keyframes slideOutRight {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(100%, 0, 0);\n transform: translate3d(100%, 0, 0);\n }\n}\n\n.slideOutRight {\n -webkit-animation-name: slideOutRight;\n animation-name: slideOutRight;\n}\n\n@-webkit-keyframes slideOutUp {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n@keyframes slideOutUp {\n from {\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n }\n\n to {\n visibility: hidden;\n -webkit-transform: translate3d(0, -100%, 0);\n transform: translate3d(0, -100%, 0);\n }\n}\n\n.slideOutUp {\n -webkit-animation-name: slideOutUp;\n animation-name: slideOutUp;\n}\n\n/**************Typed Animation************/\n/* Typed.js text (and cursor) styling. */\n.typed, .typed-cursor {\n\tfont-family: "Courier New";\n\tcolor: white;\n}\n\n/* Typed.js animated cursor styling. */\n.typed-cursor {\n\topacity: 1;\n\t-webkit-animation: blink 0.7s infinite;\n\t-moz-animation: blink 0.7s infinite;\n\tanimation: blink 0.7s infinite;\n}\n@keyframes blink {\n\t0% { opacity: 1; }\n\t50% { opacity: 0; }\n\t100% { opacity: 1; }\n}\n@-webkit-keyframes blink {\n\t0% { opacity: 1; }\n\t50% { opacity: 0; }\n\t100% { opacity: 1; }\n}\n@-moz-keyframes blink {\n\t0% { opacity: 1; }\n\t50% { opacity: 0; }\n\t100% { opacity: 1; }\n}\n

/%%%% initialize variables%%%%/\n<<set $talknum = 1>>\n\n/%%%%%replace text and images for first frame%%%%/\n<<replace #charleftcontent>>\n<<print '<img class="animated shake" src="'+$SPENCEREMOTE[0]+'">'>>\n<</replace>>\n<<replace #remembers>>\n<span class="animated fadeIn">\n<span class="rememberimage">\n[img[http://i.imgur.com/VHUH95V.png]]\n</span>\n</span>\n<div class="remembertext animated fadeIn">\nSpencer will remember that.\n</div>\n<</replace>>\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n<div class="diagbox">\nOh... Ouch, Will...<br>\nI... didn't realize... you thought so little of me.<br>\n*whine*<span class="animated fadeOut infinite">|</span><br>\n</div>\n<</replace>>\n<<addclass "#nextbutt" "activebutt animated press">>\n<<replace #nextbutt>>\n<<click [img[http://i.imgur.com/7NujUmh.png]]>>\n<<set $talknum ++>>\n\n<<if $talknum eq 2>>\n<<replace #remembers>>\n<span class="animated fadeOut">\n<span class="rememberimage">\n[img[http://i.imgur.com/VHUH95V.png]]\n</span>\n</span>\n<div class="remembertext animated fadeOut">\nSpencer will remember that.\n</div>\n<</replace>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n<div class="diagbox">\nI... I'm sorry, that just came out.<br>\nYou know I love you. It's just... sometimes you get on my nerves. Especially with all that bravado.<span class="animated fadeOut infinite">|</span><br>\n</div>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 3>>\n<<replace #charleftcontent>>\n<<print '<img class="animated shake" src="'+$SPENCEREMOTE[0]+'">'>>\n<</replace>>\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n<div class="diagbox">\n*grumble*<br>\nGot it. I'll shut up from now on.<span class="animated fadeOut infinite">|</span><br>\n</div>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 4>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n<div class="diagbox">\nLook, I'm sorry, okay, Spence? I didn't mean it.<br>\nAnd you're right, I //do// worry about you, especially when you're netsprinting. You can be kinda reckless.<span class="animated fadeOut infinite">|</span><br>\n</div>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 5>>\n<<replace #diaboxcontent>>\n<div class="diagbox">\nWhich reminds me:<span class="animated fadeOut infinite">|</span><br>\n<img src="http://i.imgur.com/rKzEzTn.png">[[I better go over the basics.|Tut1]]<br>\n<img src="http://i.imgur.com/rKzEzTn.png">[[We better get ready for our netcast.|InitPickStart]]<br>\n</div>\n<</replace>>\n<<replace #nextbutt>>\n<</replace>>\n<<removeclass "#nextbutt" "activebutt animated press">>\n<</if>>\n\n<</click>>\n<</replace>>

/%%%% initialize variables%%%%/\n<<set $talknum = 1>>\n/%%%%content arrays%%%%%%%%%%%/\n\n<div id="whole">\n/%%%%%%%background%%%%%%%%%%%%/\n<div id="gbox" class="circbg">\n/%%%%%%character pictures%%%%%/\n<div id="charbox">\n<div id="charleft">\n\t<span id="charleftcontent">\n\t\t<<print '<img src="'+$SPENCEREMOTE[0]+'">'>>\n\t</span>\n</div>\n<div id="charright">\n\t<span id="charrightcontent">\n\t\t<<print '<img src="'+$WILLEMOTE[0]+'">'>>\n\t</span>\n</div>\n</div>\n\n/%%%%%remembers%%%%%%%%%%%%%%%/\n<div id="remembers">\n<span class="animated fadeIn">\n<span class="areaimage">\n[img[http://i.imgur.com/VHUH95V.png]]\n</span>\n</span>\n<span class="areatext animated fadeIn">\nTutorial\n</span>\n</div>\n/%%%%%dialog divider%%%%%%%%%%/\n<div id="divideimg">\n[img[$dividercirc]]\n</div>\n/%%%%dialog icon%%%%%%%%%%%%%%/\n<div id="talkicon">\n<div id="talkiconcontent">\n[img[$WILLICON[0]]]\n</div>\n</div>\n/%%%%dialog words%%%%%%%%%%%%%/\n<div id="diabox">\n<span id="diaboxcontent">\n\t\tAlright, I know we've gone through this more times than you can count, Spence, but I think we should start from the top.<br>\nWhen we make a netsprint against a hypercorp we first-<span class="animated fadeOut infinite">|</span><br>\n</span>\n\n</div>\n/%%%%button & transitions!%%%%%%%%%%%%/\n<div id="nextbutt" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $talknum ++>>\n\n<<if $talknum eq 2>>\n<<replace #remembers>>\n<span class="animated fadeOut">\n<span class="areaimage">\n[img[http://i.imgur.com/VHUH95V.png]]\n</span>\n</span>\n<span class="areatext animated fadeOut">\nTutorial\n</span>\n<</replace>>\n\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n\n<<replace #diaboxcontent>>\nFirst, we gotta prep our programs.<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 3>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\nRight! When we approach a server, sometimes it's guarded. We'll need to arm ourselves with executables and various macros to get around ciphers. Or //through// them if you're so inclined.<br>\nThis is the Prep Phase of a sprint.<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 4>>\n<<replace #diaboxcontent>>\nAfter arming ourselves to the teeth, we approach the hypercorp's server and prepare to encounter the cipher or whatever might be barring our entrance into the server. We may have to sneak past or punch our way through, hopefully wihout drawing too much attention.<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 5>>\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\nThat's the Encounter Phase.<br>\nAnd in the last step, we gain entrance to the company's servers and get to smash stuff up!<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 6>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\nWell, we don't //have// to smash stuff up. Once we're in, we can sift through the data, or access even deeper parts of the server. Heh, the Access Phase isn't just about burning the company to the ground, Spence.<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 7>>\n<<replace #diaboxcontent>>\n...<span class="animated fadeOut infinite">|</span><br>\n<img src="http://i.imgur.com/rKzEzTn.png">\n<<click "Wanna give it a practice run? (Unfinished tutorial!)">>\n<<replace #diaboxcontent>>\nAlright, let's set up a mock-run. While I get the dummy cipher and server set up, let's get you started with setting up our programs.<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<<addclass "#nextbutt" "activebutt animated press">>\n<<replace #nextbutt>>\n[img[NEXT|http://i.imgur.com/7NujUmh.png][TutStart]]\n<</replace>>\n<</click>><br>\n<img src="http://i.imgur.com/rKzEzTn.png">[[You seem to know the drill, we can get prepped for our run tonight.|InitPickStart]]\n<</replace>>\n<<replace #nextbutt>>\n\n<</replace>>\n<<removeclass "#nextbutt" "activebutt animated press">>\n<</if>>\n<</click>>\n</div>\n\n</div>\n</div>

/%%%% initialize variables%%%%/\n<<set $talknum = 1>>\n\n/%%%%%replace text and images for first frame%%%%/\n<<replace #charleftcontent>>\n<<print '<img class="animated pulse" src="'+$SPENCEREMOTE[0]+'">'>>\n<</replace>>\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n\t\tPssh.<br>\n\t\tYeah, yeah, way to rub it in, Will. It was a mistake! If I had managed to evade that last layer of ICE, I would've gotten off scott-free.<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<<addclass "#nextbutt" "activebutt animated press">>\n<<replace #nextbutt>>\n<<click [img[http://i.imgur.com/7NujUmh.png]]>>\n<<set $talknum ++>>\n\n<<if $talknum eq 2>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\nYes well, //'almost'// isn't the same as 'did,' now is it?<br>\nWhich reminds me, after that last screw up, I think we should go over the basics of a netsprint.<span class="animated fadeOut infinite">|</span>\n<</replace>>\n<</if>>\n<<if $talknum eq 3>>\n<<replace #charleftcontent>>\n<<print '<img class="animated shake" src="'+$SPENCEREMOTE[0]+'">'>>\n<</replace>>\n<<replace #talkiconcontent>>\n[img[$SPENCERICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n*whine*<span class="animated fadeOut infinite">|</span><br>\n<</replace>>\n<</if>>\n\n<<if $talknum eq 4>>\n<<replace #talkiconcontent>>\n[img[$WILLICON[0]]]\n<</replace>>\n<<replace #diaboxcontent>>\n...<span class="animated fadeOut infinite">|</span><br>\n<img src="http://i.imgur.com/rKzEzTn.png">[[Ohhh, no, you're not getting out of this. After that last sprint you definitely need a refresher.|Tut1]]<br>\n<img src="http://i.imgur.com/rKzEzTn.png">[[Fine, but don't say I didn't warn you if and when you screw up.|InitPickStart]]<br>\n<</replace>>\n<<replace #nextbutt>>\n<</replace>>\n<<removeclass "#nextbutt" "activebutt animated press">>\n<</if>>\n\n<</click>>\n<</replace>>

<<if $cloaknumlab eq 0>>\n<<if $suspicion gt 0>>\n<<set $statustext.unshift("Let's just put this on...<br> Hmm, seems like it's gotten them off my back.<br>")>>\n<<else>>\n<<set $statustext.unshift("Let's just put this on...<br> Hmm, not much, but at least it's gotten them off my back.<br>")>>\n<</if>>\n<<set $statustextperson.unshift("Spencer")>>\n<<display DispStatS>>\n<</if>>\n\n<<if $suspicion gt 0>>\n<<set $suspicion -->>\n<<display UpdateSuspLab>>\n<</if>>\n\n<<set $time ++>>\n<<display UpdateTimeLab>>\n\n<<set $cloaknumlab ++>>\n\n<<if $cloaknumlab eq 2>>\n<<set $statustext.unshift("//Through the ethereal folds of the cloak, a thread of yarn can be seen by the entrance to the maze...//")>>\n<<set $statustextperson.unshift("None")>>\n<<display DispStatS>>\n<</if>>

<<replace #time>>\nTime: <<print $time>>\n<</replace>>\n\n<<if $time eq 5>>\n<<set $statustext.unshift("Quit playing around, Spence.")>>\n<<set $statustextperson.unshift("Will")>>\n<<display DispStatS>>\n<</if>>\n\n<<if $time eq 6>>\n<<set $statustext.unshift("//There was always a low hum emanating from the maze, but now it's a low rumble...//")>>\n<<set $statustextperson.unshift("None")>>\n<<display DispStatS>>\n<</if>>

<<replace #enemystat1>>\nProgress: \n<<for $i to 1; $i lte 5;$i++>>\n<<if $i lte $progressnum>>\n<span class="tutprogress">&#9613; </span>\n<<else>>\n&#9613; \n<</if>>\n<</for>>\n<</replace>>\n\n<<if $progressnum gte 5>>\n<<addclass "#overlay" "overlayactive">>\n<<removeclass "#overlay" "overlayinactive">>\n<</if>>

<div id="whole">\n/%%%variables for overlay text%%%%%%/\n<<set $overtext=["Welcome to the encounter screen.<br>\nI've set up this tutorial to walk us through the three steps of a netsprint.<br>","<span class='emph'>Pop-ups</span>, like this, may appear from time to time. You can also read these messages in the <span class='emph'>data log</span> to the right. This is how we communicate with each other as well as keep track of certain things during a run.<br>","When you're ready, close this pop-up and let's get started with the <span class='emph'>Prep Phase</span> of our test netsprint."]>>\n<<set $overicon=["Will","Will","Will"]>>\n<<set $overnum=1>>\n/%%%%%%%overlay%%%%%%%%%%%%%/\n<div id="overlay" class="overlayactive">\n<div id="overlaytextbox">\n<div id="textboxtaskbar">\nX\n</div>\n<div id="overlayicon">\n[img[$WILLICON[0]]]\n</div>\n<div id="ovtext">\n<<print $overtext[0]>>\n</div>\n<div id="ovnext" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $overnum ++>>\n<<if $overnum eq 2>>\n<<replace #ovtext>>\n<<print $overtext[1]>>\n<</replace>>\n<<addclass "#lscroll" "animated flash">>\n<</if>>\n<<if $overnum eq 3>>\n<<replace #ovtext>>\n<<print $overtext[2]>>\n<</replace>>\n<<replace #ovnext>>\n<</replace>>\n<<removeclass "#ovnext" "activebutt animated press">>\n<<replace #textboxtaskbar>>\n<<click "X">>\n\t<<removeclass "#overlay" "overlayactive">>\n\t<<addclass "#overlay" "overlayinactive">>\n\t<<replace #startbutt>>\n[img[Down the rabbit hole.|http://imgur.com/Qj0fAOi.png][TutPrep]]\n\t<</replace>>\n\t<<replace .textoverstart>>\nREADY?\n\t<</replace>>\n\t<<display DispStatL>>\n<</click>>\n<</replace>>\n<</if>>\n<</click>>\n</div>\n</div>\n</div>\n/%%%%%%%%%%game area%%%%%%%%%%%%%%%/\n<div id="gbox" class="circbg">\n/%%%%%%%title%%%%%%%%%%%%%%%/\n<div class="textoverstart">\n</div>\n/%%%%%%%start button%%%%%%%%/\n<div id="startbutt" class="animated press">\n</div>\n\n</div>\n\n/%%%%%%%%%status bar%%%%%%%%/\n/%%%%%%%status variables%%%%/\n<<set $statustext=["Welcome to the encounter screen.<br>\nI've set up this tutorial to walk us through the three steps of a netsprint.<br>\nWhat you're reading here is the status bar. This is how we communicate with each other as well as keep track of certain things during a run.<br>\nWhen you're ready, let's get started with the <b>Prep Phase</b> of our test netsprint."]>>\n<<set $statustextperson=["Will"]>>\n/%%%%status content%%%%%%/\n<div id="statusbar" class="statusbarbg">\n<div id="statusbartitle">\nData Log\n</div>\n<div id="lscroll">\n</div>\n\n</div>\n</div>

/%%%% initialize variables%%%%/\n<<set $didtutorial = 0>>\n<<set $spencernotlove = 0>>\n<<set $spencercookies = 0>>\n\n/%%%%%%program list%%%%%%%%%%/\n<<set $allprog = ["cloak.exe","smash.exe","dagger.exe","peep()"]>>\n<<set $allprogtooltip = ["Sneak past your enemy.","Hulk...","Right in the back.","Just a quick..."]>>\n<<set $proglearn = ["cloak.exe","smash.exe","dagger.exe","peep()"]>>\n\n/%%%%%load images%%%%%%%%%%%/\n<<set $dividercirc="http://i.imgur.com/1KnoEht.png">>\n\n\n/%%%%%% William Icons%%%%%%%%%%%%/\n<<set $WILLICON=["http://i.imgur.com/SCttF72.png","http://i.imgur.com/H8mXLVJ.png"]>>\n\n/%%%% LEGEND: %%%%%%\n[0]: Default\n[1]: Ouch/Cum\n%/\n\n/%%%%%% William Emotions%%%%%%%%%/\n<<set $WILLEMOTE=["http://i.imgur.com/IsUREAF.png"]>>\n\n/%%%% LEGEND: %%%%%%\n[0]: Default\n[1]: Entrance\n%/\n\n/%%%%%% Spencer Emotions %%%%%%%%%%%/\n<<set $SPENCEREMOTE=["http://i.imgur.com/EFQKviN.png"]>>\n\n/%%%% LEGEND: %%%%%%\n[0]: Default\n%/\n/%%%%%% Spencer Icons%%%%%%%%%%%%%%/\n<<set $SPENCERICON=["http://i.imgur.com/lCFvqRJ.png"]>>\n\n/%%%% LEGEND: %%%%%%\n[0]: Default\n%/

/%%%set variables%%%%%/\n<<set $skill1="None">>\n<<set $skill2="None">>\n<<set $alreadyfinal=0>>\n<<set $alreadycloakanddagger=0>>\n<div id="whole">\n/%%%%%%%overlay%%%%%%%%%%%%%/\n/%%%variables for overlay text%%%%%%/\n<<set $overtext=["Okay Spence, let's get started by picking the programs we're gonna bring on the sprint.<br>","To start the program selection process, choose one of the available program slots in the <span class='emph'>loadout</span>.<br>\n"]>>\n<<set $overicon=["Will","Will"]>>\n<<set $overnum=1>>\n\n<div id="overlay" class="overlayactive">\n<div id="overlaytextbox">\n<div id="textboxtaskbar">\nX\n</div>\n<div id="overlayicon">\n[img[$WILLICON[0]]]\n</div>\n<div id="ovtext">\n<<print $overtext[0]>>\n</div>\n<div id="ovnext" class="activebutt animated press">\n<<click [img[NEXT|http://i.imgur.com/7NujUmh.png]]>>\n<<set $overnum ++>>\n<<if $overnum eq 2>>\n<<replace #ovtext>>\n<<print $overtext[1]>>\n<</replace>>\n<<removeclass "#ovnext" "activebutt animated press">>\n<<replace #ovnext>>\n<</replace>>\n<<addclass "#loadoutbox" "animated flash">>\n<<replace #textboxtaskbar>>\n<<click "X">>\n\t<<removeclass "#overlay" "overlayactive">>\n\t<<addclass "#overlay" "overlayinactive">>\n\t<<display DispStatL>>\n\t<<if $timeselect eq 1>>\n\t\t<<addclass "#picklistbox" "animated flash">>\n\t<</if>>\n<</click>>\n<</replace>>\n<</if>>\n<</click>>\n</div>\n</div>\n</div>\n/%%%%pick skills%%%%%%%/\n<div id="gbox" class="circbg">\n<div id="loadoutbox">\n<center>Loadout</center>\n<div id="load1" class="pickmestart">\n<<click "Slot Available">>\n<<removeclass "#load1" "pickmestart">>\n<<removeclass "#load2" "pickmestart">>\n<<display SkillSel1>>\n<<display RefreshSkillSel>>\n<<set $statustext.unshift("Great, now pick one of the <b>available programs</b> to fill the first slot.<br>\n")>>\n<<set $statustextperson.unshift("Will")>>\n\n\t<<removeclass "#overlay" "overlayinactive">>\n\t<<addclass "#overlay" "overlayactive">>\n\t<<replace #ovtext>>\nGreat, now pick one of the <span class='emph'>available programs</span> to fill the first slot.<br>\n\t<</replace>>\n<<set $timeselect=1>>\n<</click>>\n</div>\n<div id="load2" class="pickmestart">\n<<click "Slot Available">>\n<<removeclass "#load1" "pickmestart">>\n<<removeclass "#load2" "pickmestart">>\n<<display SkillSel2>>\n<<display RefreshSkillSel>>\n<<set $statustext.unshift("Great, now pick one of the <b>available programs</b> to fill in the second slot.<br>\n")>>\n<<set $statustextperson.unshift("Will")>>\n\t<<removeclass "#overlay" "overlayinactive">>\n\t<<addclass "#overlay" "overlayactive">>\n\t<<replace #ovtext>>\nGreat, now pick one of the <span class='emph'>available programs</span> to fill the second slot.<br>\n\t<</replace>>\n<<set $timeselect=1>>\n<</click>>\n</div>\n<div id="finalload" class="nopick">\nFinalize\n</div>\n</div>\n\n<div id="picklistbox">\n<center>Available Programs</center>\n<div id="prog0" class="nopick">\n<<print $proglearn[0]>>\n</div>\n<div id="prog1" class="nopick">\n<<print $proglearn[1]>>\n</div>\n<div id="prog2" class="nopick">\n<<print $proglearn[2]>>\n</div>\n<div id="prog3" class="nopick">\n<<print $proglearn[3]>>\n</div>\n<div id="prog4" class="notavail">\n???\n</div>\n<div id="prog5" class="notavail">\n???\n</div>\n</div>\n<div id="prepnotes">\n</div>\n</div>\n/%%%%%%%%status bar%%%%%%%%/\n/%%%%%%%status variables%%%%/\n<<set $statustext.unshift("Okay Spence, let's get started by picking the programs we're gonna bring on the sprint.<br>\nTo start the program selection process, choose one of the available program slots in the <b>loadout.</b><br>\n")>>\n<<set $statustextperson.unshift("Will")>>\n/%%%%status content%%%%%%/\n<div id="statusbar" class="statusbarbg">\n<div id="statusbartitle">\nData Log\n</div>\n/%%%setup print index%%%%%%/\n<<set $numtext=$statustext.length>>\n/%%%status content%%%%%%%%%/\n<div id="lscroll">\n<<for $i to 1; $i lt 2; $i++>>\n<<if $statustextperson[$i] eq "Will">>\n<span class="willtext">Will:</span>\n<</if>>\n<<if $statustextperson[$i] eq "Spencer">>\n<span class="willtext">Spencer:</span>\n<</if>>\n<<print $statustext[$i]>>\n<<if $i neq $numtext-1>>\n<center>-----------------------------</center><br>\n<</if>>\n<</for>>\n</div>\n\n</div>

<<if $investnumlab eq 0>>\n<<set $statustext.unshift("Hmm, clues... clues. Looks like I've made some progress, but I'm drawing some attention to myself. Hehe, not that I don't like it.<br>")>>\n<<set $statustextperson.unshift("Spencer")>>\n<<display DispStatS>>\n<</if>>\n\n<<set $suspicion ++>>\n<<display UpdateSuspLab>>\n\n<<set $progressnum ++>>\n<<display UpdateProgressTutLab>>\n\n<<set $time ++>>\n<<display UpdateTimeLab>>\n\n<<set $investnumlab ++>>\n\n<<if $investnumlab eq 2>>\n<<set $statustext.unshift("//The maze shifts and turns, reality distorting within. A tortured, guttural wind bellows from within. Or at least it sounds like wind...//")>>\n<<set $statustextperson.unshift("None")>>\n<<display DispStatS>>\n<</if>>

A game by: <a href="http://www.furaffinity.net/user/oldshep/">oldshep</a>