:root {
    --font-sans-serif: 'Rubik', sans-serif;

    --portfolio-width-landscape: 100%;
    --portfolio-height-landscape: 100%;
    /*--portfolio-height-landscape: calc(var(--portfolio-width-landscape) *0.5);*/

    --portfolio-top-section-height: calc(100% * 0.15);
    --portfolio-bottom-section-height: calc(100% * 0.85);

    --portfolio-half-height: calc(var(--portfolio-height-landscape) * 0.5);

    --portfolio-width-portrait: 95vw;
    --portfolio-height-portrait: var(--portfolio-width-portrait);
    --portfolio-height-portrait: calc(100% - 2em);

    --portfolio-thumbs-container-height: 3em;
    /*--portfolio-thumbs-container-height: 10vh;*/

    --iframe-top: 0;
    --iframe-left: 10%;

    --iframe-width-portrait: calc(100% - 6em);
    --iframe-height-portrait: var(--portfolio-bottom-section-height);

    --iframe-video-width: 1920;
    --iframe-video-height: 1080;
    --iframe-video-ratio: calc(var(--iframe-video-height) / var(--iframe-video-width));

    --portfolio-h1-height: 1em;
    --portfolio-h2-height: 1.5em;
    --portfolio-h1-h2-height: calc(var(--portfolio-h1-height) + var(--portfolio-h2-height));
    /*--portfolio-h1-h2-top: calc((var(--portfolio-top-section-height) / 2) - (var(--portfolio-h1-h2-height) / 2) - 1.4em);*/
    /*--portfolio-h1-h2-top: 0;*/
    --portfolio-h1-h2-top: calc(var(--portfolio-top-section-height) - 3.8em);
    /*--portfolio-h1-h2-top: calc(var(--portfolio-top-section-height) - var(--portfolio-h1-h2-height));*/
    /*--portfolio-h1-h2-top: 3em;*/
    /*--portfolio-h1-h2-top: 0;*/

    --sectionLineSpacing: 1em;
    --sectionLineSpacingPrint: 0.9em;
    --paragraphLineSpacing: 1.9em;

    --buttonColor: rgba(136, 117, 80, 0.15);

    --borderColor: #2b2c31;
    --grid-container-width: 100%;

    --portfolio-item-image-shadow-1: 5px;
    --portfolio-item-image-shadow-2: 10px;
    --portfolio-item-image-shadow-3: -2px;

    --pageWidth: 8.5in;
    --pageHeight: 11in;

    --pageTopBottomMargin: calc(100vh - var(--pageHeight));
    --pageTopMargin: calc(var(--pageTopBottomMargin) / 4);
    --pageBottomMargin: calc(var(--pageTopBottomMargin) - var(--pageTopMargin));

    --h3Height: 0.5in;
    --h3Padding: 0.27in;

    --pageInnerHeight: calc(var(--pageHeight) - var(--pagePaddingTopAndBottom));
    /*--pageInnerHeight: calc(var(--pageHeight) - var(--pagePaddingTopAndBottom));*/
    --pageInnerWidth: 7.5in;

    --pagePaddingTopAndBottom: 0.5in;

    /*--col1Width: 100%;*/
    --col1Width: 5.6in;

    --headerHeight: 0.75in;

    --col1PortfolioItemWidth: calc(var(--col1Width) * 0.34);
    --col1PortfolioItemHeight: calc(var(--col1PortfolioItemWidth) * 0.75);
    /*--col1PortfolioItemHeight: calc(var(--swiper-image-thumb-height) + 17px);*/

    --col1PortfolioTop: calc(var(--h3Height) + var(--headerHeight));
    --col1ExperienceHeaderTop: calc(var(--col1PortfolioItemHeight) + var(--col1PortfolioTop));
    --col1ExperienceTop: calc(var(--col1ExperienceHeaderTop) + var(--h3Height));
    --col1ExperienceHeight: calc(var(--pageInnerHeight) - var(--col1ExperienceTop));

    /*--col1PortfolioExpandedHeight: calc(var(--pageInnerHeight) - var(--col1PortfolioTop));*/
    --col1PortfolioExpandedHeight: calc(var(--pageInnerHeight) - var(--col1PortfolioTop));

    --col1PortfolioExpandedHeightWButton: calc(var(--col1PortfolioExpandedHeight) - var(--moreButtonHeight));

    --scrollBarWidth: 20px;

    --col2Width: 1.6in;
    --col2Left: 6in;

    --dateWidth: 8.5em;
    --colSpacing: 3em;

    /* RESPONSIVE */
    --col2WidthResponsive: 10em;
    --col1WidthResponsive: calc(100% - 15em);
    --col2LeftResponsive: calc(100% - var(--col2WidthResponsive));
    --minWidthResponsive: calc(var(--col2WidthResponsive) * 2.5);
    --col1PortfolioItemWidthResponsive: calc(var(--col1WidthResponsive) * 0.34);
    --col1PortfolioItemHeightResponsive: calc(var(--col1PortfolioItemWidthResponsive) * 0.75);
    --col1ExperienceHeaderTopResponsive: calc(var(--col1PortfolioItemHeightResponsive) + var(--col1PortfolioTop));

    --moreButtonHeight: 20px;
    --responsivePageHeight: calc(100% - 1in);

    --footerNoteHeight: 2em;
    --footerTop: calc(var(--pageInnerHeight) + 0.5em);
    /*--footerTop: calc(var(--pageInnerHeight) - var(--footerNoteHeight));*/

    --gridContainerWidthResponsive: calc(100%);

    --swiper-slide-width: 100%;
    --image-border-color: white;
    --swiper-image-thumb-width: 100px;
    --swiper-image-thumb-height: 10vw;
    /*--swiper-container-thumbs-height: calc(var(--swiper-image-thumb-height));*/
    --swiper-button-width: 2vmin;
    --swiper-button-margin: 14vw;
}

