@charset "utf-8";

header {
   width: 100%;
}

body {
   display: flex;
   flex-flow: column nowrap;
}

@media only screen and (max-width: 500px) {
   
   nav {
      order: 3;
   }
   
   section img {
      display: none;
   }
   
   iframe {
	   display: none;
   }
}

@media only screen and (min-width: 501px) and (max-width: 800px) {
   body {
      flex-flow: row wrap;
   }
   
   header {
      flex: 0 0 100%;
   }
   
   nav {
      flex: 1 3 50px;
   }
   
   section {
      flex: 3 1 150px;
      padding-left: 30px;
   }
   
   section img {
      display: block;
   }
}

@media only screen and (min-width: 801px) {
   
   nav ul {
      display: flex;
      justify-content: center;
   }

   nav ul li {
      flex: 0 1 60px;
   }

}