body {
    background-color: #224;
    padding: 0px;
    margin: 0px;
    color: #aac;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    overflow-y: visible;
}
#frmMain {
    margin: 0px;
    height: 0px;
}
.bannertexttop {
    position: relative;
    top: 0px;
    border-color : #aac;
    border-width: 1px;
    border-style: solid;
    margin-right: 3px;
    padding-right: 1px;
    padding-left: 1px;
}
.bannertop {
    position: relative;
    top: 0px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 3px;
    visibility: hidden;
    overflow-y: visible;
}
.bannertopblink {
    position: relative;
    border-width: 1px;
    margin-right: 3px;
    padding-right: 1px;
    padding-left: 1px;
    visibility: hidden;
    /* animation: blink-hard 1s steps(1, start) infinite; */
}
.bannertextmid {
    position: relative;
    border-color : #aac;
    border-width: 1px;
    border-style: solid;
    margin-right: 3px;
    padding-right: 1px;
    padding-left: 1px;
    width: 6.2vh;
    display: none;
}
.bannermid {
    position: relative;
    top: 40vh;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10vh;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    height: 11.5vh;
    margin-top: 3px;
    overflow-y: visible;
}
#spn_vcursor {
    visibility: hidden;
}
.bannerblink {
    position: relative;
    border-width: 1px;
    margin-right: 3px;
    padding-right: 1px;
    padding-left: 1px;
    -webkit-animation: blink-hard 1s steps(1, start) infinite;
    animation: blink-hard 1s steps(1, start) infinite;
}
@keyframes blink-hard {
    50% {visibility: hidden;}
}
.container {
    align-items: center;
    padding: 0px;
    border-spacing: 0px;
    width: 100vh;
    height: calc(100vh - 53px);
    vertical-align: top;
    overflow-y: visible;
}
.detailhidden {
    display: none;
    /* transition: backdrop-filter 1s ease;
    backdrop-filter: blur(10px) opacity(0);
    inset: 0; */
}
.imghidden {
    display: none;
}
.detailshown {
    display: inline;
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px) opacity(1);
    -webkit-backdrop-filter: blur(10px) opacity(1);
    mask-image: none;

}
.imgshown {
    position: absolute;
    display: inline;
    inset: 0;
    margin-left: auto;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    max-width: 95vw;
    max-height: 95vh;
    -webkit-animation: imgfadein 1s ease;
    animation: imgfadein 1s ease;
}
@keyframes imgfadein {
    from {opacity: 0}
    to {opacity: 1}
}
#divcontent {
    overflow-y: visible;
}
#tblcontent {
    width: calc(100vw - 24px);
    align-self: center;
    border-width: 0px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: visible;
}
#tdmain {
    vertical-align: top;
    height: calc(100vh - 170px);
    overflow-y: visible;
}
#divMain {
    overflow-y: visible;
}
#tdmenu {
    vertical-align: top;
}
table.menunav {
    display: inline-block;
}
#divMenu {
    vertical-align: top;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    animation: menufadein 2s;
    -webkit-animation: menufadein 2s;
}
@keyframes menufadein {
    from { opacity: 0%;}
    to {opacity: 100%;}
}
td.menunav {
    color:#aac;
    padding-left: 50px;
    padding-right: 50px;
    font-size: 24pt;
    cursor: pointer;
}
td.menunavsel {
    color: #ddd;
    padding-left: 50px;
    padding-right: 50px;
    font-size: 24pt;
    cursor: pointer;
    background-color: #448;
}
td.menunav:hover, td.menunavsel:hover, a.linklist:hover {
    text-shadow: 1px 1px 3px #fff;
}