.button {
    display: inline-block;
    padding: 10px 18px;
    margin-bottom: 10px;
    border: none;
    border-radius: 7px;
    background: #EEE linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2));
    color: #222;
    font-weight: 500;

    text-shadow: 0 1px white;
    cursor: pointer;
    text-transform: uppercase;
}

.button:hover {
    background-color: #8CF;
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
    color: #222;
}

.button:active,
.button.is-checked {
    background-color: #28F;
}

.button.is-checked {
    color: white;
    text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

.buttonGroup {
    display: inline-flex;
}

.buttonGroup:after {
    content: '';
    display: block;
    clear: both;
}

.buttonGroup .button {
    float: left;
    border-radius: 0;
    margin-left: 0;
    margin-right: 1px;
    font-size: 0.7em;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;

}

html {
    overflow-x: hidden;
}

@keyframes squeezeBody {
    from {
        width: 100%;
    }
    to {
        width: calc(100% - 300px);
    }
}

@-webkit-keyframes squeezeBody {
    from {
        width: 100%;
    }
    to {
        width: calc(100% - 300px);
    }
}

@keyframes stretchBody {
    from {
        width: calc(100% - 300px);
    }
    to {
        width: 100%;
    }
}

@-webkit-keyframes stretchBody {
    from {
        width: calc(100% - 300px);
    }
    to {
        width: 100%;
    }
}

.squeezed-body {
    animation: squeezeBody 0.5s ease;
    -webkit-animation: squeezeBody 0.5s ease;
    width: calc(100% - 300px);
}

.full-body {
    animation: stretchBody 0.5s ease;
    -webkit-animation: stretchBody 0.5s ease;
    width: 100%;
}

.serif {
    font-family: 'Old Standard TT', serif;
}

.top-bar {
    height: 45px;
    min-height: 45px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.bars-lnk {
    color: #fff;
}

.bars-lnk i {
    display: inline-block;
    margin-left: 10px;
    margin-top: 7px;
}

.bars-lnk img {
    display: inline-block;
    margin-left: 10px;
    margin-top: -15px;
    margin-right: 15px;
    height: 35px;
}

.lateral-menu {
    background-color: #333;
    color: rgb(144, 144, 144);
    width: 300px;
    font-family: 'Open Sans', 'Myriad Pro', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
}

.lateral-menu label {
    color: rgb(144, 144, 144);
}

.lateral-menu-content {
    padding-left: 10px;
    height: 100%;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 16px;
}

.lateral-menu-content .title {
    padding-top: 15px;
    font-size: 2em;
    height: 45px;
}

.lateral-menu-content-inner {
    overflow-y: auto;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-right: 10px;
    font-size: 0.9em;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    height: 100%;
    padding-top: 65px;
}

.container > * {
    display: block;
    width: 50%;
    margin-left: 10px;
    margin-right: 10px;
    max-height: 100%;
}

.container textarea {
    resize: none;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    height: 97%;
    max-height: 97%;
    width: 45%;
}

#preview {
    height: 97%;
    max-height: 97%;
    border: 1px solid #eee;
    overflow-y: scroll;
    width: 55%;
    padding: 10px;
}

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    background-color: #f8f8f8;
    border: 1px solid #dfdfdf;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 0.125rem 0.3125rem 0.0625rem;
}

pre code {
    background-color: transparent;
    border: 0;
    padding: 0;
}

.modal-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    /*background-color: rgba(51, 51, 51, 0.5);*/
}

.modal-inner {
    margin-top: 200px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 225px;
    background-color: #fff;
    opacity: 1;
    z-index: 1000;
}

.modal-close-btn {
    float: right;
    display: inline-block;
    margin-right: 5px;
    color: #ff4336;
}

.modal-close-btn:hover {
    float: right;
    display: inline-block;
    margin-right: 5px;
    color: #8d0002;
}

.modal-topbar {
    clear: both;
    height: 25px;
}

.modal-inner .link-area {
    margin: 10px;
    height: 170px;

}

.modal-inner textarea {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.version {
    color: white;
    font-size: 0.8em !important;
}

#markdown_box {
    width: 100%;
    padding: 20px;
}

#sourceTA {
    height: 5em;
    display: block;
    width: 100%;
    position: relative;
    overflow: auto;
    margin-bottom: 5px;
    padding: 2em;
    border: 1px dashed #ddd;
    color: #aaa;
}

#runBtn {
    position: fixed;
    right: 0.5em;
    top: 0.5em;
}

.hidden {
    display: none;
}

@page {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.25in;
}

ul {
    position: relative;
}

p {
    font-size: 1rem;
    margin-bottom: 0.25em;
}

ul, ol, dl {
    font-size: 11px;
    margin-top: 0;
    margin-bottom: 1em;
    margin-left: 1.5em;
}

ul, ol, dl, li {
    font-size: 1em;
}

h1 {
    font-size: 22pt;
    font-weight: 300;
    line-height: 36px;
    text-transform: none;
    text-align: center;
}

