*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-y: hidden;
}

body {
    margin: 0;
    width: 100%;
    overflow: auto;
    background-color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-variant-ligatures: discretionary-ligatures historical-ligatures contextual common-ligatures;
    font-size: 1em;
    color: black;
}

sup, sub {
    font-size: 60%;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    line-height: 0;
}

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:link, a:visited {
    text-decoration: none;
    color: var(--hl);
}





h1, h2 {
    margin: 0;
    padding: 0;
    font: inherit;
}

h1 a, h2 a {
    color: inherit;
    text-decoration: none;
}

:root {
    --heading-font: "Trebuchet MS", Verdana, Arial, Tahoma, Helvetica, sans-serif;
    --hl: #FF3399;
}

/***************
*  HEADER
****************/

.headwrap {
    max-width: 1080px;
    height: 30px;
    margin: 0 auto;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tmtxt a {
    font-family: var(--heading-font);
    font-weight: bold;
    font-size: 1.2em;
    font-style: italic;
    color: black;
    text-decoration: none;
    padding-left: 3px;
     user-select: none;
    -webkit-user-select: none;
}

.menutxt {
    display: flex;
    padding: 2px 5px 2px 2px;            
    gap: 8px;
    color: black;
}

.menutxt a {
    color: black;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
}


/*************************** THUMBNAIL SCALE LABELS *****************************/

.thScaleLabel {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .thScaleLabel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

.thScaleLabelL,
.thScaleLabelR {
    flex: 0 0 auto;
    width: 70px;
    transition: opacity 0.3s ease;
    font-size: .7em;
}

.thScaleLabelL {
    text-align: left;
    padding-left: 5px;
}

.thScaleLabelR {
    text-align: right;
    padding-right: 5px;
}

.thScaleLabelL .arrow,
.thScaleLabelR .arrow {
    font-size: 1em;
    vertical-align: 0.15em;
}



.thScaleLabelNav {
    flex: 1 1 auto;
    text-align: center;
    font-size: .6em;
}

.thScaleLabelNav .L {
    font-size: 1.1em;
}

.thScaleLabelNav .M {
    font-size: .9em;
}

.thScaleLabelNav .S {
    font-size: .7em;
}

.thScaleLabelNav .L.current,
.thScaleLabelNav .M.current,
.thScaleLabelNav .S.current {
    color: var(--hl);
}

/*************************** THUMBNAIL GRID *****************************/

.thGrid {
    position: relative;
    display: flex;
    justify-content: center;
    vertical-align: bottom;
    z-index: 100;
    width: 100%;
    margin: 0 auto;
}

.thGrid > div {
    display: grid;
    grid-template-columns: repeat(var(--Q), 1fr);
    gap: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    --container-width: 100vw;
}

/* NON-TOUCH DEVICES */
@media (hover: hover) and (pointer: fine) {
    .thGrid { --Q: 1; }
    @media screen and (min-width: 201px)  { .thGrid { --Q: 2; } }
    @media screen and (min-width: 321px)  { .thGrid { --Q: 3; } }
    @media screen and (min-width: 441px)  { .thGrid { --Q: 4; } }
    @media screen and (min-width: 561px)  { .thGrid { --Q: 5; } }
    @media screen and (min-width: 681px)  { .thGrid { --Q: 6; } }
    @media screen and (min-width: 801px)  { .thGrid { --Q: 7; } }
    @media screen and (min-width: 921px)  { .thGrid { --Q: 8; } }
    @media screen and (min-width: 1041px) { .thGrid { --Q: 9; } }
    @media screen and (min-width: 1161px) { .thGrid { --Q: 10; } }
    @media screen and (min-width: 1281px) { .thGrid { --Q: 11; } }
    @media screen and (min-width: 1401px) { .thGrid { --Q: 12; } }
    @media screen and (min-width: 1521px) { .thGrid { --Q: 13; } }
    @media screen and (min-width: 1641px) { .thGrid > div { max-width: 1640px; --container-width: 1640px; } }
}

/* TOUCH DEVICES */
@media (hover: none) and (pointer: coarse) {
    /* DEFAULT - Medium */
    .thGrid { --Q: 2; }
    @media screen and (min-width: 201px)  { .thGrid { --Q: 3; } }
    @media screen and (min-width: 321px)  { .thGrid { --Q: 5; } }
    @media screen and (min-width: 441px)  { .thGrid { --Q: 6; } }
    @media screen and (min-width: 561px)  { .thGrid { --Q: 8; } }
    @media screen and (min-width: 681px)  { .thGrid { --Q: 10; } }
    @media screen and (min-width: 801px)  { .thGrid { --Q: 11; } }
    @media screen and (min-width: 921px)  { .thGrid { --Q: 12; } }
    @media screen and (min-width: 1041px) { .thGrid { --Q: 13; } }
    @media screen and (min-width: 1161px) { .thGrid { --Q: 14; } }
    @media screen and (min-width: 1281px) { .thGrid { --Q: 15; } }
    @media screen and (min-width: 1401px) { .thGrid { --Q: 16; } }
    @media screen and (min-width: 1521px) { .thGrid { --Q: 17; } }
    @media screen and (min-width: 1641px) { .thGrid { --Q: 18; } }
    @media screen and (min-width: 1681px) { .thGrid > div { max-width: 1680px; --container-width: 1680px; } }
    
    /* LARGE */
    .thGrid.large { --Q: 2; }
    @media screen and (min-width: 201px)  { .thGrid.large { --Q: 3; } }
    @media screen and (min-width: 321px)  { .thGrid.large { --Q: 4; } }
    @media screen and (min-width: 441px)  { .thGrid.large { --Q: 5; } }
    @media screen and (min-width: 561px)  { .thGrid.large { --Q: 7; } }
    @media screen and (min-width: 681px)  { .thGrid.large { --Q: 8; } }
    @media screen and (min-width: 801px)  { .thGrid.large { --Q: 9; } }
    @media screen and (min-width: 921px)  { .thGrid.large { --Q: 10; } }
    @media screen and (min-width: 1041px) { .thGrid.large { --Q: 11; } }
    @media screen and (min-width: 1161px) { .thGrid.large { --Q: 12; } }
    @media screen and (min-width: 1281px) { .thGrid.large { --Q: 13; } }
    @media screen and (min-width: 1401px) { .thGrid.large { --Q: 14; } }
    @media screen and (min-width: 1521px) { .thGrid.large { --Q: 15; } }
    @media screen and (min-width: 1641px) { .thGrid.large { --Q: 16; } }
    @media screen and (min-width: 1681px) { .thGrid > div { max-width: 1680px; --container-width: 1680px; } }
    
    /* SMALL */
    .thGrid.small { --Q: 3; }
    @media screen and (min-width: 201px)  { .thGrid.small { --Q: 4; } }
    @media screen and (min-width: 321px)  { .thGrid.small { --Q: 6; } }
    @media screen and (min-width: 441px)  { .thGrid.small { --Q: 8; } }
    @media screen and (min-width: 561px)  { .thGrid.small { --Q: 10; } }
    @media screen and (min-width: 681px)  { .thGrid.small { --Q: 12; } }
    @media screen and (min-width: 801px)  { .thGrid.small { --Q: 13; } }
    @media screen and (min-width: 921px)  { .thGrid.small { --Q: 14; } }
    @media screen and (min-width: 1041px) { .thGrid.small { --Q: 15; } }
    @media screen and (min-width: 1161px) { .thGrid.small { --Q: 16; } }
    @media screen and (min-width: 1281px) { .thGrid.small { --Q: 17; } }
    @media screen and (min-width: 1401px) { .thGrid.small { --Q: 18; } }
    @media screen and (min-width: 1521px) { .thGrid.small { --Q: 19; } }
    @media screen and (min-width: 1641px) { .thGrid.small { --Q: 20; } }
    @media screen and (min-width: 1681px) { .thGrid > div { max-width: 1680px; --container-width: 1680px; } }
}

/*************************** THUMBNAILS *****************************/

.thnail {
    position: relative;
    cursor: pointer;
    --thBG: 2500;
    --thW: 240;
    --thWmod: calc(var(--container-width) / var(--Q));
    --thBGmod: calc(var(--thWmod) * var(--thBG) / var(--thW));
    width: 100%;
    aspect-ratio: 1 / 1;
    background-image: var(--thF);
    background-size: var(--thBGmod);
    background-position: calc(var(--thX) * var(--thBGmod) / var(--thBG) * -1) 
                         calc(var(--thY) * var(--thBGmod) / var(--thBG) * -1);
}


.thnail {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
        cursor: pointer;

}

a.thlink {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}



.thlabelbox {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    container-type: inline-size;
}

.thlab {
    font-size: clamp(0.5em, 16cqw, 0.9em);
    color: #FFF;
    padding: 0 1px 1px;
    text-align: center;
    white-space: normal;
    hyphens: none;
    overflow-wrap: normal;
    pointer-events: none;

}



/*************************** DROPDOWNS - SHARED *****************************/

.ddprojlist,
.ddpurpose,
.ddcontact {
    width: 100%;
    display: none;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px dashed #000;
    overflow-x: visible;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    text-align: center;
    justify-content: flex-start;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
}



.ddprojlist[style*="display: block"],
.ddpurpose[style*="display: block"],
.ddcontact[style*="display: block"] {
    display: flex !important;
}

@media screen and (max-width: 1680px) { 
    .ddprojlist {
        overflow-y: scroll !important;
    }
}

.ddCenter {
    display: flex;
    flex-direction: row; 
    align-items: stretch;
    width: 100%;
    max-width: 1080px;
}

@media screen and (max-width: 600px) {   
    .ddCenter {
        flex-direction: column;
        width: 100%;
        background-color: #fff;
    }
}

.purMainCol,
.conMainCol {
    display: flex;
    order: 2;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    text-align: center;
}    

.purMainCol {  
    flex: 2 1 0;
} 

.conMainInner {  
    flex: 1;
    display: flex;
    align-items: center;
}

.purTxt,
.conTxt {
    text-align: left;
    margin: 5px;
}

.purExtraCol,
.conExtraCol {
    order: 1;
}

.purExtraCol {  
    flex: 1 1 0;
    max-width: none;
    overflow: hidden;
    text-align: right; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.conExtraCol {
    width: 100%;
    max-width: 700px;
    overflow: hidden;
    text-align: right; 
}

.purExtraInner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    min-width: 0;
}

.purExtraTxtBox {
    flex: 1 1 auto;
    height: 180px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
        
.purExtraTxt {
    font-size: .9em;
    margin: 5px;
    margin-top: auto;
}

.purExtraImage {
    flex: 0 0 auto;
    width: 140px; 
}  

.purExtraImage img {
    height: 180px;
    width: 100%;
    display: block;
}

.conExtraCol img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    max-height: 600px;
    object-fit: contain;
    margin-left: auto;
    margin-right: 0;
}

.projCloseFooter,
.purCloseFooter,
.conCloseFooter {                
    margin-top: auto;           
    height: 40px;
    text-align: right;
    box-sizing: border-box;   
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 10px 3px 0; 
}

.projCloseFooter {
    width: 100%;
    max-width: 1680px;  
    margin: 0 auto;
}

.purCloseFooter {
    width: 100%;   
    max-width: 1080px;
}

.conCloseFooter { 
    width: 100%;
    order: 2;
    height: 20px;
}

@media screen and (max-width: 600px) {
    .ddCenter {
        flex-direction: column;
        width: 100%;
        background-color: #fff;
    }
    
    .purMainCol,
    .conMainCol {
        order: 1;
    }

    .purExtraCol,
    .purMainCol {
        flex: none;
        width: 100%;
        max-width: none;
    }
    
    .conMainInner {
        justify-content: left; 
    }

    .conExtraCol {
        order: 2;
    }

    .purExtraCol {
        order: 2;
        justify-content: right; 
    }

    .conExtraCol img {
        margin-right: auto;
    }
}








/*************************** TEXT STYLES *****************************/

.title {
    font-family: var(--heading-font);
    font-weight: bold;
    font-size: 1.1em;
    font-style: italic;
    text-align: left;
    padding: 5px 5px 0 5px;
    color: black;
}

.dateline {
    font-size: 1em;
    font-style: italic;
    padding: 0 5px 0 5px;
    color: black;
    
}

.projtxt {
    padding: 0 5px 5px 5px;
}

.xtratxt {
    font-size: .9em;
    padding: 0 2px 5px 5px;
}

/*************************** SLIDER + FOOTER HEIGHT AND SPACING*****************************/



.sliderheight {
    height: calc(100vh - 80px - 85px - env(safe-area-inset-bottom));
    position: relative;
}


.foot-textWrap {
    position: fixed;
    bottom: 85px;
    left: 0;
    right: 0;
    z-index: 50;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Footer stays at bottom */
    max-height: 100vh;
    border-top: none;
    background-color: rgba(255, 255, 255, 0.85);
    
        
}

.foot-textWrap > * {
    pointer-events: auto; /* Re-enable clicks on children */
}







@media screen and (max-width: 499px) {
    .sliderheight {
        height: calc(100vh - 165px - env(safe-area-inset-bottom));
        position: relative;
    }
    .foot-textWrap {
        bottom: 0; /* At bottom on mobile */
    }
}

@media screen and (max-height: 414px) and (min-width: 415px) {
    .sliderheight {
        height: calc(100vh - 100px - env(safe-area-inset-bottom));
        position: relative;
    }
    .foot-textWrap {
        bottom: 10px; /* just above bottom on landscape mobile to escape home indicator */
    }
}




/*************************** FOOTER *****************************/

.footwrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

@media screen and (max-height: 414px) and (min-width: 415px) {
    .footwrap {
        height: 30px; 
    }
}

.prev,
.next,
.titlewrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.prev {
    justify-content: flex-start;
    width: 30%;
}

.next {
    justify-content: flex-end;
    width: 30%;
}

.titlewrap {
    width: 40%;
    text-align: center;
}

.prev a, 
.next a,
.titleinner {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    color: black;
    font-size: 0.9em;
    text-decoration: none;
}

.next a {
    justify-content: flex-end;
}

.prevarrow, .nextarrow {
    font-size: .9em;
    font-weight: bold;
    flex-shrink: 0;
}

.prevarrow {
    padding: 0 1px 0 3px;
}

.nextarrow {
    padding: 0 3px 0 1px;
}

#prevprojname, #nextprojname {
    font-family: var(--heading-font);
    font-size: .9em;
    line-height: 1;
    position: relative;
    padding: 0 2px 0 2px;
    top: 1px;
    max-width: 85%;
    display: block;
    white-space: normal;
    word-break: normal;
    hyphens: none;
    overflow-wrap: break-word;
}

#nextprojname {
    text-align: right;
}

