@keyframes caret{from, to{border-color:transparent}50%{border-color:#333}}@keyframes popup{from, to{transform:scale(1)}50%{transform:scale(1.5)}}@keyframes shiver{from, to{transform:scale(-1, 1.1)}25%{transform:scale(-1, 1.1) rotate(-6deg)}75%{transform:scale(-1, 1.1) rotate(6deg)}}*{box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,input,textarea,button,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;text-align:left;background:none}*:focus,a:focus,button:focus,input:focus,textarea:focus{outline:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html{height:100%;font-size:62.5%}body{display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;min-height:100vh;color:#fff;font-size:1.6rem;font-family:"Lato", "Optima", "PTSans", "Liberation Sans", helvetica, arial, verdana, sans-serif;line-height:1.3;background-color:#333}.container{flex:1 1 auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:40px}@media screen and (max-width: 1100px){.container{padding:40px 5%}}.container__wrapper{flex:0 1 auto;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;grid-column-gap:40px;grid-row-gap:40px}@media screen and (max-width: 1100px){.container__wrapper{grid-template-columns:auto;grid-auto-rows:auto}}.module{position:relative;max-width:600px;display:flex;align-items:stretch;justify-content:space-between;color:#333;overflow:hidden;box-shadow:rgba(0,0,0,0.75) 0px 3px 10px;background-color:#fff}.module__content{flex:0 1 75%;order:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:25px 20px}.module__headline{font-size:2.4rem;font-weight:bold;line-height:1}.module__headline a{color:inherit;text-decoration:none}.module__description{margin-top:5px}.module__description a{color:#1d61e0;font-weight:bold}.module__description a:hover{color:#000}.module__description b{font-weight:bold}.module__description p+p{margin-top:20px}.module__stage{flex:0 1 25%;order:1;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background-color:#eee}.module__logo{width:100%;height:100%;content:"";background:transparent none center center no-repeat;background-size:contain}.encoder .encoder-scan{position:relative;overflow:hidden}.encoder .encoder-scan::before{position:absolute;top:-20px;bottom:-20px;left:-50%;width:50%;content:"";transition:left .45s linear;background-image:linear-gradient(to left, #e9eaa0, transparent);opacity:0.6;z-index:2}.encoder .encoder-scan.encoder-scan--reversed::before{transform:rotate(180deg)}.encoder:hover .encoder-scan::before{left:100%}.encoder:hover .encoder-scan__after{clip-path:inset(0 0 0 0)}.encoder .encoder-scan__before,.encoder .encoder-scan__after{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background-color:#000}.encoder .encoder-scan__before p,.encoder .encoder-scan__after p{position:absolute;top:-2px;right:-20px;bottom:-5px;left:-20px;font-size:1.1rem;font-family:'Consolas', 'Monaco', 'Andale Mono', 'Courier New', courier, monospace;pointer-events:none}.encoder .encoder-scan__before p{color:#999}.encoder .encoder-scan__after{clip-path:inset(0 100% 0 0);transition:clip-path .3s linear}.encoder .encoder-scan__after p{color:#ececbe}.password-generator .module__stage{background-color:#000}.password-generator .module__logo{background-image:url(../img/password.svg);background-size:30% 55%}.password-generator .input-widget{position:relative;width:150px;height:27px;margin-top:10px;padding:0 5px;line-height:27px;border:#afafaf 1px solid;border-radius:2px;box-shadow:rgba(0,0,0,0.1) 1px 1px 5px inset;background-color:#f5f5f5}.password-generator .input-widget .input-widget__type-in{padding-right:1px;pointer-events:none;user-select:none;animation:caret 0.9s step-start infinite;border-right:transparent 2px solid}.password-generator button{position:absolute;top:0;right:0;bottom:0;width:27px;color:transparent;text-indent:-999px;overflow:hidden;transition:all 0.1s ease-in-out;border-left:#afafaf 1px solid;background:linear-gradient(to bottom, #f9f9f9, #d8d8d8)}.js .password-generator button{cursor:pointer}.js .password-generator button:not([disabled]):hover{box-shadow:rgba(29,97,224,0.75) 0 0 8px}.js .password-generator button:active{box-shadow:rgba(0,0,0,0.35) 1px 1px 3px inset !important}.password-generator button::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";opacity:0.65;transition:all 0.05s ease-in-out;background:transparent url(../img/reload.svg) center center no-repeat;background-size:65% 65%}.password-generator button[disabled]::after{opacity:0.2}.js .password-generator button:active::after{top:1px;left:1px}.percentage-calculator .module__stage{background-color:#000}.percentage-calculator .module__logo{background-image:url(../img/percentage.svg);background-size:55% 55%}.percentage-calculator .percentage-calculator__percentage-result,.percentage-calculator .percentage-calculator__change-result{display:inline-block;padding:0 4px;color:transparent;transition:color 0.25s ease-in-out;cursor:none;white-space:nowrap;border-radius:3px;background-color:#dedede}.percentage-calculator .percentage-calculator__percentage-result:hover,.percentage-calculator .percentage-calculator__percentage-result:active,.percentage-calculator .percentage-calculator__change-result:hover,.percentage-calculator .percentage-calculator__change-result:active{color:#333}.percentage-calculator button{display:none;padding:7px 11px;cursor:pointer;color:inherit;line-height:1;transition:all 0.1s ease-in-out;border:#afafaf 1px solid;box-shadow:#e4e4e4 1px 1px 1px;background:linear-gradient(to bottom, #f9f9f9, #d8d8d8)}.percentage-calculator button:hover{box-shadow:rgba(29,97,224,0.75) 0 0 6px}.percentage-calculator button:active{transform:translate3d(1px, 1px, 0);box-shadow:none}.js .percentage-calculator button{display:inline-block}.pac-man .module__stage{background-color:#000}.pac-man .module__logo{filter:saturate(0%) brightness(150%);transition:filter 0.3s ease-in-out;background-image:url(../img/pac-man.svg);background-size:60% 60%}.pac-man.pacman--active .module__logo,.pac-man:hover .module__logo{filter:none}.pac-man .ghosts{position:absolute;top:15px;right:0;height:23px;padding-right:20px}.pac-man .ghosts::after{position:absolute;top:0;right:0;bottom:0;width:20px;content:"";background-image:linear-gradient(to right, rgba(255,255,255,0), #fff)}.js .pac-man .ghosts{pointer-events:none}.pac-man .ghost{position:relative;right:0;display:inline-block;width:auto;height:100%;margin-left:2px;opacity:0;transition:opacity 1s ease-in-out,right 0.5s cubic-bezier(1, 0, 1, 1)}.pac-man .ghost.ghost--flipped{transform:scale(-1, 1)}.pac-man .ghost.ghost--fleeing{right:-400px}.pac-man .ghost.ghost--visible{opacity:1;animation:popup 0.35s;animation-delay:0.15s}.pac-man .ghost.ghost--shiver{animation:shiver 0.2s 3}.pac-man .ghost.ghost--hidden{display:none}.no-js .pac-man .ghost{transition:opacity 0.25s ease-in-out}.no-js .pac-man .ghost:hover{transform:scale(-1, 1)}.no-js .pac-man:hover .ghost{opacity:1}.matrix{position:relative;pointer-events:none;user-select:none;overflow:hidden;color:#b9b9b9;opacity:0.25;box-shadow:none}.matrix::after{position:absolute;top:0;right:-50%;left:50%;color:#fff;font-size:1.3rem;text-align:center;line-height:23px;content:"be back soon - be back soon - be back soon";transform:rotate(45deg) translate3d(-1%, 250%, 0);box-shadow:rgba(0,0,0,0.25) 0px 1px 3px;border:#fff 1px solid;outline:#722 1px solid;background-color:#722}.matrix .module__logo{opacity:0.07;background-image:url(../img/construction.svg);background-size:55% 55%}footer{flex:0 1 auto;padding:0 5% 20px 5%;color:#808080;font-size:1.3rem;text-shadow:rgba(0,0,0,0.3) 1px 1px 3px}footer p{text-align:center}footer a{color:#b5b5b5}footer a:hover{color:#dedede}@media screen and (max-width: 650px){footer br{display:none}}