@property --position {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

.hero {

    display: grid;
    justify-content: center;
    grid-template-columns: 40vw 40vw;
    overflow-y: visible;

    /* text-align: center; */

    mask-image: linear-gradient(
        0deg,
        #0000 calc(var(--position)),
        #000 calc(var(--position) + calc(20%))
    );

    animation: wipereveal 3s forwards;
    -webkit-animation: wipereveal 3s forwards;

}

@keyframes wipereveal {
    from { --position: 100%;}
    to { --position: -20%;}
}

img.rand {
    max-height: 65vh;
    max-width: 40vw;
    border-style: solid;
    border-width: 1vw;
    border-color: #755;
    cursor: pointer;
}

span.rand {
    max-height: 70vh;
    max-width: 50vw;
    overflow-y: visible;
    margin-left: auto;
    margin-right: auto;
}

span.txt {
    font-size: 14pt;
    max-height: 70vh;
    max-width: 50vw;
    padding-right: 20px;
    text-align: right;
    margin-top: auto;
    margin-bottom: auto;
    overflow-y: visible;
}

span.txtleft {
    font-size: 14pt;
    max-height: 70vh;
    max-width: 50vw;
    padding-right: 20px;
    text-align: left;
    vertical-align: top;
    overflow-y: scroll;
    scrollbar-color: #aac #446;
}
.txtplus {
    font-size: larger;
    font-weight: bold;
}

.jslink {
    text-decoration: underline;
    color: aliceblue;
    cursor: pointer;
}

span.linklist {
    width: 40vw;
    display: grid;
    grid-template-rows: 15vh 15vh 15vh 15vh;
    gap: 2vh;
}
span.linklistitem {
    display: grid;
    grid-template-columns: 13vw 26vw;
    border-style: solid;
    border-color : #446;
    border-width: 1px;
    border-radius: 10px;
    vertical-align: middle;
    padding: 2vh;
}
span.linklistimg {
    text-align: center;
}
img.linklist {
    max-height: 11vh;
}
span.linklistanchor {
    display: flex;
    align-items: center;
    vertical-align: middle;
}
a.linklist {
    font-family: 'Courier New', Courier, monospace;
    text-decoration: none;
    color:#ddd;
    font-weight: bold;
    font-size: 3vmin;
}
span.gallery {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    width: calc(100vw - 20px);
    /* max-height: 75vh; */
    display: grid;
    grid-template-rows: 45vh 7vh 21vh;
    overflow-y: visible;

    mask-image: linear-gradient(
        0deg,
        #0000 calc(var(--position)),
        #000 calc(var(--position) + calc(20%))
    );

    animation: wipereveal 3s forwards;
    -webkit-animation: wipereveal 3s forwards;
}
span.paintingfooter {
    max-height: 7vh;
    display: grid;
    grid-template-columns: 30vw 60vw;
}
span.paintingdisplay {
    max-height: 50vh;
    display: grid;
    grid-template-columns: 30vw 60vw;
}
.scrollingpicker {
    display: grid;
    grid-template-columns: 1fr;
}
.pickergrid {
    grid-area: 1 / 1;
    position: relative;
    bottom: -6vh;
    place-items: center;
    width: 88vw;
    max-height: 12vh;
    border: 1px solid #446;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: visible;
    touch-action: none; /* Add also this */
    user-select: none; /* Prevent text highlighting */
    background-color: #113;
}
.pickergrid:nth-child(1) {
    opacity: 0;
}
.thumbbox {
    position: relative;
    bottom: 2vh;
    display: grid;
    grid-template-columns: 1vw 12vw 12vw 12vw 16vw 12vw 12vw 12vw 1vw;
    width: 88vw;
    place-items: center;
    overflow-y: visible;
    touch-action: none; /* Add also this */
    user-select: none; /* Prevent text highlighting */
}
span.thumblinkcenter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow-y: visible;
    height: 16vh;
    /* max-width: 16vw; */
    /* z-index: 1; */
}
span.thumblink {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 10vh;
    cursor: pointer; 
    overflow-x: hidden;
    /* z-index: 1; */
}
img.thumblinkimg {
    position: relative;
    max-height: 10vh;
    max-width: 12vw;
}
img.thumblinkimgcenter {
    position: relative;
    /* max-width: 16vw; */
    max-height: 16vh;
}
.thumblink:hover, .thumblinkimgcenter:hover {
    box-shadow: 0px 0px 5px #fff;
}
span.hiddenright {
    position: relative;
    display: none;
    height: 10vh;
    width: 7vw;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    /* z-index: 2; */
}
span.hiddenleft {
    position: relative;
    display: none;
    height: 10vh;
    width: 7vw;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    /* z-index: 3; */
    /* background-color: red; */
}
img.hiddenright {
    position: relative;
    display: none;
    height: 10vh;
    max-width: 7vw;
    opacity: .5;
    /* z-index: 2; */
}
img.hiddenleft {
    position: relative;
    display: none;
    max-width: 7vw;
    height: 10vh;
    opacity: .5;
    /* z-index: 3; */
}
.paintingtitle {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 4vh;
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
}
.paintingimage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: #446;
    border-width: 1px;
    border-radius: 10px;
    margin-right: 1vw;
    margin-left: 1vw;
    background-color: #113;
}
.imagestack {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}
.imagestack img {
    grid-area: 1 / 1;
    max-width: 60vw;
    max-height: 40vh;
    align-self: center;
}
.unitimage {
    opacity: 1;
    max-height: 40vh;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
}
.lastimage {
    opacity: 1;
    max-height: 40vh;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
}
@keyframes crossfadein {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes crossfadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}
.paintinginfo {
    display: grid;
    grid-template-rows: 25vh 4vh 4vh 4vh auto;
    border-style: solid;
    border-color: #446;
    border-width: 1px;
    border-radius: 10px;
    margin-left: 1vw;
    padding: 1vw;
    background-color: #113;
}
.paintingsearch {
    margin-left: 1vw;
    margin-top: auto;
    margin-bottom: auto;
}
.msgtitlefade {
    display: none;
}
.msgtitlefadevisible {
    position: absolute;
    display: inline;
    opacity: 1;
    z-index: 100;
    color: #f65;
    height: 7vh;
    top: 75vh;
    align-content: center;
    text-align: center;
    font-size: 16pt;
    animation: crossfadeout 5s ease-in-out 0s 1 normal forwards;
    -webkit-animation: crossfadeout 5s ease-in-out 0s 1 normal forwards;
}

