@font-face {
    font-family: 'Hack';
    src: local('Hack Regular'), local('Hack-Regular'),
        url('../fonts/Hack-Regular.woff2') format('woff2'),
        url('../fonts/Hack-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Hack';
    src: local('Hack Bold'), local('Hack-Bold'),
        url('../fonts/Hack-Bold.woff2') format('woff2'),
        url('../fonts/Hack-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}


* {
    font-family: Hack, Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; font-weight: 200;
}

html {
    background: #fbfbfc;
}

html, body {
    margin: 0; padding: 0; width: 100%; text-align: center;
}

div {
    box-sizing: border-box;
}

#octal {
    font-size: 4em;
    font-weight: 400;
    text-align: center;
    display: block;
    width: 200px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #999;
    color: #111;
    margin: 10px auto;
    padding: 2px 10px;

}

#system {
    margin: 20px;
    font-size: 1.5em;
    opacity: 0.5;
}

#system span.selected {
    background-color: #ffe787;
}

.container {
    display: block;
}

.inner-container {
    width: 540px;
    display: inline-block;
    padding: 15px;
}

.inner-item{
    display: block;
}

#calculator .calc-head, #calculator .calc-btn {
    display: block;
    float: left;
    width: 140px;
    padding: 13px;
    margin: 15px;
    border: 1px solid #dfdfbf;
    cursor: pointer;
    font-size: 1em;
}

#calculator div.calc-head {
    padding: 0 13px;
    border: 0;
    font-weight: 600;
}

#calculator div.calc-btn{
    background: #fff;
}

#calculator div.calc-btn div{
    opacity: 0.5;
    font-size: 0.8em;
    margin: 5px;

}

#calculator div.calc-btn:hover{
    background-color: #ffe787;
    border: 1px solid #ffcc00;
}

#calculator div.selected{
    background-color: #9cd9ff !important;
    border: 1px solid #009dff;
}

.ad-row img {
    max-width: 510px;
    height: auto;   
}