html, body {
    margin: 0px;
    padding: 0px;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -ms-flex-direction: column;
        flex-direction: column;
}

body {
    font-family: 'Roboto', sans-serif;
    color: rgb(50, 50, 50);
    font-size: 1.1em;
    font-weight: 400;
}

nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: left;
        justify-content: left;
    background: rgba(50, 50, 50, 80);
    color: white;
    border:  2px solid black;
    margin: 0px;
    padding: 0px;
    -ms-flex-positive: 0;
        flex-grow: 0;
}

nav > .logo-wrapper > a {
    margin: 0px;
    padding: 0px;
    display: -ms-flexbox;
    display: flex;
    border-right: 2px solid black;
}

nav > .logo-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: justify;
        justify-content: space-between;

}

nav > .logo-wrapper > a > img {
    height: 63px;
    width: auto;
    padding: 2px;
    padding-left: 30px;
    padding-right: 30px;
    background: white;
}

nav > .logo-wrapper > .ham-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    box-sizing: border-box;
}

nav .ham-container > .hamburger-wrapper {
    margin: 10px;
    border-radius: 5px;
}

nav .ham-container .hamburger {
    margin: 10px;
    padding: 0px;
    height: 24px;
    width: 24px;
    border-radius: 5px;
    transition: background 0.2s ease-in;
    background-image: url('/images/icons/hamburger.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

nav .ham-container .hamburger:hover {
    background-image: url('/images/icons/hamburger.hover.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

nav .hamburger-wrapper:hover {
    background: rgba(255, 255, 255, 0.2);
    color: gold;
}

nav ul {
    margin: 0;
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: left;
        justify-content: left;
    list-style-type: none;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

nav ul > li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    white-space: nowrap;
    position: relative;
}

nav ul > li > a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2em;
    text-decoration: none;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    padding: 20px;
    transition: background 0.2s ease, color 0.5s ease;
    border-radius: 2px;
}

nav ul > li > a:hover, a.sub-current, a.current {
    background: rgba(150, 150, 150, 0.2);
}

nav ul > li > a:hover, a.current {
    color: gold;
}

nav ul > li > a.current {
    cursor: default;
}

nav ul > li.has-children > a {
    padding-right: 40px;
    /*--height: auto;--*/

}

nav ul > li.has-children > a::after {
    content: '';
    position: absolute;
    background: url('../images/icons/chev_right.hover.svg');
    height: 24px;
    width: 24px;
    right: 5px;
    display: inline-block;
    transition: transform 0.2s ease, background 0.2s ease;
}

nav ul > li.has-children > a[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

nav ul > li > a:hover::after {
    background: url('../images/icons/chev_right.svg');
}

nav ul > li ul {
    background: rgba(50, 50, 50, 80);
    max-height: 0px;
    overflow: hidden;
    display: inline-block;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    transition: max-height 0.5s ease;
}

nav ul > li > a {
    border-top: 2px solid rgba(0, 0, 0, .2);
}

nav ul > li ul > li {
    padding-left: 20px;
}

nav > ul {
    /*width: 100%;*/
    display: none;
}

nav > ul.expanded {
    display: -ms-flexbox;
    display: flex;
}

div {
    box-sizing: border-box;
}

::-moz-selection {
    background: rgba(90, 90, 90, 1);
    color: white;
}

::selection {
    background: rgba(90, 90, 90, 1);
    color: white;
}

section.main {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    /*min-height: 100vh;*/
    background-color: #FCF3CF;
    /*flex: none;*/
    -ms-flex-positive: 1;
        flex-grow: 1;
}

#publish_booksTOP {
    position: absolute;
    width: 10%;
    height: auto;
}

#publish_booksBOTTOM {
    width: 10%;
    height: auto;
}

.info-content img {
    transition: opacity 0.5s ease-in-out;
}

#publish_booksTOP:hover {
    opacity: 0;
}


header {
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    transition: -webkit-filter 0.5s ease, filter 0.5s ease;
    position: relative;
    -ms-flex-positive: 0;
        flex-grow: 0;

}



header .background {
    width: 100%;
    height: 100%;
}

header .background .image {
    position: absolute;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 40%;
    opacity: 0;
}

.dot_menu {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    list-style-type: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

.dot_menu > li {
    z-index: 2;
    padding: 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
}

.dot_menu label {
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    margin: 0px;
    padding: 0px;
    transition: background 0.4s ease;
}

.dot_menu label:hover, .dot_menu label.selected {
    background: gold;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    padding: 8em 1em 0;
    background-size: cover;
    transition: left 0s .75s;
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
    display: none;
}

header div.filter {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
}

header:hover div.filter {
    background: rgba(0, 0, 0, 0.3);
}

.filter > a {
    height: 100%;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    text-decoration: none;
    color: inherit;

}

.filter > a > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
}

.filter > a > div > h1{
    margin: 0px;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    color: gold;
    background: rgba(0, 0, 0, 0.5);
}

.filter a > div > h1 > span.name-long {
    display: none;
}

.filter a > div > h1 > span.name-short {
    display: inline-block;
}

div.main-content {
    /*flex: none;*/
    margin: 0 0vw;
    margin-top: 10px;
    padding: 0px 0px 0px 0px;
    background-color: #FCF3CF;

}

div.main-content-tableView {
    -ms-flex: none;
        flex: none;
    margin: 0 4vw;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0px 0px 0px 0px;
    background-color: #FCF3CF;
}

div.summary {
    padding: 10px;
}

div.summary ul {
    margin: 0px;
    padding: 0px;
}

div.info-content{
    overflow: hidden;
}

div.summary ul, div.info-content ul {
    list-style-type: none;
    padding: 0px;
}

div.summary ul > li, div.info-content ul > li {
    padding: 0.2em 0em;
}

div.portrait {
    height: 300px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

div.portrait img {
    border-radius: 5px;
    height: 100%;
}

div.portrait > a {
    white-space: nowrap;
    margin: 0px;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 0.8em;
    transition: background-color 0.2s ease-in;
}

div.portrait:hover > a:visited {
    color: rgba(255, 255, 255, 0.8);
}

div.portrait:hover > a {
    background-color: rgba(0, 0, 0, 0.4);
}

.info {
    margin-top: 10px;
    border: 2px solid rgba(50, 50, 50, 255);
    border-radius: 4px;
}

.info-header {
    color: gold;
    background-color: rgba(50, 50, 50, 80);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 10px 10px;
    transition: border 0.5s ease 0.1s, color 0.4s ease;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
}

.expandable .info-header, expandable .info-header > h2 {
    cursor: pointer;
}

.expandable .info-header:hover {
    color: rgba(240, 240, 240, 1);
}

.info-header>h2 {
    margin: 0px;
    padding: 0px;
    width: auto;
    display: inline-block;
}

.expandable .info-header>h2 {
    position: relative;
    padding-right: 34px;
}

.expandable .info-header>h2::after {
    content: '';
    background: url('../images/icons/chev_right.svg');
    position: absolute;
    height: 24px;
    width: 24px;
    right: 0px;
    top: 5px;
    display: inline-block;
    transition: transform 0.2s ease, background 0.2s ease;
}

.expandable .info-header:hover>h2::after {
    background: url('../images/icons/chev_right.hover.svg');
    height: 24px;
    width: 24px;
}

.expandable.expanded>.info-header>h2::after {
    transform: rotate(90deg);
}

.info-content {
    background: rgba(100, 100, 100, 0.1);
    padding: 0px 15px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    position: relative;
    transition: box-shadow 1s ease;
    overflow-y: auto;
    background-color: white;
}

.expandable .info-content {
    max-height: 0px;
    overflow: auto;
    overflow-x: hidden;
    transition: max-height 0.5s ease, border 0.5s ease;
}

.info-content p::first-letter {
    font-size: 1.2em;
    font-weight: 500;
    padding-left: 20px;
}

.info-content.flex-list ol {
    list-style-type: none;
    padding: 0px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    font-weight: 500;
}

.info-content.flex-list ol > li {
    padding: 0px 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.info-content.flex-list ol > li::before {
    content: '';
}

.info-content.flex-list ol > li > h4 {
    margin: 5px;
    white-space: nowrap;
    margin-left: 0px;
    margin-right: 0px;
}

.info-content ol {
    padding-left: 20px;
    list-style-type: none;
    counter-reset: li-counter;
}

.info-content ol li {
    margin-top: 5px;
    position: relative;
}

.info-content ol li::before {
    font-weight: 500;
    position: absolute;
    top: 1.2em;
    left: -0.5em;
    content: counter(li-counter)".";
    counter-increment: li-counter;
    margin: -20px;
}

/*--------------------------------HOMEPAGE----------------------------------------------*/

.sidebar_news {
    background-color: white;
    width: 0;
    height: 500px;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: 0.7s;
    border-radius: 10px;
    overflow-y: hidden;
}

.sidebar_news p {
    margin: 30px;
}

.sidebar_news h2 {
    margin: 30px;
}

#newspaper{
    width: 50%;
    border-style: solid;
    border-color: white;
}

#newspaper:hover{
    opacity: 0.5;
    filter:alpha(opacity=40);
}

.sidebar_news .sidebar_close {
    float: right;
    top: 0;
    right: 25px;
    font-size: 38px;
    color: white;
    text-decoration: none;
}

#airway_composit_img{
    float: left;
    width: 50%;
    margin-bottom: 20px;
    margin-right: 20px;
}

