/* positioning elements */

body	{display:flex;flex-direction:column}
div.header	{display:flex;flex-flow:row wrap;justify-content:center;width:80%;margin:auto;align-items: center;}
img.logo	{order: 1; width: 15%;}
img.banner	{order: 3; width: 80%;}
h1.title	{order: 2;margin:5%;}
h1.custtitle	{order: 2; margin:5%;}
h2.subtitle	{order: 4;margin:5%;}
h3	{}


div.classification	{}
div.list	{display:flex;flex-flow:column wrap;height:300px;}



/* Medium screens */
@media all and (max-width: 1000px) {
  div.list {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    height:400px;
  }
}



/* Small screens */
@media all and (max-width: 600px) {
  div.list {
    /* On small screens, we are no longer using row direction but column */
    height:100%;
  }
}

a	{}


div.all	{}


/* color and appearance of elements */

div.header	{text-align: center;font-size:4em;}
img 	{}
h1	{font-size: 100%;font-family: 'Catamaran',sans-serif;}
h2	{font-size: 75%;font-family: 'Catamaran',sans-serif;}


h3	{padding:5px;margin:0;font-size:20px;font-family: 'Catamaran',sans-serif; color:rgb(68, 70, 70)}
div.classification	{margin: 8px 12px 16px;padding:12px 12px 24px;background-color:#efefef;}
a	{ font-size:16px; font-family: 'Roboto', sans-serif;padding:5px;}
a:link	{text-decoration:none; color:rgb(0,102,153);}
a:visited	{text-decoration:none; color:rgb(0,102,153);}
a:hover	{text-decoration:underline;}


div.all	{margin: 8px 12px 16px;padding:12px 12px 24px;background-color:#efefef;}