#locimoi { 
  --locimoi-pad: 10px;
  --overbg: #FFF;
  --sbbt-color: #EEE;
  --sbth-color: #37474f;
  --sbtr-color: #b0bec5;
  --divider: 0.78;
  
  --meta-cover-radius: 4px;
  
  /*max-width: 90%;
  min-width: 90%;*/
  width: calc(100vw * var(--divider));
  
  margin: 0 auto;
  align-items: flex-start;
}


@font-face {
 font-family: "Bebas_Neue";
 src: url('../../locimoi-fonts/Bebas_Neue/BebasNeue-Regular.ttf') format('opentype');
}

@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-ExtraLight.ttf') format('opentype');
 font-weight: 200;
}
@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-Light.ttf') format('opentype');
 font-weight: 300;
}
@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-Regular.ttf') format('opentype');
 font-weight: 400;
}
@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-Medium.ttf') format('opentype');
 font-weight: 500;
}
@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-SemiBold.ttf') format('opentype');
 font-weight: 600;
}
@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-Bold.ttf') format('opentype');
 font-weight: 700;
}
@font-face {
 font-family: "Mukta";
 src: url('../../locimoi-fonts/Mukta/Mukta-ExtraBold.ttf') format('opentype');
 font-weight: 800;
}


@property --ls {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}
@property --lo {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.locus.inert {
  transition: height 0.6s ease-in-out, transform 0.6s ease-in-out, opacity 0.6s ease-in-out, left 0.6s ease-in-out, top 0.6s ease-in-out;
  height: var(--lh);
  transform: scale(var(--ls));
  opacity: var(--lo);
  will-change: height, transform, left, top, opacity;
}
.locus.new {
  opacity: 0;
  transition: all 0.2s;
}
.overflow {
  background-color: var(--overbg);
}
.locus.gene {
  width: min-content;
}
.content-item.on-path.level-2 {
  width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.6); 
  & + .locus.content {
    width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.4); 
  }
  & ~ .locus.meta {
    width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
  }
  > .ci-cover {
  
  }
  &.empty ~ .locus.meta {
    width: 100%;
  }
}
.content-item.on-path.level-1 {
  width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.8); 
  & + .locus.content {
    width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.6); 
  }
  & ~ .locus.meta {
    width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
  }
  > .ci-cover {
  
  }
  &.empty ~ .locus.meta {
    width: 100%;
  }
}
.content-item.on-path.level-0 {
  width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 1); 
  & + .locus.content {
    width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.8); 
    border-radius: 20px 0 0 20px;
  }
  & ~ .locus.meta {
    width: calc( ((100vw *  var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
  }
  > .ci-cover {
    border-radius: 20px 20px 20px 20px;
    /*overflow: hidden;*/
  }
  > .ci-desc {
     padding: 6px;
     border-radius: 0 0 0 20px;
  }
  &.empty ~ .locus.meta {
    width: 100%;
    justify-content: space-between;
    .content-item {
      max-width: 32%;
    }
  }
}


.content-item.in-path.level-1 {
  > .locus.gene {
    border-radius: 0px;
    
  }
  > .ci-cover {
      border-radius: 0px;
    }
}

.content-item.on-path > .ci-cover {
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}
.content-item.in-path > .ci-cover {
  border-radius: 20px 0 0 20px;
  overflow: hidden;
}
.content-item.on-path > .locus.gene > .content-item {
  .ci-title {
    /*position: absolute;*/
    z-index: 4;
    font-family: 'Mukta';
    font-size: 20px;
    font-size: clamp(16px,2.4vw, 60px);
    font-weight: 100;
    line-height: 1.2;
    color: rgba(255,255,255,0.9);
    opacity: 0.9;
    backdrop-filter: blur(10px);
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    height: auto;
    top:100px;
    /*transform: translateY(-50%);*/
    width: 100%;
    padding: 10px;
  }
  .ci-cover {
    position: absolute;
    height: 100%;
  }
  .ci-desc {
    z-index: 5;
    padding: 6px;
    background-color: rgba(255,255,255,0.9);
    backdrop-filter: blur(2px);
  }
  .ci-anchor {
    z-index: 6;
  }
}
.content-item.on-path > .locus.gene {
  /*margin-top: 20px;
  padding-left: 10px;
  padding-right: 10px;*/
}
.in-path .content-item.on-path > .locus.gene > .content-item .ci-title {
  position: relative;
} 
.content-item.in-path, .content-item.results {
  width: calc( ((100vw * var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
  .ci-desc {
    display: none;
  }
  > .locus.gene {
    padding: 10px;
    margin-top: 20px;
    border-radius: 20px 0 0 20px;
    background-color: hsl(233, 14%, 94%);
  }
  &.category > .locus.gene {
    border-radius: 0px 20px 20px 0px;
  }
}
.in-path .content-item.on-path,
.in-path .content-item,
.results .content-item {
  width: calc( ((100vw * var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
}
.empty.on-path + .meta {
  width: calc( ((100vw * var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
}

.empty ~ .locus.meta {
  justify-content: space-between;
  .content-item {
    width: 32%;
  }
}

.empty.on-path .locus.gene:not(.index),
.on-path .locus.gene:not(.index) {
  flex-grow: 1;
  width: auto;
  justify-content: space-between;
  align-items: stretch;
  .content-item {
    width: 19%;
    border-radius: 20px;
    /*border: 1px;*/
    overflow: hidden;
    margin-top: 20px;
    
    /*margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;*/
    margin-left: 20px;
    
    
    padding-bottom: 20px;
    flex-grow: 1;
    .ci-cover {
      background-color: #000;
    }
    .ci-desc {
      margin-top: auto;
    }
  }
  .content-item:first-of-type {
    width: 38%;
    border-radius: 0 20px 20px 20px;
    flex-grow: 1;
  }
  .content-item:last-of-type {
    border-radius:  0 0 20px 0;
  }
}
.locus.gene.alpha {
  flex-grow: 1;
}
.locus.gene.product {
  box-sizing: border-box;
  .locus.content {
    margin-left: 20px;
    border-radius: 20px 0px 0px 20px;
  }
  .locus.meta {
    width: calc(((100vw * var(--divider) - 100px) - (2 * var(--locimoi-pad))) * 0.2);
  
  }
}
.content-item.on-path.alpha {
  width: calc( ((100vw * var(--divider)) - (2 * var(--locimoi-pad))) * 0.2); 
}
#locimoi > .locus.gene {
  .content-item.category {
    > .locus.gene {
      align-items: stretch;
      justify-content: space-between;
      flex-grow: 1;
      width: 100%;
    }
    .content-item.product {
      width: 200px;
      .ci-title  {
        position: relative;
        z-index: 2;
        padding: 8px;
        /*background-color: rgba(255, 255, 255, 0.6);*/
        backdrop-filter: blur(10px);
        color: #000;
        top:0;
      }
      .ci-anchor {
        z-index: 3;
      }
      .ci-desc {
        padding: 8px;
      }
    }
    .content-item.product {
      .ci-title {
        /*position: relative;*/
      }
      .prod-details {
        display: none;
      }
    }
    &.on-path .content-item.product .ci-cover {
      height: 200px;
    }
    &.on-path > .ci-title, .ci-cover, .ci-anchor {
      color: #000;
    }
  }
}
.ci-title {
  display: flex;
  align-items: center;
  align-content: center;
  flex-grow:0;
  flex-shrink:0;
  
}
.locus.gene .ci-title {
  transition: all 0.4s;
}

.locus.gene {
  display: flex;
  flex-grow: 0;
  align-items: flex-start;
  transition: width 0.1s linear, min-width 0.1s ease-out, max-width 0.1s ease-in;
  will-change: height, transform, left, top, opacity;
  max-width: 100%;
  .locus.gene .locus.gene {
    display: none;
  }
  &.index > .index-group > .content-item > .ci-cover {
    display: none;
  }
  .ci-title{
    line-height: 1.3;
    font-weight: 400;
  }
  > .content-item {
    > .ci-cover {
      display: none;
    }
    &.on-path, &.in-path {
      > .ci-cover {
        display: flex;
        position: absolute;
        top:0;
      }
      > .ci-title {
        z-index: 20;
        font-family: 'Mukta';
        font-size: 20px;
        font-size: clamp(16px,2.4vw, 60px);
        /*font-weight: 100;
        line-height: 1.2;
        color: rgba(255,255,255,0.9);
        text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);*/
      }
      > .ci-cover, > .ci-title, .ci-anchor {
        height: 200px;
      }
      .content-item.on-path, .content-item.in-path {
        > .ci-cover {
          display: none;
        }
        > .ci-title {
          height: auto;
          font-size: var(--gci-title-font-size);
          font-weight: 400;
          line-height: 1.3;
          font-family: 'Mukta';
          background-color: hsl(233, 14%, 90%);
 
        }
        > .ci-anchor {
          height: 100%;
        }
        > .prod-details {
          display: none;
        }
      }
      .content-item {
        > .ci-anchor {
          height: 100%;
        }
      }
    }
    &.in-path {
      > .ci-title {
        color: #111;
        background-color: rgba(255,255,255,0.8);
        transition: color 0.6s ease-in-out, height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        font-size: 24px;
        line-height: 1.1;
        font-weight: 100;
        
      }
      .on-path {
        > .ci-title {
          color: #111;
          background-color: hsl(233, 14%, 90%);
        }
      }
    }
    &.on-path {
      > .ci-title {
        color: #FFF;
        /*background-color: rgba(000,000,000,0.1);*/
        transition: color 0.6s ease-in-out, height 0.6s ease-in-out, background-color 0.6s ease-in-out;
        font-size: 36px;
        line-height: 1.1;
        font-weight: 100;
      }
      > .ci-desc {
        position: absolute;
        top: 200px;
        transform: translateY(-100%);
        padding: 8px;
        background-color: rgba(255,255,255,0.6);
        backdrop-filter: blur(10px);
      }
      .ci-cover {
        display: flex;
        height: 200px;
        background-color: #000;
        iframe {
          display: none;
        }
      }
    }
    &.filter {
      flex-flow: row wrap;
      > .ci-title, .ci-cover, .ci-anchor {
        width: calc( ((100vw * var(--divider)) - (2 * var(--locimoi-pad))) * 0.2);
      }
      .locus.content {
        .ci-title, .ci-desc {
          display: none;
        }
        .ci-content :first-child {
          margin-top:0;
        }
      }
    }
  }
  &[data-empty='0'] {
    .locus.content {
      .ci-title, .ci-desc {
        display: none;
      }
    }
  }
}
.locus.gene.results {
  display: flex;
  flex-grow: 1;
  > .content-item.results {
    flex-grow: 1;
    > .ci-title, > .ci-anchor {
    display: none;
    }
    .content-item.on-path .ci-desc {
      position: relative;
      top:0;
      transform: translateY(0);
      padding: 8px;
    }
    .content-item .ci-desc {
      padding: 8px;
    }
    > .locus.gene {
      flex-grow: 1;
      width: auto;
      justify-content: space-between;
      margin-top: 0;
      height: 200px;
      border-radius: 0 20px 20px 0;
    }
  }
}
.locus.content {
  overflow: hidden;
  border-radius: 0 0 0 20px;
  background-color: hsl(233, 14%, 98%);
  margin-top: 20px;
  padding: 20px;
}
.locus.meta {
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
  border-radius: 0 20px 0 0;
  background-color: #4e5269;
 
  color: #FFF;
  margin-top: 20px;
  .content-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    padding-top: 8px;
    border-bottom: 1px solid #EEE;
    /*max-width: 320px;*/
    flex-grow: 1;
    /*margin: 8px;*/
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }
  .content-item:last-of-type {
    border-bottom: none;
  }
  .content-item.product {
    min-width: 180px;
  }
  .ci-cover {
    border-radius: var(--meta-cover-radius);
  }
}
.alpha .content-item.on-path ~ .locus.meta, .archive .content-item.on-path ~ .locus.meta {
  width: calc( ((100vw * var(--divider)) - (2 * var(--locimoi-pad))) * 1); 
}

.ci-content {
  position: relative;
  width: 100%;
}
.locus.poster  {
 align-items: stretch;
 justify-content: flex-end;
 align-content: flex-end;
 .locus {
   display: none;
 }
 .content-item {
   /*width: 32%;*/
   margin-bottom: 2%;
   overflow: hidden;
   flex-grow: 1;
   min-height: 180px;
   margin: 10px;
   width: 280px;
   
 }
 .content-item:first-of-type {
   border-radius: 20px 0 0 0;
   width: 50%;
   flex-grow: 1;
   min-height: 220px;
   .ci-title {
     /*padding: 6px 6px 6px 100px;*/
     border-radius: 20px 0 20px 0;
   }
   .ci-sub {
     font-size: clamp(16px, 5vw, 60px);
   }
   .ci-desc {
     background-color: #4e5269;
     /*color: #FFF;*/
     background-color: hsl(233, 14%, 92%);
     margin-top: 120px;
     padding: 10px 20px 20px 20px;
     font-size: clamp(16px, 2.4vw, 28px);
   }
 }
 .content-item:last-of-type {
   border-radius:  0 0 20px 0;
 
 }
 .ci-poster {
   position: absolute;
   z-index: -1;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
 }
 .ci-title {
   font-size: 16px;
   font-weight: 100;
   color: rgba(255,255,255,0.8);
   background-color: rgba(000,000,000,0.3);
   /*background-color: rgba(213,85,153,0.8);*/
   
   backdrop-filter: blur(10px);
   text-align: center;
   justify-content: center;
 }
 & .locus.gene[data-level="1"] {
   display: none;
 }
}
.ci-sub {
  font-family: 'Mukta';
  font-size: 56px;
  font-size: clamp(16px, 3.6vw, 60px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255,255,255,0.9);
  opacity: 0.9;
  backdrop-filter: blur(2px);
  text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
  align-self: flex-end;
  text-align: right;
  justify-content: right;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding-left: 10%;
  padding-bottom: 2%;
  padding-right: 2%;
  flex-grow: 1;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
}
.locus.navigation {
  .content-item {
    &.on-path {
      > .ci-title {
        background-color: #4e5269;
        color: #FFF;
      }
    }
    &.in-path {
      > .ci-title {
        /*background-color: hsl(233, 14%, 90%);*/
      }
    
    }
  }
}

.prod-details {
  margin-top: 20px;
  margin-left: 20px;
  padding: 20px;
  background-color: hsl(233, 14%, 92%);
  border-radius: 20px;
  .prod-add {
    background-color: hsl(233, 14%, 40%);
  }
}
.meta .prod-details {
  margin-left: 0;
  border-radius: var(--meta-cover-radius);
}
.meta .prod-add {
  background-color: hsl(233, 14%, 80%);
}

/*.locus.gene.alpha ~ .locus.gene, .locus.gene.archive ~ .locus.gene,
.locus.gene.alpha + .locus.gene, .locus.gene.archive + .locus.gene  {
  width: calc( ((100vw * 0.9) - (2 * var(--locimoi-pad))) * 0.8);
  max-width: calc( ((100vw * 0.9) - (2 * var(--locimoi-pad))) * 0.8);
}*/