h2 {
    font-size: 10pt;
    font-weight: 200;
    line-height: 1em;
    text-transform: none;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
}

#targetDiv > h2:nth-child(3) {
    text-transform: uppercase;
}

h3 {
    font-size: 0.8rem;
    font-weight: 400;
    padding-top: 2.5em;
    padding-bottom: 1em;
    text-transform: uppercase;
    color: black;
    letter-spacing: 0.15em;
}

h4 {
    font-size: 11pt;
    font-weight: 400;
    padding: 1em 0 0;
    /*padding-bottom:0.5em;*/
    text-transform: uppercase;
    color: #555;
}

table thead tr th, table thead tr td {
    margin-bottom: 1em;
    page-break-before: always;
    page-break-inside: avoid;
    page-break-after: auto;
    color: #444;
}

table tr th, table tr td {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#targetDiv > p:nth-child(1) > img {
    width: 42px;
    top: 1px;
    position: relative;
    float: left;
    left: 0;
}

#targetDiv > h1:nth-child(3) {
    padding-left: 50px;
    padding-right: 120px;
    font-size: 28pt;
}

#targetDiv > h2:nth-child(4) {
    padding-left: 50px;
    padding-right: 10rem;
}

a {
    color: #1d1d1d;
}

#targetDiv > table > tbody > tr > td {
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

#targetDiv > table > tbody > tr > td:nth-child(2),
#targetDiv > table > tbody > tr > td:nth-child(3),
#targetDiv > table > tbody > tr > td:nth-child(4) {
    min-width: 10em;
}

#targetDiv > table > tbody > tr > td:nth-child(5) {
    min-width: 5em;
}

table tr th, table tr td {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.youtubePrintText {
    font-size: 6pt;
    text-align: center;
}

.linkIcon {
    background: url(arrow-right-up.svg) no-repeat;
    position: relative;
    left: -.125em;
    overflow: visible;
    width: 1em;
    height: 0.8em;
    top: 0.2em;
    display: inline-block;
}

#targetDiv > p > a {
    font-weight: normal;
}

#summary ~ ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

#targetDiv > ul:nth-child(10),
#targetDiv > ul:nth-child(12),
#targetDiv > ul:nth-child(14) {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

#experienceMarker ~ ul {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

#summary ~ ul,
#targetDiv > ul:nth-child(7),
#knowledge,
#knowledgeMarker ~ ul,
#technicalexperience > h3 ~ ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

hr {
    margin-bottom: 0;
}

li {
    hyphens: none;
}

table {
    border: 0;
}

@media screen {
    #productsshipped ~ td:nth-child(1) {
        max-width: 2em;
    }
}


header a {
    font-size: 0.7rem;
    text-align: center;
    position: absolute;
    top: -2em;
    width: 100%;
}

ul, h1, h2, h3, h4, h5, p, td, th,
table thead tr th, table thead tr td,
#targetDiv > table > tbody > tr > td {
    color: black;
}

@media screen {
    #footer {
        display: none;
    }
}

/*@media print {*/
#footer {
    font-size: 8pt;
    position: fixed;
    bottom: 3px;
    width: 100%;
    text-align: center;
}

/*}*/

button {
    font-size: 0.7rem;
    padding: 0.25em 2em;
    background-color: #ebeeee;
}

#summary {
    padding-bottom: 0;
}

.newPage {
    position: relative;
    height: 0;
    width: 100%;
    page-break-before: always;
}

.preformatted {
    white-space: pre-wrap;
    font-size: 10px;
}

#targetDiv > table > tbody > tr > td:nth-child(1) {
    text-align: right;

}

ul:first-of-type {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

#pageFrame {

    -webkit-box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.11);
    -moz-box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.11);

    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;

    overflow: hidden;
    border: 0 solid #000000;

    max-width: var(--pageWidth);
    width: var(--pageWidth);
    height: var(--pageHeight);

    padding: 0.5in 0.5in 0.5in 0.5in;
    margin: 0 auto 0 auto;
}

.printPage {
    height: 11in;
}

/*PRINT*/
/*@media print {*/

.printFriendly .pageBreak {
    page-break-before: always;
    break-before: page;
    height: 0.5in;
    margin-bottom: 9px;
    width: 100%;
    position: relative;
}

.printFriendly #targetDiv > table > tbody > tr > td {
    font-size: 8pt;
}

.printFriendly html, .printFriendly body {
    font-size: 11pt;
}

.printFriendly table thead tr th, table thead tr td,
.printFriendly #technicalexperience ~ h2 {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: normal;
}

.printFriendly h2 {
    padding-bottom: 0.25em;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 200;
}

.printFriendly h3 {
    font-size: 13px;
    font-weight: 500;
}

.printFriendly #targetDiv > h2:nth-child(2) {
    right: 5em;
}

.printFriendly #targetDiv > h2:nth-child(4) {
    padding-left: 53px;
    font-size: 8pt;
    padding-top: 0.5rem;
}

.printFriendly header {
    display: none;
}

.printFriendly

@page {
    size: A4;
    margin: 0;
}

.printFriendly body {
    padding: 0;
    margin: 0;
}

.printFriendly #technicalexperience ~ h2 {
    padding-bottom: 0.5em;
}

.printFriendly #targetDiv > h2:nth-child(1),
.printFriendly #targetDiv > h2:nth-child(2) {
    letter-spacing: normal;
}

.printFriendly #targetDiv > table > tbody > tr > td {
    line-height: 1.2em;
}

