html, body {
    padding: 0;
	margin: 0;
}

main {
  
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 9fr 1fr;
 grid-template-rows: 250px 100px auto;
}

header  {}
aside 	{}
article {}
nav 	{}
footer  {}

img.avatar {border-radius:100%;
}

div.header{
	display: flex;
	justify-content: flex-end;
	align-content: center;
}
div.subheader{
	display: flex;
	justify-content: flex-end;
	align-content: center;
	justify-content: flex-start; float: right;
}

div.body{width:900px;
	margin: auto;
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -35	px; /* the bottom margin is the negative value of the footer's height */
		}
div.top{margin-top:120px;
		float: left;
		height:50px;
	}

div.item {margin-top:10px;
		margin-left:12px;
		width:100%;
}
			
div.item p {margin-left:16px;}


div.year{float: right;
		width:130px;
		text-align:right;
		padding:25px;
		}
		
.year{float: right;
		font-size:  10pt;
		font-family: inherit;
		font-weight:normal;
		}
		
.compdetail{letter-spacing: 1px;
			font-weight:lighter;
			font-style:italic;
			font-size:11pt;
		}
		
img.icon{ height:0.75em;
		margin-bottom:-3px;
}
		

span.affiliation{font-style:italic;
				font-weight:bold;
				font-size:11pt;
				letter-spacing:1px;
				margin-left:20px;
				margin-bottom:4px;
				line-height: 15px;
				}
		
* { font-family: 'Open Sans Condensed', sans-serif ;  COLOR: var(--text-primary); }
b { font-weight: bold; }

h1 { font-family: 'Open Sans Condensed', sans-serif;
 	 font-size: 45pt;
 	 font-weight: lighter;
	 letter-spacing: 5px;
	 text-align: right;
	 justify-content: center;
	 padding-top: 50px;
}
h2 { font-family: 'Open Sans Condensed', sans-serif;
  font-size: 25pt;
  letter-spacing: 2px;
  margin-left:0px;
  margin-top:50px;
  margin-bottom:5px;
}
h3, h3 *{ font-family: 'Open Sans Condensed', sans-serif;
  font-size: 15pt;
  letter-spacing: 3px;
  margin-left:10px;
  line-height:25px;
}

a	{text-decoration: none;
	}

ul	{margin: 4px 0 10px 0;
	}
	
ul.2{ list-style-type:circle;
	margin: 0 0 10px 0;
	}
	
li	{margin-top:6px;
	}
	
.right{position:relative;
	right:5%;
	top:20px;
	padding-top:10px;
	}
	
div.interest p, div.interest li {
								margin-right:150px;
								}

a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #666666 url("up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	transition: var(--transition-speed);
}

.accordion {
	flex: auto;
	background-color: #f3f3f3;
    color: #444;
    cursor: pointer;
    padding: 15px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
	margin-bottom: 0;
}

.accordion:after {
    content: '\25BA';
    color: #777;
    font-weight: bold;
    float: left;
    margin-left: 0px;
	padding-right:5px;
}

.active:after {
    content: "\25BC";
}

.panel {
    margin-left: 10px;
    background-color: var(--bg-tertiary);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
	line-height:16pt;
	left: 25px;
	border-bottom-left-radius: 25px; 
	border-bottom-right-radius: 25px;
}

.panelfill {
    padding: 10px;
}

.panel.active{height:max-height;	
	
}

.image-cropper {
	height: 225px;
	width: 225px;
	min-width: 225px;
 	border-radius: 50%;
	justify-content: right;
	padding: 10px;
}