@charset "utf-8";
/* CSS Document */
/* Boton de menu responsivo */
.botonMenu {
	display:none;
	visibility:hidden;
    justify-content: center;
    align-items: center;
    width: 3rem;    
    height: 3rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: #0981AE; 
    border: 0;
	border-radius:50px;
    color: white;
    cursor: pointer;
	z-index:999999}
}
/* 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 */
nav.principal {
	visibility: hidden;
	display:none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 15rem;
    background-color:rgba(51,51,51,0.9);
    transform: translateX(100rem);
    transition: 1s all;
	z-index:1000000}

/* Estilos sencillos para decorar los links */
nav.principal ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
	text-align:center;
	color: #FFFFFF;
}
nav.principal li {
    display: block;
    color: #FFFFFF; /*color del texto dentro del menú*/
    padding:5%;
	text-align:center;
    transition: .5s all;
}
nav.principal li:hover {
    text-decoration: none;
	color:#FFF;
}

nav.principal a {color:#FFF; padding:1%}

nav.principal li {text-align:center; color:#FFF; padding-top:1%; padding-bottom:1%}

.sub-menu-movil {font-family: 'Questrial', sans-serif; font-size:80%}

.menu-movil-sep {clear:both; border:none; background-color:#0981AE; width:50%; height:2px; margin-left:auto; margin-right:auto; margin-bottom:4%}
.menu-movil-sep-inicio {clear:both; border:none; margin-bottom:5%}


@media all and (max-width:640px) {
.botonMenu {display:flex; visibility:visible}
nav.principal {visibility:visible; display:block; z-index:1000000}
ul li {list-style:none; display:inline-block; border-bottom:0}



.menu {visibility:hidden; display:none}*/
}

@media all and (max-width:520px) {
nav.principal {visibility:visible; display:block; z-index:1000000}
}

@media all and (max-width:480px) {
nav.principal {visibility:visible; display:block; z-index:1000000}
}

@media all and (max-width:360px) {
nav.principal {visibility:visible; display:block; z-index:1000000}
	
}