/* general page styles */
html { scroll-behavior: smooth; }
body
{
    color: rgb(55, 55, 55);
    font-size: 18px;
    font-family: 'Source Sans Pro', sans-serif;
}
li, p { font-family: 'Source Sans Pro', sans-serif; font-weight: 500; }
h1 { font-family: 'Source Sans Pro', sans-serif; }
h2, h3, h4 { font-family: 'Noto Serif', serif; }
.container-fluid.body-content { padding: 0; }
.body-template-header
{
    padding: 10px 30px;
    background-color: white;
    box-shadow: 0 2px 5px 0 hsla(0,0%,82.7%,.5);
}
.body-template-header a:hover { text-decoration: none; cursor: pointer; }
.body-template-header img
{
    width: 30px;
    margin-right: 8px;
}
.body-template-header-name
{
    font-family: 'Noto Serif', serif;
    color: #1e9fa3;
    font-weight: bold;
}

/* home page - introduction section */
.intro-section
{
    width: 100%;
    padding-left: 45px;
    padding-right: 45px;
}
.intro-section-headshot
{
    padding: 20px;
    /* max-height: 350px; */
    max-width: 350px;
}
.intro-section-headshot img { width: 100%; }
.intro-section-desc
{
    padding: 20px 0px 30px 20px;
    /* max-width: 700px; */
}
.intro-section-desc-text { margin-bottom: 30px; }
.intro-section-desc-text h1 { color: #1e9fa3; }
.intro-section-desc-text-title
{
    font-family: 'Noto Serif', serif;
    font-weight: bold;
    color: #1e9fa3;
}
.intro-section-desc-text-sub
{
    font-family: 'Source Sans Pro', sans-serif;
    /* font-style: italic; */
    margin-bottom: 30px;
    color: gray;
    font-size: 20px;
}
.intro-section-links { margin-top: 10px; }
.intro-section-links-social
{
    width: 100%;
    margin-top: 10px;
}
.intro-section-links-social a:first-child { margin-left: 0; }
.intro-section-links-social a
{
    display: block;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #59595933;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    text-decoration-skip: objects;
    background-color: white;
    transition-property: color, background-color;
    transition-duration: 0.2s;
}
.intro-section-links-social a:hover
{
    color: black;
    border-color: black;
    background-color: white;
}
.intro-section-links-button
{
    display: block;
    text-align: center;
    color: gray;
    text-decoration: none;
    white-space: nowrap;
    margin-top: 10px;
    margin-right: 10px;
    width: 110px;
    padding: 4px 18px;
    min-height: 36px;
    height: auto;
    border-radius: 18px;
    border: 1px solid #59595933;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 2;
    cursor: pointer;
    text-transform: uppercase;
    transition-property: color, background-color;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}
.intro-section-links-button:hover,
.intro-section-links-button:active,
.intro-section-links-button:focus
{
    text-decoration: none;
    background-color: #1e9fa3;
    border-color: #1e9fa3;
    color: white;
}


/* homepage - projects section */
.projects-section
{
    background-color: rgb(245, 245, 245);
    padding: 30px 50px 50px 50px;
    margin-top: 50px;
}
.projects-section h3
{
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
}
.projects-section-filters ul
{
    font-size: 1.2em;
    margin-top: 0px;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
}
.projects-section-filters ul li
{
    margin-right: 15px;
}
.projects-section-filters ul li a
{
    display: block;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    color: black;
}
.projects-section-filters ul li a.active
{ 
    border-bottom: 2px solid #1e9fa3;
    color: #1e9fa3;
    font-weight: bold;
}
.project-item
{
    padding: 0px;
    margin-bottom: 10px;
}
.project-item > a
{
    text-decoration: none;
}
.project-item-content
{
    background-color: white;
    margin: 10px 10px 0px 0px;
    padding-bottom: 20px;
    height: 100%;
}
.project-item-img > img
{
    width: 100%;
}
.project-item-title
{
    font-weight: bold;
    text-align: center;
    color: white;
    margin-top: 30px;
    margin-bottom: 10px;
}
.project-item-subtitle
{
    font-family: 'Noto Serif', serif;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}
.project-item.p-urban .project-item-content
{
    background-color: rgb(126, 129, 128);
}
.project-item.p-scope .project-item-content
{
    background-color: rgb(8, 150, 127);
}
.project-item.p-labcorp .project-item-content
{
    background-color: rgb(255, 255, 255);
}
.p-labcorp .project-item-title { color: black; }
.p-labcorp .project-item-subtitle { color: black; }
.project-item.p-learnfr .project-item-content
{
    background-color: #5eb1bf;
}
.project-item.p-nasa .project-item-content
{
    background-color: #ffd966ff;
}
.project-item.p-nasa .project-item-title
{
    color: black;
}
.project-item.p-nasa .project-item-subtitle
{
    color: black;
}
.project-item.p-eqo .project-item-content
{
    background-color: #EB9392;
}
.project-item.p-3dmodel .project-item-content
{
    background-color: rgb(255, 198, 75);
}
.project-item.p-dashboard .project-item-content
{
    background-color: #FFAE5E;
}
.project-item.p-hexa .project-item-content
{
    background-color: rgb(32, 19, 67);
}
.project-item.p-spherex .project-item-content
{
    background-color: #f2ece0;
}
.project-item.p-spherex .project-item-title
{
    color: #ff7359;
}
.project-item.p-spherex .project-item-subtitle
{
    color: black;
}

/* footer section */
.page-footer
{
    text-align: left;
    padding: 20px 50px;
    background-color: #1e9fa3;
    color: white;
}

/* back to top button */
#backtotop
{
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 9999; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    /* outline: none; */
    background-color: rgba(40, 42, 43, .1); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    border-radius: 50%; /* Rounded corners */
    transition: all .2s ease-in-out;
}
#backtotop:hover { background-color: rgba(40, 42, 43, .25); }
#backtotop:before
{
    display: block;
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAiIGhlaWdodD0iMTYiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNNC43NCAxMEgyMXYySDQuNzQxTDExIDE3LjU3NyA5Ljk3OCAxOSAxIDExbDguOTc4LThMMTEgNC40MjMgNC43NCAxMHoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMSAtMykiPjxwYXRoIGQ9Ik0wIDBoMjJ2MjJIMHoiLz48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2EiLz48ZyBmaWxsPSIjZmZmIiBtYXNrPSJ1cmwoI2IpIj48cGF0aCBkPSJNMCAwaDIydjIySDB6Ii8+PC9nPjwvZz48L3N2Zz4=) 50% no-repeat;
    transform: rotate(90deg);
}

