*{padding:0;margin:0;outline:0}body{font-family:'Didact Gothic',sans-serif;padding:200px 0 0;font-size:20px;line-height:25px;color:#00293c;width:100%;background:#fff;position:relative;word-wrap:break-word;text-align:justify;-webkit-font-smoothing:antialiased!important;font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;font-smooth:always!important}body.timeout{padding:100px 0 0}a{color:#006088;text-decoration:none}a:active,a:focus,a:hover{color:#00a2e8}#toTop,.menu-trigger,button{cursor:pointer}p{margin-bottom:10px}ul{text-align:left}ul li{list-style-type:none;display:list-item}#toTop,.hide{display:none}button,img{border:none}img{max-width:100%;height:auto}#toTop,.anim,:after,:before,a,li{-webkit-transition:all .7s ease-out;transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out}#toTop{width:90%;padding:5px 5%;z-index:10;border:1px solid #000;background:#000;text-align:center;position:fixed;bottom:0;right:0;color:#fff;text-transform:lowercase;font-size:12px}#toTop:hover{color:#00a2e8}.wrapper{width:1170px;margin:0 auto;position:relative}header.header{position:fixed;top:0;border-bottom:0;padding:0;width:100%;background:#fff;z-index:11}h1{font-size:70px;line-height:1.1em;border-bottom:1px solid #99d9ea;padding:10px;margin:0 0 10px}h1.timeout{font-size:31px;height:35px;line-height:35px;margin:0}.a-l-0{color:#99d9ea}.a-l-1{color:#00a2e8}.a-l-2{color:#006088}.a-l-3{color:#79d7ff}.a-l-4{color:#003f59}.menu-trigger{position:fixed;right:0;top:0;z-index:9;background:#00a2e8;padding:10px;height:56px;width:60px}.menu-trigger span{position:absolute;top:50%;text-indent:-9999px;margin-top:-3px}.menu-trigger span,.menu-trigger span:after,.menu-trigger span:before{display:block;width:40px;height:6px;background:#fff}.menu-trigger span:after,.menu-trigger span:before{content:'';position:absolute;left:0}.menu-trigger span:after{top:13px}.menu-trigger span:before{top:-13px}.menu-container a{position:relative;overflow:hidden;width:100%;display:block}.menu-container a:after{content:'';display:block;left:-150%;width:100%;height:2px;background:#003f59;bottom:0;position:absolute}.glass,.menu-container{position:fixed;right:-150%;top:0;height:100%}.menu-container a:active:after,.menu-container a:focus:after,.menu-container a:hover:after{left:0}.glass{background:rgba(0,0,0,.7);width:100%;z-index:10}.menu-container{background:#fff;border-left:5px solid #00a2e8;padding:0 25px;width:250px}.menu-container ul{text-align:right}.glass.active,.menu-container.active{right:0}body.menu-active{overflow:hidden!important}.menu-trigger.active,.menu-trigger.active span{background:#006088}.menu-trigger.active span:after{-webkit-transform:translate(-5px,-13px) rotate(45deg);-moz-transform:translate(-5px,-13px) rotate(45deg);-ms-transform:translate(-5px,-13px) rotate(45deg);-o-transform:translate(-5px,-13px) rotate(45deg);transform:translate(-5px,-13px) rotate(45deg)}.menu-trigger.active span:before{-webkit-transform:translate(-5px,13px) rotate(-45deg);-moz-transform:translate(-5px,13px) rotate(-45deg);-ms-transform:translate(-5px,13px) rotate(-45deg);-o-transform:translate(-5px,13px) rotate(-45deg);transform:translate(-5px,13px) rotate(-45deg)}.menu-trigger.active span:after,.menu-trigger.active span:before{width:50px}.menu-trigger.active{right:240px}.author{padding:5px 5%;z-index:9;position:fixed;bottom:0;width:90%;background:#eee;font-size:13px;line-height:15px;border-top:1px solid #ccc}.author p{margin:0}.author p:nth-child(1){margin:0 0 2.5px}.sticky .author{position:inherit;padding:5px 5% 45px}.absoluter{position:absolute;top:50%;width:250px;left:50%;margin-left:-125px}aside{background:#f9f9f9;padding:25px 0 15px}.flex-container{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:flex-start;align-items:flex-start}.simple-project-container{max-width:320px;margin:15px;padding:15px;background:#f9f9f9;color:#666}.flex-container>header{width:100%;text-align:center;padding:10px;margin:15px 0}.additional-info h6,.flex-container>header h3,.simple-project-container h4,article.top-content-module h3{border-bottom:3px solid #00a2e8;display:table}.additional-info h6,.simple-project-container h4,article.top-content-module h3{padding:5px 20px;margin:0 auto 15px;font-size:25px;line-height:30px}.flex-container>header h3{padding:10px 20px;margin:0 auto;font-size:35px;line-height:40px}.project-description{font-size:20px;line-height:23px}.project-link a{display:block;text-align:center;color:#fff;padding:5px 10px;background:#00a2e8;margin:5px 0 0}.project-link a:active,.project-link a:focus,.project-link a:hover{background:#006088}.process-bar-container{padding:0 0 10px}.process-bar-background{height:30px;background:#ddd;border:1px solid #bbb;position:relative}h5{font-size:18px;line-height:20px;margin:5px 0}.process-bar,.process-value-container{position:absolute;height:100%;top:0;left:0}.process-bar{z-index:2}.process-bar.red{background:#600}.process-bar.orange{background:#ff6200}.process-bar.yellow{background:#ffe200}.process-bar.lightgreen{background:#7cc900}.process-bar.green{background:#008b0b}.process-value-container{z-index:3;width:100%;text-align:center;line-height:30px}.process-value-container.orange,.process-value-container.red,.process-value-container.yellow{color:#666}.process-value-container.green,.process-value-container.lightgreen{color:#ddd}.additional-info a{font-weight:700}article.top-content-module ul{padding:0 15px}article.top-content-module>ul{font-family:'Roboto Mono',monospace;background:#f5f5f5;border:1px solid #ddd;padding:15px;font-size:15px;line-height:25px;display:inline-block}article.top-content-module ul li:before{content:'-'}.project-link a.codepen{background:url(../images/codepen.png) left 15px center no-repeat #191919;background-size:25px;padding-left:45px}.project-link a.codepen:active,.project-link a.codepen:focus,.project-link a.codepen:hover{background-color:#000}@media screen and (max-width:1250px){.wrapper{width:700px}h1{font-size:50px;line-height:1.1em}.simple-project-container{max-width:90%}}@media screen and (max-width:768px){.wrapper{width:500px}h1{font-size:31px;line-height:35px}}@media screen and (max-width:540px){.wrapper{width:90%}h1,h1.timeout{font-size:17px}}