.printFriendly #pageFrame {
    width: var(--pageWidth);
    margin: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 0;
    padding: 0.5in 0.5in 0;
}

/*#footernote {*/
/*display: block;*/
/*}*/
/*}*/

#targetDiv > ul > li > strong {
    color: #545454;
}

h1, .h1 {
    font-size: calc(34px + 8 * (100vw - 320px) / 1600);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 0.25em;
    color: #86754d;
}

body, h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-sans-serif);
}

h2, .h2 {
    font-size: 10pt;
    font-weight: 400;
    padding-top: 0.25em;
    color: black;
    font-family: var(--font-sans-serif);
}

h3, .h3 {
    font-size: 9pt;
    font-weight: 400;
    margin: 0;
    padding: var(--h3Padding) 0 0;
    height: var(--h3Height);
    overflow: hidden;
}

strong {
    font-weight: 500;
}

#footernote,
ul, ol, dl, li, p,
table thead tr th, table thead tr td,
table tr th, table tr td {
    font-family: var(--font-sans-serif);
    font-size: 8pt;
    line-height: 1.5em;
}

table thead tr th {
    font-weight: 500;
}

.dateSpan {
    color: #333333;
    margin-top: 1em;
}

.flex-container {
    display: flex;
    align-items: stretch;
}

.bold {
    font-weight: 500;
}

.caps {
    text-transform: uppercase;
}

span > .tech,
span > .skills {
    font-style: italic;
    padding: 1px 4px 2px 4px;
    background-color: #f1f1f1;
    line-height: 2em;
    top: -.8em;
    position: relative;
}

#skills {
    padding-bottom: 0.8em;
}

.experienceItem_tags {
    display: block;
    position: relative;
}

.experienceItem_description {
    display: inline-block;
    position: relative;
}

.experienceItem_tags,
.experienceItem_description,
#col2 > ul > li,
#col2 > p {
    line-height: var(--paragraphLineSpacing);
}

#col2 > ul > li {
    margin-bottom: var(--sectionLineSpacing);
}

.printFriendly #col2 > ul > li {
    margin-bottom: var(--sectionLineSpacingPrint);
}

#experienceMarker ~ p {
    width: var(--col1Width);
    padding-bottom: var(--sectionLineSpacing);
}

#col2 > p {
    padding-bottom: var(--sectionLineSpacing);
}

.printFriendly #experienceMarker ~ p {
    width: var(--col1Width);
    padding-bottom: var(--sectionLineSpacingPrint);
}

.printFriendly #col2 > p {
    padding-bottom: var(--sectionLineSpacingPrint);
}

* {
    box-sizing: border-box;
}

.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item,
.grid-sizer {
    height: var(--col1PortfolioItemHeight);
    width: var(--col1PortfolioItemWidth);

    /*padding: 0 10px 10px 0;*/
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.fitToWidth .grid-item,
.fitToWidth .grid-sizer {
    /*height: var(--col1PortfolioItemHeightResponsive) !important;*/
    /*width: var(--col1PortfolioItemWidthResponsive) !important;*/
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.grid-item-content {
    /*overflow: hidden;*/
    border-radius: 5px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative !important;

    /*--shadowHoriz: 2px;*/
    /*--shadowVert: 2px;*/
    /*--shadowBlur: 4px;*/
    /*--shadowSpread: 0;*/
    /*--shadowColor: rgba(0, 0, 0, 0.5);*/
    /*!*--shadowColor: red;*!*/

    /*-webkit-box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);*/
    /*-moz-box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);*/
    /*box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);*/
    /*transition-duration: 300ms;*/

}

.js-tilt:hover .grid-item-content {
    cursor: pointer;

    /*--shadowHoriz: 2px;*/
    /*--shadowVert: 2px;*/
    /*--shadowBlur: 10px;*/
    /*--shadowSpread: 0;*/
    /*--shadowColor: rgba(0, 0, 0, 0.5);*/
    /*!*--shadowColor: red;*!*/
    /*!*transition-duration: 300ms;*!*/
    /*-webkit-box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);*/
    /*-moz-box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);*/
    /*box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);*/

}

.portfolio_img {
    border-radius: 5px;
    padding: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: brightness(60%);

    --shadowHoriz: 0;
    --shadowVert: 0;
    --shadowBlur: 6px;
    --shadowSpread: 0;
    --shadowColor: rgba(0, 0, 0, 0.5);
    /*--shadowColor: red;*/
    /*transition-duration: 300ms;*/
    -webkit-box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);
    -moz-box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);
    box-shadow: var(--shadowHoriz) var(--shadowVert) var(--shadowBlur) var(--shadowSpread) var(--shadowColor);

}

.js-tilt:hover > img {
    box-shadow: none;
}

.portfolio_img_shadow {
    /*filter: brightness(0%);*/
    border-radius: 5px;
    /*float: top;*/
    width: 100%;
    height: 100%;
    position: absolute;
}

.portfolio_img_logo_shadow,
.portfolio_img_logo_outline,
.portfolio_img_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
    padding: 12% 14%;
    z-index: 1;
    border: none;
}

.portfolio_img_logo_outline {
    -webkit-filter: brightness(0%) blur(1px);
    filter: brightness(0%) blur(1px);
    display: none;
}

.js-tilt:hover > .portfolio_img_logo_outline {
    display: inherit;
}

