body,
html {
  background:#fff;
   font-family:"Chaparral",times,times-new-roman,serif;
  overflow:hidden;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
h1, h2, h3{
  font-family:"Snippet",tahoma,arial,helvetica,sans-serif;
  font-weight:normal;
}

#pan1 {
  position:absolute;
  top:58px;
  bottom:0;
  left:0;
  right:350px;
  z-index:0;
  overflow:hidden;
  text-align:center;
  background:rgba(0,0,0,0.8);
  transition:left 1s;
}

#contentpan1>div {
  transition:all .5s;
  z-index:0;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  bottom:0;
  right:0;
  opacity:0;
}
#contentpan1>div:last-of-type {
  z-index:1;
}
#contentpan1>div.loaded,
#contentpan1>div.loading {
  opacity:1;
}
#contentpan1>div.fixedmargin {
  transition:all .5s,margin 0s;
}
#contentpan1>div.unload {
  transition:all 1.5s;
}
#contentpan1>div:before {
  content:"";
  display:block;
  position:absolute;
  top:calc(50% - 23px);
  left:calc(50% - 23px);
  width:36px;
  height:36px;
  border:5px solid transparent;
  border-top-color:rgba(255,255,255,.25);
  border-radius:100%;
  animation:wait infinite linear 1s;
  transition:all 1s;
  opacity:0;
  z-index:0;
}
@keyframes wait {
  from {
    transform:rotate(0);
  }
  to {
    transform:rotate(360deg);
  }
}
#contentpan1>div.loading:before {
  transition-delay:.1s;
  opacity:1;
}
#pan1 img {
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:1;
  transition:all 0.5s;
}
#pan1 img.contain {
  object-fit:contain;
}
#pan1 img.portrait {
  object-fit:contain;
  height:110%;
  top:-5%;
}
#pan1 #contentpan1>div:not(.loaded) img {
  opacity:0;
  filter:blur(5px);
}
#pan1 #contentpan1>div.loaded img {
  animation:show 1 ease 1s;
}
@keyframes show {
  from {
    opacity:0;
    filter:blur(5px);
  }
  to {
    opacity:1;
    filter:none;
  }
}
#pan1 object embed,
#pan1 object,
#pan1 iframe {
  width:100%;
  height:100%;
  overflow:hidden;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
#prevnext {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:0;
  z-index:2;
}
#prevnext #btnprev,
#prevnext #btnnext {
  position:fixed;
  left:0;
  top:100px;
  bottom:100px;
  width:25%;
  display:block;
  z-index:50;
  perspective:1200px;
}
#prevnext #btnnext {
  left:auto;
  right:345px;
}
#prevnext #btnprev span,
#prevnext #btnnext span {
  position:fixed;
  left:-7px;
  height:100%;
  width:120px;
  padding-left:10px;
  display:block;
  top:0%;
  font-size:0px;
  color:#000;
  text-align:center;
  cursor:pointer;
  transition:all 1s;
  transform:rotateY(30deg);
  background:linear-gradient(to right,rgba(255,255,255,.75),transparent);
  opacity:0;
}
#prevnext #btnnext span {
  left:auto;
  right:0px;
  transform:rotateY(-30deg);
  background:linear-gradient(to left,rgba(255,255,255,.75),transparent);
}
#prevnext #btnprev:hover span,
#prevnext #btnnext:hover span {
  opacity:.5;
}
#prevnext #btnprev:hover span:hover,
#prevnext #btnnext:hover span:hover {
  transition:all .4s;
  opacity:1;
}
#prevnext #btnprev span:before,
#prevnext #btnnext span:before {
  content:"";
  display:block;
  border:5px solid #000;
  border-top:transparent;
  border-right:transparent;
  width:30px;
  height:30px;
  top:calc(50% - 20px);
  left:50px;
  transform:rotate(45deg);
  position:absolute;
  transition:all 0.5s;
}
#prevnext #btnnext span:before {
  transform:rotate(-135deg);
}
#prevnext #btnprev span:hover:before {
  left:40px;
}
#prevnext #btnnext span:hover:before {
  left:60px;
}

