@charset "utf-8";


/* Import Basic Design Styles  */

@import url("w_designs.css");

/* ===============================
	General Styles for All Devices
   ===============================
*/
nav#bottom {
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	
	-webkit-justify-content: center;
	justify-content: center;
}

nav#bottom ul {
	-webkit-flex: 0 1 250px;
	flex: 0 1 250px;
	
}


/* ===============================
	Mobile Styles up to 480 pixels
   ===============================
*/
@media screen and (max-width: 280px)  {

body {
	color: rgb(211, 211, 211);
	background-color: rgb(51, 51, 51);
}

aside, article img, section#spotlight {
	display: none;
	
}

nav#top ul{
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

nav#top ul li {
	font-size: 2.2em;
	
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px;
	
}
p#links {
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

p#links a {
	color: white;
	background-color: rgb(220, 27, 27);
	text-decoration: none;
	border-radius: 20px;
	padding: 10px;
	
}


}	



/* ============================================
	Tablet and Desktop Devices: 481px or more 
   ============================================
*/
@media screen and (min-width: 281px) {

body {
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

article {
	-webkit-flex: 2 1 400px;
	flex: 2 1 400px;
}

aside {
	-webkit-flex: 2 1 200px;
	flex: 2 1 200px;
}

nav#top ul {
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	
	background-color: rgb(51, 51, 51);
	height: 50px;
	justify-content:  center;
	align-items:   center;
}

nav#top ul li {
	-webkit-flex: 0 1 140px;
    flex: 0 1 auto;
    padding-left: 10px;
    padding-right: 10px;
}
 p#links {
	 display: none;
 }


}