* {
    margin: 0;
    padding: 0;
}

#container {
    margin: 100px auto;
    width: 688px;
}


.teclado {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "montserrat-1";
}

.teclado li {
    float: left;
    margin: 0 3% 3% 0;
    width: 30%;
    height: 2.2em;
    padding-top: 3%;
    line-height: 40px;
    text-align: center;
    background: #BED6F0;
    color:#3D7DD3;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}


.capslock,
.tab,
.left-shift {
    clear: left;
}

.teclado .tab,
.teclado .delete {
    width: 30%;
    height: 2.2em;
}

.teclado .capslock {
    width: 80px;
}

.teclado .return {
    width: 77px;
}

.teclado .left-shift {
    width: 95px;
}

.teclado .right-shift {
    width: 109px;
}

.lastitem {
    margin-right: 0;
}

.uppercase {
    text-transform: uppercase;
}

.teclado .space {
    clear: left;
    width: 681px;
}

.on {
    display: none;
}

.teclado li:active {
	background: #2196F5 !important;
}