.titleinner a {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    color: black;
}

.titletext {
    padding: 0;
    font-family: var(--heading-font);
    font-weight: bold;
    font-style: italic;
    font-size: 1.1em;
    text-align: center;
    white-space: normal;
    word-break: normal;
    hyphens: none;
    overflow-wrap: break-word;
}

.titletext a {
    color: black;
    text-decoration: none;
}

.closeicon,
.openicon {
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1;
    min-width: 1.3em;
    padding: 0;
}


/*************************** PROJECT TEXT *****************************/

.ddprojtext {
    position: relative;
    bottom: auto;  
    left: auto;
    right: auto;
    max-height: calc(100vh - 120px - 50px);
    width: 100%;
    display: none;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: 20px;
    text-align: center;
    z-index: 50;
}

@media screen and (max-height: 414px) and (min-width: 415px) {
    .ddprojtext {
        max-height: calc(100vh - 120px - 30px); /* phone landscape 30px footer  */
    }
}


.ddcloseTopTxt {
    position: absolute;
}

@media screen and (max-height: 414px) and (min-width: 415px) {
    .ddprojtext {
        bottom: 0;
    }
}

.txtCenter {
    width: 100%;
    max-width: 1080px;
    display: inline-block;
    height: auto;

}

.projtitlebox {
    position: relative;
}