#hoffman_reward{
    float: right;
    width: 35%;
    height: auto;
    margin-bottom: 10px;
    margin-left: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#fong_reward{
    float: left;
    width: 35%;
    height: auto;
    margin-bottom: 10px;
    margin-right: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#jarron_melissa_hoffman {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#ventilator {
    width: 90%;
    height: auto;
}

#art_ct_1 {
    float: left;
    width: 35%;
    height: auto;
    margin-bottom: 10px;
    margin-right: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#art_ct_2 {
    float: right;
    width: 35%;
    height: auto;
    margin-bottom: 10px;
    margin-left: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.article6_line{
    margin-left:2.5em;
}

.article7_line{
    /* margin-left:2.5em; */
}

#close_box{
    height: 40px;
    width: 40px;
    background-color: black;
    text-align: center;
    /*position: fixed;*/
    display: none;
}

#column_two {
    transition: margin-left 0.5s;
    width: 100%;
}

.column_one_home {
    color: white;
    background-color: rgba(50, 50, 50, 80);
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    border: 4px solid white;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.column_one_home hr {
    border-width: 1px;
    border-color: gold;
    width: 75%;
    margin: 0px;
}

.column_one_home a {
     color: white;
     text-decoration: none;
}

.column_one_home p > a {
    margin-bottom: 30px;

}

.column_two_home {
    background-color: white;
}

.column_two_home p {
     margin-left: 10px;
     margin-right: 10px;
}

.column_two_home a:visited {
    color: cornflowerblue;
}

.column_two_home a:link {
    color: darkblue;
}

#appil_logo {
    width: 35%;
    float: right;
}

