@charset "utf-8";

html {
  background: #fff;
  color: #777;	
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 1em auto;
  max-width: 95em auto;
}

h1, h2, main, aside, main svg {
  padding: 0.1em;
  margin: 0.1em;
}

h1, h2 {
  color: #888;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

article img {
  width: 40%;
  float: right;
  padding: 1px; 
  margin-left: 0.2em;
  border-color: slategray;
  border-width: 2px;
  border-style: solid;
}

figure {
  display: inline-block;
  width: 30%;
  margin: 0.1em;
}
figure img {
  width: 100%;
}
figure figcaption {
  font-style: italic;
}

figure.partner img {
transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
}

figure.partner img:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(2.0, 2.0);
 -moz-transform: scale(2.0, 2.0);
 -webkit-transform: scale(2.0, 2.0);
 -o-transform: scale(2.0, 2.0);
 -ms-transform: scale(2.0, 2.0);
}

section {
  border-color: slateblue;
}

nav a {
  background: radial-gradient(hsl(73,1%,95%), transparent 55%);
  color: darkblue;
}

nav a:hover, nav a:focus {
  background: radial-gradient(hsl(73,1%,85%), transparent 65%);
}

nav a[aria-current=page] {
	color: black;
	border-color: white;
}

ul a {
  background: radial-gradient(hsl(73,1%,95%), transparent 55%);
  color: darkblue;
}

ul a:hover, ul a:focus {
  background: radial-gradient(hsl(73,1%,85%), transparent 65%);
}

ul a[aria-current=page] {
	color: black;
	border-color: white;
}

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

header, nav, nav a, article, section, aside, footer {
  padding: 0.5em;
  margin: 0.5em;
  flex: 1 100%;
}

#cookies {
  display: flex;
  flex-flow: column;
  padding: 1px;
  margin: 1px;
  color: #343434;
}
#cookies * {
  flex: 1 1 0%;
  padding: 1px;
  margin: 1px;
}

.shadowbox {
  max-width: 900px;
  margin: auto;
  border: 2px solid#888888;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

#one {
  position: sticky;
  color: slategray;
  top: 100px;
  left: 100px;
  background: withe;
}

#one p {
  text-align: center;
  font-size: 1.2rem;
}

#two {
  position: sticky;
  color: slategray;
  top: 100px;
  left: 100px;
  background: withe;
}

#two p {
  text-align: center;
  font-size: 1.3rem;
}

.forecast > h1, h2, h3 {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}


header {
  display: flex;
  flex-flow: row wrap;
  
}
header * {
  flex: 1 1 0%;
  padding: 1em;
}

header img {
  flex: 0 0 159px;
  margin-right: 20px;
}

header nav {
  flex: 1 1 100%;
}
nav, nav ul, nav li{
  margin: 0;
  padding: 0;
  border: none;
}
nav ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}
nav li {
  list-style-type: none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}
nav a {
  display: inline-block;
  width: 100%;
  margin: 0;
  text-decoration: none;
  text-align: center;
  color: darkblue;
}
ul {
  flex: 1 1 100%;
}
ul {
  margin: 0;
  padding: 0;
  border: none;
}
ul {
  display: block;
  flex-direction: column;
  width: 100%;
}
ul li {
  list-style-type: none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}
ul a {
  display: block;
  width: 100%;
  margin: 0;
  text-decoration: none;
  text-align: center;
  color: darkblue;
}

hr.style-four {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

footer {
  display: flex;
  flex-flow: row wrap;
  background: #fff;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p {
  text-align: right;
}

@media all and (min-width: 35em) {
header img {
  margin-right: 50px;
}
nav ul {
  flex-direction: row;
}
nav li {
  margin: 0 1em;
  flex: 1 1 0%;
}
article {
  order: 2;
}
#news {
  flex: 1 auto;
  order: 3;
  text-align: left;
}
aside {

  flex: 1 auto;
  order: 4;
}
footer {
  order: 5;
}
}

@media all and (min-width: 50em) {
 article {
  order: 3;
  flex: 2 1 0%;
}
aside {
  flex: 1 1 0%;
  text-align: center;
}
#news {
  flex: 1 1 0%;	
  order: 2;
  align-self: left;
  height: 35em;
}
}

@keyframes ants { to { background-position: 100% 100% } }

article {
	padding: 1em;
	border: 0.3em dashed;
	background: padding-box,
}

table, th, td { 
  word-wrap: break-word;
  table-layout: fixed;
  width: 100%;
  border: 1px solid; 
  border-collapse: collapse; 
  color: hsl(205,18%,60%);
}

th, td {
    overflow: hidden;
	padding: 1em;
	color: slategray;
}

th {
	background: hsl(205,18%,86%);
	color: dimgray;
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}