body{
	#background-color: #f5f0f6;
	background-color: #fafafa;
	font-family: "Verdana", Gadget, sans-serif;
	#font-family: Impact, Charcoal, sans-serif;

	margin: 0px 0px;
	padding: 0px;
	border-style: solid;
	/*border-width: 0px 80px;*/
	border-width: 0px 0px;
	border-color: #ccc;
}

#banner_img {
    display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

div.header {
	width: 100%;
	height: 80px;
	#background-color: #22365b;
	background-color: #085391;
	#background-color: #0475B7;
	#position: fixed;
	top: 0;
}

table.header {
	text-transform: uppercase;
	height: 80px;
	margin: 0px 0px;
	padding: 0;

	#border-radius: 25px;

	  display: flex;
  justify-content: center;
    align-items: center;

	text-align: center;
	vertical-align: middle;
}
table.header tr {
	margin: 5px;
	padding: 5px;
}
table.header td {
	font-family: "Verdana", Gadget, sans-serif;
	#font-weight: bold;
	font-size: 25px;
	color: #fff;
	margin: 5px;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}
table.header td a {
	#display: block;
	padding: 14px 16px;
	/*color: #598ff2;*/
	#color: #cccccc;
	color: #fff;
	text-decoration: none;
}
table.header td a:hover {
	/*color: #f4752c;*/
	color: #ccc;
	#color: #ffffff;
}
table.header td a:visited{
}


.content{
	margin: 5% auto;
	width: 75%;
	#text-align: center;
	font-size: 17px;
}

h1 {
	#font-family: "Verdana", Gadget, sans-serif;
}

h2 {
	#font-family: "Verdana", Gadget, sans-serif;
}


div.projbox {
	text-align: center;
	margin: auto;
	padding: 0px;
	width: 100%;
}

div.prog_box {
  display: inline-block;
  	border: 5px solid black;
		padding: 0px;
	margin: 5px;
	height: 320px;
	width: 320px;
	background: #e0e0e0;
	vertical-align: middle;
}

a.prog_box {
  	text-decoration: none;
	height: 320px;
	width: 320px;
}

.prog_box img {
	/*height: 200px;*/
	width: auto;
	height: 150px;
	max-width: 220px;
	max-height: 220px;
}

.proj {
	transition: 0.1s;
	/*border: 5px solid black;*/
	border-radius: 50px;
	/*background: #e0e0e0;*/
	background: #e0e0e0;
	/*box-shadow:  20px 20px 60px #bebebe,
             -20px -20px 60px #ffffff;*/
	box-shadow: inset 20px 20px 60px #bebebe,
            inset -20px -20px 60px #ffffff;
}
.proj:hover {
	/*opacity: 0.7;
	border: 5px solid grey;*/
	background: #b0b0b0;
}
.proj:active {
	border-radius: 50px;
	background: #e0e0e0;
	box-shadow: inset 20px 20px 60px #bebebe,
            inset -20px -20px 60px #ffffff;
}

.proj img {
	/*height: 200px;*/
	max-width: 250px;
}

a {
	color: black;
	text-decoration: none;
}
a:hover {
	color: grey;
	text-decoration: none;
}

.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  font-size: 20px;
}

details.proj {
  	#border: 1px solid black;
  	#border: 1px solid #C44900;
  	#border: 1px solid #DDB70A;
  	border: 1px solid #085391;
    text-align: center;
    border-radius: 25px;
    margin: 15px;
    padding: 5px;
}
details.proj > summary {
	#background-color: #C44900;
	#text-decoration: underline solid #085391 ;
	#background-color: #DDB70A;
	#color: #cccccc;
	color: #000;
    border-radius: 25px;
    margin: 0px 0px;
    padding: 20px 20px;
  font-size: 30px;
  text-align: left;
}

details > summary:hover {
	#color: #ccc;
}

em {
	font-weight: bold;
}