/*CONTENT*/
#content {
  position:absolute;
  right:0px;
  top:58px;
  bottom:0;
  width:300px;
  padding:10px 25px 10px 25px;
  background:#fff;
  font-size:17px;
  z-index:100;
  transition:all 0.5s;
  box-shadow:0 0 8px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction: column;
  align-content: stretch;
  gap:10px;
}
#ho{display:none;}
#content a {
  color:var(--portfolio);
  text-decoration:none;
  border-radius:20px;
  margin:0 -5px;
  padding:0 5px;
}
#content a:hover {
  background-color:var(--portfolio);
  color:#fff;
}
#content #overflow {
  padding:0;
  width:100%;
  height:max-content;
  border-bottom:1px solid #aaa;
}
#content h1 {
  margin:10px 0 0 0;
  font-size:42px;
  color:var(--portfolio);
  font-family:"Snippet", tahoma,helvetica,sans-serif;
  font-weight:normal;
}
#content ul#desc-cat li{
  display:inline-block;
}
#content ul#desc-cat li a {
  background:var(--portfolio);
  color:#fff;
  padding:2px 10px;
  margin:0;
  border-radius:25px;
}
#content ul#thumbnails li a {
  display:block;
  margin:2px 4px;
  padding-bottom:0;
}
#content #entry {
  overflow:visible;
  overflow-y:auto;
  height:100%;
  width:100%;
  margin-left:-10px;
  padding:0 10px;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  transition:all 0.5s;
}
#content #entry:hover {
  scrollbar-color:auto;
}
#content ul {
  padding:0;
  margin:10px 0 0;
  list-style:none;
}
#content ul#thumbnails {
  margin-top:25px;
  text-align:center;
  border-top:1px solid #aaa;
  background:#fff;
  max-height:240px;
  scrollbar-width:thin;
  font-size:0;
  position:sticky;
  bottom:0px;
  width:100%;
  box-sizing: border-box;
  padding:10px 0 0;
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  justify-content: center;
}
#content ul#thumbnails:before {
  content:"";
  background:linear-gradient(to bottom, transparent, #fff);
  position:absolute;
  top:-26px;
  left:0;
  right:0;
  height:25px;
  pointer-events: none;
  mask:alpha;
}
#entry::-webkit-scrollbar,
ul#thumbnails::-webkit-scrollbar {
  width:8px;
  height:8px;
}
#entry::-webkit-scrollbar-track,
ul#thumbnails::-webkit-scrollbar-track {
  background:transparent;
  width:8px;
  height:8px;
}
#entry::-webkit-scrollbar-thumb,
ul#thumbnails::-webkit-scrollbar-thumb {
  background-color:transparent;
  border-radius:0px;
  border:0px none #ffffff;
  width:8px;
  height:8px;
}
#content #entry:hover::-webkit-scrollbar-thumb,
ul#thumbnails::-webkit-scrollbar-thumb {
  background-color:#828282;
}

#content ul#thumbnails li{
  width:calc(25% - 6px);
}
#content ul#thumbnails li:first-of-type:last-of-type{
 display:none!important;
}
#content ul#thumbnails li a img, #content ul#thumbnails li a {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background:none!important;
}
#content ul#thumbnails li a img {
  border:3px solid transparent;
  box-sizing: border-box;
  transition:all .25s;
}
#content ul#thumbnails li a.selected img {
  box-shadow:0 0 6px #aaa;
  border:3px solid #fff;
  transform: scale(1.05);
}
#content p {
  margin:10px 0 15px 0;
  padding:0;
  max-height:380px;
  overflow:auto;
}
#content #overflow p {
  margin:10px 0 0;
  padding:0 0 15px;
  height:auto;
  color:#888;
}
#content ul#nav {
  display:block;
  margin:0;
  line-height:70px;
  transition:all 0.4s;
  top:0;
  position:absolute;
  width:calc(100% - 50px);
}
#content.slide ul#nav {
  margin-left:-60px;
}
#content:hover ul#nav {
  margin-left:0;
}