.portfolio_img_logo_shadow {
    -webkit-filter: brightness(0%) blur(2px);
    filter: brightness(0%) blur(2px);
}

.js-tilt {
    transform-style: preserve-3d;
}

.js-tilt:hover {
    z-index: 100;
}

.js-tilt > .p0 {
    transform: translateZ(0);
}

.js-tilt > .p1 {
    transform: translateZ(20px);
}

.js-tilt > .p2shadow {
    transform: translateZ(38px);
}

.js-tilt > .p2 {
    transform: translateZ(40px);
}

.grid-item-selected {
    /*transform: perspective(1000px) rotateX(0deg) rotateY(0deg);*/
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: absolute;
}

.grid-card-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: .1em;
    left: .1em;
    background-color: rgba(0, 0, 0, .5);
}

.grid-card-thumbnail-details {
    padding: 1em;
    height: 30%;
    top: -30%;
    position: relative;
    color: white;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#cc000000', GradientType=0);
    border-radius: 0 0 5px 5px;
}

.portfolio-item-thumbnail-title,
.portfolio-item-thumbnail-client {
    color: white;
    font-size: 1.1em;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    top: 0;
    line-height: 1em;
    padding: 0;
    text-shadow: 2px 2px 2px rgba(104, 104, 104, 1);
}

.grid-card img {
    border-radius: 0;
}

.portfolio-item-thumbnail-client {
    font-weight: 500;
    top: 0.2em;
    position: relative;
}

.portfolio-top-section h1 {
    font-size: 5vmin !important;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}

#ex1 h1 {
    color: gold;
}

#ex1 h2 {
    color: lightgoldenrodyellow;
}

.portfolio-top-section h2 {
    font-size: 2vmin !important;
    padding-bottom: 0;
    margin: 0;
}

.portfolio-bottom-section {
    height: var(--portfolio-bottom-section-height);
    width: 100%;
    scroll-snap-type: y mandatory;
    position: relative;
}

.portfolio-top-section,
.portfolio-bottom-section {
    /*background-color: rgba(20, 40, 60,0.4);*/
}

.portfolio-item-image-table {
    height: 100%;
    width: 100%;
}

.portfolio-item-image-container {
    width: 100%;
    height: 100%;

}

.portfolio-item-image-offset {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-item-image {

    border: 2vmax solid #2b2c31;

    position: relative;
    object-fit: contain;
    max-height: calc(100% - 10px);
    max-width: calc(100% - 10px);
    -webkit-box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;
    -moz-box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;
    box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;
}

.png {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border-style: none;
}

.wrapper {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.wrapper td {
    vertical-align: middle;
    text-align: center;
}

table, tr, td, tbody {
    border: hidden transparent;
    background-color: transparent;
}

.portfolio-item-image-container {
    scroll-snap-align: start;
    overflow: visible;
}

.grid-item {
    /*overflow-y: scroll;*/
    overflow: visible;
    scroll-snap-type: both mandatory;
}

.grid {
    scroll-snap-align: start;
    overflow-y: scroll;
}

#ex1 {
    z-index: 1000;
    width: var(--portfolio-width-landscape);
    max-width: var(--portfolio-width-landscape);
    height: var(--portfolio-height-landscape);
    max-height: var(--portfolio-height-landscape);
    min-height: 300px;
    /*background: url("../img/raw/portfolio/background.jpg") no-repeat;*/
    /*background-size: cover;*/
    background: none;
    border: none !important;
    box-shadow: none;
}

/* portrait mode */
@media (max-aspect-ratio: 1/1) {
    #ex1 {
        width: var(--portfolio-width-portrait) !important;
        max-width: var(--portfolio-width-portrait) !important;
        height: var(--portfolio-height-portrait) !important;
        max-height: var(--portfolio-height-portrait) !important;
    }
}

.blocker {
    background-color: rgba(0, 0, 0, .95);
}

.swiper-pagination-bullet {
    /*background-color: rgb(168, 168, 168) !important;*/
}

/*@media (max-width: 783px) {*/
/*#ex1 {*/
/*background: red;*/
/*!*top: -50%;*!*/
/*!*margin-top: -50%;*!*/
/*}*/
/*}*/

.swiper-slide {
    background-size: cover;
    background-position: center;
    /*height: var(--portfolio-bottom-section-height) !important;*/
}

.gallery-top {
    height: calc(var(--portfolio-height-landscape) - var(--portfolio-thumbs-container-height));
}

.gallery-thumbs {
    height: var(--portfolio-thumbs-container-height);
    overflow: visible !important;
}

.blocker {
    height: 100vh !important;
    padding-left: 1vw !important;
    padding-right: 1vw !important;
    /*padding-left: 0 !important;*/
}

button,
#optionsButton,
.buttonGroup .button,
.noselect,
.grid,
.moreButton,
#ex1 {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.modal h4 {
    font-size: 1rem !important;
    font-weight: 400;
}

.modal p {
    font-size: 0.8rem !important;
    font-weight: 400;
    /*text-align: center;*/
    /*font-style: italic;*/
}

img.lazy {
    display: block;
}

.printFriendly .experienceItem_titleContainer {
    margin-bottom: 0.25em;
}

#footernote {
    top: var(--footerTop);
    height: var(--footerNoteHeight);
    position: absolute;
    
    font-size: 7pt;
    width: var(--pageInnerWidth);
    color: #8a8a8a;
    text-align: center;
    /*border: thin solid #cacaca;*/
    border: 0;
    padding: 0.25em;
    display: none;
}