#iclic_logo {
    float: left;
    width: 45%;
}

#daily_iowan{
    margin-left: 0em;
    width: 80%;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




/*--------------------------------------------------------------------------------------------------------*/

/*----------css for faculty, staff, postdoc, grads, and undergrads people list and lab photo---------------*/

.two_column_layout {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    transition: 0.7s;
    opacity: 1;
    -ms-flex: none;
        flex: none;
}

.column_one {
    background-color: white;
    text-align: center;
    -ms-flex: none;
        flex: none;
    -ms-flex-order: 2;
        order: 2;
}


.column_one hr {
    border-width: 3px;
    border-color: rgba(33, 33, 33, 1);
}

.column_one a {
    color: cornflowerblue;
}

.person_list {
    min-width: 240px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.person_list hr {
    -ms-flex-item-align: center;
        align-self: center;
}

.person_list ul {
    padding-left: 0px;
}

.person_list li {
    list-style-type: none;
    margin-bottom: 15px;
}

.person_list a {
    text-decoration: none;
}
.column_two {
    background-color: white;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: none;
        flex: none;
    -ms-flex-order: 1;
        order: 1;
}


.image_container_lab img {
    width: 100%;
    height: auto;


}

/*---------------------------------------------------------------------------------------------------------*/

/*----------------------------------Collaborators---------------------------------------------------------*/

.smallscreen_title {
    margin-bottom: 0px;
    margin-top: 0px;
}

.tab_collab {
    display: none;
}

.column_two_collab {
    display: none;
}

.column_two_collab_small {
    display: block;
    width: 100%;
}

div.summary_collab {
    padding: 10px 0px 100px 0px;
}

div.summary_collab ul {
    margin: 0px;
    padding: 0px;
}

div.summary_collab ul, div.info-content ul {
    list-style-type: none;
    padding: 0px;
}

div.summary_collab ul > li, div.info-content ul > li {
    padding: 0.2em 0em;
}

.spacing{
    height: 30px;
}

.info-header-collab {
    color: gold;
    background-color: rgba(50, 50, 50, 80);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 10px 10px;
    transition: border 0.5s ease 0.1s, color 0.4s ease;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
}

.expandable .info-header-collab, expandable .info-header-collab > h2 {
    cursor: pointer;
}

.expandable .info-header-collab:hover {
    color: rgba(240, 240, 240, 1);
}

.info-header-collab>h2 {

    display: inline-block;
}

.expandable .info-header-collab>h2 {
    position: relative;
    padding-right: 34px;
}

.expandable .info-header-collab>h2::after {
    content: '';
    background: url('../images/icons/chev_right.svg');
    position: absolute;
    height: 24px;
    width: 24px;
    right: 0px;
    top: 5px;
    display: inline-block;
    transition: transform 0.2s ease, background 0.2s ease;
}

.expandable .info-header-collab:hover>h2::after {
    background: url('../images/icons/chev_right.hover.svg');
    height: 24px;
    width: 24px;
}

.expandable.expanded>.info-header-collab>h2::after {
    transform: rotate(90deg);
}

.info-content li{
    list-style-type: none;
    margin-bottom: 10px;
}

.info-content a:visited {
    color: cornflowerblue;
}

.info-content a:link {
    color: darkblue;
}

.para_small_collab {
    margin-bottom: 40px;
}







/*---------------------------------------------------------------------------------------------------------*/

/*----------------------------------------Projects-------------------------------------------------------*/

.tab_projects {
    display: none;
}

.column_two_projects {
    display: none;
}

.two_column_projects {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
}

.info-header-projects {
    color: gold;
    background-color: rgba(50, 50, 50, 80);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 0px 10px;
    transition: border 0.5s ease 0.1s, color 0.4s ease;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
}

.expandable .info-header-projects, expandable .info-header-projects > h2 {
    cursor: pointer;
}

.expandable .info-header-projects:hover {
    color: rgba(240, 240, 240, 1);
}

.info-header-projects>h2 {

    display: inline-block;
}

.expandable .info-header-projects>h2 {
    position: relative;
    padding-right: 34px;
}

.expandable .info-header-projects>h2::after {
    content: '';
    background: url('../images/icons/chev_right.svg');
    position: absolute;
    height: 24px;
    width: 24px;
    right: 0px;
    top: 5px;
    display: inline-block;
    transition: transform 0.2s ease, background 0.2s ease;
}

.expandable .info-header-projects:hover>h2::after {
    background: url('../images/icons/chev_right.hover.svg');
    height: 24px;
    width: 24px;
}

.expandable.expanded>.info-header-projects>h2::after {
    transform: rotate(90deg);
}

.title_image {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
}

.title_image #copd {
    width: 281px;
    height: 70px;
}

.title_image #nett {
    width: 162px;
    height: 140px;
}

