@charset "utf-8";
/* CSS Document */
/* Boton de menu responsivo */
.botonMenu {
	display:block;
	visibility:visible;
    justify-content: center;
    align-items: center;
    width: 3rem;    
    height: 3rem;
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: #F4A6B0; 
    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: visible;
	display:block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25%;
    background-color:rgba(0,0,0,0.85);
    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%; text-decoration:none}

nav.principal li {text-align:center; color:#FFF; padding-top:1%; padding-bottom:1%; font-family: 'Questrial', sans-serif; text-decoration:none}

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

.menu-movil-sep {clear:both; border:none; background-color:#F4A6B0; width:30%; height:2px; margin-left:auto; margin-right:auto; margin-bottom:8%; margin-top:5%}
.menu-movil-sep-inicio {clear:both; border:none; margin-bottom:20%}


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

}

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

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

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