.fitToWidth #targetDiv {
    min-width: var(--minWidthResponsive) !important;
}

.fitToWidth #targetDiv,
.fitToWidth #pageFrame {
    width: 100% !important;
    /*background-color: yellow;*/
}

.fitToWidth #experienceContainer {
    /*width: var(--col1WidthResponsive) !important;*/
    width: calc(100% - var(--colSpacing)) !important;
    /*width: 100% !important;*/
}

.fitToWidth #experienceMarker ~ p {
    width: var(--col1WidthResponsive) !important;
    /*background-color: white;*/
}

.fitToWidth #col2 {
    left: var(--col2LeftResponsive);
    width: var(--col2WidthResponsive);
    /*background-color: #0f9d58;*/
}

.fitToWidth .gridContainer {
    /*width:var(--col1WidthResponsive) !important;*/

}

.experienceItem_titleContainer {
    width: calc(100% - var(--dateWidth)) !important;
    /*width: var(--col1WidthResponsive) !important;*/
    display: inline-block;
    position: relative;
    left: 0;
}

.experienceItem_date {
    position: relative;
    float: right;
    text-align: right;
    display: block;
    /*left: calc(100% - var(--dateWidth)) !important;*/
    width: var(--dateWidth) !important;
    /*top: 0;*/
    /*height: 0;*/
    /*text-align: right;*/
    /*background-color: #0f9d58;*/
}

.experienceItem_company {
    /*height: 0;*/
    position: relative;
    top: 0;
}

.experienceItem_tags {
    /*top: -.8em;*/
    display: block;
    position: relative;

}

.experienceItem_description {
    /*top: -1em;*/
    display: inline-block;
    position: relative;

}

#targetDiv {
    width: 100%;
    height: var(--pageInnerHeight);
    font-size: 1rem;
    padding: 0;
    border: 0;
    overflow: visible;
    margin: auto;
}

#col2 {
    position: relative;
    /*right:0;*/
    left: var(--col2Left);
    width: var(--col2Width);
    height: 0;
    /*top: var(--headerHeight);*/
}

#col2 > ul {
    list-style-type: none;
    margin: 0;
}

/*#col2 > ul > li {*/
/*#col2 > h3 ~ ul {*/
#col2 > h3 ~ ul {
    top: -.5em;
    position: relative;
}

#col2 {
    background-color: #0f9d58;
}

#header {
    height: var(--headerHeight);
}

#filterContainer {
    width: var(--col1Width);
    text-align: left;
    position: relative;
    padding: 0;
    margin: 0;
    height: 0;
}

#portfolioFilter {
    height: 20px;
    /* line-height: 2rem; */
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: visible;
    /* margin-bottom: 1rem; */
    font-size: 9pt;
    top: -27px;
    right: -2px;
    position: absolute;
    width: 6em;
}

.buttonGroup .button {
    text-transform: unset;
    margin: 0;
    padding: 5px;
    border-radius: 0 !important;
    background: none;
    color: black;
}

#experienceContainer {
    /*height: var(--col1ExperienceHeight);*/
    width: calc(var(--col1Width) + var(--scrollBarWidth));
    overflow-x: hidden;
    overflow-y: scroll;
}

.gridContainer {
    transition-duration: 500ms;
    width: calc(var(--col1Width) + var(--scrollBarWidth));
    /*max-width: calc(var(--col1Width) + var(--scrollBarWidth));*/
    height: var(--col1PortfolioItemHeight);
    max-height: var(--col1PortfolioItemHeight);
    position: relative;
    -webkit-overflow-scrolling: touch;
    /*overflow: hidden;*/
    /*overflow-y: scroll;*/

    overflow-scrolling: touch;
}

.fitToWidth .gridContainer {
    width: calc(var(--gridContainerWidthResponsive) - var(--scrollBarWidth));
}

.gridContainer.expand {
    max-height: var(--col1PortfolioExpandedHeightWButton);
    height: auto;
}

#grid {
    width: 100%;
    scroll-snap-align: start;
}

.button {
    font-weight: 400;
}

.button.is-checked {
    font-weight: 400;
    text-decoration: underline overline;
}

.moreButtonContainer {
    position: relative;
    height: 0;
}

.moreButton {
    transition: 333ms;
    position: relative;
    width: var(--col1Width);
    height: var(--moreButtonHeight);
    padding: 0;
    margin: 0;
    top: -5px;
    font-weight: 400;
    border-width: 1px;
    background: url(../img/svg/icon/expand_more.svg) no-repeat center;
    overflow: visible;
    display: inline-block;
}

.tag-icon {
    /*background: url(../img/svg/icon/tag.svg) no-repeat;*/
    filter: brightness(200%);
    height: 1.1em;
    width: 1.1em;
    left: -0.15em;
    top: 0.35em;
    position: absolute;
    float: left;
}

/*.tag-icon::after{*/
/*content: "<img src='../img/svg/icon/tag.svg' alt='Tag' width='600' height='400'>";*/
/*}*/

.moreButton:hover {
    background-color: var(--buttonColor);
    font-weight: 500;
}

.moreButton.expand {
    background-image: url(../img/svg/icon/expand_less.svg);
    border: outset rgba(136, 117, 80, 0.2);
    top: 0;
}

.videoPlayButton {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*padding: 30%;*/
    filter: brightness(0) invert(1);
    position: absolute;
    text-shadow: 2px 2px;
}

