html {
    height: 100%;
    min-width: 100%;
    font-size:16pt;
}

body{
    min-height: 95%;
    position: relative;
    font-size: 100%;
    background: white;
}


.header {
    width:100%;
    min-height: 10vh;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    word-wrap: break-word;

    background: white;
}


/*navigation bar*/
.navigation {
    width: 100%;
    min-height: 8vh;

    padding: 0.5em;
    padding-bottom: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;

    background-color: white;

    font-size: 0.9em;
    font-family: garamond-premier-pro-subhead;/*"Palatino Linotype", "Book Antiqua", Palatino, serif;*/
    font-weight: 400;
}

.navigation ul{
    display: flex;
    flex: 0 0 70%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.navigation ul li{
    margin: 0.6% 0.3% 0.6% 0.3%;
    padding: 0 0.3% 0 0.3%;

    display: flex;
    flex: 1 1 auto;
    justify-content: center;
}

.navigation a{
    color: black;
    text-decoration: none;
    font-weight: 700;
    _text-shadow: 1px 1px 1px #aaa;
}

.navigation a:hover {
    color: #c8000a;
}

.home a.home,
.research a.research,
.teaching a.teaching,
.service a.service,
.work a.work,
.personal a.personal,
.misc a.misc
{
    color: #c8000a;
}


.navigationBorder {
    width: 100%;

    margin-bottom: 2em;

    display: flex;
    justify-content: center;
}

.border1 {
    width: 60%;

    border: solid #b7b7b7;
    border-width: 1px;
}

.profile {
    width: 100%;
    flex: 1 1 100%;

    display: flex;
    flex-wrap: wrap;
    word-wrap: break-word;
    align-items: center;
    justify-content: center;

}

/*Profile image*/
.profileImageContainer {
    margin-right: 0.75em;

    padding-top: 0.75em;
    padding-bottom: 0.75em;

    display: flex;
    flex: 0 0 45%;
    justify-content: right;
    /*border-style: solid;
     border-color: blue ;
     border-width: 3px;*/

    background: white;
}

.profileImage {
    max-width: 325px;
    width: 100%;
    height:auto;

    object-fit: contain;

    -ms-interpolation-mode: bicubic;

    float: right;
}

.title {
    height: auto;

    padding-left: 0.75em;

    display: flex;
    flex: 0 1 50%;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    word-wrap: break-word;
    flex-wrap: wrap;

    border-left-style: solid;
    border-left-color: #e6890b ;
    border-left-width: 3px;

    color: #003e29;
    background: white;

    font-size: 1em;
    font-family: garamond-premier-pro-caption, serif;
    font-weight: 400;
}

.title h2{
    color: #170f47;
    font-family: garamond-premier-pro-caption, serif;
    font-weight: 700;
}

.title h3{
    padding-top: 1em;
    padding-bottom: 0.1em;

    color: #170f47;

    font-family: garamond-premier-pro-caption, serif;
    font-weight: 700;
}

.title p {
    padding-top: 1em;

    text-indent: 0px;
}

.titleBorder{
    width: 100%;

    margin-top: 2em;
    margin-bottom: 2em;

    display: flex;
    justify-content: center;
}

.border2 {
    width: 40%;

    border: solid #b7b7b7;
    border-width: 1px;
}

/*Research image*/
.resImageContainer {
    max-width: 60%;

    display: flex;
    flex: 0 1 60%;
    justify-content: center;

    background: white;
}

.resImage {
    max-width:800px;
    width: 100%;
    height:auto;

    object-fit: contain;
    -ms-interpolation-mode: bicubic;
    /*box-shadow: 0px 0px 5px 5px black inset ;*/

}

.test {
    border-color: black;
}
/*
@media screen and (min-width: 971px) {
  html {
    font-size: 16px;
  }

}
*/
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
/*@media screen and (max-width: 970px) {
  html {
    font-size: 10px;
  }*/
/* .topmatter {
   width: 90vw;
}
.title {
   max-width: 65vw;
}*/
/*}
*/

/*@media(min-width:60em){html{font-size: 100%}}*/

* {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    margin: 0px;
    padding: 0px;
}

::selection {
    background: #1e1f26; /*#4d2c3d;*/
    color: white;
}

@media print {
    a[href]:after {
        content: " (" attr(href) ") ";
    }
}

a, img, li {
    transition: all 0.3s ease;
}


p{
    text-indent: 1em;
}

/*Content window*/
.content, .classcontent{
    min-height: 80%;
    max-width: 75%;

    margin: auto;

    display: flex;
    flex: 1 1 75%;
    flex-wrap: wrap;
    word-wrap: break-word;

    align-items: center;

    color: #170f47;
    background-color: white;

    font-size: 0.9em;
    line-height: 1.8em;
    font-family: garamond-premier-pro-caption, serif;
    font-weight: 400;
    font-style: normal;

}

.classcontent {
    justify-content: start;
}

.content a:link, .classcontent a:link{
    color: #307219;
    text-shadow: 0 0 0.2px #117899;
}
.content a:visited, .classcontent a:visited{
    color: #003e29;
    text-shadow: 0 0 0.2px #117899;
}

.content a:hover, .classcontent a:hover{
    color: #c8000a;
    text-shadow: 0 0 0.2px #c8000a;
}

a.paperButton {
    background: #c8000a;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.8em;
    padding-left: 1px;
    padding-right: 1px;
}

a.posterButton {
    background: #e6890b;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.8em;
    padding-left: 1px;
    padding-right: 1px;
}

a.paperButton:link, a.paperButton:visited, a.posterButton:link, a.posterButton:visited, a.codeButton:link, a.codeButton:visited{
    color: white;
}

a.codeButton {
    background: #007FAE;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.8em;
    padding-left: 1px;
    padding-right: 1px;
}


.content p, .classcontent p {
    margin: auto;
    margin-bottom: 1em;

    display: block;
    word-wrap: break-word;

    text-align: center;
    /*text-shadow: 1px 1px 0.1px rgba(0,0,0,0.004);*/
}

.classcontent p {
    margin-left: 0;
    text-align: justify;
}

.content h1, .classcontent h1 {
    width: 100%;

    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;

    text-align: center;

    color: #170f47;
    font-weight: 700;
}

.content h2, .classcontent h2 {
    width: 100%;

    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0.5em;

    text-align: center;

    color: #170f47;
    font-weight: 700;
}


.content h3, .classcontent h3 {
    width: 100%;

    text-align: center;

    color: #170f47;
    font-weight: 700;
}

.classcontent h3 {
    text-align: left;
}
.content h4, .classcontent h4 {
    width: 100%;

    margin-left: 2%;

    padding-top: 0.5em;

    text-align: left;

    color: #e6890b;
    font-weight: 700;
}

.content h5, .classcontent h5 {
    width: 100%;

    margin-left: 2%;

    padding-top: 0.5em;

    text-align: left;

    color: #e6890b;

    font-weight: 700;
}


.prototypes {
    max-width: 100%;

    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-end;

    background: white;
}

.pt1Container {
    margin: 1em;

    max-width:150px;
    width: 100%;
    height:auto;

    object-fit: contain;
    -ms-interpolation-mode: bicubic;
    text-align: center;
}

.pt2Container {
    margin: 1em;

    max-width:300px;
    width: 100%;
    height:auto;

    object-fit: contain;
    -ms-interpolation-mode: bicubic;
    text-align: center;
}

.pt3Container {
    margin: 1em;

    max-width:365px;
    width: 100%;
    height:auto;

    object-fit: contain;
    -ms-interpolation-mode: bicubic;
    text-align: center;
}


.pt4Container {
    margin: 1em;

    max-width:190px;
    width: 100%;
    height:auto;

    object-fit: contain;
    -ms-interpolation-mode: bicubic;
    text-align: center;
}


.pt5Container {
    margin: 1em;

    max-width:260px;
    width: 100%;
    height:auto;

    object-fit: contain;
    -ms-interpolation-mode: bicubic;
    text-align: center;
}


.content ol,
.content ul,
.content dl,
.classcontent ol,
.classcontent ul,
.classcontent dl
{
    width: 95%;
    margin-left: 5%;
    text-align: left;
}

.content ol > li {
    margin-top: 1em;
}
.content li, .classcontent li {
    width: 95%;
    margin: 0.4em;
    display: list-item;
}

.nestedList {
    list-style: none ;
}

.nestedList > li > ul {
    text-align: left;
    margin-left: 2%;

}

.nestedList > li > ul > li > ul {
    text-align: left;
    margin-left: 2%;
}

table.gentable {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid;
    border-bottom: 2px solid;
    margin-bottom: 1em;
    margin-top: 1em;
    table-layout: fixed;  
}

th {
    width: auto;
    border-bottom: 2px solid;
    text-align: left;
        padding-left: 10px;

}

tr {
    width: auto;
    border-bottom: 1px solid;
    text-align: left;
}

td {
    width: fit-content;
    padding-left: 10px;
}

.pubinfo {
    color: #666666;
}

.awardinfo {
    color: #c8000a;
    font-weight: bold;
}

.credits {

    border-top-style: solid;
    border-top-color: #b7b7b7 ;
    border-top-width: 3px;

    margin-top: 2em;
    padding-top: 1em;
    font-size: 0.8em;
    line-height: 1.2em;
    position: relative;
    bottom: 0;
    width:100%;
    text-align: center;
}