@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 5
   Coding Challenge 1

   Author:  Edgar Ayala 
   Date:     
   Filename: code5-1_media.css

*/

article img {
  display: block; 
}

ul.submenu {
  text-align: left; 
}

nav {
  float: none;
  width: auto;
  height: auto;
  margin: 0;
}

ul.mainmenu {
  display: block; 
}

ul.mainmenu li {
  flex: none; 
}

@media (max-width: 500px) {
  article img {
    display: none; 
  }

  ul.submenu {
    text-align: center; 
  }
}

@media (min-width: 501px) and (max-width: 709px) {
  nav {
    float: left;
    width: 130px;
    height: 400px;
    margin: 30px 25px 0 0; 
  }
}

@media (min-width: 710px) {
  nav {
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
  }

  ul.mainmenu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
  }

  ul.mainmenu li {
    flex: 0 1 120px; 
  }
}