.videoPlayButton2 {
    background-size: contain;
    filter: brightness(0) invert(1);
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    position: absolute;
}

.gallery-thumbs .videoPlayButton2 {
    background: url(../img/svg/icon/baseline-play_circle_outline-24px.svg) no-repeat center;
}

#topButtonsContainer {
    height: 0;
    width: 100%;
    top: -30px;
    left: 0;
    position: relative;
    text-align: right;
}

button,
#headerButtons > button,
#topButtonsContainer > button {
    position: relative;
    height: 4em;
    width: 10em;
    padding: 1em 2px 2px 2px;
    background-size: contain;

    display: inline-block;
    background: transparent no-repeat top;
}

#headerButtons {
    position: relative;
    /*left: 0;*/
    padding: 0;
    margin-left: auto;
    margin-right: auto;

    top: 0;
    height: var(--headerHeight);

    display: flex;
    align-items: center;
    justify-content: center;

    max-width: var(--pageWidth);
    width: var(--pageWidth);
}

button > div {
    position: relative;
    height: 2em;
    width: 100%;
    top: 0.2em;
    background: no-repeat top;
    background-size: contain;
    display: inline-block;
    opacity: 0.25;
}

button:hover > div {
    opacity: 0.7;
    cursor: pointer;
}

button:hover > span {
    opacity: 0.7;
}

button > span {
    top: -.2em;
    position: relative;
    opacity: 0.5;
}

.txtButton > div,
.pdfButton > div {
    background-image: url(../img/svg/icon/download.svg);
}

.emailButton > div {
    background-image: url(../img/svg/icon/baseline-email-24px.svg);
}

.phoneButton > div {
    background-image: url(../img/svg/icon/baseline-phone-24px.svg);
}

.showDetailsButton > div {
    background-image: url(../img/svg/icon/baseline-remove_red_eye-24px.svg);
}

.hideDetailsButton > div {
    background-image: url(../img/svg/icon/baseline-zoom_out-24px.svg);
}

/*#portfolioHeader{*/
/*background-image: url(../img/svg/icon/baseline-unfold_more-24px.svg);*/
/*background-repeat: no-repeat;*/
/*background-position-y: 1.9em;*/
/*background-size: 1.4em;*/
/*padding-left: 1.5em;*/
/*left:-1.5em;*/
/*position: relative;*/
/*width: var(--col1Width);*/
/*}*/

.download {
    background: url(../img/svg/icon/download.svg) no-repeat 50% 30%;
    height: 50px;
    /*width: 45%;*/
    padding-top: 30px;
    margin: 5px;
    position: relative;

}

/*not in use*/
#optionsButton {
    position: absolute;
    right: -.3in;
    top: -.35in;
    height: 30px;
    width: 30px;
    background: no-repeat top;
    opacity: 0.5;
}

.responsiveHeight #pageFrame {
    height: auto;
}

.responsiveHeight #targetDiv {
    height: auto;
}

.responsiveHeight #experienceContainer {
    height: auto;
}

.responsiveHeight .expand {
    max-height: 10000em;
}

.responsiveHeight .expand {
    border-style: none;
}

.hidePageBorder #pageFrame {
    border: none !important;
    box-shadow: none !important;
}

header {
    /*padding-top: 1vh;*/
    background-color: yellow;
    width: 100%;
    height: 100%;
}

.modal {
    padding: 2vmin !important;
}

.swiper-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;

    transition-timing-function: ease-in-out;

    -webkit-transition: top 2s, -webkit-transform 2s;
    transition: top 2s, transform 2s;
}

.gallery-thumbs {
    /*height: 20%;*/
    box-sizing: border-box;
    padding: 10px 0;
    /*background-color: #0f9d58;*/
    max-width: 85%;
    /*transform-style: preserve-3d;*/

}

.gallery-thumbs .swiper-slide {
    height: auto;
    border: 2px solid white;
}

.gallery-thumbs .swiper-slide img {
    /*background-color: white;*/
    /*border-color: white;*/
    /*border-width: 3px;*/
    /*opacity:0.6;*/
    /*border-style: solid;*/
    padding: 1px;
}

.gallery-thumbs .swiper-slide-thumb-active img {
    /*border-color: #60616b;*/
    opacity: 1;
}

.swiper-slide.swiper-slide-thumb-active {
    border-color: #60616b;
    border-image-outset: 20px;
    top: -20%;
    /*transform: translateZ(100000px) !important;*/
}

.swiper-slide-thumb,
.swiper-slide {
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    position: relative;
    transition: top 6s;
    text-align: center;
    white-space: nowrap;

    /*margin: 1em 0;*/
}

.gallery-thumbs .swiper-slide {
    background-color: white !important;
    width: 100%;
    height: fit-content !important;
    /*-webkit-transition: all 2s;*/
    /*transition: all 2s;*/

    /*height: 150px !important;*/
    /*height: var(--swiper-image-thumb-height) !important;*/
}

iframe,
.swiper-image {

    vertical-align: middle;
    max-height: 96%;
    max-width: calc(100% - var(--swiper-button-margin));

    margin-left: auto;
    margin-right: auto;

    position: relative;
    object-fit: contain;

    border: 2px solid var(--image-border-color);
    background-color: var(--image-border-color);

    /*-webkit-box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;*/
    /*-moz-box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;*/
    /*box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;*/
}