.title_image #spiromics {
    width: 162px;
    height: 84px;
}

.title_image #sarp {
    width: 190px;
    height: 110px;
}

.title_image h2 {
    margin-left: 5px;
}

#op_studies {
    font-style: italic;
    font-weight: bold;
}

#requirements_list > li {
    list-style: circle !important;
    margin-left: 35px;
}


 /*-------------------------------------------------------------------------------------------------------*/

 /*---------------------------------What's New----------------------------------------------------------*/
.two_column_whatsnew {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
}

.tab_whatsnew {
     display: none;
}

.column_two_whatsnew {
     display: none;
}

.column_two_collab_small {
     display: block;
}

div.summary_whatsnew {
    padding: 10px 0px 150px 0px;
}

.para_small_whatsnew {
    height: 7px;
}

.whatsnew_text {
    margin-left: 15px;
}

.announced {
    font-style: italic;
}


 /*----------------------------------------------------------------------------------------------------*/


 /*---------------------------------------resources page----------------------------------------------*/

.column_one_resources {
    color: white;
    background-color: rgba(50, 50, 50, 80);
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    border: 4px solid white;
    -ms-flex-order: 2;
        order: 2;
}
.column_one_resources p {
    margin-top: 5px;
}

.column_one_resources h2 {
    margin-bottom: 5px;
}

.column_one_resources hr {
    border-width: 1px;
    border-color: gold;
    width: 50%;
    margin: 0px;
}


.column_one_resources a:visited {
    color: cornflowerblue;
}

.column_one_resources a:link {
    color: darkblue;
}

.resources_list {
    margin-right: 15px;
}

.column_two_resources {
    background-color: white;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-order: 1;
        order: 1;
    padding-left: 10px;
    padding-right: 10px;
}

.column_two_resources hr {
    border-width: 1px;
    border-color: rgba(33, 33, 33, 1);
    width: 65%;
    margin: 0px;
}

.column_two_resources>h2 {
    margin-left: 15px;
}

.resources {
    margin: 15px;
}

#ctroom {
    width: 60%;
    height: auto;
    float: right;
    border-radius: 10px;
    margin: 5px;
}



#ctroomImg3 {
    width: 30%;
    height: auto;
    float: right;
    border-radius: 10px;
    margin: 5px;
}    

#ctroomImg4 {
    width: 50%;
    height: auto;
    float: right;
    border-radius: 10px;
    margin: 5px;
}

#ctroomImg5 {
    width: 50%;
    height: auto;
    float: right;
    border-radius: 10px;
    margin: 3%;
}

#additional_text {
    display: inline-block;
}

#montage {
    display: none;
}

.button-download {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    background: rgb(28, 184, 65); /* this is a green */
    
}


/*--------------------------------------------------------------------------------------------------*/

/*------------------------------Gallery Posters and Images----------------------------------------------*/

.gallery {
    background-color: white;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 10px;
}

.gallery h1 {
    margin-left: 20px;
    color: black;
    text-shadow: 2px 2px #F2BF02;
    font-size: 2em;
    font-weight: bold;
}

.image_container {
    list-style: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding: 0px;
    margin: auto;
    width: 53%;
    /*margin-top: 3%;
    margin-left: 3%;
    margin-right: 3%;*/
}

.image_box {
    width: 150px;
    height: 150px;
    overflow: hidden;
    margin: 5px;
    background-color: rgba(0, 0, 0, 0.5);
}

.image_box_caption{
    color:black;
    margin: 0px;
    text-align: center;
    font-size: 0.5em;
}

.image_box img {
    width: 100%;
    height: auto;
}

.presentation_box_flex{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    
}

.presentation_box_flex>ul{
    list-style: none;
}


.box_caption {
    /* width: 380px; */
    margin-bottom: 0px;
    text-align: center;
    font-size: 0.6em
}


.my_image {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.pp_video {
    height: auto;
    width: 325px;
    -ms-flex-item-align: center;
        align-self: center;
}

.pp_download {
    -ms-flex-item-align: center;
        align-self: center;
}

.my_image:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    text-align: center;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/*---------------------MPM Application Landing page for Johanna-----------------------------*/
#mpm_logo {
    float: left;
    margin-right: 25px;
}


/* Caption of Modal Image
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}*/

#img01{
    max-width: 100%;
    height: auto;

}

#img1, #img9, #img10, #img11{
    margin-top: 20%;
}

#img2, #img8, #img12, #img13, #img15, #img17, #img22{
    margin-top: 11%;
}

#img3, #img14, #img23{
    margin-top: 17%;
}

#img4{
    margin-top: 7%;
}

#img18, #img19{
    margin-top: 12%
}

#img20{
    margin-top: 22%;
}

#myImg2, #myImg3, #myImg10{
    margin-top: 7%;
}

#myImg4{
    margin-top: 6%;
}

#myImg5, #myImg7, #myImg9, #myImg15{
    margin-top: 19%;
}

#myImg11{
    margin-top: 22%;
}

#myImg12{
    margin-top: 13%;
}

#myImg13, #myImg14, #myImg16{
    margin-top: 12%;
}

#myImg17{
    margin-top: 15%;
}

#myImg22{
    margin-top: 11%;
}





/* Add Animation */
.modal, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}




/*------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------Sponsors----------------------------------------------------*/