/* t_header_project template styles */
.t_header_project_imgdiv > img { width: 100%; }
.t_header_project_title
{
    text-align: center;
    color: white; 
    position: absolute;
    left: 25%;
    right: 25%;
    z-index: 2;
}
.t_header_project_img_title
{
    color: white; 
    position: absolute;
    left: 5%;
    right: 48%;
    z-index: 2;
}
.t_header_project_title > h1, .t_header_project_img_title > h1
{
    font-weight: bold;
    margin-bottom: 20px;
}
.t_header_project_img
{
    position: relative;
}
.t_header_project_img_imgdiv
{
    position: absolute;
    z-index: 1;
}
.t_header_project_img_imgdiv > img { width: 100%; }
.t_header_project_img h4 { line-height: 1.5; }

/* t_menu_sticky template styles */
.t_menu_sticky
{
/*    width: 100%;*/
    background-color: white;
}
.menu-item
{
    text-align: center;
    font-weight: bold;
    transition: all .3s;
}
.menu-item:not(:nth-last-child(-n+2)) .menu-item-number:after
{
    content: "";
    position: absolute;
    top: 23%;
    left: 75%;
    background-color: #d1d9dd;
    height: 2px;
    width: 50%;
}
.small-sticky .menu-item:not(:nth-last-child(-n+2)) .menu-item-number:after { top: 33%; }
.menu-item-link { text-decoration: none; }
.menu-item-link:hover { text-decoration: none; }
.menu-item-number
{
    display: inline-block;
    border: 2px solid #d1d9dd;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    background-color: white;
    color: black;
    margin-bottom: 5px;
}
.menu-item-number:hover
{ 
    /* background-color: black; */
    color: white;
    /* border-color: black; */
}
.menu-item-text
{
    padding-top: 10px; 
    color: black;
}
.small-sticky .menu-item-text
{
    display: none;
}
.small-sticky
{
/*    box-shadow: 0 2px 5px 0 hsla(0,0%,82.7%,.5);*/
}
.t_menu_sticky.small-sticky
{
    padding-top: 15px;
/*    margin: 0px;*/
    margin-left: 200px;
    margin-right: 180px;
}
.small-sticky .menu-item-number
{
    width: 20px;
    height: 20px;
    background-color: #edf0f1;
    border-color: #edf0f1;
    color: #9fa6a9;
    font-weight: normal;
    border-width: 0px;
}
.small-sticky .menu-item-text
{
    padding-top: 2px;
    color: #9fa6a9;
    font-weight: normal;
}

/* t_section_header_img template styles */
.t_section_header_color, .t_section_header_img, .t_section_header_color_img
{ 
    position: relative;
    margin: 70px 0;
}
.t_section_header_img_imgdiv > img { width: 100%; }
.t_section_header_img_title
{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 55%;
    font-weight: bold;
}
.t_section_header_color_title, .t_section_header_color_img_title > h1
{
    width: 100%;
    text-align: center;
    position: absolute;
    font-weight: bold;
}
.t_section_header_color_title > h1
{
    font-weight: bold;
}
.t_section_header_color_img_imgdiv
{
    position: absolute;
    top: -10%;
    z-index: 1;
}
.t_section_header_color_img_imgdiv > img { width: 100%; }