/*.gallery-thumbs .swiper-image {*/
/*-webkit-box-shadow: none !important;*/
/*-moz-box-shadow: none !important;*/
/*box-shadow: none !important;*/
/*border-width: 3px;*/
/*background-size: cover;*/
/*padding: 0;*/
/*margin: 0;*/
/*width: 100% !important;*/
/*height: 100% !important;*/
/*}*/

.gallery-thumbs .swiper-slide {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: 0 var(--portfolio-item-image-shadow-1) var(--portfolio-item-image-shadow-2) var(--portfolio-item-image-shadow-3) #777 !important;
}

.swiper-image-thumb {

    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-size: cover;
    padding: 0;
    margin: 0;
    /*height: 100% !important;*/

    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    border: 0.5vmin var(--image-border-color);
    background-color: var(--image-border-color);
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.swiper-button-next,
.swiper-button-prev {
    width: var(--swiper-button-width) !important;
    background-size: contain !important;
}

.swiper-button-next {
    top: 0;
    left: 0;
}

.swiper-button-prev {
    top: 0;
    right: -40px;
    position: absolute;
}

.swiper-button-white {
    /*-webkit-filter: drop-shadow(-5px -5px 5px #000);*/
    /*filter: drop-shadow(2px 5px 4px rgba(0, 0, 0, 0.8));*/
    position: relative;
}

.gallery-top .png {
    background-color: transparent !important;
    border: none !important;

    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/*.swiper-slide {*/
/*background-color: rgba(90, 10, 0,0.5);*/
/*}*/

:root {
    --youtube-ratio: calc(1920 / 1080);
}

#ex1 iframe {
    background-color: black;
    /*position: absolute;*/
    /*top: var(--iframe-top);*/
    /*top: 50%;*/
    /*margin-top:-50%;*/
    /*left: var(--iframe-left);*/
    /*width: var(--iframe-width-portrait) !important;*/
    /*height: calc(var(--iframe-width-portrait) * .5) !important;*/
    /*width: 100% !important;*/
    border: none;
    /*max-height: var(--iframe-height-portrait);*/
    /*max-width: var(--iframe-width-portrait);*/
    /*display: none;*/
    width: 100%;
    /*max-height: 100%;*/
    height: calc(100vw * .5);
}

/* portrait mode */
@media (min-aspect-ratio: 1/1) {
    #ex1 iframe {
        height: var(--iframe-height-portrait) !important;
        width: calc(var(--iframe-height-portrait) * 2) !important;
        max-width: calc(100% - 4em);
        /*display: none;*/
    }
}

#ex1 > h4 {
    padding-top: 0;
    font-size: 200px !important;
}

.portfolio-top-section.singleitem {
    padding-left: 1vw;
    padding-right: 1vw;
}

.singleitem .gallery-top {
    height: calc(var(--portfolio-height-landscape) - var(--portfolio-top-section-height));
}

.singleitem .gallery-thumbs {
    display: none;
}

.singleitem .swiper-button-white {
    display: none;
}

.singleitem .swiper-image,
.singleitem iframe {
    max-width: 100%;
    padding: 0;
    margin: 0;
    left: -5px;
    border: none;
}

.singleitem iframe {
    height: var(--portfolio-height-landscape) !important;
    width: var(--portfolio-width-landscape) !important;
    /*background-color: transparent !important;*/
}

.gallery-thumbs {
    padding-top: 10px !important;
    overflow: visible;
}

.swiper-container {
    overflow: visible;
}

.portfolio-top-section {
    width: 100%;
    position: relative;
    /*padding-left: 10vw;*/
    /*padding-right: 5rem;*/
    /*padding-top: var(--portfolio-h1-h2-top);*/
    /*padding-top: calc(100%);*//**/
    /*padding-bottom: 0;*/
    height: var(--portfolio-top-section-height);
    /*background-color: rgba(0, 200, 100, 0.5);*/

    display: flex;
    align-items: center;
    justify-content: center;
}

.text-container {
    /*vertical-align: bottom;*/
    /*position: absolute;*/
    /*padding-bottom: 0;*/
    /*bottom: 25%;*/
    /*width: 100%;*/
    /*left: 0;*/
    /*background-color: rgba(0, 200, 100,0.5);*/
    /*padding-top: 2vh;*/
    /*background-color: red;*/
    align-self: flex-end;
    /*margin-bottom: calc(var(--portfolio-top-section-height) *0.1);*/
}

.grid-card-details-page {
    overflow: hidden;
}

.grid-card-details-page {
    height: 0;
}

.detailedView {
    height: auto !important;
    margin-bottom: 0.5in !important;
}

.detailedView #targetDiv {
    height: auto;
}

.printFriendly #headerButtons {
    display: none;
}

.printFriendly #footernote {
    display: block;
}

.detailedView #footernote {
    display: none;
}

.blocker {
    z-index: 999 !important;
    background-color: rgba(0, 0, 0, 0.99) !important;
}

.swiper-pagination-bullet {
    background-color: gold !important;
}

.printFriendly.detailedView .experienceItem_description {
    /*background-color: red;*/
    line-height: 1.4em;
}

.printFriendly.detailedView td {
    line-height: 1.3em;
    vertical-align: top;
}

.printFriendly.detailedView #productsshipped,
.printFriendly.detailedView #productsshippedcontinued {
    padding-top: 0;
    height: 2em;
}

.printFriendly.detailedView td:nth-child(3) {
    width: 10em;
}

.printFriendly.detailedView td:nth-child(4) {
    width: 12em;
}

#ex1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}