.sponsors_container{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    background-color: white;
    border-radius: 10px;
}

.sponsors{
    -ms-flex-item-align: center;
        align-self: center;
    -ms-flex: none;
        flex: none;
}

.sponsors_container hr{
    margin-left: 40px;
    margin-right: 40px;
}

.sponsors p{
    text-align: center;
}

.sponsors h1 {
    text-align: center;
}

.sponsors h3 {
    text-align: center;
}

#praxair{
    max-width: 80%;
    height: auto;
    -ms-flex-item-align: center;
        align-self: center;
}

#civco{
    max-width: 80%;
    height: auto;
}

#zeiss{
    width: 20%;
    height: auto;
}

/*------------------------------------------------------------------------------------------*/
/*--------------------------------Past Students---------------------------------------------*/


table {
    border-collapse: collapse;
    width: 100%;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 0px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

th{
    background-color:rgba(50, 50, 50, 80);
    color: gold;
}

tr:nth-child(even){background-color: #f2f2f2}
tr:nth-child(odd){background-color: white}

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

td a {
    display: block;
}

tr:hover {
    background-color: lightgoldenrodyellow;
}

input[type="button"] {
    transition: all .3s;
    border: 1px solid #ddd;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 15px;
}

input[type="button"]:not(.active) {
    background-color:transparent;
}

.active {
    background-color: rgba(50, 50, 50, 80);
    color :gold;
}

input[type="button"]:hover:not(.active) {
    background-color: #ddd;
}


/*---------------------------------footer---------------------------------------------------*/

.footer {
    background-color: rgba(50, 50, 50, 80);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-pack: center;
        justify-content: center;
    text-decoration: none;
    -ms-flex-positive: 0;
        flex-grow: 0;

}

.footer_section {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
}

.footer_section img {
    height: auto;
    width: 222.44px;
    padding: 5px;
    -ms-flex-item-align: center;
        align-self: center;
}

.footer_section a{
    -ms-flex-item-align: center;
        align-self: center;
}

#footerImg2 {
    -ms-flex-order: 1;
        order: 1;
    -ms-flex-item-align: center;
        align-self: center;
}

#footerImg2 {
    display: none;
}

#footerTxt {
    margin: 0;
    color: darkgray;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-order: 3;
        order: 3;
    text-align: center;
}

#aside_link i {
    display: block;
    position: absolute;
    top: 470px;
    left: 162px;
}



/*
    Small Screens
*/
@media screen and (min-width: 400px) {

    .info-content.flex-list ol {
        -ms-flex-direction: row;
            flex-direction: row;
    }

    .info-content ol {
        padding-left: 40px;
    }


 /*-------------------------HOMEPAGE-----------------------------------*/

    .column_one_home{
        -ms-flex-direction: column;
            flex-direction: column;


    }

    .column_one_home>p{
        width: 200px;
        margin-left: 0px;
        margin-right: 5px;
        margin-bottom: 8px;
    }

    #appil_logo {
        margin: 5px;
        width: 25%;
        height: auto;
        transition: 0.7s
    }

    #iclic_logo {
        width: 30%;
    }
 /*------------------------Images-------------------------------------*/

    .image_container {
        list-style: none;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        -ms-flex-pack: justify;
            justify-content: space-between;
        width: auto;
        padding: 0px;
        margin-top: 3%;
        margin-left: 3%;
        margin-right: 3%;
    }

    div.main-content {
    -ms-flex: none;
        flex: none;
    margin: 0 0vw;
    margin-top: 10px;
    padding: 0px 0px 0px 0px;
    background-color: #FCF3CF;
}

#hoffman_reward{
    float: right;
    width: 25%;
    height: auto;
    margin-bottom: 10px;
    margin-left: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#fong_reward{
    float: left;
    width: 25%;
    height: auto;
    margin-bottom: 10px;
    margin-right: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


}