.txtMainCol {
    width: 100%;
    display: inline-block;
    float: none;
    text-align: left;

}

@media (max-width: 600px) {
    .txtMainCol {
        text-align: left;
    }
    
    .projtxt {
        margin-bottom: 30px;
    } 
}

.txtExtraCol {
    width: 100%;
    display: inline-block;
    float: none;
    text-align: left;

}

@media screen and (max-height: 414px) and (min-width: 415px) {
    .txtExtraCol {
        padding-bottom: 20px;
    }
}

.txtExtraColHead {
    width: 100%;
    float: none;
    text-align: left;
    display: none;

}

@media screen and (min-width: 481px) {
    .txtMainCol {
        width: 70%;
        float: right;
    }

    .txtExtraCol {
        width: 30%;
        text-align: right;
        float: left;
    }

    .txtExtraColHead {
        width: 30%;
        display: inline-block;
        float: left;
    }
}





/*************************** STACKED SLIDER CONTENT *****************************/

.stackedContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.mediaWrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: calc(100% - 20px);
    flex-shrink: 0;
    overflow: hidden;
}

.stackedImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stackedContent-limited {
    /* Inherits base stackedContent styles */
}

.mediaWrapper-limited {
    /* Wrapper constrains to image's max size */
}

.stackedImg-limited {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.captionwrap-limited {
    /* Inherits base captionwrap styles */
}

.stackedVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.videoPoster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.stackedIframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.captionwrap {
    width: auto;
    max-width: none;
    position: relative;
    bottom: auto;
    box-sizing: border-box;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1px 5px;
    flex-shrink: 0;
}

/*************************** IFRAME CONTAINER *****************************/

.iframeContainer {
    height: 100%;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.iframeInner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.embedFrame {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media screen and (orientation: portrait) {
    .embedFrame {
        height: calc(100vh - 214px);
        width: 100%;
    }
}

@media screen and (orientation: landscape) and (max-height: 414px) {
    .embedFrame {
        height: calc(100vh - 104px);
        width: 100%;
    }
}

@media screen and (orientation: landscape) and (min-height: 414px) and (max-height: 479px) {
    .embedFrame {
        height: calc(100vh - 154px);
        width: 100%;
    }
}

@media screen and (orientation: landscape) and (min-height: 480px) {
    .embedFrame {
        height: calc(100vh - 214px);
        width: 100%;
    }
}

/*************************** VIDEO CONTAINER *****************************/

.videoContainer {
    height: 100%;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.video-no-controls:not(:fullscreen)::-webkit-media-controls {
    display: none !important;
}

.video-no-controls:not(:fullscreen)::-webkit-media-controls-enclosure {
    display: none !important;
}

.video-no-controls:not(:fullscreen)::-moz-media-controls {
    display: none !important;
}

.videoInner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/*************************** CAPTIONS *****************************/

.caption {
    font-size: .7em;
    line-height: 1.3;
    text-align: center;
    flex: 1;
}

.caption:only-child {
    margin-right: 0;
}

.credit {
    font-size: .6em;
    color: #7f7f7f;
    line-height: 1.3;
    text-align: right;
    flex: 0 0 auto;
    white-space: nowrap;
}

.credit:only-child {
    flex: 1;
}

.captiontitle {
    font-style: italic;
    font-size: .8em;
    line-height: 1.3;
    text-align: center;
    width: 100%;
}














/*************************** CONSOLIDATED HOVER STATES *****************************/

/* Normal Hover States (Desktop/Mouse) */
.tmtxt a:hover,
.menutxt a:hover {
    color: var(--hl);
}

.thnail:hover .thlab {
    color: var(--hl);
}

.prev a:hover,
.next a:hover,
.titlewrap a:hover {
    color: var(--hl);
    cursor: pointer;
}

.openicon:hover,
.closeicon:hover {
    color: var(--hl); 
    cursor: pointer;
}

/* Touch Device Overrides - Disable ALL hover/active color changes */
@media (hover: none) {
    .tmtxt a:hover,
    .tmtxt a:active,
    .menutxt a:hover,
    .menutxt a:active,
    .prev a:hover,
    .prev a:active,
    .next a:hover,
    .next a:active,
    .thnail:hover .thlab,
    .thnail:active .thlab {
        color: black !important;
    }
}

/* Touch Flash Effects (JS-controlled) */
.tmtxt a.touch-flash {
    color: var(--hl) !important;
}

.menutxt a.active {
    color: var(--hl) !important;
}

.thnail.touch-flash .thlab {
    color: var(--hl) !important;
}

.prev a.touch-flash,
.next a.touch-flash {
    color: var(--hl) !important;
}


/* make ui links unselectable */
.tmtxt a,
.menutxt a,
.prev,
.next,
.titlewrap {        
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}