* {
	box-sizing: border-box;
}

body { 
	font: 19px arial, sans-serif;
	line-height: 1.35;
	color: #445664; 
	background-image: url(../media/backgroundreal.png);
    background-repeat: repeat-y;
    background-position: right;
    overflow-x: hidden;
 
	letter-spacing: 1.5px
	}

blockquote { 
	font: 16px Verdana, sans-serif;
	font-weight: 700;
	line-height: 1.35;
	color: #445664;  
	}
figcaption {
	font: 16px Verdana, sans-serif;
	line-height: 1.35;
	color: #445664; 
	font-style: italic;
}
h1 { 
	font: 3em Verdana, sans-serif;
	font-weight: 700;
	letter-spacing: 1px; 
	color: #2B4162;
	text-align: center;
}


h2 { 
	font: 2.3em Garamond, sans-serif;
	letter-spacing: 1px;
	font-weight: 700; 
	color: #6E675F;
}
h3 { 
	font: 1.3em Verdana, sans-serif;
	letter-spacing: 1px; 
	color: #2B4162;
}

a:link { 
	font-weight: 700; 
	text-decoration: none; 
	color: #6E675F;
	font-style: italic;
}
a:visited { 
	font-weight: 700; 
	text-decoration: none; 
	color: #6E675F;
	font-style: italic;
}
a:hover, a:focus, a:active { 
	text-decoration: underline; 
	color: #2B4162;
	font-style: italic;
}

.wrapper { 
	padding: 0 175px 0 110px;  
	margin: 0px; 
	position: relative;
	min-width: 580px;
	}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.clear-floats {
	clear: both;
}
.smaller {
	font-size: 75%;
}
.main-content {
 	width: 70%;
 	float: left;
 }
.sidebar {
 	width: 30%;
 	float: left;
 }
.group:after {
 	content: "";
  	display: table;
  	clear: both;
 }
 .color-box-group {
width: 20%; 
float: left; }

.color-box1 { height: 5em;
background-color: #445664; 
 }
 .color-box2 { height: 5em;
background-color: #2B4162; 
 }
 .color-box3 { height: 5em;
background-color: #6E675F; 
 }
 .color-box4 { height: 5em;
background-color: #DDDDDD; 
 }
 .color-box5 { height: 5em;
background-color: #D2E4DF; 
 }

table {
    font-family: arial, sans-serif;
    border: #D2E4DF;
    width: 100%;
}

td {border: #D2E4DF;
	color: #445664;
    text-align: center;
    padding: 8px;
}
th {font: 1.6em georgia, serif;
	color: #2B4162;
    text-align: center;
    padding: 8px;
    border: #D2E4DF;
}

tr:nth-child(odd) {
    background-color: #dddddd;
}
.button-blue, .button-blue:visited {text-decoration: none;
background: dodgerblue;
color: white;
padding: 15px;
}

.button-grey {text-decoration: none;
background: #DDDDDD;
color: #2B4162;
padding: 15px;
margin-right: 25px;
display: inline-block;
}

nav.bottom-links {
	
	padding: 20px;
	text-align: center;
	width: 100%;

}

nav.bottom-links a{
	color:#6E675F;
	text-decoration: none;
	padding: 15px;
	margin-right: 25px;
	margin-top: 15px;
	border-radius: 25px;
	border: 5px solid #6E675F;
	display: inline-block;
}

nav.bottom-links a:hover{
	color: #2B4162;
	background-color: #dddddd;
	border: solid 5px #6E675F;
}

nav.dropdown-option {
	word-wrap: break-word;
	color:#6E675F;
	text-decoration: none;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-right: 10px;

	
}

nav.dropdown-option ul{
	padding: 0px;
	margin: 0px;
	list-style: none;
	position: relative;


}


nav.dropdown-option ul li{
	background-color: #e8f1ee;
	display: inline-block;
	width: 175px;	
}

nav.dropdown-option a{
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #2B4162;
	text-decoration: none;
	border: 5px solid #2B4162;
	text-align: center;
	
}