/*
    Medium Screens
*/
@media screen and (min-width: 800px) {

    div.main-content {
        -ms-flex: none;
            flex: none;
        margin: 0 10vw;
        margin-top: 10px;
        padding: 20px 10px 50px 10px;
        background-color: #FCF3CF;
        min-height: 675px;
    }

    div.main-content-tableView {
        -ms-flex: none;
            flex: none;
        margin: 0 4vw;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 0px 0px 0px 0px;
        background-color: #FCF3CF;
    }

    #aside_link{
        position: relative;

    }

    #aside_link i {
        display: block;
        position: absolute;
        top: -5px;
        left: 179px;
    }

    #newspaper{
        width: 100%;
    }


    #daily_iowan{
        width: 100%;
        margin-left: 0em;

    }

    #hoffman_reward{
        float: right;
        width: 25%;
        height: auto;
        margin-bottom: 10px;
        margin-left: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    #fong_reward{
        float: left;
        width: 25%;
        height: auto;
        margin-bottom: 10px;
        margin-right: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }






 /*-----------------------Gallery----------------------------------------*/
    .image_box {
        width: 200px;
        height: 200px;
        margin: 20px;
        margin-top: 0px;
    }

    .image_box_caption{
        color:black;
        margin: 0px;
        text-align: center;
        font-size: 0.5em;
    }

    .presentation_box_flex{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
    
    .presentation_box_flex>ul{
        list-style: none;
    }
      
    .presentation_box_flex>li{
        padding: 5px;
    }
    
    .box_caption {
        width: 380px;
        margin-bottom: 2px;
        text-align: center;
    }
    
    .pp_video{
        -ms-flex-item-align: center;
            align-self: center;
        width: 500px;
        height: auto;
    }
    


    #img01{
        max-width: 65%;
        height: auto;

    }


 /*---------------------------projects---------------------------------------*/

    .tabs_container {
        margin-left: 25px;
        margin-right: 25px;
        margin-top: 25px;
    }

    .tab {
        overflow: hidden;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: rgba(33, 33, 33, 1);
        width: auto;
        color: darkgrey;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        transition: 0.3s;
        font-size: 25px;
    }

    .long_tab_projects {
        display: inline-block;
    }

    .short_tab_projects {
        display: none;
    }

    .tab button:hover {
        color: gold;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: rgba(33, 33, 33, 1);
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: white;
        color: gold;
    }

 /*--------------resources------------------------------*/
    .resources_list {
        margin-right: 15px;
    }

    #montage {
        display: none;
    }

    #ctroomImg4 {
        width: 30%;
    }    
    
    #ctroomImg5 {
        width: 30%;
        
    }


 /*-----------------footer----------------------------*/
    .footer_section {
        width: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .footer_section img {
        max-height: 100px;
        max-width: auto;
    }

    #footerImg1 {
        -ms-flex-order: 1;
            order: 1;
    }

    #footerImg2 {
        -ms-flex-order: 3;
            order: 3;
    }

    #footerTxt {
        -ms-flex-order: 0;
            order: 0;
    }
}

/*ipad*/
@media screen and (min-width: 760px){
    div.summary_collab {
        padding: 0px 0px 100px 0px;
    }

    div.summary_whatsnew {
        padding: 15px 0px 150px 0px;
    }

    .para_small_whatsnew {
        height: 20px;
    }

    .spacing {
        height: 65px;
    }

    .info-header-collab {
        padding: 10px 10px;
    }

    #newspaper{
        width: 100%;

    }
    


}

/*
    Large Screens
*/
@media screen and (min-width: 1330px) {

    h1 {
        font-size: 2em;
    }

    div.summary ul > li, div.info-content ul > li {
        padding: 0em 0em;
    }

    header > div > a > div > h1 > span.name-long {
        display: inline-block;
    }

    header > div > a > div > h1 > span.name-short {
        display: none;
    }

    .filter a > div > h1 > span.name-long {
        display: inline-block;
    }

    .filter a > div > h1 > span.name-short {
        display: none;
    }


 /*--------------resources-----------------------------------------------------*/

    .two_column_layout {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
            flex-direction: row;
    }

    .column_one {
        -ms-flex-order: 1;
            order: 1;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;

    }

    .column_two {
        -ms-flex-order: 2;
            order: 2;
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
    }

    .column_one_resources {
        -ms-flex-order: 1;
            order: 1;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;
    }


    .column_two_resources {
        -ms-flex: 0 1 100%;
            flex: 0 1 100%;
    }

    #ctroomImg4 {
        width: 25%;
        
    }
    
    #ctroomImg5 {
        width: 25%;
        
    }

  


 /*------------------------Collaborators---------------------------------*/

    .main-area{
        width: 100%;
    }

    .two_column_collab {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
    }

    .tab_collab {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
            flex-direction: row;
        height: 100%;
        overflow: hidden;
        -ms-flex: none;
            flex: none;
        display: block;
    }

    .column_two_collab {
        -ms-flex: none;
            flex: none;
        display: block;
    }

    .column_two_collab_small {
        display: none;
    }

    .column_two_projects{
        display: block;
    }

    .tabs_container {
        margin-left: 25px;
        margin-right: 25px;
        margin-top: 25px;
    }

    .tab {
        overflow: hidden;
    }

    div.summary_collab {
        padding: 75px 0px 100px 0px;
    }

    .spacing {
        height: 20px;
    }

    /* Style the buttons inside the tab */
    .tab_collab button {
        background-color: rgba(33, 33, 33, 1);
        color: darkgrey;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        transition: 0.3s;
        font-size: 25px;
    }

    .tab_collab button:hover {
        color: gold;
    }

    .tab_collab button:hover {
        background-color: rgba(33, 33, 33, 1);
    }
 /* Create an active/current tablink class */

    .tab_collab button.active {
        background-color: white;
        color: gold;
    }

    .collab_tab_large/*large screens*/ {
        display: inline-block;
    }

    #secondTab {
        margin-left: 10px;
    }

    #thirdTab {
        margin-left: 10px;
    }

    .tabcontent {
        display: none;
        padding: 6px 12px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: white;
        animation: fadeEffect 1s;
        height: 895px;
        overflow-y: scroll;
    }

    .tabcontent li{
        list-style-type: none;
        margin-bottom: 10px;
    }

    .tabcontent a{
        list-style-type: none;
        margin-bottom: 10px;
        text-decoration: none;

    }
    .tabcontent p {
        margin-left: 15px;
    }

    .tabcontent hr {
        display: none;
    }

    .tabcontent a:visited {
        color: cornflowerblue;
    }

    .tabcontent a:link {
        color: darkblue;
    }

    .collab_tab_large {
        display: none;
    }

    .collab_tab_small {
        display: inline-block;
    }

    .tab_projects {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: column;
            flex-flow: column;
        float: right;
        height: 100%;
    }

    .tab_projects button {
        background-color: rgba(33, 33, 33, 1);
        color: darkgrey;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        transition: 0.3s;
        font-size: 25px;
        margin-bottom: 5px;
    }

    .long_tab_projects {
        display: none;
    }

    .short_tab_projects {
        display: inline-block;
    }

    .tab_projects button:hover {
        color: gold;
    }

    .tab_projects button:hover {
        background-color: rgba(33, 33, 33, 1);
    }

    /* Create an active/current tablink class */
    .tab_projects button.active {
        background-color: white;
        color: gold;
    }

 /* Style the tab content */
    .tabcontent_projects {
        display: none;
        padding: 6px 12px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: white;
        animation: fadeEffect 1s;
        height: 738px;
        overflow-y: scroll;
    }

    .tabcontent_projects  li{
        margin-bottom: 10px;
    }

    .tabcontent_projects a{
        list-style-type: none;
        margin-bottom: 10px;
        text-decoration: none;
    }

    .tabcontent_projects p {
        margin-left: 15px;
    }

    .tabcontent_projects hr {
        display: none;
    }

    .tabcontent_projects a:visited {
        color: cornflowerblue;
    }

    .tabcontent_projects a:link {
        color: darkblue;
    }

    /* Fade in tabs */
    @keyframes fadeEffect {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }





 /*----------------------------------------------------------------------*/


 /*-----------------------------resources page---------------------------*/

    .resources {
        margin: 15px;
    }

    .resources_list {
        margin-right: 15px;
    }

    #montage {
        display: none;
    }
 /*----------------------------------------------------------------------*/


 /*-----------------------------what's new-----------------------------*/


    .column_two_whatsnew {
        display: block;
        border-bottom-left-radius: 10px;
    }

    .tab_whatsnew {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row;
            flex-flow: row;
        width: auto;
        height: 100%;
    }

    .tab_whatsnew button {
        background-color: rgba(33, 33, 33, 1);
        color: darkgrey;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        width: 200px;
        transition: 0.3s;
        font-size: 25px;
        margin-bottom: 0px;
        margin-right: 5px;
    }

    .tab_whatsnew button:hover {
        color: gold;
    }

    .tab_whatsnew button:hover {
        background-color: rgba(33, 33, 33, 1);
    }

    /* Create an active/current tablink class */
    .tab_whatsnew button.active {
        background-color: white;
        color: gold;
    }

 /*----------------------------------------------------------------------*/


 /*-----------------Footer-----------------------------------------------*/

    .footer_section {
        -ms-flex-direction: row;
            flex-direction: row;

    }


    #footerImg2 {
        display: block;
    }

 /*---------------------------------------------------------------------*/

    #zeiss {
        max-width: 30%;
        height: auto;
    }
}

