@charset "UTF-8";
/* CSS Document */

body  {
	background-color:#002e3f;
}

.flex-container {
	display:flex;
	flex-direction:column;
	max-width: 1200px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0 auto auto;
}

header {
  display:flex;
	justify-content:space-between;
	background-color:#a9cbe9;
	padding:.8em;
	text-align:center;
  border-bottom: 1px solid black;
}

header ul li {
	list-style-type:none;
}
		
nav  {
	color:rgb(255, 255, 255);
	background-color: #174d82;
	padding:0.2em;
	font-size:0.8em;
}

nav ul {
	display:flex;
	justify-content:center;
	padding-inline-start: 12px;
}
		
nav ul li {
	list-style-type:none;	
	margin-right:1.8em;	
}

.footer-column-left {
  flex: 42.5% 0;
  padding: 10px 20px 10px 0;
  text-align: left;
  order: 1;
}

.footer-column-right {
  flex: 55%;
  padding: 10px 0 10px 5px;
  text-align: left;
  order: 9;
  align-self: center;
}

.column-main a {
  color: rgb(56, 56, 163);
  text-decoration: none;
  font-weight: bold;
}

.row {  
  display: flex;
  flex-direction:row;
}

.column-left {
  flex: 33%;
  background-color: #85b5e0;
  padding: 0 15px 0;
  order:1;
}	

.column-mid {
  flex: 33%;
  background-color:#6eb6d0;
  padding: 0 15px 0;
  order:5;
}	

.column-main {
  flex: 70%;
  background-color:  rgba(255, 255, 255, 0.951);
  padding: 0 15px 0;
  order: 5;
}

.column-main-right {
  flex: 30% 0;
  min-width: 290px;
  background-color: #5aaed2;
  padding: 0 15px 0;
  order:9;
}

.column-right {
  flex: 33%;
  background-color: #5aaed2;
  padding: 0 15px 0;
  order:9;
}	

footer  {
	color:white;
	background-color:#197e6a;
	text-align:center;
  border-top: 1px solid black;
  padding: 0px 15px 0;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
} 

figure {
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-self: center;
  max-width: 400px;
  text-align: center;
  background-color:rgb(21, 125, 177);
  padding: 10px 10px 0px 10px;
}

figure img {
  height: 100%;
  width: 100%;
  max-width: 400px;
}

#figattribution {
  padding: 4px 0 0 0;
  font-size: .7em;
  color: white;
}

figcaption {
  padding: 10px 0;
  color: white;
}

form {		
	display: flex;
  background-color: #9abfdf;
	flex-direction: column;
  padding: 0.5em;
  border: 1px solid rgb(119, 119, 228);
  border-radius: 10px;
  margin-bottom: 20px;
}

.flex-form {
	display: flex;
	margin-bottom:0.3em;
}

.flex-form label {
  text-align: right;
  flex: .25;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.flex-form input, select, textarea {
  flex: 0.55;
  background:rgb(206, 228, 239);
  border-radius: 5px;
}

.flex-buttons {
  display: flex;
  justify-content: center;
}

.flex-radio {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 1.8em;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.flex-radio label {
  padding-right: 1.8em;
}

textarea {
  height: 100px;
}

fieldset {
  display: flex;
  flex-direction: column;
  margin: 0.5em;
  padding: 0.5em;
}

@media screen and (max-width: 800px) {
  .row, nav ul, .row-above {   
    flex-direction: column;}
  .column-main  {order:1;}
  .column-left  {order:1;}
  .column-right {order:9;}

  .column-mid {
    order:5;
  }
  .column-main-right {
    order:5;
  }
    
  .column-right {
    order: 9;
  }

  nav {
    font-size: 1.5em;
    padding: 0px 10px;
  }

  nav ul li {
    padding: 0 0 2px 5px;
    margin: 2px 15px 0 0;
  }

  .footer-column-left {
    padding-bottom: 5px;
    text-align: center;
  }

  .footer-column-right {
    padding-top: 0px;
    padding-left: 0px;
    text-align: center;
  }
}

@media screen and (max-width: 500px) {
  .flex-form label {
    flex: .45
}
}