.ui-big-images{max-width:100%}#app{width:90%;height:85%;overflow:hidden}.ui-big-images{position:absolute;height:100%;width:100%;overflow:hidden;display:flex}.ui-big-image{width:100%;margin-right:-100%}.ui-big-image{object-fit:cover;object-position:center 20%;width:100%;height:100%;display:block}@media (max-height:600px){.ui-big-image{object-position:center center}}.ui-thumbnails{position:absolute;width:100%;bottom:0;left:0;background-color:#fff;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:0 1rem;padding-top:.5rem;padding-right:45%;padding-right:calc(45% + .5rem)}.ui-thumbnail{display:block;margin-right:.5rem;padding:.5rem 0;cursor:pointer}.ui-cuticle{background-color:#d4a12d;position:absolute;bottom:0;height:.25rem;width:100%}.ui-thumbnail{width:auto}.ui-content{position:absolute;width:40%;right:5%;bottom:0}.ui-articles{background:#493e56;color:#fff;display:flex;align-items:stretch;overflow:hidden}.ui-article{padding:1.5rem;width:100%;margin-right:-100%;display:flex;flex-direction:column;justify-content:center}.ui-paragraph{margin:0;font-size:.7rem;line-height:1.7}.ui-nav{position:absolute;right:0;bottom:100%;background:inherit}.ui-nav button{background:#493e56;border:none;appearance:none;padding:.5em;width:2em;color:#fff;font-family:monospace;transition:inherit;transition-duration:.3s}.ui-nav button:focus,.ui-nav button:hover{background:#d4a12d;outline:0}.ui-nav button:active{outline:0;transform:translateY(.25em);transition-duration:.1s}.ui-heading{margin:0;margin-bottom:.5rem;font-size:1rem;font-weight:400}.ui-heading:before{content:'Animator';font-size:.5rem;text-transform:uppercase;display:block;margin-bottom:.5rem;letter-spacing:1px}.ui-big-image{opacity:1;transform:translateX(-100%)}.ui-big-image{transform:scale(.85)}.ui-big-image[data-active]~.ui-big-image{transform:translateX(100%)}.ui-big-image[data-active]{opacity:1;transform:translateX(0)}.ui-big-image[data-active]{transform:scale(1)}.ui-article{transform:translateX(-100%)}.ui-article:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#d4a12d;opacity:1;transition-duration:.35s;z-index:1}.ui-article[data-active] .ui-article{transform:translateX(100%)}.ui-article[data-active]{transform:translateX(0)}.ui-article[data-active]:before{opacity:0}.ui-thumbnail{filter:grayscale(100%);transition-duration:.35s}.ui-thumbnail:active{transform:scale(.9);transition-duration:.1s}.ui-thumbnail:focus{outline:0}.ui-cuticle{display:none}.ui-thumbnail:hover,.ui-thumbnail[data-active]>img{filter:grayscale(0)}.ui-thumbnail[data-active] .ui-cuticle{display:block}