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

body {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	color: #ffffff;
	background-color: #393C41;
	margin: 0;
	padding-top: 0;

}

#header {
	background-color: #282A2E;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0 0 0.5em 0;
	margin: 0;
	border-bottom: 1px dotted #333333;

}

#logo {
	padding: 0.75em 0 0.75em 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 75%;
  border-bottom: 1px dotted #333333;
}

.menu li {
  flex: auto;
  background-color: #06080e;
  color: #fff;
  padding: .5em;
  text-align: center;
  font-weight: 200;
  border-right: thin #333333 dotted;
  padding: .5em .3em .5em .3em;

}

.menu li a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}
.menu li a:hover {
	color: #ffffff;
	background-color: #415A77;
}

a {
	color: #91aac7;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #ffffff;
	background-color: #415A77;
}

h1 {
  color: white;
  
 
 
  font-size: 95%;
	line-height: 180%;
  
}


h2 {
	font-weight: 200;
	border-bottom: 1px dotted #cccccc;
	padding-bottom: 10px;
	margin-right: 20px;
}
p {
	font-size: 95%;
	line-height: 180%;
}
#content {
	padding: 1em 3em 1em 2em;

}


#footer {
	background-color: #282A2E;
	border-top: 5px solid #cccccc;
	padding: 1em 4em 1em 3em;
	text-align: center;
	font-size: 90%;
}

#footer p {
	line-height: 120%;
}

.floats {
	width: 100%;
	margin: 50px auto 0 auto;
	text-align: center;
}

.float-child {
    width: 35%;
	  position: relative;
    /* padding: 20px; */
	height: auto;
	background-color: #415A77;
	text-align: center;
	font-size: 24px;
}  

.float-child:hover {
	color: #38687F;
	background-color: #ffffff;
}

.fa {
  padding: 20px;
  font-size: 20px;
  width: 10px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;  
}

.fa:hover {
    opacity: 0.7;
	
}
.fa-facebook {
  background: #415A77;
  color: white;
}

.fa-twitter {
  background: #415A77;
  color: white;
}
.fa-instagram {
  background: #415A77;
  color: white;
}

.imagecontainer {
  position: relative;
  text-align: center;
  color: white;
  max-width: 1000px;
}

.hoverinfo {
  position: absolute;
  color: #ffffff;
  cursor: pointer;
}

.hoverinfo p {
  display: none;
  color: #000000;
  margin: 0;
  padding: 0;
}

.hoverinfo:hover p {
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding: 25px;
  display: flex;
  font-size: 16px;
  text-align: left;
  position: relative;
  left: -250px;
  top: -200px;
  width: 300px;
}

.hovertext {
display: none;
}



#essayboxes {
	display: flex;
	margin: 0;
	padding: 0;
	background-color: #666666;
	flex-wrap: wrap;
}

#box {
	width: 300px;
	height: 300px;
	background-color: #386F89;
	margin: 20px;
	color: #ffffff;
	padding: 0;
}

#box:hover
{
    opacity: 0.7; /* css standard */
    filter: alpha(opacity=100); /* internet explorer */
}