:root {
    --colorNeutralBackground1: #f9f7f4;
    --colorNeutralBackground1: #ffffff;
    --colorBrandForeground1: #00cc00;
    --colorBrandBannerSelected: var(--colorBrandForeground1);
    --colorBrandHeading1: #000000;
    --colorBrandHeading2: #009900;
}

.Page_portfolio #mainContent {
    max-width: 800px;
}

.portfolioBody {
    float: left;
    max-width: 544px;
}

.portfolioImages {
    float: right;
    max-width: 240px;
}

.portfolioImages img {
    min-width: 100px;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    box-shadow: 0px 0px 12px hsla(0, 0%, 0%, 0.25);
    -ms-interpolation-mode: bicubic;
    interpolation-mode: bicubic;
    /*border-radius: 16px;*/
}

img {
    -ms-interpolation-mode: bicubic;
    interpolation-mode: bicubic;
}

.nav_portfolio_project li {
    margin-bottom: 32px !important;
    overflow: hidden;
    text-overflow: clip;
    width: 380px;
}

.nav_portfolio_project .navTitle {
    font-weight: 500;
    font-family: "Segoe UI Semibold", Tahoma, Geneva, Verdana, sans-serif;
    text-transform: capitalize;
    color: var(--colorNeutralForeground1);
}

.nav_portfolio_project .navDescription {
    font-size: 11pt;
    line-height: 12pt;
    color: var(--colorNeutralForeground1Muted);
    text-decoration: none;
    text-overflow: ellipsis;
}

.nav_portfolio_project img {
    margin: 1px;
    margin-right: 8px;
    box-shadow: 0px 0px 2px hsla(0, 0%, 0%, 1.0);
    border-radius: var(--radiusL);
}

.nav_portfolio_project li {
	max-height: 98px;
}

a.navImageButton
{
	overflow: visible;
	height: 98px;
	max-height: 98px;
}

a.mavImageButton img {
	width: 96px;
	height:96px;
}

@media screen and (min-width: 1024px) {
    .portfolioProjectPage #mainContent {
        width: 1000px;
        max-width: 1000px;
    }

    .portfolioBody {
        float: left;
        max-width: 544px;
    }

    .portfolioImages {
        float: right;
        max-width: 440px;
    }

    .portfolioImages img {
        min-width: 100px;
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 820px) {
    .portfolioProjectPage #mainContent {
        width: inherit;
        max-width: inherit;
    }

    .portfolioBody {
        float: none;
        max-width: none;
    }

    .portfolioImages {
        float: none;
        max-width: none;
        text-align: center;
    }

    .portfolioImages img {
        min-width: 0px;
        width: auto;
        height: 200px;
        margin-right: 16px;
    }
}

@media screen and (max-width: 640px) {
    .hideonnarrow {
        display: none;
    }
}