cwsvJudo/homepage/redesign2018/markdownExperiment/src/cwsvJudo-2018-mainNav.css

#mainNav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	font-family: 'Orbitron-Medium', sans-serif;
/*	line-height: 1.6;*/
	margin: .5em 0;
	padding: 0;
	border: 1px solid #a2a2a2;
	background-color: #FF8100;
	border-radius: .25em;
}

#mainNav > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #34495e;
	text-decoration: none;
	padding: 1em 1.5em;
	text-transform: uppercase;
}

#mainNav > a > span:nth-child(1){
	flex-basis: 38.2%;
	display: flex;
	align-items: center;
}
#mainNav > a > span:nth-child(2){
	padding-top:.2em;
}

#mainNav > a > span > amp-img{
	max-width: 2em;
}

#mainNav > a > span > img{
	height: 2em;
	width: auto;
}

#mainNav a:hover {
	background-color: #FFAE00;
	color: #718daa;
}




/* ================================= 
  Media Queries
==================================== */




@media (min-width: 640px) {
	#mainNav {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	#mainNav > a{
		padding: .5em .5em;
	}
	#mainNav > a > amp-img,
	#mainNav > a > img{
		display: none;
	}
	#mainNav > a > span{
		display: initial;
	}
	#mainNav > a > span:nth-child(1){
		flex-basis: initial;
	}
}


@media (min-width: 1280px) {
	#mainNav{
		flex-direction: row;
		justify-content: center;
	}
	#mainNav > a {
		padding: 1em 1.5em;
	}
	#mainNav > a > amp-img,
	#mainNav > a > img{
		display: initial;
	}
}