@charset "utf-8";
/* CSS Document */
* { box-sizing: border-box; }

header  { background-image: url("images/lheader.png");
		  background-repeat: no-repeat;
		  float: left;	
		  width: 100%;
		  padding: 0;
		  background: #005AA7;  /* fallback for old browsers */
	background: -webkit-linear-gradient(bottom, #FFFFFF, #000000);
	background: -o-linear-gradient(bottom, #FFFFFF,  #005AA7);
	background: linear-gradient(to top, #CCCCFF, #FFFFFF );  /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }

.topnav { background: rgb(213,215,222); /* This is the top navigation */
background: linear-gradient(0deg, rgba(213,215,222,1) 0%, rgba(178,173,186,1) 100%); 
		  width: 100%;
		  overflow: hidden; }

.topnav a { float: right; 
			color: #000066;
			text-align: center; 
		    text-decoration: none;
		    font-weight: normal;
		    font-size: 1.25em; 
			padding: 5px 16px; }

.topnav a:hover { background-color: snow; } 

.topnav a.active { background-color: lightgray; }

body     { background-color: #FFFFFF; 
           color: #FFFFFF;
           font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif; } 

#statement {margin-top: 50px; }

p { color: #000066;
	padding-left: 50px;
	padding-right: 50px; 
	padding-top: 0px;
    width: 100%;
	height: auto; }

#rectangle { width: 100%;
		     height: 100px;	
		     background-color: #000066; }

h2 { font-size: 1.5em;
	 text-align: center;
     background-color: #000066;
	 height: 100px;
	 padding-top: 5px;
	 margin-top: 0px;
	 margin-bottom: 0px;}

h1 { font-size: 6em;
	 text-align: center; 
	 background-color: #000066;
	 height: 221px;
	 margin-top: 0px;
	 margin-bottom: 0px; }

h3 { font-size: 1.0em;
	 text-align: center;
	 background-color: #333366;
	 height: 26px;
	 margin-top: 195px;
	 margin-bottom: 0px; }

table { border-collapse: collapse;
	    border-spacing: 10px;
	    width: 100%;
	    border: 1px solid #ddd; }

th, td { text-align: center;
		 padding: 10px; }

.contact { font-weight: bold; }


#fav { margin-left: 3em; }

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background: #005AA7;  /* fallback for old browsers */
	background: -webkit-linear-gradient(bottom, #FFFFFF, #000000);
	background: -o-linear-gradient(bottom, #FFFFFF,  #005AA7);
	background: linear-gradient(to top, #FFFFFF, #CCCCFF );  /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 	
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial; }

.name { color: #000066;
		font-size: 1.65em;
		font-weight: bold; }

.title { color: grey;
  	  	 font-size: 18px; }

button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.cont {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover, a:hover {
  opacity: 0.7;
}


.ela { max-width: 100%; 
	   height: auto;
	   margin-left: 20%;
	   margin-right: 25%; }

#command { text-align: left; 
		   font-weight: normal; 
		   font-size: 0.9em; }
.comm { color: #BF0609; }

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 15%;
  padding: 10px; 
  margin-left: 5%; }

/* Style the images inside the grid */
.column img {
  opacity: 0.8;
  cursor: pointer; }

.column img:hover {
  opacity: 1; }

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

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none; 
  margin-left: 10%; }

/* Closable button inside the image */
.closebtn {
  position: absolute;
  margin-right: 15%;	
  top: 10px;
  right: 15px;
  color: #F8070B;
  font-size: 35px;
  cursor: pointer; } 

ul { list-style-type: none;
	 margin-left: 1%; }

#multivid { margin-left: 15%;
			margin-right: 15%; }

#id1 { padding-left: 50px; }

#wrapper { box-shadow: 7px 7px 5px grey; } 

#grayborder { width: 100%;
			  height: 8px;
			  color: whitesmoke;
			  background-color: whitesmoke; }

footer { color: #000066;
		 text-align: center;
		 font-size: 0.80em;
		 width: 100%;
		 margin-top: 0px;
		 padding-top: 30px;
		 padding-bottom: 30px;
		 background: #005AA7;  /* fallback for old browsers */
	background: -webkit-linear-gradient(bottom, #FFFFFF, #000000);
	background: -o-linear-gradient(bottom, #FFFFFF,  #005AA7);
	background: linear-gradient(to top, #FFFFFF, #CCCCFF );  /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}

.spc { padding-right: 5px; }

@media only screen and (max-width: 1024px) {
	body { margin: 0; 
	       padding: 0; }
	#wrapper { width: auto; 
		       min-width: 0;
		   	   margin: 0; 
		   	   box-shadow: 7px 7px 5px grey; }
	.ela { max-width: 100%; 
	   	   height: auto;
	       margin-left: 10%;
		   padding-right: 20%; } }

@media only all and (max-width: 768px) {
	nav { padding-left: 8%;
	      float: left;
		  width: auto; } 

.ela { max-width: 100%; 
	   height: auto;
	   margin-left: 0%; 
	   padding-left: 3%; } 

.huie1, .huie2 { max-width: 100%; 
	   height: auto;
	   margin-left: 0%;
	   padding-bottom: 10%; 
	   padding-top: 5%;	} 
	
.column { float: none;
          width: 15%;
  	      padding: 10px; 
  	      margin-left: 5%; } 

/* Closable button inside the image */
.closebtn {
  position: absolute;
  margin-right: 10%;
  margin-top: 0%;	
  top: 10px;
  right: 15px;
  color: #F8070B;
  font-size: 35px;
  cursor: pointer; } 
}

@media only all and (max-width: 500px) {
	#multivid { margin-left: 0%;
				margin-right: 0%; }
	}