/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}body,html{font-family:Roboto,-apple-system,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:100%;color:#404041;margin:0;overflow-x:hidden;transition:all .3s ease;box-sizing:border-box}*,:after,:before{box-sizing:inherit}.hdr{background:#e0e0e0;z-index:3;width:100%}.hdr,.menu-button{top:0;position:fixed;height:60px}.menu-button{left:0;cursor:pointer;z-index:6}.menu-button .menu-square{background:#e0e0e0;border-right:1px solid #f5f5f5;float:left;display:table;position:relative;width:60px;height:60px}.menu-button .menu-square .burger{display:table-cell;vertical-align:middle;padding:0 0 0 1.25em;position:relative;height:60px}.menu-button .menu-square .burger .bar{background:#000;transition:all .2s ease;width:18px;height:3px}.menu-button .menu-square .burger .bar:after,.menu-button .menu-square .burger .bar:before{content:"";background:#424242;position:absolute;width:18px;height:3px}.menu-button .menu-square .burger .bar:before{margin:-6px 0 6px;transform:rotate(0);transition:all .2s ease}.menu-button .menu-square .burger .bar:after{margin:6px 0;transform:rotate(0);transition:all .2s ease}.menu-button .menu-text{color:#424242;display:block;float:left;font-size:1.125rem;font-weight:700;line-height:60px;text-transform:uppercase;letter-spacing:.05em;margin-left:1em}.menu-button.active .burger .bar{background:transparent}.menu-button.active .burger .bar:before{display:block;margin:0;transform:rotate(45deg);transition:top .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1) .2s}.menu-button.active .burger .bar:after{margin:0;transform:rotate(-45deg);transition:bottom .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1) .2s}.wrp{background-color:#fff;top:0;left:0;position:absolute;z-index:2;width:100%;min-height:100%;transition:all .2s ease}.wrp.wrp--ovr{border-left:1px solid #e0e0e0;left:315px}.wrp .wrp__inner{margin:6em auto 0;padding:0 .75em 20em;overflow-y:auto;max-width:960px;height:auto}.pattern{border:1px solid #e0e0e0;border-radius:3px;margin-bottom:4em}.pattern .pattern-name{background:#f5f5f5;border-bottom:1px solid #e0e0e0;padding:1em;text-transform:uppercase}.pattern .pattern-name:first-letter{text-transform:capitalize}.pattern .pattern-preview{padding:1.125em 1.25em 1em}.pattern.pattern--heading{border:none}.pattern.pattern--heading h2{margin:0 0 .5em;padding:0 0 .25em;border-bottom:1px solid #e0e0e0}.palette{overflow:auto;padding:1em 0 0;width:100%;height:auto}.palette .color{float:left;position:relative;width:25%}.palette .color .color-box{margin:0 auto .5em;width:90%;height:100px}.palette .color .color-txt{font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;margin:0 auto 2em;width:90%}.palette .color .color-txt .color-txt__hex{font-size:.875rem;margin:0 0 .125em}.palette .color .color-txt .color-txt__class{font-size:.75rem;line-height:1.6}.palette+.palette{padding:0}.bg-darkest-gray{background:#424242}.bg-dark-gray{background:#757575}.bg-mid-gray{background:#e0e0e0}.bg-gray{background:#eee}.bg-light-gray{background:#f5f5f5}.pattern--heading code{background:#f5f5f5;border-radius:3px;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:.75rem;padding:.5em}pre[class*=language-]{background:#f8f8f8;font-size:.85rem;line-height:inherit;overflow:hidden!important;padding:2em!important}.code-contain{display:block;overflow:hidden;position:relative;width:100%;max-height:0;transition:all .3s ease}.code-contain code{margin:0;width:100%;white-space:pre-wrap!important}.code-btn{background:#e0e0e0;border-radius:3px;color:#424242;cursor:pointer;font-size:.75rem;font-weight:700;display:inline-block;margin:.5em 0 1em;padding:.625em;position:relative;text-transform:uppercase;letter-spacing:.02em}.code-btn:before{content:"</> Code"}.code-btn.show:before{content:"</> Hide"}.code-btn.show+.code-contain{max-height:450px;transition:max-height .3s ease}.off-cnvs{top:0;left:0;overflow:scroll;position:fixed;z-index:1;width:100%;height:100%}.side-nav{margin-top:3.75em;width:315px}.side-nav ul{list-style:none;margin:0;padding:0}.side-nav ul li{border-bottom:1px solid #e0e0e0;display:block;position:relative}.side-nav ul li a{font-size:1.125rem;font-weight:700;display:block;color:#222;cursor:pointer;line-height:60px;text-decoration:none;padding-left:1em;transition:border-left .15s ease;z-index:4}.side-nav ul li a.current{border-left:4px solid #757575}.side-nav ul li.children:after{content:"+";border-left:1px solid #e0e0e0;cursor:pointer;display:block;font-size:1.25rem;font-weight:700;line-height:60px;position:absolute;text-align:center;top:0;right:0;width:60px;height:60px;z-index:5}.side-nav ul li.children.active:after{background:#f5f5f5;content:"-"}.side-nav ul li ul{background:#f5f5f5;border:none;list-style:none;overflow-y:hidden;max-height:0;margin:0;padding:0;transition:max-height .3s ease}.side-nav ul li ul.open{border-top:1px solid #e0e0e0;max-height:500px}.side-nav ul li ul li{border-bottom:1px solid #e0e0e0;font-weight:400}.side-nav ul li ul li:last-child{border-bottom:none}.side-nav ul li ul li a{font-size:1rem;font-weight:400}h1,h2,h3,h4,h5,h6{font-family:Roboto,-apple-system,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.5;margin:0 0 .5em;padding:0}h1{font-size:3rem;margin-bottom:.35em}h2{font-size:2.25rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.125rem;text-transform:uppercase}p{font-size:1rem;line-height:1.6}p,ul{margin:0 0 1em}ul{padding:0 0 0 1em}ul li{font-size:1rem;line-height:1.6}