<style type="text/css">

/*colors:
#0099cc light blue
#e65c00 dark orange
#ff9933 medium light orange
#202060 dark blue
#fff2e6 beige
#4b739b medium blue used in footer
#262626 dark grey
#808080 light grey
#e6e6e6 super light grey
*/

/*Old header code:#header{
	background-color:#e65c00;
	color:#ffffff;
	text-align:center;
	height:12em;
	position: sticky
	top: 0; 
	z-index: 2;
	}*/

/*Style rule for the body element*/

	body{blue}

	body {
	font-family: Georgia, Serif;
	background-color:white;
	}

* {box-sizing: border-box;}
body {font-family: Georgia, Serif;}
	
#wrapper{
	width:100%;
	margin: 0 Auto;
	background-color:white;
	padding: 0;
	}

	

/* Styling for the main article section */
    article{
      padding: 0 10px;
    }

  /* Styling for page footer */
    footer {
      background-color: #4b739b;
	}

	#main{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	color:#000000;
	z-index: 0; 
	}
	
	#navbar{

	background-color:#e65c00; /*dark orange*/
	color:#ffffff;
	text-align:center;
	position: sticky; 
	top: 0; 
	z-index: 1;}

/*side navigation bar for blog*/


nav a{
       display:block;
       text-align: center;
       padding: 10px 0;
       text-decoration: none;
       font-size: 110%;
       border-bottom: solid 1px #262626;
       
       width: 200px;
       
}


  a {
	text-decoration: none; color:white;	
	}

	 a:visited { text-decoration: none; color:white;}
	


	h1 {font-size:4em; line-height:2em}


	h2{
	color:#262626; /*dark grey*/
	font-size:2em;
        font-weight: 100;
	}

	h3{
	color:#262626; /*dark grey*/
	font-variant:small-caps;
	}

	h4{
	color:#e65c00; /*dark orange*/
	font-size:2em;
	}

	p{
	color:#808080;
	font-size: 18px;
	line-height:1.5;
	}

	ul{
	color:#808080;
	font-size: 18px;
	line-height:1.5;
	}

       

	#capability{
	border-radius: 10px;
	background-color:#ebf2f9;
	padding: 20px;
	} 

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}



/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Georgia, Serif;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: right;
  padding: 14px 16px;
  text-decoration: none;
}





/* The dropdown container. This aligns the word Newsroom in the navbar */
.dropdown {
  float: center;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #ff9933;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
border-radius: 20px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #262626;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Saving arrow info but not used right now
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
*/

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ffd9b3;
  border-radius: 20px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* This is for the contact form. Style inputs with type="text", select elements and text areas */
input[type=text], select, textarea {
  width: 100%; /* 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: #e65c00;
  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: #45a049;
}

/* Add a background color and some padding around the form */
.container {  
  width: 80%;
  border-radius: 5px;
  background-color: #fff2e6; /*#f2f2f2;*/
  padding: 20px;
  color: #202060;
  font-family: Georgia, Serif;
  margin-left: auto;
  margin-right: auto;
}

.capabilities {
background-color: #fff2e6;
}

/*flex container on index page*/
.image-container {
  position: relative;
  display: inline-block; 
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-text {
  position: absolute;
  top: 50%; 
  left: 40%; 
  transform: translate(-50%, -50%); 
 /* background-color: #000000; */
  color: #fff; 
  padding: 10px 20px; 
  font-size: 2em; 
  text-align: left;
  font-family: Georgia, Serif;
}

/* div that contains content,      width: 80%;*/
.flexcontainer{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  align-items: top;
  align-content: space-between;
  margin:0px auto;
  
}

/* aligns content*/
.overlay-content {
  content-align: center;
  position: relative;
}

/* changes transparency: 1 is original, 0 is completely transparent*/
.overlay-lighten {
  opacity: 0.3;
  }
 
/* reduces brightness*/ 
.overlay-darken {
filter: brightness(50%);
  }

/*adjusts text position*/ 
.overlay-head {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}

/*index page explore more boxes*/
.explore {
  background-color:#0099cc; 
  border-radius: 10px 0px 10px 10px; 
  padding: 5px;
  padding-block: 30px;
  text-align: center;
  top: 50%;
  left: 50%;
  opacity: 0.4;
  font-size: 1.5em; 
}

</style>