@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,700,300);table .content{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between}table .content .symbol{font-size:2.7vw;line-height:1;font-weight:bolder}table .content .mass,table .content .symbol{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}table .content .mass{font-size:1.2vw;margin-bottom:.1vw}table .content .number{font-size:1vw;line-height:1;font-weight:bolder;margin:.2vw 0 0 .2vw}table{width:100%;margin-top:70px;border-collapse:collapse}table .collapse:after{margin-top:50%}table td{width:5.39%;position:relative}table td:after{content:'';display:block;margin-top:100%}table td:hover .symbol{color:#fff}table .type-alkali-metal{background-color:#f6f181}table td:hover.grayscale.type-alkali-metal .symbol{color:#f6f181}table .type-alkaline-earth{background-color:#fdce8f}table td:hover.grayscale.type-alkaline-earth .symbol{color:#fdce8f}table .type-transition-metal{background-color:#efade2}table td:hover.grayscale.type-transition-metal .symbol{color:#efade2}table .type-post-transition-metal{background-color:#93f3c3}table td:hover.grayscale.type-post-transition-metal .symbol{color:#93f3c3}table .type-metalloid{background-color:#f7a5a5}table td:hover.grayscale.type-metalloid .symbol{color:#f7a5a5}table .type-other-nonmetal{background-color:#acd6fa}table td:hover.grayscale.type-other-nonmetal .symbol{color:#acd6fa}table .type-halogen{background-color:#aea4fa}table td:hover.grayscale.type-halogen .symbol{color:#aea4fa}table .type-noble-gas{background-color:#a1f99d}table td:hover.grayscale.type-noble-gas .symbol{color:#a1f99d}table .type-lanthanoid{background-color:#d6d6d6}table td:hover.grayscale.type-lanthanoid .symbol{color:#d6d6d6}table .type-actinoid{background-color:#a7a7a7}table td:hover.grayscale.type-actinoid .symbol{color:#a7a7a7}table .element{cursor:pointer}.data-bar{background:hsla(0,0%,100%,.9);color:#444;width:100vw;height:70px;position:fixed;top:0;left:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:1}.data-bar .center{-ms-flex-positive:1;flex-grow:1;text-align:center;overflow-x:auto}.data-bar .center .mass{font-weight:bolder;color:#6a6a6a;font-size:1.3em;letter-spacing:.05em}.data-bar .center .compound{font-weight:300;letter-spacing:.1em}.data-bar .center .compound span{letter-spacing:.05em;font-weight:400;font-size:.75em}.data-bar .center .compound-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.data-bar .center .fa-pencil{color:#bbb;padding:2px;margin-left:5px;cursor:pointer}.data-bar .center .fa-pencil:hover{color:#444}.data-bar button{margin-right:1%;cursor:pointer;height:55px;color:#444;font-size:.9em;background-color:transparent;outline:none;font-weight:600;border:none;padding:0 1em}.data-bar button:hover{color:hsla(0,84%,75%,.8)}.data-bar button:active{color:#f58989}.percentages{font-size:.85em;color:#444;overflow-x:auto;white-space:nowrap}.percentage-group{margin-right:.3em}.percentage-value{font-weight:300}#compound-input{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:.1em;outline:none}#compound-input,footer{font-weight:300;font-size:.8em}footer{text-align:center;margin:3%;color:#444}footer a{text-decoration:none;color:#47a5f4}footer a:hover{color:#8fc8f8}@media (min-width:700px){footer{font-size:1em}}.footer-heart{font-style:normal;color:#cb6773}.footer-brand{color:#333;text-decoration:none}.footer-brand:hover{text-decoration:underline}.footer-brand-emphasis{color:#1abc9c;font-weight:700}body,html{height:100%}body{color:#444;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}#wrapper{-ms-flex:1 0 auto;flex:1 0 auto}#app{margin:1%}.grayscale{background:#fff!important}.grayscale:hover{color:#444!important}