/* Custom Breakpoint for Full Navigation */
@media screen and (min-width: 1075px) {

    nav {
        -ms-flex-direction: row;
            flex-direction: row;

    }

    nav > ul {
        overflow: visible;
        display: -ms-flexbox;
        display: flex;
    }

    nav ul {
        -ms-flex-direction: row;
            flex-direction: row;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    nav ul > li > a {
        border-top: 0px;
    }

    nav ul > li > a[aria-expanded=true] + ul a {
        text-indent: -2px;
    }

    nav ul > li > a[aria-expanded=true] + ul {
        border-left: 2px solid black;
        border-bottom: 2px solid black;
        border-right: 2px solid black;
    }

    nav ul > li ul {
        position: absolute;
        top: 67px;
        left: 0px;
        z-index: 2;
    }

    nav ul > li ul > li {
        margin: 0px;
        padding: 0px;
    }

    nav ul > li > a + ul {
        min-width: 100%;
    }

    nav ul > li > a + ul a {
        text-indent: 0px;
    }

    nav .ham-container > .hamburger-wrapper {
        display: none;
    }
}

/*
    XLarge Screens
*/
@media screen and (min-width: 1400px) {

    header > div > a > div > h1 > span.name-long {
        display: inline-block;
    }

    header > div > a > div > h1 > span.name-short {
        display: none;
    }

    /*---------------Faculty, Staff, Grads, Undergrads----------------------*/

    .column_one {
        margin-right: 15px;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;

    }


 /*----------------------------------------------------------------------*/

 /*-----------------------------resources page---------------------------*/

    #montage {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
    }
 /*----------------------------------------------------------------------*/

    .collab_tab_large {
        display: inline-block;
    }

    .collab_tab_small {
        display: none;
    }

 /*---------------------------sponsors-------------------------------------------*/





}

