/*Controlling element flexibility challenge

Welcome to your first challenge! In this challenge you'll need to use the flex property to control the size of page regions. Take a moment to look through the HTML of the index.htm file. Understanding the structure of the page, and identifying flex containers and flex items will be crucial to knowing which selectors to write or modify. In each challenge you'll find a comment just like this one that outlines the goals of the challenge and provides you a set of tasks to perform.

1. Explore the structure of the "featured" article and "sidebar" aside elements, and their containing element (main). Using that structure as a guide, change the featured and sidebar elements to flex items and set their flex properties so that the featured element is 3 times the size of the sidebar element. If it's helpful, imagine the featured element taking up 9 columns of a 12 column layout and the sidebar element taking up 3. Be sure to style the parent main element so that featured and sidebar will be flex items.

2. Find the three articles in the "spotlight" section with the class attribute of "latest." Using the flex property ensure that each of these elements are the same size.

3. You should be able to perform each of these tasks using the existing selectors.

************** BONUS ****************
1. In the last step you used the flex property to make sure the latest articles were all the same size, did you need to do this?

2. Examine the styles in the small screen media query. When the layout switches to small screen sizes the 2 column layout of the featured and sidebar elements go back to a single column, yet you did not change their flex values. Why does this happen?

*/

/* -------------------------------------------------- 
   flexbox layout styles
-----------------------------------------------------*/
body {
	width: 50%;
	margin: 0 auto;
}
/* -------------------------------------------------- 
   top navigation styles
-----------------------------------------------------*/
nav ul {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
nav li {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
}
nav li.search-form {
	margin-left: auto;
	margin-right: 1em;
}
/* -------------------------------------------------- 
   header styles
-----------------------------------------------------*/
header hgroup {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
}
/* -------------------------------------------------- 
   main content styles
-----------------------------------------------------*/
section.main {
	margin-bottom: 2em;
}
.featured {
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}
.sidebar {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	margin-right: 2em;
} 
ul.social {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-around;
	-ms-flex-pack: justify;
	justify-content: space-around;
}
/* -------------------------------------------------- 
   spotlight content styles
-----------------------------------------------------*/
.spotlight {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.latest {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: column;
	-ms-flex-flow: column;
	flex-flow: column;
	flex-direction: column;
}
/* -------------------------------------------------- 
   footer  styles
-----------------------------------------------------*/
footer {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	min-height: 4em;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

/* -------------------------------------------------- 
   Smaller screen styles
-----------------------------------------------------*/
@media only screen and (max-width: 720px) {

/*set direction to single column, set ordinal values*/
body {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
nav {
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
}
header {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order:0;
}
.main {
	-webkit-order: 2;
	-ms-flex-order: 2;
	order:2;
}
.spotlight {
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}
footer {
	-webkit-order: 4;
	-ms-flex-order: 4;
	order: 4;
}

/* -------------------------------------------------- 
   top navigation styles
-----------------------------------------------------*/
nav ul {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
nav li.search-form {
	-webkit-order: -1;
	-ms-flex-order: -1;
	order: -1;
	margin: 0 0 2em;
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
}
/* -------------------------------------------------- 
  header styles
-----------------------------------------------------*/
header hgroup {
	-webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
/* -------------------------------------------------- 
   main content styles
-----------------------------------------------------*/
section.main {
	display: block;
	margin-bottom: 2em;
}
.sidebar {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-right: 0;
} 
.intro {
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 1;
	margin-top: 1em;
}
.social {
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	margin-top: 2em;
}
.newsletter {
	-webkit-order: 0;
	-ms-flex-order: 0;
	flex-order: 0;
	margin-bottom: 1em;
}
.events {
	-webkit-order: 1;
	-ms-flex-order: 1;
	flex-order: 1;
}
/* -------------------------------------------------- 
   spotlight content styles
-----------------------------------------------------*/
.spotlight {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.news {
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}
.course {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
}
.review {
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
}


}