@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?icub8d');
    src: url('../fonts/icomoon.eot?icub8d#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?icub8d') format('truetype'),
        url('../fonts/icomoon.woff?icub8d') format('woff'),
        url('../fonts/icomoon.svg?icub8d#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-total:before {
    content: "\e921";
    font-size: 4rem;
}

.icon-importe:before {
    content: "\e93c";
    font-size: 4rem;
}

.icon-haz-retirado:before {
    content: "\e93f";
    font-size: 4rem;
}

.icon-movil:before {
    content: "\e958";
    font-size: 4rem;
}

.icon-ayuda:before {
    content: "\e987";
}

.icon-retirar:before {
    content: "\e9c5";
    font-size: 4rem;
}

.icon-ingresar:before {
    content: "\e9c6";
    font-size: 4rem;
}

.icon-salir:before {
    content: "\ea0f";
}


body {
    font-family: 'Montserrat', sans-serif;
}

.container {
    display: grid;
    grid-template-rows: 29vh 33vh 33vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "branding title buttons"
        "remove mobile balance"
        "deposit revenue result";
    text-align: center;
    grid-gap: 7px;
    margin: 10px;
    color: white;
}

.branding {
    justify-self: center;
    margin: 0;
    grid-area: branding;
}

.branding img {
    height: 100%;
    vertical-align: top;
}

.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    grid-area: title;
}

h1 {
    white-space: nowrap;
    color: #243743;
}

h2 {
    font-weight: 300;
    color: #243743;
}

.buttons {
    align-self: center;
    grid-area: buttons;
}

.help {
    -webkit-box-shadow: 1px 1px 0px 1px #e0e0e0;
    box-shadow: 1px 1px 0px 1px #e0e0e0;
    background-color: #ffffff;
    border-radius: 2px;
    border: 1px solid #243743;
    display: inline-block;
    cursor: pointer;
    color: #243743;
    font-family: Arial;
    font-size: 20px;
    padding: 32px 36px;
    text-decoration: none;
    margin: 2px;
}

.help:active {
    position: relative;
    top: 3px;
}

.exit {
    -webkit-box-shadow: 1px 1px 0px 1px #e0e0e0;
    box-shadow: 1px 1px 0px 1px #e0e0e0;
    background-color: #ffffff;
    border-radius: 2px;
    border: 1px solid #243743;
    display: inline-block;
    cursor: pointer;
    color: #243743;
    font-family: Arial;
    font-size: 20px;
    padding: 32px 36px;
    text-decoration: none;
    margin: 2px;
}

.exit:active {
    position: relative;
    top: 3px;
}

.item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-radius: 2px;
    cursor: pointer;
}

.remove {
    background-color: #28B78D;
    grid-area: remove;
}

.mobile {
    background-color: #28B78D;
    grid-area: mobile;
}

.balance {
    background-color: #28B78D;
    grid-area: balance;
}

#saldo {
    border: 2px solid white;
    padding: 10px;
    margin: 0;
}

.deposit {
    background-color: #243743;
    grid-area: deposit;
}

input[type=number] {
    border-radius: 2px;
    background-color: transparent;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 1px solid #ffffff;
    cursor: pointer;
    color: #ffffff;
    font-size: 17px;
    padding: 16px 20px;
    text-decoration: none;
    outline: none;
    margin: 5px;
}

input[type=button] {
    border-radius: 2px;
    background-color: transparent;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border: 1px solid #28B78D;
    cursor: pointer;
    color: #28B78D;
    font-size: 17px;
    padding: 16px 20px;
    text-decoration: none;
    outline: none;
    margin: 5px;
}

input[type=button]:active {
    position: relative;
    top: 3px;
}

.revenue {
    background-color: #243743;
    grid-area: revenue;
}

.result {
    background-color: #243743;
    grid-area: result;
}

#resultado {
    margin: 0;
}

#resultado p {
    margin: 10px;
}

@media screen and (max-width: 1380px) {

    input[type=number],
    input[type=button] {
        padding: 10px;
        margin: 5px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "branding title"
            "remove mobile"
            "balance revenue"
            "deposit deposit"
            "result buttons";
    }

    .remove {
        background-color: #243743;
    }

    .mobile {
        background-color: #243743;
    }

    .revenue {
        background-color: #28B78D;
    }

    .result {
        background-color: #28B78D;
    }

    .buttons {
        -ms-flex-item-align: auto;
            align-self: auto;
        background-color: #28B78D;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .help,
    .exit {
        border: 2px solid white;
        background-color: transparent;
        -webkit-box-shadow: none;
                box-shadow: none;
        color: white;
        font-weight: 700;
        margin: 8px;
    }
}

@media screen and (max-width: 560px) {
    .container {
        grid-template-rows: repeat(9, 1fr);
        grid-template-columns: 1fr;
        grid-template-areas: "title"
            "remove"
            "mobile"
            "balance"
            "revenue"
            "deposit"
            "result"
            "buttons"
            "branding";
    }

    h1 {
        margin: 0;
    }

    h2 {
        margin-bottom: 0;
    }

    label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }


    .mobile {
        background-color: #28B78D;
    }

    .balance {
        background-color: #243743;
    }

    .buttons {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        background-color: #243743;
    }
}