* {
    font-family: Georgia, sans-serif; <!--'Source Sans Pro', sans-serif-->
}

.padding-16 { padding:16px 16px 16px 16px!important }
.vertical-padding-8 { padding:8px 0px 8px 0px!important }

.mainContent-padding {
  	padding:4px 8px 32px 24px!important
}

.bold-link a {
   font-weight:bold;
}

.cv-info {
  	line-height:100%;
}

.fa-graduation-cap {
color:black;
}

.fa-graduation-cap:hover {
    color:#0F9D58;
transform:scale(1.15);
}

.fa-orcid {
color:black;
}

.fa-orcid:hover {
    color: #A6CE39;
transform:scale(1.15);
}

.fa-researchgate {
color:black;
}

.fa-researchgate:hover {
color:#00CCBB;
transform:scale(1.15);
}

.fa-linkedin {
color:black;
}

.fa-linkedin:hover {
    color:#0072b1;
transform:scale(1.15);
}

.fa-github {
color:black;
}

.fa-github:hover {
    color:#FFA500;
transform:scale(1.15);
}

.fa-facebook {
color:black;
}

.fa-facebook:hover {
    color:#4267B2;
transform:scale(1.15);
}

.fa-instagram {
color:black;
}

.fa-instagram:hover {
    color:#833AB4;
transform:scale(1.15);
}

.fa-twitter {
color:black;
}

.fa-twitter:hover {
    color:#1DA1F2;
transform:scale(1.15);
}

.fa-x-twitter {
color:black;
}

.fa-x-twitter:hover {
    color:#1DA1F2;
transform:scale(1.15);
}

.fa-envelope {
color:black;
}

.fa-envelope:hover {
    color:#DB4437;
transform:scale(1.15);
}

.fa-crow {
color:grey;
}

.fa-crow:hover {
    color:#4587C3;
}

.fa-dove {
color:grey;
}

.fa-dove:hover {
    color:#4587C3;
}

.fa-info{
  color:grey;
}

.right{
    float:right;
}

.left{
    float:left;
}

.underline-on-hover:hover {
    text-decoration: underline;
}

@media screen and
(max-width : 600px) {
    .left-padding-80 { padding:0px 0px 0px 0px!important }
    .scale-link { font-size: calc(10px + 1.0vw); }
    ul { padding-left:16px; }
    .cv-date { width:75px!important; line-height:100%; }
    .cv-table-padding td { padding:8px 0px 8px 0px;!important }
}

@media screen and
(min-width : 601px) {
    .left-padding-80 { padding:0px 0px 0px 80px!important }
    .scale-link { font-size: calc(10px + 0.4vw); }
    .cv-date { width:150px!important; }
    .cv-table-padding td { padding:8px 8px 8px 8px;!important }
}

img { width:100%; }

a { text-decoration:none; }

h1, h2, h3 { 
            border-bottom:1px #888888 solid; 
            padding-bottom:4px;
            padding-top:4px;	
            }

div, nav,h1, h2, h3, h4, h5, h6, p, a, ol, ul, li, table, tr, th, td {
	vertical-align: baseline;;
}

#sideNavDiv img {
	display:block;
    margin:auto;
    width:40px;
}

li:not(:last-child) {
    margin-bottom: 15px;
}

p {
  line-height: 1.6;
}


/* Monochromatic link colors for id=buttons */
#buttons a:link { color:black; }
#buttons a:visited { color:black; }
#buttons a:hover { color:#00866C; text-decoration:none;}

/* Monochromatic link colors for id=body */
#body a:link { color:black;}
#body a:hover { color: #00866C; text-decoration:underline; }

/* Green color I like for links: rgb(9,119,12)=#008f48 */
/* Green color I like for hovered links: #00C261 */
/* Blue color I like for links: rgb(2, 69, 154)=#02459A */
/* Blue color I like for hovered links: #046ffb */
/* Red color I like for links: #880000 */
/* Red color I like for hovered links: #BB0000 */


#small-caps {
  font-variant-caps: small-caps;
}  

#footerDiv a:hover	{ text-decoration:underline; }


.flier {
	pointer-events: pointerover;
}

.flier > * {
/* Adjust animation duration to change the element’s speed */
        animation: fly 100s linear infinite;
        pointer-events: pointerover !important;
	top: 0;
	left: 0;
	transform: translateX(-120%) translateY(-120%) rotateZ(0);
	position: fixed;
	animation-delay: 1s;
	z-index: 999999;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

	98.001%, 0% {
                display: block;
		transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
	}

	15% {
		transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
	}

	15.001%, 18% {
		transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
	}

	40% {
		transform: translateX(-200%) translateY(70vh) rotateZ(-180deg)
	}

	40.001%, 43% {
		transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
	}

	65% {
		transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
	}

	65.001%, 68% {
		transform: translateX(45vw) translateY(-200%) rotateZ(180deg)
	}

	95% {
		transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
	}
}