@media screen and (min-width: 2000px){
/*-----------------------homepage--------------------------------------*/
    body{
        font-size: 2em;
    }

    header{
        height: 15em;
    }

    .background>.image{
        height: 100vh;
    }

    nav{
        height: 5em;
    }

    nav>.logo-wrapper>a>img{
        height: 5em;
        padding: 0px;
    }

    nav ul > li.has-children > a::after {
        background: url('');
    }

    nav ul > li ul {
        top: 5em;
        left: 0px;

    }

    div.main-content{
        padding: 0px 0px 0px 0px;

    }

    .footer_section>a>img{
        max-height: 5em;
        width: auto;
    }

    /*------------collaborators page---------------*/
    .two_column_collab{
        /*font-size: 1.5em;*/
    }

    .tab_collab button {
        font-size: 1.0em;
    }

    /*-----------images page-------------------*/

    .gallery {
        height: 40em;
        width: auto;
        margin-left: 2%;
        margin-right: 2%;
    }

    .image_container {
        height: 40em;
    }

    .image_box {
        width: 9em;
        height: 9em;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .image_box_caption{
        color:black;
        margin: 0px;
    }

    .presentation_box_flex{
        display: -ms-flexbox;
        display: flex;
        list-style: none;

    }
       
    .presentation_box_flex>ul{
        padding: 5px;
    }

    .pp_video{
        -ms-flex-item-align: center;
            align-self: center;
        height: auto;
        width: 500px;
    }
    
    .box_caption {
        width: 380px;
        margin-bottom: 2px;
        text-align: center;
    }

    /*----------Projects Page-------------------------*/

    .two_column_projects{
        /*font-size: 1.5em;*/
    }

    .tabcontent_projects {
        height: 30em;
    }

    .tab_projects button{
        font-size: 1.5em;
    }

    /*------What's New page ----------------------*/

    .two_column_whatsnew{
        /*font-size: 1.5em;*/
    }

    .tab_whatsnew button{
        font-size: 1.5em;
    }

    #aside_link i {
        display: block;
        position: absolute;
        top: -5px;
        left: 167px;
    }








}

/* --------------------------------

Primary style for Panel

-------------------------------- */


section.foo *,
section.foo *::after,
section.foo *::before {
    box-sizing: border-box;
}

section.foo *::after,
section.foo *::before {
    content: '';
}



/* --------------------------------

Main components

-------------------------------- */

.cd-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    transition: visibility 0s 0.6s;

}

.cd-panel::after {
    /* overlay layer */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
    transition: background 0.3s 0.3s;
}

.cd-panel.is-visible {
    visibility: visible;
    transition: visibility 0s 0s;
}

.cd-panel.is-visible::after {
    background: rgba(0, 0, 0, 0.6);
    transition: background 0.3s 0s;
}

.cd-panel.is-visible .cd-panel-close::before {
    animation: cd-close-1 0.6s 0.3s;
}

.cd-panel.is-visible .cd-panel-close::after {
    animation: cd-close-2 0.6s 0.3s;
}

@keyframes cd-close-1 {
    0%,
    50% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes cd-close-2 {
    0%,
    50% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-45deg);
    }
}

.cd-panel-header {
    position: fixed;
    width: 90%;
    height: 4em;
    line-height: 1em;
    background: #FCF3CF;
    z-index: 2;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    transition: top 0.3s 0s;
}

.cd-panel-header h1 {
    font-weight: bold;
    color: black;
    padding-left: 5%;
}

.from-right .cd-panel-header,
.from-left .cd-panel-header {
    top: -80px;
}

.from-right .cd-panel-header {
    right: 0;
}

.from-left .cd-panel-header {
    left: 0;
}

.is-visible .cd-panel-header {
    top: 0;
    transition: top 0.3s 0.3s;
}

@media only screen and (min-width: 768px) {
    .cd-panel-header {
        width: 70%;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-panel-header {
        width: 50%;
    }
}

.cd-panel-close {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 3.5em;
    /* image replacement */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin-top: 0.5em;
}

.cd-panel-close::before,
.cd-panel-close::after {
    /* close icon created in CSS */
    position: absolute;
    top: 22px;
    left: 20px;
    height: 3px;
    width: 20px;
    background-color: #424f5c;
    /* this fixes a bug where pseudo elements are slighty off position */
    backface-visibility: hidden;
}

.cd-panel-close::before {
    transform: rotate(45deg);
}

.cd-panel-close::after {
    transform: rotate(-45deg);
}

.no-touch .cd-panel-close:hover {
    background-color: #424f5c;
}

.no-touch .cd-panel-close:hover::before,
.no-touch .cd-panel-close:hover::after {
    background-color: #ffffff;
    transition-property: transform;
    transition-duration: 0.3s;
}

.no-touch .cd-panel-close:hover::before {
    transform: rotate(220deg);
}

.no-touch .cd-panel-close:hover::after {
    transform: rotate(135deg);
}

.cd-panel-container {
    position: fixed;
    width: 90%;
    height: 100%;
    top: 0;
    background: white;
    z-index: 1;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-delay: 0.3s;
    border-style: solid;
    border: 2px;
}

.from-right .cd-panel-container {
    right: 0;
    transform: translate3d(100%, 0, 0);
}

.from-left .cd-panel-container {
    left: 0;
    transform: translate3d(-100%, 0, 0);
}

.is-visible .cd-panel-container {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

@media only screen and (min-width: 768px) {
    .cd-panel-container {
        width: 70%;
    }
}

@media only screen and (min-width: 1170px) {
    .cd-panel-container {
        width: 50%;
    }
}

.cd-panel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5em 5%;
    overflow: auto;
    /* smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;

}

.cd-panel-content p {
    font-size: 14px;
    font-size: 0.875rem;
    color: #424f5c;
    line-height: 1.4;
    margin: 2em 0;
}

.cd-panel-content p:first-of-type {
    margin-top: 0;
}

@media only screen and (min-width: 768px) {
    .cd-panel-content p {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.6;
    }
}