body,
html {
  background:#fff;
   font-family:"Chaparral",times,times-new-roman,serif;
}
h1, h2, h3{
  font-family:"Snippet",tahoma,arial,helvetica,sans-serif;
  font-weight:normal;
}
img {border:none;}
nav {background:rgba(255,255,255,0.85);}
#chrono {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  overflow-x:auto;
  scrollbar-width:thin;
  scroll-behavior:smooth;
}
#chrono::-webkit-scrollbar {
  width:8px;
  height:8px;
}
#chrono::-webkit-scrollbar-track {
  background:#000000;
  width:8px;
  height:8px;
}
#chrono::-webkit-scrollbar-thumb {
  background-color:#828282;
  border-radius:0px;
  border:0px none #ffffff;
  width:8px;
  height:8px;
}
#chrono .entry {
  position:absolute;
  display:inline-block;
  top:0;
  bottom:0;
  left:0px;
  width:19%;
  height:100%;
  margin-left:0;
  overflow:hidden;
  vertical-align:top;
  z-index:1;
  -webkit-transition:margin 0.5s;
  transition:margin 0.5s;
}
#chrono .entry-date,
#chrono .entry-cat,
#chrono .entry-name {
  position:absolute;
  display:none;
  bottom:0px;
  padding:4px 15px;
  color:#fff;
  background:#222;
  font-size:20px;
  font-family:Snippet;
  text-decoration:none;
  z-index:3;
}
#chrono .segment {
  position:absolute;
  top:0;
  bottom:0;
  width:100%;
  z-index:2;
}
#chrono .segment div,
#chrono .segment h2 {
  margin:0 5%;
  width:90%;
  text-align:center;
  white-space:normal;
  opacity:0;
  transition:all 0.25s;
  margin-top:33vh;
  display:flex;
  justify-content: center;
  align-items: center;
  min-height:100px;
  pointer-events:none;
  transform:scale(1.05) translateY(-5px);
}
#chrono .segment:hover div,
#chrono .segment:hover h2 {
  opacity:1;
  transform:scale(1) translateY(0px);
}
#chrono .segment div{
  margin-top:0px;
  min-height:100px;
  transform:scale(1.05) translateY(5px);
}
#chrono .segment div a {
  padding:0 5px;
  color:#000;
  font-size:16px;
  text-decoration:none;
  text-shadow:0 0 25px #fff;
}
#chrono .segment div a p{
  margin:0;
  padding:0;
}
#chrono .segment h2 a {
  display:block;
  width:100%;
  color:#000;
  font-family:Snippet;
  font-size:36px;
  font-weight:normal;
  text-decoration:none;
  transition:all 0.5s;
  text-shadow:0 0 25px #fff;
}
#chrono .segment p.img {
  position:absolute;
  display:block;
  top:0;
  bottom:0;
  margin:0;
  z-index:-1;
  min-width:100%;
}
#chrono .segment p.img a {
  padding:0;
  margin:0;
}
#chrono .segment p.img img {
  display:block;
  height:100%;
  width:130%;
  object-fit:cover;
  opacity:1;
  transition:all 0.5s;
}
#chrono .segment:hover p.img img {
  opacity:.5;
  filter:blur(8px);
  transform: scale(1.03);
}

p#nav-right,
p#nav-left {
  position:fixed;
  display:block;
  top:calc(50% - 25px);
  left:1%;
  padding:0;
  width:50px;
  height:50px;
  line-height:50px;
  background:#000;
  text-align:center;
  font-size:0;
  z-index:300;
  border-radius:100%;
  box-shadow:0 0 25px rgba(255,255,255,.5);
  opacity:0.5;
  cursor:pointer;
  transition:all 0.5s,transform 0.25s,box-shadow .25s;
}
p#nav-right {
  left:auto;
  right:1.1%;
}
p#nav-right:hover,
p#nav-left:hover {
  opacity:1;
  transform:scale(1.25);
  box-shadow:0 0 25px rgba(255,255,255,1);
}
p#nav-right.hidden,
p#nav-left.hidden {
  opacity:0;
  margin-right:calc(-1.1% - 85px);
  transition:all 1s .5s;
}
p#nav-left.hidden {
  opacity:0;
  margin-right:0;
  margin-left:calc(-1.1% - 85px);
  transition:all 1.5s,margin 1s .5s;
}
p#nav-right:after,
p#nav-left:after {
  content:"";
  display:inline-block;
  vertical-align:middle;
  margin:0 auto;
  width:16px;
  height:16px;
  border-right:4px solid #fff;
  border-top:4px solid #fff;
  transform:rotate(45deg);
  margin-left:-5px;
}
p#nav-left:after {
  transform:rotate(-135deg);
  margin-left:0px;
  margin-right:-5px;
}

@media screen and (max-width:1020px) {
  #chrono .segment h2 a {font-size:26px;}
  p#nav-right,
  p#nav-left {display:none;}
}
@media screen and ((max-width:800px) or (orientation:portrait)) {
  #chrono {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
  }
  #chrono .entry {
    position:relative;
    top:0;
    bottom:0;
    left:0!important;
    width:48%;
    margin-left:-5px!important;
    overflow:hidden;
  }
  #chrono .segment h2 a {
    font-size:30px;
  }
}

@media (hover: none) {
  
  #chrono .segment div,
  #chrono .segment h2 {
  opacity:1;
    padding:0 4%;
    width:92%;
  transform:scale(1) translateY(0px);
    margin-top:0;
    position:absolute;
    left:-10px;
    right:0;
    bottom:20px;
    top:70%;
    min-height:60px;
}
  #chrono .segment h2:before {
  content:"";
    position:absolute;
    background:linear-gradient(to bottom, transparent, rgba(255,255,255,.1) 65%, rgba(255,255,255,.1) 60%, transparent);
    z-index: -1;
    left:0px;
    right:0px;
    top:0;
    bottom:0px;
}#chrono .segment h2 a{
    font-size:25px;
    color:rgba(0,0,0,.85);
    text-shadow:0 0px 5px #fff;
    position:relative;
    display:inline;
    width:max-content;
    font-weight:bold;
}
  #chrono .segment h2 a:before{
    content:"";
    position: absolute;
    top:-5px;
    bottom:-5px;
    width:calc(100% + 50px);
    max-width:calc(48vw - 20px);
    left:50%;
    transform: translateX(-50%);
    z-index:-1;
    border-radius:50px;
    filter:blur(15px);
    background:rgba(255,255,255,.25);
    backdrop-filter:brightness(150%) saturate(3) ;
}
  
  #chrono .segment div{display:none;}
  #chrono .entry-date,
#chrono .entry-cat,
#chrono .entry-name {
  padding:4px 8px;
  font-size:14px;
}
  
}