/* t_image_grid_1 and t_image_grid_2 template */
.t_image_grid_1, .t_image_grid_2 { background-color: #DADDDB; }
.t_image_grid_1_item > img, .t_image_grid_2_item > img { width: 100%; }

/* t_desc_1 template styles */
.t_desc_1 { width: 100%; }
/* t_desc_2 template styles */
.t_desc_2
{ 
    width: 100%;
    text-align: center;
    background-color: #edf1f1;
    padding: 100px 0px;
}

/* t_desc_img, t_img_desc and t_desc_desc templates */
.t_desc_img, .t_img_desc, .t_desc_desc { padding: 0px 40px; }
.t_desc_img img, .t_img_desc img { width: 100%; }

.t_desc_1 h3, .t_desc_img h3, .t_img_desc h3, .t_desc_desc h3
{
    font-weight: bold;
    margin-bottom: 20px;
}

.t_separator_item { text-align: center; }
.t_separator_item_content
{
    display: inline-block;
    border-radius: 50%;
}

.t_img_proto { text-align: center; }
.t_img_proto_frame
{
    position: relative;
    max-width: 1200px;
    display: inline-block;
}
.t_img_proto_frame > img, .t_img_proto_image > img { width: 100%; }
.t_img_proto_image
{
    position: absolute;
    overflow: scroll;
    background-color: white;
    top: 11%;
    left: 13.5%;
    right: 13.4%;
    bottom: 11%;
}
.t_img { text-align: center; }
.t_img_caption { text-align: center; color: gray; margin-top:10px; font-weight: 300; }

.t_seq_imgs
{
    padding-top: 60px;
    padding-bottom: 60px;
}

.t_proto_proto_title
{
    text-align: center;
    margin-bottom: 10px;
}

.t_suggestions
{
    padding-left: 70px;
    padding-right: 70px;
}
.t_suggestions > h3
{
    font-weight: bold;
    margin-left: -15px;
}


/* overrides for xs devices */
@media (min-width: 0px)
{
    h1 { font-size: 26px; }
    h2 { font-size: 24px; }
    h3 { font-size: 21px; }
    h4 { font-size: 17px; }
    li, p { font-size: 16px; }
    
    .projects-section-filters li { font-size: 0.9rem; width: 100px; }
    .project-item-title { font-size: 1.1em; }
    .project-item-subtitle { font-size: 0.7em; }
    .page-footer { font-size: 12px; }
    .t_img_caption { font-size: 12px; }

    .t_header_project { margin-bottom: 50px; }
    .t_header_project_title { top: 23%; }
    .t_header_project_img { margin-bottom: 50px; height: 250px; }
    .t_header_project_img_title { top: 25%; }
    .t_section_header_color, .t_section_header_img, .t_section_header_color_img { height: 100px; }
    .t_section_header_color_title, .t_section_header_color_img_title > h1 { top: 33%; }
    .t_desc_1 { padding: 0px 30px; margin-bottom: 50px; }
    .t_image_grid_1, .t_image_grid_2 { padding: 70px 30px; margin-bottom: 50px; }
    .t_desc_img, .t_img_desc, .t_desc_desc,
    .t_img, .t_proto_desc, .t_proto_proto, .t_seq_imgs,
    .t_desc_2, .t_suggestions { margin-bottom: 50px; }
    .t_menu_sticky { margin-bottom: 50px; margin-left: 0; margin-right: 0; }
    .t_separator { margin: 70px 0; padding: 0 90px; }
    .t_separator_item_content { width: 30px; height: 30px; }
    .imgcol { padding-top: 30px; }

    #backtotop, #backtotop:before
    { 
        height: 32px;
        width: 32px;
    }
    .menu-item-number { line-height: 2; font-size: 18px; width: 40px; height: 40px; }
    .menu-item-text { font-size: 16px; }
    .menu-item:not(:first-child) .menu-item-number:before { width: 40%; margin-left: 5px; top: 20%; }
    .small-sticky .menu-item-number { font-size: 14px; line-height: 1.5; }
    .small-sticky .menu-item-text { font-size: 12px; line-height: 1.2; }
    .small-sticky { height: 55px; }
    .responsiveRapper iframe, .responsiveRapper object, .responsiveRapper embed { width: 100%; left: 0; }
    .responsiveRapperGap { margin-bottom: 10px; }
}

/* overrides for small devices (landscape phones, 576px and up) */
@media (min-width: 576px)
{
    h1 { font-size: 40px; }
    h2 { font-size: 30px; }
    h3 { font-size: 25px; }
    h4 { font-size: 18px; }
    li, p { font-size: 20px; }

    .projects-section-filters li { font-size: 1rem; width: 100px; }
    .t_img_caption { font-size: 14px; }

    .t_header_project { margin-bottom: 70px; }
    .t_header_project_title { top: 24%; }
    .t_header_project_img { margin-bottom: 70px; height: 300px; }
    .t_header_project_img_title { top: 30%; }
    .t_section_header_color, .t_section_header_img, .t_section_header_color_img { height: 200px; }
    .t_section_header_color_title, .t_section_header_color_img_title > h1 { top: 37%; }
    .t_desc_1 { padding: 0px 30px; margin-bottom: 70px; }
    .t_desc_img, .t_img_desc, .t_desc_desc,
    .t_img, .t_proto_desc, .t_proto_proto, .t_seq_imgs,
    .t_desc_2, .t_suggestions { margin-bottom: 70px; }
    .t_image_grid_1, .t_image_grid_2 { padding: 70px 30px; margin-bottom: 70px; }
    .t_menu_sticky { margin-bottom: 70px; }
    .t_separator { margin: 100px 0; padding: 0 90px; }
    .t_separator_item_content { width: 40px; height: 40px; }
    #backtotop, #backtotop:before 
    { 
        height: 64px;
        width: 64px;
    }
    .menu-item-number { line-height: 2; font-size: 22px; width: 48px; height: 48px; }
    .menu-item-text { font-size: 22px; }
    .menu-item:not(:first-child) .menu-item-number:before { width: 50%; margin-left: 0px; top: 23%; }
    .small-sticky .menu-item-number { font-size: 14px; line-height: 1.5; }
    .small-sticky .menu-item-text { font-size: 14px; }
    .menu-item:not(:first-child) .menu-item-number:before { width: 50%; top: 23%; }
}
   
/* overrides for medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{
    .projects-section-filters li { width: 200px; }

    .t_header_project_title { top: 30%; }
    .t_header_project_img { height: 350px; }
    .t_desc_1 { padding: 0px 140px; }
    .t_separator { margin: 120px 0; padding: 0 140px; }
    .t_separator_item_content { width: 50px; height: 50px; }

    .textcol { padding: 0 50px; }
    .responsiveRapper iframe, .responsiveRapper object, .responsiveRapper embed { width: 70%; left: 15%; }
    .responsiveRapperGap { margin-bottom: -20px; }

    .single-image-sequence { padding: 0 150px; }
}

/* overrides for large devices (desktops, 992px and up) */
@media (min-width: 992px)
{
    h1 { font-size: 60px; }
    h2 { font-size: 40px; }
    h3 { font-size: 30px; }
    h4 { font-size: 22px; }

    .t_header_project { margin-bottom: 120px; }
    .t_header_project_title { top: 32%; }
    .t_header_project_img { margin-bottom: 120px; height: 400px; }
    .t_section_header_color, .t_section_header_img, .t_section_header_color_img { height: 250px; }
    .t_section_header_color_title, .t_section_header_color_img_title > h1 { top: 35%; }
    .t_desc_1 { padding: 0px 240px; margin-bottom: 120px; }
    .t_desc_img, .t_img_desc, .t_desc_desc,
    .t_img, .t_proto_desc, .t_proto_proto, .t_seq_imgs,
    .t_desc_2, .t_suggestions { margin-bottom: 120px; }
    .t_image_grid_1, .t_image_grid_2 { margin-bottom: 120px; }
    .t_menu_sticky { margin-bottom: 120px; }
    .t_separator { margin: 160px 0; padding: 0 180px; }
    .t_separator_item_content { width: 60px; height: 60px; }

    .projects-section-filters li { font-size: 1.2rem; }
    .project-item-title { font-size: 1.3em; }
    .project-item-subtitle { font-size: 0.8em; }
    .page-footer { font-size: 16px; }

    .textcol { padding: 0 75px; }
    .responsiveRapper iframe, .responsiveRapper object, .responsiveRapper embed { width: 56%; left: 22%; }
    .responsiveRapperGap { margin-bottom: -70px; }

    .single-image-sequence { padding: 0 250px; }
}

/* overrides for xlarge devices (desktops, 1200px and up) */
@media (min-width: 1200px)
{
    .t_header_project_title { top: 35%; }
    .t_desc_1 { padding: 0px 340px;}
    .textcol { padding: 0 120px; }
    .t_separator { margin: 180px 0; padding: 0 300px; }
    .t_separator_item_content { width: 60px; height: 60px; }
    .responsiveRapper iframe, .responsiveRapper object, .responsiveRapper embed { width: 50%; left: 25%; }
    .responsiveRapperGap { margin-bottom: -100px; }
}