#imgnavleft {
    opacity: .5;
    position: absolute; 
    left: -2vw; 
    bottom: 2.5vh;
}
#imgnavstart {
    opacity: .5;
    position: absolute;
    left: -.6vw;
    bottom: 10.5vh;
}
#imgnavright {
    opacity: .5;
    position: absolute;
    right: -2vw;
    bottom: 2.5vh;
}
#imgnavend {
    opacity: .5;
    position: absolute;
    right: -.6vw;
    bottom: 10.5vh;
}
#imgnavleft:hover, #imgnavright:hover, #imgnavstart:hover, #imgnavend:hover {
    opacity: 1;
}
#spndescription {
    text-align: center;
    overflow-y: scroll;
    scrollbar-color: #446 #113;
    margin-bottom: 1vh;
}
.attributes {
    margin-top: auto;
    margin-bottom: auto;
}
#btnsearch {
    position: relative;
    height: 4vh;
    opacity: .5;
    top: 1vh;
    cursor: pointer;
}
#txtsearch {
    background-color: #aac;
    color: #113;
    width: 23vw;
    height: 4vh;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    font-size: 14pt;
}
#imgclear {
    position: relative;
    height: 4vh;
    opacity: .5;
    top: 1vh;
    cursor: pointer;
}

span.noimagespn {
    /* background-color: #446;  */
    position: relative;
    display: flex;
    width: 7vw;
    height: 10vh;
    overflow-x: hidden;
    /* z-index: 3; */
}

img.noimage {
    position: relative;
    opacity: .5;
    width: 7vw;
    height: 10vh;
}

@keyframes movenoimageleft {
    from {left: -12vw}
    to {left: 0vw}
    /* from {left: 0vw}
    to {left: 12vw} */
}

@keyframes movenoimagefromleft {
    from {left: 0vw}
    to {left: 12vw}
}

@keyframes movenoimagespanfarleft {
    from {
        opacity: 0;
        left: 0vw;
    }
    to {
        opacity: 1;
        left: 0vw
    }
}

@keyframes movenoimagespanfarright {
    from {
        /* opacity: 0; */
        right: 6.5vw;
    }
    to {
        /* opacity: 1; */
        right: 6.5vw;
    }
}

