a.menu-link 
{
	position: fixed;
	top: 0;
	right: 0;
	display: block;
	padding: 1rem;
}

nav[role=navigation] 
{
	-webkit-transition: all 0.3s ease-out;  
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.Js nav[role=navigation] {
	overflow: hidden;
	max-height: 0;
}

/* 2rem del nav que es el contenedor + 3rem por cada enlace */
nav[role=navigation].active 
{ 
	max-height: 26rem; 
}

nav[role=navigation] ul 
{ 
	border-top: thin solid #808080;
}

nav[role=navigation] li 
{
 	border-bottom: thin solid #808080;
}
	
@media screen and (min-width: 48em) 
{
	a.menu-link 
	{ 
		display: none; 
	}
	
	.Js nav[role=navigation] 
	{ 
		max-height: none;
	}
	
	nav[role=navigation] ul 
	{ 
		border: 0;
	}
			
	nav[role=navigation]  li 
	{ 
		display: inline-block;
		border: 0;
	}
}

nav
{
	background-color: #fff;
}


nav ul li a
{
	color: #7498C0;
	font-weight: 500;
	text-decoration: none;
	-ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    cursor: pointer;
}


nav ul li a:hover
{
	color: #1B365D;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,.9);
	-ms-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    font-size: 1.125rem;
    cursor: pointer;
}


.fa_Menu 
{
	color: #1B365D;
}

.fa_Menu:hover
{
	color: #7498C0;
}