:root {
      --font: "Poppins";
      --font-alt: "Cormorant Garamond";
      --c1: #2C3639;
      --c1o: #2C3639CC;
      --c2: #3F4E4F;
      --c3: #A27B5C;
      --c4: #DCD7C9;
      /* --c1: #222831;
      --c2: #393E46;
      --c3: #00ADB5;
      --c4: #00FFF5; */
      /* --c1: #000000;
      --c2: #3E432E;
      --c3: #616F39;
      --c4: #A7D129; */

      /* colors */
      --body-bg: #FAFAFA;
      --page-bg: #F5F5F5;
      --dark-text: #2A2935;
      /* spacing */
      /* this is what defines the global scale */
      --baseline: 10px;
      /* fonts */
      --book-title: "Tulpen One", sans-serif;
      --title: "Cormorant Garamond", serif;
      --body: "Cormorant Garamond", serif;
      --base-size: var(--baseline) * 1.2;
    }

    .td-body {
      overflow-y: hidden;
      margin:0;
      font-family: var(--font);
      color: white;
      background-color: var(--c1);
    }

    .td-bg {
      display: flex;
      justify-content: center;
    }

    .td-bg-img {
      position: fixed;
      width:auto;
      height:80vh;
      opacity: .03;
      margin:10vh;
      z-index: -1000;
    }

    /* Header css */

    .td-hdr {
      background-color: var(--c1);
      height: 65px;
      border-bottom: 1px solid var(--c2);
      box-shadow: 0px 0px 10px var(--c2);
      display: flex;
      justify-content: center;
      position: relative;
      z-index: 1000;
    }

    .td-menu-btn {
      width:34px;
      height:34px;
      border-radius:5px;
      border-color: transparent !important;
      background-color: var(--c2);
      color:white;
      left:10px;
      box-sizing: content-box;
      padding: 0;
      position: absolute;
      top:15px;
      display: none;
    }

    .td-menu-btn:hover {
      filter: drop-shadow(0 0 7px var(--c4));
    }

    .td-menu-icon {
      fill:white;
      margin:3px;
    }

    .td-topbar, .td-midbar, .td-btmbar {
      -webkit-transition: all .35s linear;
      -moz-transition: all .35s linear;
      -o-transition: all .35s linear;
      transition: all .35s linear;
    }

    .td-menu-btn.open .td-topbar {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .td-menu-btn.open .td-btmbar {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    .td-menu-btn.open .td-midbar {
      width:0;
      opacity: 0; 
    }

    .td-menu {
      margin: auto;
      width: 500px;
      height: 65px;
      display: flex;
      justify-content: space-evenly;
      background-color: none;
      border-right:none;
      box-shadow: none;
      position: absolute;
      top:0;
    }

    .td-menu-item {
      font-size: 23px;
      padding-top: 15px;
      color:white;
      text-decoration: none;
      display:flex;
      text-align: center;
    }

    .td-menu-item i{
      width:20px;
      height:20px;
      padding:10px 9px 8px 9px;
      margin-left: 5px;
      margin-right: 5px;
      margin-top: -3px;
      font-size: 18px;
      border: 2px solid white;
      border-radius: 50%;
    }

    .td-menu-item:hover i{
      filter: drop-shadow(0 0 10px var(--c3));
      background-color: var(--c3);
    }

    .td-menu-item:hover span{
      filter: drop-shadow(0 0 10px var(--c3));
      text-decoration: underline;
      cursor: pointer;
    }

    .td-menu-item.active i{
      filter: drop-shadow(0 0 10px var(--c3));
      background-color: var(--c3);
    }

    .td-menu-item.active span{
      filter: drop-shadow(0 0 10px var(--c3));
      text-decoration: underline;
    }

    .td-logo {
      color:white;
      position: absolute;
      left: 10px;
    }

    .td-img {
      height:45px;
      margin:13px 5px 0 5px;
    }

    .td-img.icon {
      margin:8px 5px 0 5px;
      border: 2px solid white;
      border-radius: 50%;
    }

    .td-img:hover {
      filter: drop-shadow(0 0 10px var(--c3));
      cursor: pointer;
    }

    .td-connect {
      background-color: white;
      box-sizing: border-box;
      width:165px;
      height:42px;
      border-radius: 21px;
      border-color: #999;
      position: absolute;
      top:12px;
      right:10px;
      font-family: var(--font);
      font-size:18px;
      transition: width 1s;
      cursor: pointer;
      display: none;
    }

    .td-connect:hover{
      filter: drop-shadow(0 0 7px rgba(255,255,255,.6));
    }

    .td-connect-img {
      width:25px;
      height:25px;
      /*margin-top:6px;*/
      position: absolute;
      left:8px;
      top:10px;
      text-align: center;
      font-size: 20px;
    }

    .td-connect-lbl {
      position: absolute;
      left:40px;
      top:8px;
      font-size: 14px;
      width: calc(100% - 47px);
      cursor: pointer;
    }

    .disconnected {
      color: red;
    }

    .connected {
      color: green;
    }

    /* Featured css */

    .td-featured {
      background-color: #FFA500;
      width: 100%;
      height: 65px;
      display:none;
      justify-content: center;
    }

    .td-featured.active {
      display: flex;
    }

    .td-featured-close {
      font-size: 40px;
      padding-top: 12px;
      color:white;
      position: absolute;
      left:20px;
    }

    .td-featured-close span {
      font-family: var(--font);
      font-size: 30px;
      padding-left: 10px;
      position: absolute;
      top:18px;
      font-weight: 100;
    }

    .td-featured-close:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 10px white);
    }

    .td-featured-text {
      font-size: 28px;  
      color:white;
      padding: 11px 30px;
      width:700px;
      justify-content: space-around;
    }
    
    .td-featured-text.large {
      display: flex;
    }
    
    .td-featured-text:hover {
      cursor: pointer;
    }

    .td-featured-text.small {
      display: none;
    }

    /* Content css */

    .td-ct {
      position: absolute;
      width:100%;
      height:calc(100% - 65px); 
      margin:auto;
    }

    .td-ct.listed {
      height:calc(100% - 65px);
    }
    
    .td-ct.featured {
      height:calc(100% - 65px - 65px);
    }
    
    .td-ct.featured.listed {
      height:calc(100% - 65px - 65px);
    }

    .td-ct-cont {
      width:100%;
      height:100%;
      padding: 0px 0px 0px 0px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .td-ct-cont.listed {
      margin-top:75px;
      height:calc(100% - 75px);
    }

    .td-page-cont {
      width: 100%;
      min-height: 100%;
    }
    
    .td-page {
      font-size:24px; 
      text-align: center;
      width: 100%;
      height: 100%;
      display: none;
      padding-bottom: 50px;
    }
    
    .td-page.active {}
  
    .td-page-title-block {
      color: white;
      width: 100%;
      /* height:40vh; */
      position: relative;
      margin-bottom: 50px;
    }

    .td-page-title-block-img {
      height:70px;
    }

    .td-page-title-block-img-sep {
      font-size: 70px;
      position: relative;
      top: -16px;
      left: 5px;
    }

    .td-page-title {
      padding:40px 0;
      font-weight: bold;
      margin: 0;
      animation: 1s ease-out 1.5s 1 tdTitleHeight forwards;
    }

    @keyframes tdTitleHeight {
      0% {
        padding:40px 0;
      }
      100% {
        padding:105px 0;
      }      
    }

    .td-page-title-img {
      height:120px;
      position: relative;
      top: 10px;
    }

    .td-page-title-img.left {
      /* left:156px; */
      left:-93px;
      top:70px;
      animation: 1s ease-out 1.5s 1 tdTitleImgShiftLeft forwards;
    }

    @keyframes tdTitleImgShiftLeft {
      0% {
        height:120px;
        /* left:156px; */
        left:-93px;
        top:70px;
      }
      100% {
        height: 55px;
        left:0;
        top:10px;
        filter: drop-shadow(0 0 10px white);
      }      
    }

    .td-page-title-img.right {
      /* right:127px; */
      right:-99px;
      top:-70px;
      animation: 1s ease-out 1.5s 1 tdTitleImgShiftRight forwards;
    }

    @keyframes tdTitleImgShiftRight {
      0% {
        height:120px;
        /* right:127px; */
        right:-99px;
        top:-70px;
      }
      100% {
        height: 55px;
        right: 0;
        top: 10px;
        filter: drop-shadow(0 0 10px white);
      }      
    }

    .td-page-title-text {
      position: relative;
      opacity:0;
      /* font-size: 0; */
      font-size:50px;
      animation: 1s ease-out 1.5s 1 tdTitleTextFade forwards;
    }

    @keyframes tdTitleTextFade {
      0% {
        opacity: 0;
        /* font-size: 0; */
      }
      100% {
        opacity: 1;
        /* font-size: 50px; */
      }      
    }
     
    .td-page-title-back {
      font-size: 80px;
      font-weight: bold;
      position: absolute;
      width: 100%;
      top:215px;
      color: var(--c1);
      filter: drop-shadow(0 0 10px var(--c3));
      animation: 1s ease-out 1.5s 1 tdTitleBack forwards;
    }

    @keyframes tdTitleBack {
      0% {
        top: 215px;
      }
      100% {
        top: 245px;
      }      
    }

    .td-page-sep-nrw {
      width:50%;
      margin: 10px auto 10px auto;
    }

    .td-page-sep-wd {
      width:90%;
      margin: 10px auto 10px auto;
    }
            
    .td-page-subtitle {
      width:70%;
      margin: auto;
      font-size: 30px;
    }

    .td-page-subtitle-img {
      height: 33px;
      position: relative;
      top:6px;
    }

    .td-page-title-intro-img {
      height: 600px;
      filter: drop-shadow(12px -9px 13px white);
    }

    .td-grp-hdr {
      /* width: 575px; */
      font-size: 36px;
      font-weight: bold;
      padding: 15px 10% 0px 10%;
      color: var(--c4);
      text-align: left;
      position: relative;
      z-index: 1;
      display:flex;
    }

    .td-grp-hdr span { 
      margin-left: 20px;
      background: var(--c1);
      padding: 0 10px; 
    }

    .td-grp-dtl {
      width:80%;
      min-height: 250px;
      display: flex;
      flex-wrap: wrap;
      margin: -26px 10% 50px 10%;
      padding-bottom: 10px;
      border: 1px solid var(--c4);
      border-radius: 5px;
      font-size: 12px;
      box-shadow: 0px 0px 7px var(--c4);
      position: relative;
    }

    .td-grp-item3, .td-grp-list3 {
      position: relative;
      /* margin: 30px auto auto auto; */
      margin: 30px 10px 20px 10px;
      width: calc((100% - 60px) / 3);
      min-width: 300px;
      min-height: 210px;
    }

    .td-grp-item3 {
      max-width: 500px;
    }

    .td-grp-list3 {
      max-width: 350px;
    }

    .td-grp-item-hdr {
      height:50px;
      width:calc(100% - 30px);
      margin-top: 20px;
      position: absolute;
      z-index: 20;
      font-size: 32px;
      color: var(--c1);
      font-weight:bold;
      
      border: 1px solid var(--c3);
      border-radius: 5px;
      box-shadow: 3px 3px 5px var(--c1);
      background-color: var(--c3);
    }

    .td-grp-item-hdr-lock { 
      padding-right: 10px;
    }

    .td-grp-item-hdr-img {
      height:35px;
      position: relative;
      top:6px;
    }

    .td-grp-item-dtl {
      min-height:450px;
      width:calc(100% - 30px);
      margin-left:30px;
      position: relative;
      z-index: 10;
      font-size: 18px;
      padding-top: 65px;
      text-align: left;
      height: calc(100% - 50px);
      border: 1px solid var(--c2);
      border-radius: 5px;
      /* box-shadow: 0px 0px 7px var(--c2); */
    }

    .td-grp-item-dtl:hover {
      background-color: var(--c2);
      /* color:var(--c1); */
      font-weight: bold;
    }

    .td-grp-list3.active:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 4px white);
    }

    .td-grp-item-listing {
      min-height:380px;
      width:calc(100% - 30px);
      margin-left:30px;
      position: relative;
      z-index: 10;
      font-size: 18px;
      padding-top: 65px;
      text-align: center;
      height: calc(100% - 50px);
      border: 1px solid var(--c2);
      border-radius: 5px;
      background-color: var(--c2);
      /* box-shadow: 0px 0px 7px var(--c2); */
    }

    .td-grp-item-logo {
      /* height:325px; */
      margin: 30px auto 15px auto;
      filter: drop-shadow(0 0 25px var(--c3));
      min-width: 250px;
      max-width: calc(100% - 100px);
    }

    .td-grp-item-banner {
      margin:0 5px 10px 5px;
      padding: 5px 20px;
      font-size: 20px;
      font-weight: bold;
      color:var(--c3);
      background-color: var(--c1);
    }

    .td-grp-item-dtl-img {
      height:20px;
      position: relative;
      top:4px;
    }

    .td-nft-layout-dg, .td-nft-layout-specs {
      min-width: 600px;
      /* height: 600px; */
      margin: 30px 15px 5px 15px;
      flex:1;
    }

    .td-nft-layout-img {
      width: 400px;
      height: 400px;
    }

    .td-nft-layout-unique {
      width: 400px;
      height: 400px;
      display: none;
    }

    .td-nft-layout-body, .td-nft-layout-slide, .td-nft-layout-quote, .td-nft-layout-podium {
      stroke-width: 4;
      stroke: var(--c4);
      fill:none;
      display: none;
    }

    .td-nft-layout-body.fill, .td-nft-layout-slide.fill, .td-nft-layout-quote.fill, .td-nft-layout-podium.fill {
      fill:var(--c4);
    }

    .td-nft-layout-body.text, .td-nft-layout-slide.text, .td-nft-layout-quote.text, .td-nft-layout-podium.text {
      fill:var(--c4);
      font-size: 26px;
      stroke: none;
    }

    .td-nft-layout-dtl-hdr {
      width: 575px;
      font-size: 20px;
      padding: 15px 15px 0px 15px;
      color: var(--c3);
      text-align: left;
      position: relative;
      z-index: 1;
    }

    .td-nft-layout-dtl-hdr span {
      margin-left: 20px;
      background: var(--c1);
      padding: 0 10px;
    }

    .td-nft-layout-dtl-img {
      height: 20px;
      position: relative;
      top: 4px;
      left: 26px;
      padding-left:5px;
      background-color: var(--c1);
    }

    .td-nft-layout-dtl {
      /* width:100%; */
      margin: -15px 15px 5px 15px;
      display: flex;
      flex-wrap: wrap;
      border: 2px solid var(--c3);
      border-radius: 5px;
      padding-bottom:10px;
      padding-top:15px;
    }

    .td-nft-layout-dtl:hover {
      background-color: var(--c2);
    }

    .td-nft-layout-grp {
      position: relative;
      margin: 15px 15px 0px 15px;
      min-width: 175px;
      text-align: left;
      flex:1;
    }

    .td-nft-layout-grp.long {
      /* min-width: 575px; */
      min-width: 100%;
    }

    .td-nft-layout-label {
      position: absolute;
      left: 0;
      top: -7px;
      color: var(--c3);
      background-color: transparent;
      z-index: 10;
      font-size: 12px;  
    }
    
    .td-nft-layout-item {
      position: relative;
      padding: 5px 5px 2px 15px;
      width: 100%;
      outline: 0;
      border: 0;
      color: var(--c4);
      /* box-shadow: 0 1px 0 0 var(--c3); */
      margin-top: 10px;
      background-color: transparent;
      font-size: 20px;
    }

    .td-nft-layout-item span {
      font-size: 10px;
      top: -5px;
      position: relative;
      padding-left: 5px;
    }

    .td-nft-layout-text {
      margin: 7px 15px 0 15px;
      text-align: left;
      font-size: 13px;
    }

    /* Listing */

    .td-list-banner {
      height: 75px;
      width: 100%;
      background-color: var(--c2);
      display: flex;
      justify-content: center;
      position: fixed;
      margin-top:-75px;
    }
    
    .td-list-back {
      font-size: 40px;
      padding-top: 17px;
      color:white;
      position: absolute;
      left:20px;
    }

    .td-list-back span {
      font-family: var(--font);
      font-size: 30px;
      padding-left: 10px;
      position: absolute;
      top:23px;
      font-weight: 100;
    }

    .td-list-back:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 10px white);
    }

    .td-list-banner-text {
      font-size: 33px;  
      color:white;
      padding: 11px 30px;
      font-weight: bold;
      width:300px;
      display: flex;
      justify-content: space-around;
    }

    .td-list-banner-flag {
      width:40px;
      height:30px;
      background-repeat: no-repeat;
      margin-top: 9px;
    }

    .td-buy-now-hdr, .td-buy-now-ftr {
      background-color: white;
      box-sizing: border-box;
      width:135px;
      height:42px;
      border-radius: 21px;
      border-color: #999;
      position: absolute;
      right:10px;
      font-family: var(--font);
      font-size:18px;
      transition: width 1s;
      cursor: pointer;
    }

    .td-buy-now-hdr {
      top:17px;
    }
    
    .td-buy-now-ftr {
      top:15px;
    }

    .td-mint-btn {
      background-color: white;
      box-sizing: border-box;
      width:135px;
      height:42px;
      border-radius: 21px;
      border-color: #999;
      position: relative;
      font-family: var(--font);
      font-size:18px;
      transition: width 1s;
      cursor: pointer;
      margin: 35px auto;
    }

    .td-buy-now-hdr:hover, .td-buy-now-ftr:hover, .td-mint-btn:hover{
      filter: drop-shadow(0 0 10px white);
    }

    .td-buy-now-ftr{
      display:none;
    }

    .td-buy-now-img {
      width:25px;
      height:25px;
      /*margin-top:6px;*/
      position: absolute;
      left:8px;
      top:10px;
      text-align: center;
      font-size: 20px;
      color:var(--c2);
    }

    .td-buy-now-lbl {
      position: absolute;
      left:40px;
      top:5px;
      font-size: 18px;
      width: calc(100% - 47px);
      color:var(--c2);
    }

    .td-buy-now-mobile {
      display:none;
    }

    .td-mint-btn-lbl {
      /* position: absolute;
      left:40px;
      top:5px; */
      font-size: 18px;
      font-weight: bold;
      color:var(--c2);
    }

    .td-opensea-hdr {
      position: absolute;
      right: 170px;
      top: 13px;
    }

    .td-opensea-ftr {
      position: absolute;
      left: 20px;
      top: 9px;
      display:none;
    }

    .td-opensea-hdr:hover, .td-opensea-ftr:hover{
      filter: drop-shadow(0 0 10px white);
    }

    .td-opensea-hdr-img {
      width: 140px;
      border-radius: 5px;
      box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    }

    .td-opensea-ftr-img {
      width: 116px;
      border-radius: 5px;
      box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
    }

    .td-list-hdr {
      display:flex;
      width:100%;
      flex-wrap:wrap;
    }

    .td-list-pfp-cont {
      width: 400px;
      height: 720px;
      position: relative;
      margin: 0 25px;
      display: flex;
      min-width: 300px;
    }

    .td-list-pfp-top {
      position: absolute;
      bottom: 500px;
      width: 100%;
      height: 50px;
      z-index: 100;
      border-left: 1px solid var(--c4);
      border-top: 1px solid var(--c4);
      border-right: 1px solid var(--c4);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 0px 0px 7px var(--c4);
      clip-path: inset(-7px -7px 0px -7px);
    }

    .td-list-pfp-img {
      width: calc(100% - 50px);
      position: absolute;
      z-index: 150;
      bottom: 0;
      left: 25px;
      filter: drop-shadow(3px -8px 12px var(--c3)66);
      flex:1;
    }

    .td-list-pfp-btm {
      position: absolute;
      z-index: 200;
      width: 100%;
      height: 500px;
      bottom: 0;
      border-left: 1px solid var(--c4);
      border-bottom: 1px solid var(--c4);
      border-right: 1px solid var(--c4);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      box-shadow: 0px 0px 7px var(--c4);
      clip-path: inset(0px -7px -7px -7px);
    }

    .td-list-ct {
      flex:1;
      margin: 90px 25px 0 25px;
      /* border: 1px solid var(--c4);
      border-radius: 5px;
      box-shadow: 0px 0px 7px var(--c4); */
      min-width: 650px;
      /* padding-bottom:10px; */
    }

    .td-list-ct-hdr {
      display:flex;
    }

    .td-list-ct-dtl {
      height: calc(100% - 77px);
      border: 1px solid var(--c4);
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 0px 0px 7px var(--c4);
      position: relative;
      z-index: 100;
    }

    .td-list-ct-dtl.max {
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      border-radius: 0;
      border:none;
      z-index: 10000;
    }

    .td-list-info {
      display:none;
      /* flex:1; */
      /* margin: 90px 25px 0 25px;
      border: 1px solid var(--c4);
      border-radius: 5px;
      box-shadow: 0px 0px 7px var(--c4);
      min-width: 650px;
      padding-bottom:10px; */
    }

    .td-list-info.active {
      display: block;
    }

    .td-list-info.lore {
      font-size: 15px;
      text-align: left;
      font-size: 25px;
      /* white-space: pre-line;
      overflow-y: auto;
      max-height: 522px;
      padding: 10px 20px 20px 20px; */
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
      background-color: rgba(10, 10, 22);
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .td-list-info.lore.active {
      height:552px;
      overflow: hidden;
    }
    
    .td-list-info.lore.active.max {
      height:100%;
      overflow: hidden;
      border-radius: 0;
      font-size: 40px;
    }

    /* .td-list-content-item-prvw.active:before, .td-list-content-item-prvw.active:after {
      transform: translate3d(0, 0, 0);
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    } */

    .td-lore-page {
      width:100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .td-lore-controller {
      height: 50px;
      width: 150px;
      position: absolute;
      display: none;
      justify-content: space-evenly;
      background-color: var(--c1o);
      z-index: 10000;
      bottom: 5px;
      border-radius: 30px;
      align-items: center;
    }
    
    .td-list-info.lore.active .td-lore-controller {
      display:flex;
    }

    .td-lore-ctrl-btn {
      width: 34px;
      height: 34px;
      font-size: 20px;
      border-radius: 17px;
      padding:0;
      cursor: pointer;
      background-color: var(--c3);
    }
    
    .td-lore-cover {
      width:100%;
      height: 100%;
      position: absolute;
    }
    
    .td-lore-cover.left {
      background: linear-gradient(to left, rgba(15, 22, 46, 0.1) 0%, rgba(10, 10, 22, 0.95) 60%);
      border-radius: 5px;
      z-index: 1;
      animation: fade100 1.5s ease-in;
    }
    
    .td-lore-cover.right {
      background: linear-gradient(to right, rgba(15, 22, 46, 0.1) 0%, rgba(10, 10, 22, 0.95) 60%);
      border-radius: 5px;
      z-index: 1;
      animation: fade100 1.5s ease-in;
      right:0;
    }

    .td-lore-cover.top {
      background: linear-gradient(to top, rgba(15, 22, 46, 0.1) 0%, rgba(10, 10, 22, 0.95) 60%);
      border-radius: 5px;
      z-index: 1;
      animation: fadedown 1.5s ease-in;
      width:100%;
    }

    @keyframes fade100 {
      0%
      {
        opacity: 0;
        width:0;
      }
      100%
      {
        opacity: 1;
        width:100%;
      }
    }

    @keyframes fadedown {
      0%
      {
        opacity: 0;
        height:0;
      }
      100%
      {
        opacity: 1;
        height:100%;
      }
    }

    .td-lore-img {
      width:100%;
      position:absolute;
      display: flex;
      align-items: center;
    }

    .td-lore-img.left{
      /* float: left; */
      transform: rotateY(-180deg);
    }

    .td-lore-img.right{
      /* right:0; */
    }

    .td-lore-img.center{
      width:100%;
    }

    .td-lore-text {
      width:50%;
      font-family: var(--font-alt);
      color: var(--c3);
      font-size: 1em;
      padding: 15px 30px;
    }

    .td-lore-text span{
      font-size: 50px;
      font-weight: bold;
      line-height: 0;
    }

    .td-lore-text.left {
      text-align: left;
      position: absolute;
      z-index: 100;
      white-space: pre-line;
      animation: fade 1.5s ease-in;
    }
    
    .td-lore-text.right {
      right: 0;
      text-align: left;
      position: absolute;
      z-index: 100;
      white-space: pre-line;
      animation: fade 1.5s ease-in;
    }

    .td-lore-text.center {
      width: calc(100% - 60px);
      text-align: center;
      position: absolute;
      z-index: 100;
      white-space: pre-line;
      animation: fade 1.5s ease-in;
    }

    @keyframes fade {
      0%
      {
        opacity: 0;
      }
      100%
      {
        opacity: 1;
      }
    }

    .td-list-info.lore.right {
      background: linear-gradient(to left, rgba(15, 22, 46, 0.1) 0%, rgba(10, 10, 22, 0.95) 70%);
      border-radius: 5px;
      z-index: 1;
      opacity: 1;
      transform: translate3d(0, 0, 0) translateX(0);
      transition: opacity 1s ease, transform .5s ease 0.25s;
    }
    /* .td-list-content-item.active:hover  .td-list-content-item-prvw.active:after {
      opacity: 0;
    }
    .td-list-content-item.active:hover .td-list-content-item-prvw.active:before {
      opacity: 1;
      transform: translate3d(0, 0, 0) translateX(0);
      transition: opacity 1s ease, transform .5s ease 0.25s;
    } */


    /* Start story book */

    /* * {
      box-sizing: border-box;
    }

    body {
      background-color: var(--body-bg);
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    } */

    /* .cover {
      box-sizing: border-box;
      width: calc(100% - 50px);
      height: calc(var(--baseline) * 42.6);
      height: calc(100% - 50px);
      box-shadow: 0 0 100px rgba(0, 0, 0, 0.3);
      color: var(--dark-text);
    }

    .book {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      display: flex;
      perspective: 1200px;
    }
    .book__page {
      box-sizing: border-box;
      position: relative;
      width: 50%;
      height: 100%;
      display: grid;
      transform: rotateY(0deg);
      transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 0% 0%;
      background-color: var(--page-bg);
      background-image: linear-gradient(90deg, #e3e3e3 0%, rgba(247, 247, 247, 0) 18%);
      z-index: 10000;
    }

    .book__page.flip {
      transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform: rotateY(-180deg);
      z-index: 10001;
    }

    .book__page.flip2 {
      z-index: 10000 !important;
    }

    .book__page:nth-of-type(1) {
      background-image: linear-gradient(-90deg, #e3e3e3 0%, rgba(247, 247, 247, 0) 18%);
    }
    .book__page--1 {
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
    }
    .book__page--1 img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    .book__page--2, .book__page--3 {
      position: absolute;
      right: 0;
      pointer-events: none;
      transform-style: preserve-3d;
      background-color: var(--page-bg);
      background-image: linear-gradient(90deg, #e3e3e3 0%, rgba(247, 247, 247, 0) 18%);
    }
    .book__page--6 {
      cursor: pointer;
      padding: 0 calc(var(--baseline) * 3);
    }
    .book__page-front1, .book__page-front2 {
      position: absolute;
      width: 100%;
      height: 100%;
      transform: rotateY(0deg) translateZ(1px);
    }
    .book__page-back1, .book__page-back2 {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 0 calc(var(--baseline) * 1.8);
      transform: rotateY(180deg) translateZ(1px);
    }
    .book__page .page__content {
      padding: var(--baseline);
      height: 100%;
      position: relative;
      text-align: center;
    }
    .book__page .page__content-book-title {
      font-family: var(--book-title);
      font-size: calc(var(--base-size) * 3);
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: var(--dark-text);
      margin-top: calc(var(--baseline) * 5);
      margin-bottom: calc(var(--baseline) * 2);
    }
    .book__page .page__content-author {
      font-family: var(--title);
      font-size: calc(var(--base-size) * 1.2);
      font-weight: 100;
      text-transform: uppercase;
      color: var(--dark-text);
      border-top: 1px solid var(--dark-text);
      border-bottom: 1px solid var(--dark-text);
      display: inline-block;
      padding: calc(var(--baseline) / 2) calc(var(--baseline) / 5);
      margin-bottom: calc(var(--baseline) * 6);
    }
    .book__page .page__content-credits {
      font-family: var(--title);
      text-transform: uppercase;
      font-size: calc(var(--base-size) * 0.8);
      margin-bottom: calc(var(--baseline) * 2);
      letter-spacing: 1px;
    }
    .book__page .page__content-credits span {
      display: block;
      font-size: calc(var(--base-size) * 1.2);
      letter-spacing: 0;
    }
    .book__page .page__content-copyright {
      position: absolute;
      width: calc(100% - (var(--baseline) * 2));
      bottom: calc(var(--baseline) * 2);
      font-family: var(--title);
      font-size: calc(var(--base-size) * 0.8);
      text-transform: uppercase;
    }
    .book__page .page__content-title {
      font-family: var(--title);
      font-size: calc(var(--base-size) * 1);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: calc(var(--baseline) * 5);
      margin-bottom: calc(var(--baseline) * 3);
    }
    .book__page .page__content-table {
      width: 100%;
      margin-top: calc(var(--baseline) * 2);
    }
    .book__page .page__content-table td {
      font-family: var(--title);
      font-size: calc(var(--base-size) * 1);
      padding-bottom: calc(var(--baseline) * 1.5);
      text-transform: uppercase;
    }
    .book__page .page__content-blockquote {
      margin-bottom: calc(var(--baseline) * 2);
    }
    .book__page .page__content-blockquote-text {
      font-family: var(--title);
      font-size: calc(var(--base-size) * 0.67);
      font-style: italic;
      text-align: justify;
    }
    .book__page .page__content-blockquote-reference {
      font-family: var(--title);
      font-size: calc(var(--base-size) * 0.7);
      margin-top: calc(var(--baseline) * 0.3);
      float: right;
      text-transform: uppercase;
    }
    .book__page .page__content-text {
      font-family: var(--title);
      font-size: calc(var(--base-size) * 0.67);
      text-align: justify;
      text-indent: var(--baseline);
    }
    .book__page .page__number {
      position: absolute;
      bottom: var(--baseline);
      width: calc(100% - (var(--baseline) * 2));
      font-family: var(--title);
      font-size: calc(var(--base-size) * 0.67);
      text-align: center;
    }
    .book input[type=radio] {
      display: initial;
      z-index: 100000;
    } */
    
    /* .book input[id="page-2"]:checked + .book__page--2 {
      transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform: rotateY(-180deg);
    } */
    








    /* End story book */
    
    .td-list-info-hdr {
      width:100%;
      height:50px;
      background-color: var(--c3);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      text-align: left;
      max-width: 200px;
      margin:25px 5px 0 0;
      border-left: 1px solid var(--c4);
      border-top: 1px solid var(--c4);
      border-right: 1px solid var(--c4);
      font-size: 28px;  
      color:var(--c1);
      font-weight: bold;
      text-align: center;
      line-height: 50px;
      position: relative;
      z-index: 50;
    }

    .td-list-info-hdr.active {
      box-shadow: 0px 0px 7px var(--c4);
      clip-path: inset(-7px -7px 0px -7px);
      position: relative;
      z-index: 200;
      border-bottom: 1px solid var(--c3);
      margin-bottom: -1px;
    }

    .td-list-info-hdr:hover {
      box-shadow: 0px 0px 7px var(--c4);
      clip-path: inset(-7px -7px 0px -7px);
      cursor: pointer;
    }
    
    .td-list-info-hdr.active:hover {
      cursor: default;
    }

    .td-list-info-hdr-img {
      height: 36px;
      position: relative;
      top: 8px;
    }

    .td-list-info-dtl-hdr {
      width: 575px;
      font-size: 20px;
      padding: 15px 15px 0px 15px;
      color: var(--c3);
      text-align: left;
      position: relative;
      z-index: 1;
    }

    .td-list-info-dtl-hdr span {
      margin-left: 20px;
      background: var(--c1);
      padding: 0 10px;
    }

    .td-list-info-dtl-img {
      height: 20px;
      position: relative;
      top: 4px;
      left: 26px;
      padding-left:5px;
      background-color: var(--c1);
    }

    .td-list-info-dtl {
      /* width:100%; */
      margin: -15px 15px 5px 15px;
      display: flex;
      flex-wrap: wrap;
      border: 2px solid var(--c3);
      border-radius: 5px;
      padding-bottom:10px;
      padding-top:15px;
    }

    .td-list-info-grp {
      position: relative;
      margin: 15px 15px 0px 15px;
      min-width: 175px;
      text-align: left;
      flex:1;
    }

    .td-list-info-grp.long {
      /* min-width: 575px; */
      min-width: 100%;
    }

    .td-list-info-label {
      position: absolute;
      left: 0;
      top: -7px;
      color: var(--c3);
      background-color: transparent;
      z-index: 10;
      font-size: 12px;  
    }
    
    .td-list-info-item {
      position: relative;
      padding: 5px 5px 2px 15px;
      /* width: 100%; */
      width: calc(100% - 20px);
      outline: 0;
      border: 0;
      color: var(--c4);
      /* box-shadow: 0 1px 0 0 var(--c3); */
      margin-top: 10px;
      background-color: transparent;
      font-size: 20px;
    }

    .td-list-info-item span {
      font-size: 10px;
      top: -5px;
      position: relative;
      padding-left: 5px;
    }

    .td-list-info-img {
      height: 22px;
      position: relative;
      top: 3px;
      margin-left: -10px;
    }

    .td-list-fire {
      color:orange;
      filter: drop-shadow(0 0 5px red);
      padding-right:5px;
    }

    .td-list-water {
      color:rgb(143, 188, 230) ;
      filter: drop-shadow(0 0 5px blue);
      padding-right:5px;
    }

    .td-list-gun {
      color:rgb(186, 190, 194) ;
      filter: drop-shadow(0 0 5px rgb(0, 0, 0));
      padding-right:5px;
    }

    .td-list-meter {
      background-color: var(--c4);
      width: 100%;
      height: 10px;
      border-radius: 6px;
      filter: drop-shadow(0 0 2px var(--c4));
      padding: 1px;
      margin-top: 20px;
    }

    .td-list-progress {
      height: 10px;
      border-radius: 5px;
      background-color: var(--c3);
    }

    .td-list-chart {
      max-width:350px;
      height: 150px;
      margin: 5px 15px 0 15px;
      flex:1;
    }

    .td-list-score {
      max-width: 150px;
      margin: 17px 15px 0 15px;
      flex:1;
    }

    .td-list-score-cont {
      border: 2px solid var(--c3);
      border-radius: 25px;
      padding:10px;
    }

    .td-list-score-cont.green {
      border-color: #43AA8B;
    }

    .td-list-score-cont.yellow {
      border-color: #F9C74F;
    }

    .td-list-score-cont.red {
      border-color: #F94144;
      box-shadow: 0px 0px 7px #F94144;
    }

    .td-list-score-img {
      height:20px;
      position: relative;
      top:3px;
    }

    .td-list-score-rank {
      font-size: 20px;
      position: relative;
    }

    .td-list-score-rank.green {
      color: #43AA8B;
    }

    .td-list-score-rank.yellow {
      color: #F9C74F;
    }

    .td-list-score-rank.red {
      color: #F94144;
    }

    .td-list-score-value {
      font-size: 50px;
      position: relative;
      font-weight: bold;
    }

    .td-list-score-value.green {
      color: #43AA8B;
    }

    .td-list-score-value.yellow {
      color: #F9C74F;
    }

    .td-list-score-value.red {
      color: #F94144;
    }

    .td-list-summary {
      margin: 17px 15px 0 15px;
      flex:1;
      text-align: left;
      font-size: 13px;
    }

    .td-list-copy, .td-list-link {
      padding-left:10px;
      color: var(--c4);
    }

    .td-list-copy:hover, .td-list-link:hover {
      filter: drop-shadow(0 0 10px white);
      cursor: pointer;
    }

    .td-list-copy-addr {
      display: contents;
    }

    .td-list-copy-lbl {
      position: absolute;
      top: -22px;
      color: var(--c1);
      background-color: transparent;
      z-index: 10;
      font-size: 12px;
      margin-left:-12px;
      background-color: var(--c4);
      padding: 3px 6px;
      border-radius: 3px;
      font-weight: bold;
      display:none;
    }

    .td-list-icon {
      padding-right:5px;
    }

    .td-list-nft-summary {
      margin: 7px 15px 0 15px;
      flex:1;
      text-align: left;
      font-size: 13px;
    }

    .td-list-nft-summary-text {
      margin: 0px 0px 8px 0px;
    }

    .td-list-text {
      margin: 7px 15px 0 15px;
      text-align: left;
      font-size: 13px;
    }

    .td-list-img {
      height:485px;
      float: left;
      border-radius: 10px;
    }

    .td-list-sub-grp {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      padding: 15px;
    } 

    .td-list-filter {
      margin: 25px;
      width: 250px;
      height: calc(100vh - 191px);
      border: 1px solid var(--c4);
      border-radius: 5px;
      box-shadow: 0px 0px 7px var(--c4);
      position: relative;
      z-index: 100;
    }

    .td-list-filter-hdr {
      width: 575px;
      font-size: 20px;
      padding: 15px 15px 0px 15px;
      color: var(--c3);
      text-align: left;
      position: relative;
      z-index: 1;
    }

    .td-list-filter-hdr span {
      margin-left: 10px;
      background: var(--c1);
      padding: 0 10px;
    }

    .td-list-info-dtl {
      /* width:100%; */
      margin: -15px 15px 5px 15px;
      display: flex;
      flex-wrap: wrap;
      border: 2px solid var(--c3);
      border-radius: 5px;
      padding:10px 5px;
    }

    .td-list-filter-item{
      background-color: var(--c3);
      color: var(--c4);
      font-size: 13px;
      padding: 2px 6px;
      border-radius: 16px;
      margin:5px;
    }

    .td-list-filter-item:hover {
      filter: drop-shadow(0 0 3px var(--c4));
      cursor: pointer;
    }

    .td-list-content {
      margin: 25px;
      min-width: 250px;
      flex:1;
      /* height: calc(100vh - 191px); */
      /* border: 1px solid var(--c4); */
      /* border-radius: 5px; */
      /* box-shadow: 0px 0px 7px var(--c4); */
      position: relative;
      z-index: 100;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
    }

    .td-list-content-item {
      position: relative;
      /* margin: 10px; */
      margin: 0 15px 30px 15px;
      min-width: 325px;
      min-height: 210px;
      max-width: 325px;
      /* max-height: 415px; */
      /* margin: 30px auto auto auto; */
      /* width: calc((100% - 60px) / 3); */
      transform: translate3d(0, 0, 0);
      overflow: hidden;
      transition: width 0.5s ease;
    }

    .td-list-content-item-prvw {
      height:325px;
    }

    .td-list-content-item-prvw.active:before, .td-list-content-item-prvw.active:after {
      transform: translate3d(0, 0, 0);
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    /* .td-list-content-item-prvw:after {
      background: rgba(14, 23, 31, 0.85);
      border-radius: 5px;
      opacity: 0;
      transition: opacity 0.5s ease;
    } */
    .td-list-content-item-prvw.active:before {
      background: linear-gradient(to left, rgba(15, 22, 46, 0.1) 0%, rgba(10, 10, 22, 0.95) 70%);
      border-radius: 5px;
      z-index: 1;
      opacity: 0;
      transform: translate3d(0, 0, 0) translateX(-50%);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .td-list-content-item.active:hover  .td-list-content-item-prvw.active:after {
      opacity: 0;
    }
    .td-list-content-item.active:hover .td-list-content-item-prvw.active:before {
      opacity: 1;
      transform: translate3d(0, 0, 0) translateX(0);
      transition: opacity 1s ease, transform .5s ease 0.25s;
    }





    .td-list-content-item.active:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 4px white);
    }

    .td-list-content-item-hdr {
      height:36px;
      width:calc(100% - 70px);
      margin: 10px 60px 10px 10px;
      position: absolute;
      z-index: 20;
      font-size: 24px;
      color: var(--c1);
      font-weight:bold;
      border: 1px solid var(--c3);
      border-radius: 5px;
      box-shadow: 3px 3px 5px var(--c1);
      background-color: var(--c3);
    }

    .td-list-content-item-img {
      height: 45px;
      position: absolute;
      right: 5px;
      top: 5px;
      z-index: 110;
      filter: drop-shadow(0 0 6px var(--c4));
    }




    .td-list-content-item.active:hover .td-list-content-item-sp {
      opacity: 1;
      transform: translateX(0);
      transition: all 0.75s ease 0.5s;
    }
    .td-list-content-item.active:hover .td-list-content-item-logo {
      filter: grayscale(100%);
      transition: filter 1s ease;
    }

    .td-list-content-item-sp {
      transform: translate3d(0, 0, 0) translateX(-25px);
      position: relative;
      z-index: 1;
      text-align: center;
      margin: 0 1.1em;
      top: 5%;
      opacity: 0;
    }

    .td-list-content-item-sp h1 {
      text-transform: uppercase;
      color: var(--c3);
      font-size: 1.4rem;
      font-weight: bold;
      filter: drop-shadow(0 0 1px black);
    }

    .td-list-content-item-sp p {
      font-size: 1rem;
    }

    /* .td-bg {
      transform: translate3d(0, 0, 0);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center center;
      transition: filter 0.5s ease;
      filter: grayscale(100%);
    } */



    .td-list-content-item-listing {
      min-height:380px;
      width:calc(100% - 2px);
      position: relative;
      z-index: 10;
      font-size: 18px;
      padding-top: 48px;
      text-align: center;
      height: calc(100% - 50px);
      border: 1px solid var(--c2);
      border-radius: 5px;
      background-color: var(--c2);
      /* box-shadow: 0px 0px 7px var(--c2); */
    }

    .td-list-content-item-logo {
      /* height:325px; */
      /* margin: 15px auto 2px auto; */
      /* filter: drop-shadow(0 0 25px var(--c3)); */
      /* min-width: 250px; */
      /* max-width: calc(100% - 100px); */
      margin: 0 auto;
      width:100%;
      position: absolute;
      left: 0;
      top: 63px;
      right: 0;
      bottom: 0;
    }

    .td-list-content-item-banner {
      /* margin:0 5px 10px 5px; */
      position: relative;
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      color:var(--c4);
      border-radius: 5px;
      box-shadow: 3px 3px 5px var(--c1);
      background-color: var(--c3);
      text-align: left;
      display: flex;
      justify-content: space-around;
      z-index: 20;
    }

    .td-list-content-item-banner-icon {
      position: relative;
    }
    
    .td-list-content-item-banner-icon.rank {
      width:70px;
      height:30px;
      margin: -5px -10px;
      padding:5px;
      background-color: var(--c1);
      border-radius: 5px;;
    }

    .td-list-content-item-banner-icon i.green {
      color: green;
      
      border-radius: 50%;
    }

    .td-list-content-item-banner-icon i.yellow {
      color: yellow;
      width: 12px;
      text-align: center;
      background: radial-gradient(var(--c2) 35%, yellow 75%);
      border-radius: 50%;
      font-size: 12px;
      padding:4px;
      font-weight: bold;
    }

    .td-list-content-item-banner-icon i.red {
      color: red;
      width: 12px;
      text-align: center;
      background: radial-gradient(var(--c4) 35%, red 75%);
      border-radius: 50%;
      font-size: 12px;
      padding:4px;
      font-weight: bold;
    }

    .td-icon-count {
      display:flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: -3px;
      right:-10px;
      font-size: 11px;
      height: 16px;
      min-width: 10px;
      background-color: var(--c2);
      border-radius: 8px;
      color: var(--c4);
      padding: 0 3px;
      filter: drop-shadow(0 0 3px var(--c4));
    }

    .td-icon-count.rank {
      bottom: 2px;
    }

    .td-no-value {
      position: absolute;
      bottom: -3px;
      right:-10px;
      font-size: 16px;
      color:red;
      filter: drop-shadow(0 0 3px var(--c4));
    }

    .td-yes-value {
      position: absolute;
      bottom: -3px;
      right:-10px;
      font-size: 16px;
      color:green;
      filter: drop-shadow(0 0 3px var(--c4));
    }

    .td-list-content-item-icon {}

    .td-list-content-item-icon.follow:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 3px red);
    }

    .td-list-content-item-rank {
      width: 70px;
      text-align: right;
      padding-right: 15px;
      margin-right: 5px;
      background-color: var(--c3);
      color: var(--c4);
      border-radius: 16px;
      position: relative;
    }

    .td-list-content-item-rank-img {
      font-size:16px;
      /* margin-right:5px; */
      position: absolute;
      top:7px;
      left:4px;
    }

    .td-y-on, .td-n-on {
      display: initial;
    }
    
    .td-y-off, .td-n-off {
      display: none !important;
    }

    .td-ptnr, .td-aso {
      padding:20px;
    }

    .td-ptnr-img, .td-aso-img {
      max-height:100px;
      max-width:100%
    }
    
    /* Footer */

    .td-ftr {
      width:100%;
      height:250px;
      display: flex;
      position: relative;
      justify-content: center;
    }

    .td-pwr {
      font-size: 28px;
      position: absolute;
      left:5%;
      bottom:104px;
    }

    .td-pwr-img {
      height: 30px;
      position: relative;
      top:6px;
    }

    .td-pwr-img:hover {
      filter: drop-shadow(0 0 10px white);
      cursor: pointer;
    }

    .td-ftr-logo {
      justify-content: center;
      height:150px;
      margin-top:50px;
    }

    .td-socials {
      position: absolute;
      right:5%;
      bottom:111px;
      display: flex;
      flex-wrap: wrap;
      max-width: 40%;
      justify-content: center;
    }

    .td-link {
      text-decoration: none;
    }

    .td-icon {
      font-size: 28px;
      color: white;
      padding-left: 15px;
      padding-top: 15px;
    }

    .td-icon:hover {
      filter: drop-shadow(0 0 10px white);
    }
      
    /* Pop-up css */

    .td-mint, .td-wl, .td-ld, .td-err, .td-help, .td-info {
      position: fixed;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      background-color: rgba(115, 147, 153, .7);
      justify-content: center;
      align-items: center;
      display: none;
    }

    .td-err-exit {
      color:rgba(223, 171, 171, 1);
      position: absolute;
      right:5px;
      top:5px;
      font-size:30px;
    }

    .td-err-exit:hover {
      text-shadow:0 0 10px rgba(223, 171, 171, 1);
      cursor: pointer;
    }

    .td-mint-exit, .td-wl-exit, .td-help-exit, .td-info-exit {
      color:var(--c4);
      position: absolute;
      right:5px;
      top:5px;
      font-size:30px;
    }

    .td-mint-exit:hover, .td-wl-exit:hover, .td-help-exit:hover, .td-info-exit:hover {
      text-shadow:0 0 10px var(--c4);
      cursor: pointer;
    }

    .td-mint-cnt{
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 5px;;
      z-index: 100000;
      background-color: var(--c1);
    }

    .td-mint-img-cnt {
      position: absolute;
      width: 600px;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .td-mint-img {
      /* position: fixed; */
      width: 80%;
      height: 80%;
      opacity: .03;
      /* margin: 10vh; */
      z-index: -1000;
    }

    .td-ld-cnt, .td-err-cnt, .td-help-cnt, .td-info-cnt {
      position: absolute;
      width: 400px;
      min-height: 250px;
      max-height: 80%;
      border-radius: 5px;;
      z-index: 100000;
      background-color: var(--c1);
    }

    .td-wl-cnt {
      position: absolute;
      width: 400px;
      min-height: 250px;
      max-height: 80%;
      border-radius: 5px;;
      z-index: 100000;
      background-color: var(--c1);
      overflow-y: hidden;
      height:100%;
    }

    .td-err-lbl {
      color:rgba(223, 171, 171, 1);
      /* text-shadow:0 0 10px rgba(223, 171, 171, 1); */
      padding:10px;
      text-align: center;
      font-size:30px;
    }

    .td-err-msg {
      color:rgba(223, 171, 171, 1);
      padding:15px;
      text-align: left;
      font-size:18px;
      white-space: pre-line;
      min-height:185px;
      max-height: 60%;
      overflow-y:scroll;
    }

    .td-mint-lbl, .td-wl-lbl, .td-ld-lbl, .td-help-lbl, .td-info-lbl {
      color:var(--c4);
      /* text-shadow:0 0 10px var(--c4); */
      padding:10px;
      text-align: center;
      font-size:30px;
    }

    .td-mint-msg {
      height:calc(100% - 65px);
      overflow-x: hidden;
      overflow-y: auto;
      width: 50%;
      text-align: center;
    }

    .td-mint-msg.left{
      float: left;
    }
    
    .td-mint-msg.right{
      float: right;
    }

    .td-wl-msg {
      height:calc(100% - 65px);
      overflow-y: auto;
    }

    .td-help-msg, .td-info-msg {
      color:var(--c4);
      padding:15px;
      text-align: left;
      font-size:18px;
      white-space: pre-line;
      min-height:185px;
      max-height: 60%;
      overflow-y:scroll;
    }

    .td-err-msg::-webkit-scrollbar-track {
      /* background: rgba(166, 178, 180,1); */
      box-shadow: rgba(166, 178, 180, 0) 0px 0px 2px inset;
      border-radius: 6px;
    }

    .td-err-msg::-webkit-scrollbar-thumb {
      background: rgba(223, 171, 171, 1);
      border-radius: 4px;
    }

    .td-help-msg::-webkit-scrollbar-track, .td-info-msg::-webkit-scrollbar-track {
      /* background: rgba(166, 178, 180,1); */
      box-shadow: rgba(166, 178, 180, 0) 0px 0px 2px inset;
      border-radius: 6px;
    }

    .td-help-msg::-webkit-scrollbar-thumb, .td-info-msg::-webkit-scrollbar-thumb {
      background: rgba(171, 223, 223, 1);
      border-radius: 4px;
    }

    .td-mint-grp {
      position: relative;
      margin: 25px 15px 0px 15px;
      min-width: 250px;
      text-align: left;
      flex:1;
      border: solid 1px white;
      border-radius: 5px;
      padding: 5px 10px 10px 10px;
    }

    .td-mint-label {
      position: absolute;
      left: 0;
      top: -10px;
      color: white;
      background-color: var(--c1);
      z-index: 10;
      font-size: 14px;  
      left:15px;
      padding: 0 5px;
    }
    
    .td-mint-item {
      position: relative;
      padding: 10px;
      width: calc(100% - 20px);
      outline: 0;
      border: 0;
      color: var(--c1);
      /* box-shadow: 0 1px 0 0 var(--c3); */
      margin-top: 10px;
      background-color: var(--c4);
      font-size: 20px;
      text-align: right;
    }
    
    .td-mint-item.readonly {
      color: var(--c4);
      background-color: transparent;
    }

    .td-mint-item.check {
      height:24px;
    }

    .td-mint-item span {
      font-size: 10px;
      top: -5px;
      position: relative;
      padding-left: 5px;
    }

    .td-mint-note {
      font-size: 12px;
      padding-top:10px;
    }

    .td-mint-desc {
      font-size: 14px;
      padding-top:10px;
    }

    .td-mint-submit {
      width: 175px;
      height: 50px;
      margin: 20px auto;
      font-family: var(--font);
      font-size: 20px;
      background-color: var(--c3);
      color:var(--c1);
      border-radius: 5px;
    }

    .td-ld-ring {
      margin-top:20px;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:150px;
      height:150px;
      background:transparent;
      border:3px solid #3c3c3c;
      border-radius:50%;
      text-align:center;
      line-height:150px;
      font-size:20px;
      color:rgba(171, 223, 223, 1);
      letter-spacing:4px;
      text-transform:uppercase;
      text-shadow:0 0 10px rgba(171, 223, 223, 1);
      box-shadow:0 0 20px rgba(0,0,0,.5);
    }

    .td-ld-ring:before {
      content:'';
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      border:3px solid transparent;
      border-top:3px solid rgba(171, 223, 223, 1);
      border-right:3px solid rgba(171, 223, 223, 1);
      border-radius:50%;
      animation:animateC 2s linear infinite;
    }

    .td-ld-ring-dot {
      display:block;
      position:absolute;
      top:calc(50% - 2px);
      left:50%;
      width:50%;
      height:4px;
      background:transparent;
      transform-origin:left;
      animation:animate 2s linear infinite;
    }

    .td-ld-ring-dot:before {
      content:'';
      position:absolute;
      width:16px;
      height:16px;
      border-radius:50%;
      background:rgba(171, 223, 223, 1);
      top:-6px;
      right:-8px;
      box-shadow:0 0 20px rgba(171, 223, 223, 1);
    }

    @keyframes animateC {
      0%
      {
        transform:rotate(0deg);
      }
      100%
      {
        transform:rotate(360deg);
      }
    }

    @keyframes animate {
      0%
      {
        transform:rotate(45deg);
      }
      100%
      {
        transform:rotate(405deg);
      }
    }

    ::-webkit-scrollbar{
      width: 7px;
      height: 7px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(5,9,8,.3);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-track {
      box-shadow: rgba(166, 178, 180,1) 0px 0px 2px inset;
      border-radius: 6px;
    }


    .td-pop-item {
      position: fixed;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      background-color: rgba(115, 147, 153, .7);
      justify-content: center;
      align-items: center;
      display: none;
    }

    .td-pop-item-exit {
      color:var(--c4);
      position: absolute;
      right:0px;
      top:0px;
      font-size:20px;
      padding:10px;
    }

    .td-pop-item-exit:hover {
      text-shadow:0 0 10px var(--c4);
      cursor: pointer;
      background-color: red;
      border-top-right-radius : 5px;
    }

    .td-pop-item-cnt {
      position: absolute;
      width: 90vw;
      /* min-height: 250px; */
      /* max-height: 80%; */
      height: 90vh;
      border-radius: 5px;;
      z-index: 100000;
      background-color: var(--c1);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow: hidden;
    }

    .td-pop-item-bg {
      display: flex;
      justify-content: center;
      width: 100%;
      position: absolute;
    }

    .td-pop-item-bg-img {
      position: fixed;
      width: auto;
      height: 60%;
      opacity: .2;
      margin: 10%;
      z-index: -1000;
    }

    .td-pop-item-left {
      min-width: 300px;
      max-width: calc(25% - 20px);
      padding:10px;
    }

    .td-pop-item-title {
      text-align: center;
    }

    .td-pop-item-image-cnt {
      padding:10px;
    }

    .td-pop-item-image {
      width: 100%;
      border-radius: 5px;
      border: 1px solid var(--c3);
    }

    .td-pop-item-image:hover {
      filter: drop-shadow(0px 0px 7px var(--c3));
      cursor: pointer;
    }

    .td-pop-item-carousel {
      text-align: center;
    }

    .td-pop-item-image-tn {
      height: 50px;
      margin: 5px;
      border-radius: 5px;
    }

    .td-pop-item-image-tn.active {
      height:48px;
      border-radius: 5px;
      border: 1px solid var(--c3);
    }

    .td-pop-item-image-tn:hover {
      height:48px;
      border: 1px solid var(--c3);
      filter: drop-shadow(0px 0px 7px var(--c3));
      cursor: pointer;
    }

    .td-pop-item-image-tn.active:hover {
      filter: drop-shadow(0px 0px 0px var(--c3));
      cursor: initial;
    }

    .td-pop-item-center {
      min-width: 300px;
      max-width: calc(50% - 30px);
      padding:15px;
      margin-top: 100px;
    }

    .td-pop-item-right {
      min-width: 300px;
      /* max-width: calc(25% - 20px);
      padding: 50px 10px; */
      max-width: 25%;
      height: 100%;
      overflow-y: auto;
    }

    .td-pop-item-comments {
      padding: 50px 10px 10px 10px;
    }

    .td-pop-item-bubble {
      position: relative;
      margin: 20px 10px 55px 30px;
      z-index: 10;
    }

    .td-pop-item-bubble:hover {
      cursor: pointer;
    }
    
    .td-pop-item-bubble:hover .td-pop-item-bubble-subs-ct{
      filter: drop-shadow(0 0 3px var(--c3));
    }

    .td-pop-item-bubble-img-ct {
      position: absolute;
      left: -30px;
      top: -20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: solid 1px var(--c3);
      background-color: var(--c1);
    } 

    .td-pop-item-bubble-img {
      width:100%;
      height: 100%;
      overflow: hidden;
      border-radius: 25px;
    }

    .td-pop-item-bubble-delete-ct {
      position: absolute;
      padding: 3px 9px;
      border: solid 1px red;
      border-radius: 20px;
      left: -16px;
      background-color: var(--c4);
      bottom: -16px;
    }

    .td-pop-item-bubble-delete-ct:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 3px red);
    }

    .td-pop-item-bubble-delete {
      color:red;
    }

    .td-pop-item-bubble-comment {
      padding: 10px 10px 20px 10px;
      font-size: 13px;
      text-indent: 15px;
      border: solid 1px var(--c3);
      border-radius: 5px;
      word-wrap: break-word;
    }

    .td-pop-item-bubble-subs-ct {
      position: absolute;
      right: -10px;
      top: -20px;
      width: 35px;
      height: 35px;
      justify-content: center;
      display: flex;
      align-items: center;
    }

    .td-pop-item-bubble-subs {
      font-size: 30px;
      color:var(--c4);
      position: absolute;
      display: flex !important;
      justify-content: center;
      align-items: center;
    }

    .td-pop-item-bubble-subs span {
      position: absolute;
      font-size: 10px;
      color: var(--c1);
      padding-bottom:3px;
    }

    .td-pop-item-bubble-rate-ct {
      width: 100px;
      color: var(--c4);
      display: flex;
      position: absolute;
      right:-10px;;
      bottom: -30px;
      padding:5px;
      background-color: var(--c1);
      border: solid 1px var(--c3);
      border-radius: 30px;
    }

    .td-pop-item-bubble-like-ct, .td-pop-item-bubble-dislike-ct {
      width: 50px;
      color: var(--c4);
      text-align: center;
      line-height: 1;
    }

    .td-pop-item-bubble-like-ct:hover, .td-pop-item-bubble-dislike-ct:hover {
      cursor: pointer;
      filter: drop-shadow(0 0 3px var(--c3));
    }

    .td-pop-item-bubble-like::before, .td-pop-item-bubble-dislike::before{
      font-size: 20px;
    }

    .td-pop-item-bubble-like, .td-pop-item-bubble-dislike{
      width: 100%;
    }

    .td-pop-item-bubble-like-ct span, .td-pop-item-bubble-dislike-ct span{
      font-size: 10px;
      width:100%;
    }

    .td-pop-item-submit-cnt {
      padding:10px 20px 50px 35px;
    }

    .td-pop-item-comment-hdr {
      font-weight: 100;
    }

    .td-pop-item-bubble-back {
      position: absolute;
      padding: 6px 10px;
      margin-top: -20px;
      margin-left: 55px;
      border-radius: 22px;
      background-color: var(--c3);
      color: var(--c4);
      cursor: pointer;
    }

    .td-pop-item-bubble-back:hover {
      filter: drop-shadow(0 0 3px var(--c3));
    }

    .td-pop-item-bubble-back-lbl {
      cursor: pointer;
    }
    
    .td-pop-item-comment-create {
      font-size: 12px;
      width: calc(100% - 10px);
      height: 80px;
      border-radius: 5px;
      resize: none;
      padding:5px;
      color: var(--c1);
      font-family: var(--font);
    }

    .td-pop-item-submit-ct {
      /* display: flex; */
      width: 100%;
      text-align: right;
    }

    .td-pop-item-comment-submit {
      /* position: absolute; */
      padding: 6px 10px;
      width: 100px;
      /* right: 25px; */
      border-radius: 22px;
      background-color: var(--c3);
      color: var(--c4);
      cursor: pointer;
    }
    
    .td-pop-item-comment-submit:hover {
      filter: drop-shadow(0 0 3px var(--c3));
    }    

    .td-pop-item-comment-submit-lbl {
      cursor: pointer;
    }

    .td-pop-item-msg::-webkit-scrollbar-track {
      /* background: rgba(166, 178, 180,1); */
      box-shadow: rgba(166, 178, 180, 0) 0px 0px 2px inset;
      border-radius: 6px;
    }

    .td-pop-item-msg::-webkit-scrollbar-thumb {
      background: rgba(171, 223, 223, 1);
      border-radius: 4px;
    }




    .coming-soon { 
      color:white;
      font-size:120px; 
      text-shadow: 0 0 10px white;
      text-align: center;
      width: 100%;
      padding-top: calc((100vh / 2) - 185px);
    }

    .td-flag {
      width:40px;
      height:30px;
      margin-top: 11px;
      padding-right: 10px;
      background-color: var(--c1);
      background-repeat: no-repeat;
    }

    .pressed{
      transform: translate(2px, 2px);
      box-shadow: none;
    }

    .copyright {
      display:flex;
      align-items: center;
      padding:0;
      box-sizing: border-box;
      height:35px;
      padding-left: 20px;
      position: absolute;
      bottom: 35px;
      left:5%;
      color: white;
      font-size: 13px;
    }

    .td-cr-icon {
      padding-right:5px;
    }

    .td-cr-text {

    }

    /* submission */

    .td-form-dtl {
      /* width:100%; */
      display: flex;
      flex-wrap: wrap;
      padding-bottom:20px;
    }

    .td-form-grp {
      position: relative;
      margin: 25px 15px 0px 15px;
      min-width: 250px;
      text-align: left;
      flex:1;
      border: solid 1px white;
      border-radius: 5px;
      padding: 5px 10px 10px 10px;
    }

    .td-form-label {
      position: absolute;
      left: 0;
      top: -10px;
      color: white;
      background-color: var(--c1);
      z-index: 10;
      font-size: 12px;  
      left:15px;
      padding: 0 5px;
    }
    
    .td-form-item {
      position: relative;
      /* padding: 10px; */
      width: calc(100% - 10px);
      outline: 0;
      border: 0;
      color: var(--c4);
      /* box-shadow: 0 1px 0 0 var(--c3); */
      margin-top: 10px;
      background-color: var(--c1);
      font-size: 20px;
    }

    .td-form-item.check {
      height:24px;
    }

    .td-form-item span {
      font-size: 10px;
      top: -5px;
      position: relative;
      padding-left: 5px;
    }

    .td-form-note {
      font-size: 12px;
      padding-top:10px;
    }

    .td-form-submit {
      width: 175px;
      height: 50px;
      margin: 20px auto;
      font-family: var(--font);
      font-size: 20px;
      background-color: var(--c3);
      color:var(--c1);
      border-radius: 5px;
    }


    @media only screen and (max-width: 450px) {
      /* .td-menu-btn {
        display: initial;
      }

      .td-menu {
        width:0px;
        height:calc(100vh - 65px);
        background-color: var(--c2);
        border-right: 1px solid var(--c2);
        box-shadow: 0px 0px 10px var(--c2);
        position: absolute;
        top:65px;
        left:0;
        z-index: 100;
        -webkit-transition: width 1s;
        -moz-transition: width 1s;
        -o-transition: width 1s;
        transition: width 1s;
        display:block;
      }

      .td-menu-item{
        opacity: 0;
        visibility:hidden;
        width:0;
        overflow-x: hidden;
        padding:7px 0 7px 10px;
      }
      
      .td-menu-item.active {
        text-decoration: none;
        font-weight: bold;
        color:var(--c1);
        filter: drop-shadow(0 0 10px var(--c1));
        border-right: 5px solid var(--c3) !important;
        background-color: var(--c4);
      }

      .td-menu-item.visible {
        animation: 1s 0s 1 visibileMenuItem forwards;      
      }

      @keyframes visibileMenuItem {
        0% {
          opacity: 0;
          visibility:hidden;
          width:0;
        }
        100% {
          opacity: 1;
          visibility:initial;
          width:180px;
        }
      }

      .td-menu-item.hidden {
        animation: 1s 0s 1 hiddenMenuItem forwards;      
      }

      @keyframes hiddenMenuItem {
        0% {
          opacity: 1;
          visibility:initial;
          width:180px;
        }
        100% {
          opacity: 0;
          visibility:hidden;
          width:0;
        }
      } 
    
      .td-logo {
        left: 65px;
      } */

      .td-menu {
        width: 250px;
      }

      .td-img.name {
        display:none;
      }

      .td-menu-item span {
        display:none;
      }

      .td-connect {
        width:70px;
      }

      .td-connect-img {
        font-size: 14px;
        top:5px;
        left:21px;
      }

      .td-connect-lbl {
        font-size: 10px;
        bottom:2px;
        top:initial;
        left:12px;
      }
      
      @keyframes tdTitleHeight {
        0% {
          padding:40px 0;
        }
        100% {
          padding:79px 0;
        }      
      }

      .td-featured {
        height:60px;
        justify-content: right;
      }

      .td-featured-close {
        font-size: 28px;
        padding-top: 16px;
      }

      .td-featured-close span {
        font-size: 20px;
        top:20px;
      }
      
      .td-featured-text {
        font-size: 18px;  
        max-width: calc(100% - 140px);
        line-height: 1.2;
        text-align: right;
        padding: 10px 20px;
        justify-content: right;
      }
      
      .td-featured-text.large {
        display:none;  
      }
      
      .td-featured-text.small {
        display:flex;  
      }

      .td-ct.listed {
        height:calc(100% - 65px - 60px); 
      }

      /*.td-ct.featured.listed {
        height:calc(100% - 65px - 60px - 60px); 
      }*/

      .td-ct-cont.listed {
        margin-top: 60px;
        height: calc(100% - 60px);
      } 

      .td-page-title-text {
        font-size: 37px;
      }
      
      .td-page-title-back {
        font-size: 60px;
        top: 160px;
      }

      @keyframes tdTitleBack {
        0% {
          top: 160px;
        }
        100% {
          top: 185px;
        }      
      }

      .td-page-title-img {
        height:80px;
      }

      .td-page-title-img.left {
        /* left:156px; */
        left:-56px;
        top:47px;
        animation: 1s ease-out 1.5s 1 tdTitleImgShiftLeft forwards;
      }

      @keyframes tdTitleImgShiftLeft {
        0% {
          height:80px;
          /* left:156px; */
          left:-56px;
          top:47px;
        }
        100% {
          height: 41px;
          left:0;
          top:8px;
          filter: drop-shadow(0 0 10px white);
        }      
      }

      .td-page-title-img.right {
        /* right:127px; */
        right:-70px;
        top:-47px;
        animation: 1s ease-out 1.5s 1 tdTitleImgShiftRight forwards;
      }

      @keyframes tdTitleImgShiftRight {
        0% {
          height:80px;
          /* right:127px; */
          right:-70px;
          top:-47px;
        }
        100% {
          height: 41px;
          right: 0;
          top: 8px;
          filter: drop-shadow(0 0 10px white);
        }      
      }

      .td-page-sep-nrw {
        width:65%;
      }
              
      .td-page-subtitle {
        width:80%;
        margin: auto;
        font-size: 20px;
      }

      .td-page-subtitle-img {
        height: 22px;
        position: relative;
        top:4px;
      }

      .td-grp-hdr {
        font-size: 30px;
        padding: 15px 10% 0px 7%;
      }

      .td-grp-dtl {
        width:90%;
        margin:-24px 5% 5px 5%;
      }

      .td-grp-item3, .td-grp-list3 {
        width:calc(100% - 20px);
      }

      .td-grp-item-logo {
        height:250px;
      }

      .td-grp-item-listing {
        min-height: 380px;
      }

      .td-nft-layout-dg, .td-nft-layout-specs {
        min-width: 250px;
      }

      /* Listing */

      .td-list-banner {
        height: 60px;
        justify-content: right;
        margin-top: -60px;
      }

      .td-list-back {
        font-size: 28px;
        padding-top: 16px;
      }

      .td-list-back span {
        font-size: 20px;
        top:20px;
      }

      .td-list-banner-text {
        font-size: 20px;  
        font-weight: bold;
        width:190px;
        line-height: 1;
        text-align: right;
        padding: 20px 20px;
      }

      .td-list-banner-flag {
        margin-top: 6px;
        margin-left: 10px;
      }

      .td-buy-now-hdr {
        display:none;
      }

      .td-buy-now-ftr {
        position: fixed;
        top:auto;
        right:20px;
        bottom:9px;
        z-index: 150;
        display: block;
      }

      .td-buy-now-mobile {
        position: fixed;
        bottom:0;
        width:100%;
        height:60px;
        background-color: var(--c2);
        z-index: 300;
        display:none;
      }

      .td-mint-cnt {
        width: 90%;
        overflow-y: auto;
        height: 80%;
      }

      .td-mint-img-cnt {
        width: 90%;
        top: calc((100vh - (100vw * .90)) / 2);
        height: auto;
        position: fixed;
      }

      .td-mint-msg {
        height: auto;
      }

      .td-mint-msg.left, .td-mint-msg.right {
        float: initial;
        width: 100%;
      }

      .td-opensea-hdr {
        display: none;
      }

      .td-opensea-ftr {
        display:block;
      }

      .td-list-pfp-cont {
        height:650px;
      }

      .td-list-ct {
        width: 400px;
        min-width: 300px;
      }

      .td-list-info-hdr {
        font-size: 18px;
      }

      .td-list-ct-dtl {
        /* padding-bottom: 10px; */
      }
      
      .td-list-info {
        min-width: 300px;
        /* margin: 50px 25px 0 25px; */
      }

      .td-lore-page {
        display: flex;
        justify-content: center;
      }

      .td-list-info.lore {
        /* margin-bottom: -20px; */
      }

      .td-lore-cover.left {
        left:0;
        background: linear-gradient(to left, rgba(15, 22, 46, 0.7) 0%, rgba(10, 10, 22, 0.95) 60%);
      }
      
      .td-lore-cover.right {
        right:0;
        background: linear-gradient(to right, rgba(15, 22, 46, 0.7) 0%, rgba(10, 10, 22, 0.95) 60%);
      }

      .td-lore-img {
        width:auto !important;
        height:100%;
        margin: 0 calc((100% - 100vw) / 2 * -1);
      }
  
      .td-lore-text {
        width:calc(100% - 30px);
        font-size: 0.68em;
        padding:15px;
      }

      .td-list-info-hdr-text{
        font-size: 28px;  
        padding: 16px 20px;
      }

      .td-list-info-hdr-img {
        height: 30px;
        top: 6px;
      }

      .td-list-info-grp {
        margin: 20px 15px 0px 15px;
      }

      .td-list-chart, .td-list-score, .td-list-summary { 
        min-width: calc(100% - 30px);
      }

      .td-list-filter {
        position: fixed;
      }

      .td-pop-item-cnt {
        overflow: auto;
      }

      .td-pop-item-bg {
        height: 100%;
        align-items: center;
        z-index: -1;
      }

      .td-pop-item-bg-img {
        width:80%;
        height:auto;
      }

      .td-pop-item-right {
        overflow-y:visible;
        height:auto;
      }

      /* Footer */

      .td-pwr {
        font-size: 20px;
        bottom:35px;
      }

      .td-pwr-img {
        height: 26px;
      }

      .td-ftr-logo {
        position: absolute;
        margin-top: 0;
        left: 65px;
        height: 125px;
        top: 15px;
      }

      .copyright {
        left:auto;
        right:5%;
      }

      .coming-soon { 
        font-size:80px; 
      }
    }

    @media only screen and (max-width: 400px) {
      .td-list-pfp-cont {
        height:600px;
      }

      .td-pwr {
        font-size: 16px;
      }

      .td-pwr-img {
        height: 22px;
        top: 5px;
      }

      .copyright {
        font-size: 10px;
      }
    }

    /* Universal */

    li {
      padding-right: 18px;
    }

    #content {
      margin-top: 50px;
      text-align: center;
    }

    section.timeline-outer {
      width: 70%;
      margin: 0 auto;
    }

    /* Timeline */

    .timeline {
      border-left: 8px solid var(--c3);
      border-bottom-right-radius: 2px;
      border-top-right-radius: 2px;
      box-shadow: 0 2px 5px 0 var(--c3)29, 0 2px 10px 0 var(--c3)1F;
      color: var(--c4);
      margin: 50px auto;
      letter-spacing: 0.5px;
      position: relative;
      line-height: 1.4em;
      padding: 20px;
      list-style: none;
      text-align: left;
    }

    .timeline h1,
    .timeline h2,
    .timeline h3 {
      font-size: 1.4em;
    }

    .timeline .event {
      border-bottom: 1px solid var(--c3)33;
      padding-bottom: 15px;
      margin-bottom: 20px;
      position: relative;
    }

    .timeline .event:last-of-type {
      padding-bottom: 0;
      margin-bottom: 0;
      border: none;
    }

    .timeline .event:before,
    .timeline .event:after {
      position: absolute;
      display: block;
      top: 0;
    }

    .timeline .event:before {
      left: -177.5px;
      color: var(--c3);
      content: attr(data-date);
      text-align: right;
      /*  font-weight: 100;*/

      font-size: 16px;
      min-width: 120px;
    }

    .timeline .event:after {
      box-shadow: 0 0 0 8px var(--c3);
      left: -30px;
      background: var(--c2);
      border-radius: 50%;
      height: 11px;
      width: 11px;
      content: "";
      top: 5px;
    }

    @media (max-width: 945px) {
      section.timeline-outer {
        width: 90%;
      }

      .timeline .event::before {
        left: 0.5px;
        top: 20px;
        min-width: 0;
        font-size: 13px;
      }
      .timeline h3 {
        font-size: 16px;
      }
      .timeline p {
        padding-top: 20px;
      }
      section.lab h3.card-title {
        padding: 5px;
        font-size: 16px;
      }
    }

    @media (max-width: 768px) {
      .timeline .event::before {
        left: 0.5px;
        top: 20px;
        min-width: 0;
        font-size: 13px;
      }
      .timeline h3 {
        font-size: 16px;
      }
      .timeline p {
        padding-top: 20px;
      }
    }