@keyframes movenoimagefarleft {
    from {left: -11vw;}
    to {left: 0vw}
}

@keyframes movenoimagefarright {
    from {right: -11vw;}
    to {right: 0vw}
}

@keyframes movenoimageright {
    from {right: 0vw}
    to {right: 12vw}
}

@keyframes moveimageleft {
    from {left: -12vw}
    to {left: 0vw}
    /* from {left: 0vw}
    to {left: 12vw} */
}

@keyframes moveimageright {
    from {right: 0vw}
    to {right: 12vw}
}

@keyframes moveimagefarleft {
    from {right: 12vw;}
    to {right: 0;}
}

@keyframes moveimagefarright {
    from {left: 12vw;}
    to {left: 0vw;}
}

@keyframes moveimagefarleftfromleft {
    from {left: 0vw;}
    to {left: 12vw}
}

@keyframes moveimagefarrightfromright {
    from {right: 0vw;}
    to {right: 12vw}
}

@keyframes movecenterimgleft {
    from {
        max-width: 16vw; 
        max-height: 16vh;
    }
    to {
        max-width: 12vw; 
        max-height: 10vh;
    }
}

@keyframes movecenterspnleft {
    from {
        left: -14vw; 
        /* left: 0vw;  */
        max-width: 16vw; 
        max-height: 16vh;
    }
    to {
        left: 0vw;
        /* left: 14vw;  */
        max-width: 12vw; 
        max-height: 10vh;
    }
}

@keyframes movenextcenterspanleft {
    from {
        left: -14vw; 
        /* left: 0vw; */
        /* max-width: 16vw;  */
        max-height: 16vh;
        height: 16vh;
    }
    to {
        left: 0vw;
        /* left: 14vw; */
        /* max-width: 16vw;  */
        max-height: 16vh;
        height: 16vh;
    }
}

@keyframes movenextcenterimgleft {
    from {
        max-width: 12vw; 
        max-height: 10vh;
        height: 10vh;
    }
    to {
        /* max-width: 16vw;  */
        max-height: 16vh;
        height: 16vh;
    }
}

@keyframes movenextcenterspanright {
    from {
        right: 0vw;
        /* max-width: 16vw; */
        max-height: 16vh;
        height: 16vh;
    }
    to {
        right: 14vw;
        /* max-width: 16vw; */
        max-height: 16vh;
        height: 16vh;
    }
}

@keyframes movenextcenterimgright {
    from {
        max-width: 12vw; 
        max-height: 10vh;
        height: 10vh;
    }
    to {
        /* max-width: 16vw;  */
        max-height: 16vh;
        height: 16vh;
    }
}

@keyframes movehiddenright {
    from {right: -6.5vw;}
    to {right: 6.5vw;}
}

@keyframes movehiddenleft {
    
    from {left: -11vw;}
    to {left: 0vw;}

}

@keyframes movecenterimgright {
    from {
        max-width: 16vw; 
        max-height: 16vh;
    }
    to {
        max-width: 12vw; 
        max-height: 10vh;
    }
}

@keyframes movecenterspnright {
    from {
        right: 0vw; 
        max-width: 16vw; 
        max-height: 16vh;
        height: 16vh;
    }
    to {
        right: 14vw;
        max-width: 16vw; 
        max-height: 16vh;
        height: 16vh;
    }
}
#spnascii {
    white-space: pre; 
    font-family: 'Courier New'; 
    font-size: 6pt; 
    color: #fff
}
#spnascii:hover {
    cursor: pointer;
    color: orange;
}
.about {
    display: none;
}
.aboutvisible {
    position: absolute;
    border-style: solid;
    border-width: 1vw;
    border-color: #448;
    width: 50vw;
    height: 50vh;
    top: 25vh;
    left: 25vw;
    padding-left: 2vw;
    padding-right: 2vw;
    cursor: pointer;
    background-color: #fed;
    color: #000;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16pt;
    overflow-y: scroll;
    animation: crossfadein 1s ease-in 0s 1 normal forwards;
}