/* Desarrollado, implementado y/o adaptado por LUIS FERNANDO LEAL +573003030300 - luisfleal@yahoo.com - luisflealco@gmail.com */
/* Boton de menu */
.botonMenu {
    position: relative;
    right: 12px;
    display: flex;
    justify-content: center;
    width: 45px;
    height: 48px;
    background-color: #add9f5;
    border: 0;
    color: #0089e1;
    font-size: 48px;
    cursor: pointer;
}
/* Se le quita el borde azul cuando se pulsa en Chrome */
.botonMenu:focus {
    outline: none;
}
/* Cuando es pulsado, se quita el translate que lo ocultaba */
.botonMenu:focus + .principal {
    transform: translateX(0rem);
}
/* Se posiciona y se oculta con translate */

.enlaceLetras {
    text-decoration: none;
    font-size: 0.8rem;
}

nav.principal {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 19rem;
    background-color: #add9f5;
    transform: translateX(19rem);
    -webkit-transform: translateX(19rem);
    -ms-transform: translateX(19rem);
    transition: 1s all;
    z-index: 9999;
}
/* Estilos sencillos para decorar los links */
nav.principal ul {
    font-size: 0.95em;
    line-height: 1.2em;
    padding: 0px;
    list-style: none;
}

nav.principal li{
    margin-bottom: 0.5em;
}

nav.principal a {
    padding-top: 0.5em;
    padding-left: 1em;
    padding-bottom: 0px;
    display: block;
    color: #7c00ff;
    transition: .5s all;
    text-decoration: none;
}
nav.principal a:hover {
    text-decoration: none;
    background-color: #2ccdff;
}

.opcionMenu {
    float: left;
    position: relative;
    margin: 5px 5px 5px 5px;
    width: 45px;
    height: 45px;
}

.imagenMenu{
    height: 47px;
    max-width: 47px;
}