nav.dropdown-option a:hover{
	color: #445664;
	background-color: #dddddd;
	border: solid 5px #6E675F;
	
}

 /* Hide dropdowns by default */
nav.dropdown-option ul ul {
display: none;
position: absolute;
top: 74px; /* the height of the main nav */
font-size: 13px;
}

/* Display Dropdowns on Hover */ nav.dropdown-option ul li:hover > ul {
           display:inherit;
         }

/* First Tier Dropdown */
         nav.dropdown-option ul ul li {
           width:150px;
           float:none;
           display:list-item;
           position: relative;
        background-color: #fdfffe;
}

/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' '; }
li > a:only-child:after { content: ''; }

/* Site Wrapper - Everything that isn't navigation */ .site-wrap {
/* Critical position and size styles */ min-height: 100%;
min-width: 100%;
background-color: #ffffff; /* Change to the background colour of your website */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  background-image: url(../media/backgroundreal.png);
    background-repeat: repeat-y;
    background-position: right;
z-index: 1;
/* non-critical appearance styles */ padding: 0;
}

img.right {float: right;
	margin-left: 15px;
	height: 75%;
}
img.left {float: left;
	padding-left: 15px;
}
img#right-head {float: right;
	padding-right: 15px;
	position: relative;
	right:150px;
}
img#left-head {float: left;
	padding-left: 15px;
	position: relative;
	left: 150px;
}


.footer {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #D2E4DF;
   color: #6E675F;

}
.footer-left {
	padding: 10px;
	text-align: left;
}

img#foot {float: right;
position: relative;
right: 12px;
top: 7px;
bottom: 7px;}


/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #2B4162;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #6E675F;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #D2E4DF;
    padding: 20px;
}

label{
	color: #2B4162;
}

textarea#subject {height: 200px;}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 43%;
    padding-right: 18px;
}
.column2 {
    float: right;
    width: 53%;
    padding-right: 18px;
    
}
.column-about {
    float: left;
    width: 46%;
    padding-right: 18px;
}
.column2-about {
    float: right;
    width: 50%;
    padding-right: 24px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}


@media only screen and (min-width: 1141px) {
  nav.bottom-links {
    font-size: 19px;
  }
}


@media only screen and (max-width: 1140px) {
  nav.bottom-links {
    font-size: 14px;
  }
}

@media only screen and (max-width: 990px) {
  nav.bottom-links {
    font-size: 11px;
  }
}





@media only screen and (min-width: 1131px) {
  div.footer-left {
    font-size: 19px;
  }
}
@media only screen and (max-width: 1130px) {
  div.footer-left {
    width: 70%;
    font-size: 16px;
  }
}
@media only screen and (max-width: 950px) {
  div.footer-left {
    font-size: 12px;
  }
}

@media only screen and (min-width: 1401px) {
  p#help-links {
    font-size: 19px;
  }
}
@media only screen and (max-width: 1400px) {
  p#help-links {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1230px) {
  p#help-links {
    font-size: 10px;
  }
}

p#help-links {
	text-align: center;
	padding-bottom: 25px;
}

@media only screen and (max-width: 1330px) {
  img.right {
    width: 60%;
  }
  img.home-middle {
  	width: 75%;
  }
}

.clearfix {
    overflow: auto;
    margin-right: 5px;
    padding-right: 5px;
}

img.home-middle {
	display: block;
    margin: 0 auto;
}


@media only screen and (max-width: 700px) {
  body {
    font-size: 16px;

  }
  h1 {
  	font-size: 2.5em;
  }
  h2 {
  	font-size: 1.7em;
  }
  h3 {
  	font-size: 1em;
  }
}

@media only screen and (max-width: 900px) {
nav.bottom-links{
	width: 40%;
}
}

@media only screen and (max-width: 980px) {
div.footer-left {
	width: 70%;
}
}

@media only screen and (max-width: 1040px) {
a.button-grey{
	width: 40%;}
}