img.eq {
	padding: 0;
	padding-left: 0.1em;
	padding-right: 0.1em;
	margin: 0;
}

img.eqwl {
	padding-left: 2em;
	padding-top: 0.6em;
	padding-bottom: 0.2em;
	margin: 0;
}

table {
    border: 2px solid black;
    border-collapse: collapse;
}

td {
    padding: 2px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
    border: 1px solid gray;
}

table + table {
    margin-top: 1em;
}

tr.heading {
    font-weight: bold;
    border-bottom: 2px solid black;
}

img {
padding-left: 10px;
padding-top:10px;
    border: none;
}

table.imgtable, table.imgtable td {
    border: none;
    text-align: left;
}

p a {
  color: black;
  text-decoration: none;
}

p a:hover {
  color: #00866C;
  text-decoration: underline;
}

ul a {
  color: black;
  text-decoration: none;
}

ul a:hover {
  color: #00866C;
  text-decoration: underline;
}

a.callout {
  color: #00866C;
  text-decoration: none;
}

a.callout:hover {
  text-decoration: underline;
  color: #00866C;
}

#flier {
  position: absolute;
  z-index: 1000;
  transition: all 0.5s ease-in-out;
}

/* Hide default marker */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

/* Arrow using inline SVG */
.arrow {
  display:inline-block; width:0.9em; height:0.9em; margin-right:0.4em; vertical-align:-0.1em;
  --arrow-color: grey;                 /* default */
  background-color: var(--arrow-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6,4 20,12 6,20'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='6,4 20,12 6,20'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s ease;
}

/* Rotate arrow down when open */
details[open] .arrow {
  transform: rotate(90deg);
}

.smallcaps {
    font-variant-caps: small-caps;    /* true small caps if font supports it */
    letter-spacing: 0.05em;           /* space them out just a touch */
    font-weight: bold;                /* keep them distinct from body text */
    font-size: 1.05em;                 /* small bump so they don’t look cramped */
}

/* desktop / wide screens: already side-by-side */
.flex-container { display:flex; align-items:flex-start; gap:24px; }

/* small screens: stack with TEXT FIRST, image below */
@media (max-width: 800px){
  .flex-container { flex-direction: column; }

  /* order: name first, image second, other paragraphs third */
  .flex-container .hero-name{ order:1; width:100%; text-align:left; }
  .flex-container img{ order:2; align-self:center; height:auto; margin:8px 0 10px 20px; margin-top: -1.5em !important;}
  .flex-container p:not(.hero-name){ order:3; width:100%; text-align:justify; }  /* avoid justify rivers on narrow screens */

}

/* anchor the hamburger to the header’s top-right */
header { position: relative; }

/* hidden on desktop by default */
.mobile-menu {
  display: none;
  position: absolute;
  right: 10px;
  top: 2px;
  z-index: 1000;
}

/* the hamburger button */
.mobile-menu > summary {
  list-style: none;            /* remove default marker */
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 4px 8px;
  user-select: none;
}
.mobile-menu > summary::-webkit-details-marker { display: none; } /* Safari */

/* ☰ ↔ ✕ icon */
.mobile-menu > summary .mm-icon::before { content: "☰"; }
.mobile-menu[open] > summary .mm-icon::before { content: "✕"; }

/* the dropdown panel */
.mobile-panel {
  display: none;
  position: absolute;
  right: 0;
  top: 36px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  padding: 8px 14px;
  min-width: 160px;
  z-index: 999;
}
.mobile-panel a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: black;
  font-size: 18px;
  border-top: 1px solid #f1f1f1;
}
.mobile-panel a:first-child { border-top: 0; }
.mobile-panel a:hover { color: #00866C; }

/* show panel when open; FORCE-HIDE when closed (overrides any earlier CSS) */
.mobile-menu[open] .mobile-panel { display: block; }
.mobile-menu:not([open]) .mobile-panel { display: none !important; }

/* small screens: hide your desktop tabs, show hamburger */
@media (max-width: 700px){
  /* hide the right-aligned desktop row */
  #buttons span[style*="float: right"] { display: none !important; }
  /* hide the left spacer */
  #buttons span[style*="float: left"]  { display: none !important; }

  .mobile-menu { display: block; }

}