@media only screen and (max-height:800px) {
  #content{gap:0;}
  #content h1, #content ul {margin:0;}
  #content #overflow p {margin-top:10px;padding-bottom:5px;}
  #content ul#thumbnails {gap:6px;}
  #content ul#thumbnails li{ width:calc(20% - 6px);}
  #content ul#thumbnails li a img{border-width:2px;}
}
@media only screen and (max-height:500px) {
  #content #overflow ul {padding-bottom:10px;}
  #content #overflow p {display:none;}
  #content ul#thumbnails li{ width:40px;}
  #content ul#thumbnails li a img{border-width:2px;}
}
@media only screen and (max-width:1200px) {
  
#content.slide {right:-300px;}
#content.slide:hover, #content.hover {right:0px;padding-left:25px;}
  #pan1{right:0px;}
  #prevnext #btnnext {left: auto;right: 40px;}
}
@media (hover: none) and (max-width:1200px) and (min-aspect-ratio:1/1.33){
#content:not(.hover):hover {right:-300px;}
  #content{
  overflow:visible;
}
#ho{
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
  transition:all .25s;
  }
.hover #ho{transform:translateX(calc(-100% + 15px));}
  #ho:after{
    position:absolute;
    left:-5px;
    top:25px;
    content:"";
    width:14px;
    height:14px;
    border:3px solid transparent;
    border-top:3px solid #999;
    border-right:3px solid #999;
    transform: rotate(-135deg);
    transition:all .25s;
    background:linear-gradient(-135deg, #fff 50%, transparent 50%)  border-box;
  }
  .hover #ho:after{
    left:calc(100% - 22px);
    transform: rotate(45deg);
  }
}
@media only screen and (max-width:940px) {
#content, #content.slide{top:90px;}
  #pan1{top:90px;}
}


@media (max-aspect-ratio:1/1) {
  #pan1 img {
    width:110%;
    left:-5%;
    object-fit:contain;
  }
  #pan1 img.portrait {
    object-fit:cover;
    height:100%;
    top:0%;
  }
}
@media (max-aspect-ratio:1/1.33) {
  #prevnext{display:none;}
  #pan1 {bottom:150px;}
  #content, #content.slide{
    left:0;
    right:0;
    bottom:0;
    padding:0 20px!important;
    top:calc(100% - 150px);
    width:calc(100% - 40px);
    overflow:hidden;
    z-index:299;
  }
  #content:not(.slide), #content:hover, #content.hover{
    top:90px;
    overflow-y:auto;
  }
  #content h1{
    font-size:34px;
    transition:all .25s;
    margin-top:0!important;
    padding-top:15px!important;
    max-width:calc(100% - 70px);
  }
  #content:not(.slide) h1, #content:hover h1, #content.hover h1{font-size:40px;}
  #content #entry {padding-bottom:50px;}
  #content #overflow ul {margin-top:5px;}
  #content ul#thumbnails {
  position:fixed;
    z-index:299;
    bottom:0;
    padding-bottom:10px;
    left:10px;
    right:10px;
    width:calc(100% - 20px);
    flex-wrap: nowrap;
    gap:5px;
    max-height:75px;
    justify-content: center;
    align-content: center;
}
  #content ul#thumbnails:before {
  display:none;
}
  #content ul#thumbnails li {border-width:2px;}
  #content ul#thumbnails li img{object-fit:cover;}
  
}



@media screen and ((max-width:720px) or (max-height:440px)) {
  #pan1 {top: 50px;}
  /*#content, #content.slide {top: 50px;}*/
}


@media (hover: none) and (max-aspect-ratio:1/1.33) {
  
  #content.slide:not(.hover):hover,  #content.slide:not(.hover){top:calc(100% - 150px);}
  #content.slide:not(.hover):hover h1{font-size:34px;}

#ho{
  display:block;
  position:absolute;
  top:0px;
  left:10px;
  right:10px;
  height:120px;
  bottom:auto;
  z-index:10;
  transition:all .25s;
  }
.hover #ho{
  left:calc(100% - 150px);
    
  }
  #ho:after{
    position:absolute;
    right:20px;
    top:30px;
    content:"";
    width:14px;
    height:14px;
    border:3px solid transparent;
    border-top:3px solid #999;
    border-right:3px solid #999;
    transform: rotate(-45deg);
    transition:all .25s;
  }
  .hover #ho:after{
    transform: rotate(135deg) translate(-5px, 10px);
  }
  
}