@font-face {
    font-family: Pixel;
    src: url('../fonts/PixelPoint.ttf');
}

@font-face {
    font-family: Play;
    src: url('../fonts/Play-Regular.ttf');
}

.wrapper {
    text-align: center;
    width: 800px;
    margin: 0 auto;
}

.features {
    color: #000;
    text-align: left;
    font-size: 1.1em;
    line-height: 1.4em;
}

    .features ul {
        padding: 1.3em;
    }

    .features li {
        padding: 0.1em;
    }

.calc-main {
    margin: 5em 0;
}

.calc-sci {
    margin: 5em 0;
}

.info {
    text-align: left;
    margin: .8em auto;
    display: flex;
}

.des {
    color: #000;
    display: inline-block;
    margin: 3px 5px;
    padding: 0 10px 0;
    flex: 1;
}

.logo {
    margin-top: 10px;
    margin-left: 15px;
    margin-bottom: 5px;
    font-style: bold;
    font-weight: 700;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 2.7em;
    color: #000;
    -webkit-user-select: none;
}

.title {
    color: #000;
    font-size: 22px;
    text-align: center;
    margin: 2em 0;
}


.trigo-keys {
    text-align: center;
    width: 40px;
    height: 27px;
    font-size: 1em;
    color: #fff;
    margin: 3px;
    cursor: pointer;
    background: #2b4753;
    border: 1px solid #1a2f38;
    border-radius: 5px;
    display: inline-block;
    font-family: 'Play', 'Russo One', sans-serif;
    vertical-align: middle;
}


    .trigo-keys:hover {
        background: #345361;
        border: 1px solid #1a2f38;
        border-radius: 5px;
    }

    .trigo-keys:active {
        font-size: 1em;
        color: #000;
        background: #2b4753;
        border: 1px solid #000;
        border-radius: 5px;
    }

.keys {
    text-align: center;
    padding: 0px;
    color: #fff;
    font-family: 'Play', 'Russo One', sans-serif;
    font-size: 2em;
    cursor: pointer;
    margin: 1px;
    width: 62px;
    height: 50px;
    border: 2px solid #697394;
    border-top-left-radius: .6em;
    border-top-right-radius: .6em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    background: #8696a5;
    display: inline-block;
    vertical-align: middle;
}

    .keys:hover {
        color: #000;
        background: #91a4b5;
    }

    .keys:active {
        color: #000;
        background: #758492;
        border: 2px solid #3f4969;
    }

.keys2 {
    background: #4a5f73;
}

    .keys2:hover {
        background: #52687d;
    }

    .keys2:active {
        background: #425669;
        border: 2px solid #3f4969;
    }

.del-ac {
    background: #c86e78;
    width: 62px;
}

    .del-ac:hover {
        background: #da7d88;
    }

    .del-ac:active {
        color: #000;
        background: #bb626c;
        border: 2px solid #3f4969;
    }

.equal {
    width: 62px;
}

.calc-buttons {
    display: none;
}

.calc-blank {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
}

.v {
    font-size: 0.3em;
    color: #acb4c1;
    font-family: 'Play', 'Russo One', sans-serif;
}

.footer {
    text-align: center;
    width: 800px;
    margin: 2.5em auto;
    color: #acb4c1;
}

    .footer a {
        color: #000;
        text-decoration: none;
    }