@charset "utf-8";
/* CSS Document */
#encabezado {
	position: sticky;
	top: 0px;
	z-index: 10;
	width: 100%;
	background-color: black;
	padding: 0px;
}
#encabezado > img {
	height: 8em;
	width: auto;
}
#navegador {
    display: flex;
}
#navegador a {
    flex-grow: 1;
    text-align: center;
    background-color: black;
    color: white;
    padding: .25em .5em .25em .5em;
    text-decoration: none;
    transition: color .3s ease-in-out 0s, background-color .3s ease-in-out 0s;
}
#navegador a:hover {
    color: black;
    background-color: white;
    
}
#iconoabrir, #iconocerrar {
    height: 1.5em;
    position: fixed;
    top: 1.5em;
    right: 1em;
    z-index: 11;
    display: none;
	filter: invert(100%);
}
#iconocerrar {
    z-index: 13;
}

@media (max-width: 900px) {
	#encabezado > img {
	height: 5em;
	width: auto;
	}
}
@media (max-width: 550px) {
   #encabezado > img {
		height: 4em;
		width: auto;
    }
  	#iconoabrir {
       display: block;
    }
   #navegador {
        position: fixed;
        top:0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        z-index: 12;
        flex-direction: column;
        justify-content: space-around;
        background-color: black;
        padding-top: 4em;
        align-items: center;
        opacity: 0;
        transform: translateX(-100%);
        transition: opacity .75s ease-in 0s, transform .75s ease-in 0s;
	}
    #navegador.menuabierto {
        transform: translateX(0vw);
        opacity: 1;
    }
    #navegador a {
        flex-grow: 0;
        font-size: 1.5em;
    }
    #iconocerrar.menuabierto {
        display: block;
	}
}
@media (max-width:370px) {
	#encabezado > img {
		height: 3em;
		width: auto;
    }
	#iconoabrir, #iconocerrar {
    	height: 1em;
   		top: 1em;
    	right: 1em;
    }
}
@media (max-width:320px) {
	#encabezado > img {
		height: 2em;
		width: auto;
    }
	#iconoabrir, #iconocerrar {
    	height: 1em;
   		top: 1em;
    	right: 0.5em;
    }
}