html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-display: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  -webkit-text-size-adjust: 100%;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}
.img-normal {
  image-rendering: auto;
}
hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: dashed;
  border-width: 1px;
  border-color: #aaaaaa;
}  




/* fade image in after load */
.lazyload,
.lazyloading {
  opacity: 0;
}
.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}



/* Body Style / Page Wrappers */
.wrapper {
  width: 100%;
}
.index_bg_light {
  background-color: #FFFFFF;
}
.index_bg_dark {
  background-color: #1E1E1E;
  background-color: #1f2810;
  background-color: #18200c;
}


/* Welcome page background */
.cover-bg {
  background-color: #1f2810;

}
/*
.cover {
  image-rendering: pixelated;
  position: relative;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://tiedyecamo.io/img/tie-dye-camo-cover.png);
}
.overlay {
  background-color: rgba(75, 91, 51, 0.96);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/
/* Welcome Content */
/* Welcome Avatar */
.avatar-border > img {
  height: 8vw;
  width: auto;
}
.top-right {
  position: absolute;
  top: 0;
  right: 0;
}
.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}
.top-left {
  position: absolute;
  top: 0;
  left: 0;
}
.welcome-border {
  position: absolute;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  text-align: center;
  height: 95%;
  width: 95%;
  border-left: 1px solid #b00000;
  border-right: 1px solid #b00000;
  border-bottom: 1px solid #b00000;
}
.welcome-link {
  text-decoration: none;
}
.welcome-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
}
.welcome-img-wrapper {
  width: 100%;
  height: 35vh;
  text-align: center;
  margin: 0px auto 0px;
}
.welcome-img-wrapper > img {
  height: 100%;
  width: auto;
  max-height: 100vw;
  max-width: 100%;
  padding: 30px;
  background-color: #18200c;
}
.welcome-title-wrapper {
  padding: 30px 0px;
}
.welcome-text {
  margin: 0px 0px 20px;
  text-align: center;
}
.welcome-btn {
  font-family: 'VT323', monospace;
  font-size: 30px;
  margin: 10px 0px;
}

/* About */
.about-wrapper {
  width: 92.5%;
  margin: 40px 5% 40px 2.5%;
  line-height: 20px;
}
.about-wrapper p {
  /*margin-left: 30px;*/
}
.indent-wrapper {
  margin-left: 30px;
}
.hidden {
  display: none;
}
.about-img-wrapper {
  display: inline-block;
  width: 98%;
  padding: 10px 1% 40px;
  margin: 10px 0px;
  /*background-color: #FFF;*/f
}
/* 'about' img container */
.about-img-container {
  display: inline;
  float: left;
  width: 32.6%;
  margin: 0px 1% 20px 0%;
}
.about-img-wrapper div:nth-child(3n) {
  float: right;
  margin-right: 0px;
}
.about-img-container > img {
  width: 100%;
}
.about-img-container-2 {
  display: inline;
  float: left;
  width: 70%;
  margin: 0px 1% 20px 0%;
}
.about-img-container-2 > img {
  width: 100%;
}
.about-img-container-3 {
  display: inline;
  float: left;
  width: 49.5%;
  margin: 0px 1% 20px 0%;
}
.about-img-container-3b {
  display: inline;
  float: right;
  width: 49.5%;
  margin: 0px 0% 20px 0%;
}
.about-img-container-3 > img {
  width: 100%;
}
.about-img-container-3b > img {
  width: 100%;
}
.about-img-container-4 {
  display: inline;
  float: left;
  width: 100%;
  margin: 0px 0% 20px 0%;
}
.about-img-container-4 > img {
  width: 100%;
}
.about-description {
  display: inline-block;
  float: left;
  width: 100%;
  margin-top: 0px;
}
.about-description h1 {
  font-family: Times New Roman, serif;
  font-size: 22px;
  color: #FFF;
  margin-bottom: 5px;
}
.trait-percent {
  color: #ff00bf;
}




/* image grid wrapper */
.img-grid-wrapper {
  display: inline-block;
  width: 100%;
  background-color: #FFFFFF;
  padding-top: 5px;
}
.img-grid-wrapper-dark {
  display: inline-block;
  width: 100%;
  background-color: #000000;
  padding-top: 5px;
}


/* 'Index' img container */
.img-container {
  display: inline-block;
  float:  left;
  width: 31.3%;
  margin: 7px 0% 7px 1.5%;
}
.img-grid-wrapper .img-container:nth-child(3n) {
  float: right;
  margin-right: 1.5%;
  margin-left: 0%;
}
.img-container > img {
  width: 100%;
}
.nft-variable {

}
.nft-number {
  display: inline-block;
  float: right;
  padding-right: 15px;
  padding-top: 3px;
}
.nft-rank {
  display: inline-block;
  padding-top: 3px;
}
















/* Marquee */
.marquee {
    height: 30px;
    overflow: hidden;
    position: relative;
    color: #FFF;
    background-color: darkgreen;
}

.marquee p {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 30px;
    text-align: center;
    /*
    -moz-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    -moz-animation: scroll-left 20s linear infinite;
    -webkit-animation: scroll-left 20s linear infinite;
    animation: scroll-left 20s linear infinite;
    */
}

@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(50%);
    }
    100% {
        -moz-transform: translateX(-75%);
    }
}
@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(50%);
    }
    100% {
        -webkit-transform: translateX(-75%);
    }
}
@keyframes scroll-left {
    0% {
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
    100% {
        -moz-transform: translateX(-75%);
        -webkit-transform: translateX(-75%);
        transform: translateX(-75%);
    }
}




















/*  U n i v e r s a l   T e x t   S i z e  */
    

    .text-1, .text-2, .text-3, .text-4, .text-5, .text-6, .text-7, .text-main, .sub-description, .avatar-info, .garment-info, .v-center-text, .key_square, .welcome-btn, .marquee {
      font-family: monospace;
    }
    .welcome-title  {
      font-family: 'VT323', monospace;
    }
    /*
    .about  {
      font-family: 'Source Code Pro', monospace;
      font-weight: 300;
    }*/

    /* Universal Text Size 1 ~Nav */
    .text-1 {
      font-size: 13px;
    }
    /* Universal Text Size 2 ~NFT Item Text */
    .text-2 {
      font-size: 12px;
    }
    /* Universal Text Size 3 ~Ascending/Descending Arrows */
    .text-3 {
      font-size: 20px;
    }
    /* Universal Text Size 4 ~NFT Title */
    .text-4 {
      font-size: 17px;
    }
    /* Universal Text Size 5 ~NFT page description */
    .text-5 {
      font-size: 13px;
    }
    /* Universal Text Size 6 ~Welcome Page Text */
    .text-6 {
      font-size: 16px;
    }
    /* Universal Text Size 7 ~About Text */
    .text-7 {
      font-size: 14px;
    }
    /* Universal Text Size ~Main Nav */
    .text-main {
      font-size: 14px;
    }
    /* Sub Nav Description */
    .sub-description {
      letter-spacing: -.1em;
      padding-top: 10px;
    }
    /* Avatar Caption */
    .avatar-info {
      font-size: 12px;
    }
    /* Garment Caption */
    .garment-info {
      font-size: 12px;
    }
    /* Welcome Page */
    .welcome-title {
      font-size: 44px;
    }
    .welcome-btn  {
      font-size: 20px;
    }
    /* Map Key */
    .key_square {
      font-size: 16px;
      color: white;
    }
    /* Map Square Text */
    .v-center-text {
      font-size: 18px;
      width: 100%;
      text-align: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: white;
    }
    
    












/*  N a v  */

    .map-nav-bg-1 {
      background-color: #0e1407;
    }
    .map-nav-bg-2 {
      background-color: #102233;
      background-color: #131a09;
    }
    .map-nav-bg-3 {
      background-color: #0e1407;
      padding: 5px 0px 10px;
    }
    .avatar-nav-bg-3 {
      padding: 5px 0px 10px;
    }
    .garment-nav-bg-3 {
      padding: 5px 0px 10px;
    }
    .index-nav-bg-1 {
      /*background-color: #FFFFFF;*/
    }
    .index-nav-bg-2 {
      background-color: #f0f0f0;
    }
    .index-nav-bg-3 {
      /*background-color: #FFFFFF;*/
    }


    /* Main: Nav */
    .nav-wrapper-main {
      width: 100%;
    }
    .nav-wrapper-main ul {
      width: 100%;
      display: inline-block;
    }
    .nav-wrapper-main li {
      float: left; 
      height: 34px;
      width: auto;
      border-right: 1px solid #777;
    }
    .nav-wrapper-main li a {
      display: block;
      padding: 15px 15px 18px 15px;
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    li.main-dark {
      border-right: 1px solid #444;
    }
    .nav-wrapper-main li.active {
      border-right: 1px solid #0000FF;
    }

    
    
      /* avatar on main nav */
      li.main-avatar {
        display: block;
        padding: 0px !important;
        position: absolute;
        top: 0;
        right: 0;
        height: 60px;
        width: 60px;
        z-index: 3;
      }
      .main-avatar a {
        padding: 0px !important;
        height: 100%;
        width: 100%;
      }
      .main-avatar img {
        height: 100%;
        width: 100%;
      }


    /* Sort by: Nav */
    
    .nav-spacer {
      margin: 5px 0px 10px;
    }
    .index-nav-bg-1 {
      margin: 5px 0px 20px;
    }
    .nav-wrapper-1 {
      width: 98%;
      display: inline-block;
      padding: 10px 0px 0px 2%;
    }
    .nav-wrapper-1 ul {
      width: 100%;
      height: auto;
      vertical-align: top;
      display: inline-block;
    }
    .nav-wrapper-1 li {
      float: left;
    }
    .nav-wrapper-1 li a {
      display: block;
      padding: 4px 12px 7px 12px;
    }
    .nav-wrapper-1 li.main-dark {
      border-right: 0px;
    }
    



    /* Filter: Nav */
    .nav-wrapper-2 li a {
      display: block;
      padding: 0px 15px 0px 0px;
    }
    .nav-wrapper-2 {
      width: 98%;
      display: inline-block;
      padding: 10px 0px 10px 2%;
    }
    .filter-1 {
      width: 25%;
      display: inline-block;
      vertical-align: top;
    }
    .filter-2 {
      width: 42%;
      display: inline-block;
      vertical-align: top;
    }
    .filter-3 {
      width: 30%;
      display: inline-block;
      vertical-align: top;
    }
    li {
      padding: 7px 0px;
    }
    .nav-wrapper-2 li.active {
      background-color: #0000FF;
      color: white;
    }
    .nav-wrapper-2 li.active a {
      color: white;
    }
    .nav-wrapper-2 li.main-dark {
      border-right: 0px;
    }


    /* Ascend / Descend: Nav */
    .nav-wrapper-3 {
      padding: 0px 0px 10px 0px;
    }
    .nav-wrapper-3 ul {
      width: 100%;
      height: auto;
      vertical-align: top;
      display: inline-block;
      text-align: center;
    }
    .nav-wrapper-3 li {
      display: inline-block;
    }
    .nav-wrapper-3 li a {
      display: block;
      padding: 0px 30px 5px;
    }


    /* Sub Nav */
    .sub-nav-wrapper {
      position: relative;
      left: 0px;
      height: auto;
      width: 100%;
      text-align: center;
    }
    .sub-nav-wrapper ul {
      margin: 0;
      padding: 0;
      display: inline-block;
      vertical-align: bottom;
    }
    .sub-nav-wrapper li {
      float: left;
      padding: 0px;
    }
    .sub-nav-wrapper li:nth-child(1) {
      padding: 5px 20px 6px 20px;
    }
    .sub-nav-wrapper li a {
      display: block;
      padding: 5px 20px 6px 20px;
    }
    .sub-nav-wrapper li.main-dark {
      border-right: 0px;
    }
    
    
    /* Nav Hover Colors */
    /* Light */
      .main-light a {
        color: #000000;
      }
      .main-light:hover {
        /*background-color: #f8f8f8;*/
      }
      .main-light.active:hover {
        background-color: #0000FF;
      }
      .main-light span.total {
        color: #000000;
      }
      .main-light span.group {
        color: #000000;
      }
      .main-light span.dim {
        color: #888;
      }

    /* Dark */
      .main-dark a {
        color: #FFFFFF;
        color: #C8C8C8;
      }
      .main-dark:hover {
        background-color: #001947;
        background-color: #0c363b;
      }
      .main-dark:hover a {
        color: #FFF;
      }
      .temp {
        background-color: #0c363b;
      }
      .main-dark.active:hover {
        background-color: #0000FF;
      }
      .main-dark-noHover span.total {
        color: #34e6d7;
        color: #ff00c9;
        color: #09e4d3;
        color: #80ff00;
        color: #ff0000;
      }
      .main-dark-noHover span.group {
        color: #ff00c9;
        color: #09e4d3;
        color: #80ff00;
        color: #ff0000;
      }
      .main-dark-noHover span.dim {
        color: #a2a2a2;
        color: #954444;
      }

    /* Active */
      li.active {
        background-color: #0000FF;
        color: white;
      }
      li.active a {
        color: white !important;
      }









/*  T e x t  /  L i n k   C o l o r s  */

    /* Index Text Color */
    .index {
      color: #FFFFFF;
    }
    /* Index Link Text */
    .index a:link {
      color: #FFFFFF;
    }
    .index a:visited {
      color: #FFFFFF;
    }
    .index a:active {
      color: #FFFFFF;
    }

    /* Welcome Text Color */
    .welcome {
      color: #FFF;
    }
    /* Welcome Link Text */
    .welcome a:link {
      color: #FFF;
    }
    .welcome a:visited {
      color: #FFF;
    }
    .welcome a:active {
      color: #FFF;
    }

    /* Welcome: Highlight Text Color */
    .highlight {
      color: #F40000;
    }
    /* Highlight Link Text */
    .highlight a:link {
      color: #F40000;
    }
    .highlight a:visited {
      color: #F40000;
    }
    .highlight a:active {
      color: #F40000;
    }

    /* About Text Color */
    .about {
      color: #C8C8C8;
    }
    /* About Caption Text Color */
    .about-caption {
      color: #7d7d7d;
    }
    .about-caption b {
      color: #FFF;
    }
    a.about-traits:link {
      color: #0090FF !important;
    }
    a.about-traits:visited {
      color: #0090FF !important;
    }
    a.about-traits:active {
      color: #0090FF !important;
    }
    a.about-extras:link {
      color: #DB04FF !important;
    }
    a.about-extras:visited {
      color: #DB04FF !important;
    }
    a.about-extras:active {
      color: #DB04FF !important;
    }
    /* About Link Text */
    .about a:link {
      color: #FFFFFF;
    }
    .about a:visited {
      color: #FFFFFF;
    }
    .about a:active {
      color: #FFFFFF;
    }
    .code-color-1 {
      color: #00ec55;
    }
    .code-color-2a {
      color: #47aeff;
    }
    .code-color-2 {
      color: #0076d2;
    }
    .code-color-3a {
      color: #da00ff;
    }
    .code-color-3 {
      color: #9c25b1;
    }
    .code-color-4a {
      color: #FF0000;
    }
    .code-color-4 {
      color: #c30000;
    }
    .code-color-5 {
      color: #cded07;
    }
    .code-color-5a {
      color: #a4bc13;
    }
    .code-hover:hover {
      text-decoration: underline;
    }

    /* NFT Page */
    .nft-text {
      color: #000000;
    }
    /* Index Link Text 2 */
    .nft-text a:link {
      color: #000000;
    }
    .nft-text a:visited {
      color: #000000;
    }
    .nft-text a:active {
      color: #000000;
    }
    .nft-shuffle {
      color: #0000FF;
    }
    /* Index Link Text 2 */
    .nft-shuffle a:link {
      color: #0000FF;
    }
    .nft-shuffle a:visited {
      color: #0000FF;
    }
    .nft-shuffle a:active {
      color: #0000FF;
    }
    a.objkt:link {
      color: #0000FF !important;
    }
    a.objkt:visited {
      color: #0000FF !important;
    }
    a.objkt:active {
      color: #0000FF !important;
    }

    /* Index Text Color 3 (Filter) */
    .index-3 {
      color: #000000;
    }
    /* Index Link Text 3 */
    .index-3 a:link {
      color: #000000;
    }
    .index-3 a:visited {
      color: #000000;
    }
    .index-3 a:active {
      color: #000000;
    }

    /* Map Text Color */
    .map {
      color: #D8DEE9;
      color:  #FFFFFF;
    }
    /* Map Link Text */
    .map a:link {
      color: #BBC1CC;
      color:  #FFFFFF;
    }
    .map a:visited {
      color: #BBC1CC;
      color:  #FFFFFF;
    }
    .map a:active {
      color: black;
      color:  #FFFFFF;
    }

    /* Avatar Text Color */
    .avatar {
      color: #D8DEE9;
    }
    /* Avatar Link Text */
    .avatar a:link {
      color: #BBC1CC;
    }
    .avatar a:visited {
      color: #BBC1CC;
    }
    .avatar a:active {
      color: black;
    }

    /* Garment Text Color */
    .garment {
      color: #FFF;
    }
    /* Garment Link Text */
    .garment a:link {
      color: #FFF;
    }
    .garment a:visited {
      color: #FFF;
    }
    .garment a:active {
      color: #FFF;
    }

    /* Marquee Text Color */
    .marquee {
      color: #FFF;
    }
    /* Welcome Link Text */
    .marquee a:link {
      color: #FFF;
    }
    .marquee a:visited {
      color: #FFF;
    }
    .marquee a:active {
      color: #FFF;
    }









/*  T o t a l s   a n d   D e s c .   B o x  */
    .totals-wrapper {
      display: inline-block;
      width: 100%;
    }
    .totals-desc {
      display: inline-block;
      text-align: center;
      width: 100%;
      margin: 0px 0px 0px 0px;
      line-height: 32px;
    }
    .totals {
      display: inline-block;
      text-align: right;
      width: 46%;
      margin: 5px 4% 15px 0px;
    }
    .totals-groups {
      display: inline-block;
      text-align: left;
      width: 46%;
      margin: 5px 0px 15px 4%;
    }











/*  M a p  P a g e  */


    /*  M a p   K e y  */

    .key_square {
      display: inline-block;
      height: 18px;
      width: 18px;
      margin-right: 10px;
      position: relative;
    }
    .k_twelve {
      box-shadow:0px 0px 0px 3px #FFFFFF inset;
    }
    .k_eight {
      box-shadow:0px 0px 0px 3px #8b0007 inset;
    }
    .k_four {
      box-shadow:0px 0px 0px 3px #000000 inset;
    }
    .k_abstract {
      background-color: #000000;
    }
    .k_chess {
      background-color: #01c563;
    }
    .k_tiedye {
      background-color: #0c00cc;
    }
    .k_h_chess {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 50%;
      background-color: #d6ff34;
    }
    .k_a_chess {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50%;
      height: 50%;
      background-color: #ff0000;
    }
    .k_camo {
      color: #31fe00;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
    .k_camobloom {
      color: #FA00FE;
      text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }


    /*  M a p   S q u a r e s  */

    .map-square {
      display: inline-block;
      height: 28px;
      width: 28px;
      position: relative;
      margin: 2px;
    }
    .twelve {
      border: 3px solid #ffffff;
    }
    .eight {
      border: 3px solid #8b0007;
    }
    .four {
      border: 3px solid #000000;
    }
    .abstract {
      background-color: #000000;
    }
    .chess {
      background-color: #01c563;
    }
    .tiedye {
      background-color: #0c00cc;
    }
    .has_chess {
      position: absolute;
      top: 0;
      left: 0;
      width: 30%;
      height: 30%;
      background-color: #d6ff34;
    }
    .has_abstract {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 30%;
      height: 30%;
      background-color: #ff0000;
    }
    .camo {
      color: #31fe00;
      text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    }
    .camobloom {
      color: #FA00FE;
      text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    }
















/*  N F T  P a g e s  */

    /*  N F T   T i t l e  */
    .nft-title-container {
      display: inline-block;
      width: 98%;
      margin: 10px 1% 10px 1%;
      text-align: left;
    }
    .nft-title-container > div {
      display: inline;
      float: left;
      width: 33.3%;
      height: 40px;
    }
    .nft-title-container > div:nth-child(2) {
      text-align: center;
    }
    .nft-title-container > div:nth-child(3) {
      text-align: right;
    }

    /* Shuffle Icon */
    .shuffle-container {
      display: inline-block;
      position: absolute;
      width: 24px;
      height: 24px;
      margin: 0px 1%;
      z-index: 3;
      top: 45px;
      left: 0px;
    }
    .shuffle-container a {
      padding: 5px 5px 5px 0px;
      height: 100%;
      width: 100%;
    }
    .shuffle-svg {
      height: 100%;
      width:  100%;
      padding: 0px 0px 5px 0px;
      border-bottom: 2px solid #0000FF;
    }

    

    /*   M a i n   I m a g e  */
    .nft-img-wrapper {
      width: 100%;
      text-align: center;
      margin: 0px auto 30px;
    }
    .nft-img-container {
      display: inline-block;
      height: 90vh;
    }
    .nft-img-container > img {
      width: auto;
      height: 100%;
      max-width: 80vw;
      max-height: 80vw;
    }
    /*   M a i n   I m a g e   D a t a  */
    .nft-data-container {
      position: relative;
      display: inline-block;
      width: 94%;
      margin: 0px 1% 0px 5%;
    }
    .nft-data-left {
      display: inline;
      width: 45%;
      float: left;
    }
    .nft-data-right {
      display: inline;
      width: 55%;
      float: left;
    }
    /* Avatar */
    .avatar-container {
      display: inline;
      position: absolute;
      top: 0;
      right: 0;
    }
    .avatar-container > img {
      display: inline-block;
      width: 55px;
      height: 55px;
    }



    /*  G r o u p   I m a g e  */

    .group-container {
      display: inline-block;
      width: 98%;
      margin: 20px 1% 40px;
    }
    /* 'group' img container */
    .group-img-container {
      display: inline;
      float: left;
      width: 24%;
      margin: 15px 1.33% 30px 0%;
    }
    .group-container div:nth-child(5) {
      float: right;
      margin-right: 0px;
    }
    .group-img-container > img {
      width: 100%;
    }
    a.nft-link {
        display:inline-block;
        width: 100%;
    }
    a.nft-link > img {
      width: 100%;
      height: auto;
    }


    /*   S w e a t s h i r t   I m a g e  */
    .nft-garment-wrapper {
      width: 100%;
      text-align: center;
      margin: 0px auto 0px;
      padding: 30px 0px 50px;
    }
    .nft-garment-link-container {
      display: inline-block;
      margin: 10px 0px;
    }
    .nft-garment-link {
      display: block;
    }
    .nft-garment-link > picture > img {
      width: auto;
      height: 40vw;
      max-width: 60vw;
      max-height: 60vw;
    }
    .nft-garment-link > img {
      width: auto;
      height: 40vw;
      max-width: 60vw;
      max-height: 60vw;
    }





/*  A v a t a r  P a g e  */
.avatar-link-container {
  display: inline-block;
  width:  12.5%;
  float: left;
  margin-bottom: 10px;
}
.avatar-link {
  width: 100%;
  display: block;
}
.avatar-link > img {
  display: block;
  width: 100%;
  height: 100%;
}
.avatar-info {
  display: block;
  width: 100%;
  color: #FFFFFF;
}
.avatar-tile-container {
  display: inline-block;
  width:  2.22%;
  float: left;
}
.avatar-tile-container > img {
  display: block;
  width: 100%;
  height: 100%;
}



/*  G a r m e n t  P a g e  */
.garment-link-container {
  display: inline-block;
  width:  33.3%;
  float: left;
  margin-bottom: 10px;
}
.garment-link {
  width: 100%;
  display: block;
}
.garment-link > picture > img {
  display: block;
  width: 100%;
  height: 100%;
}
.garment-link > img {
  display: block;
  width: 100%;
  height: 100%;
}
.garment-info {
  display: block;
  width: 100%;
  color: #000000;
}






































@media only screen and (min-height: 500px) {
  /* NFT Page */
  .nft-img-container {
    height: 50vh;
  }
}
@media only screen and (min-height: 700px) and (min-width: 700px)  {
  /* Welcome Page */
  .welcome-img-wrapper {
    width: 100%;
    height: 40vh;
    text-align: center;
    margin: 0px auto 0px;
  }
}

@media only screen and (min-height: 800px) and (max-width: 800px)  {
  /* NFT Page */
  .nft-img-container {
    height: 45vh;
  }
}

@media only screen and (min-height: 840px) and (min-width: 800px) {
  /* NFT Page */
  .nft-img-container {
    height: 50vh;
  }
}
@media only screen and (min-height: 840px) and (min-width: 1280px) {
  /* NFT Page */
  .nft-img-container {
    height: 50vh;
  }
}

@media only screen and (min-height: 1000px) {
  /* NFT Page */
  .nft-img-container {
    height: 50vh;
  }
  /* Welcome Page */
  .welcome-img-wrapper {
    width: 100%;
    height: 37.5vh;
    text-align: center;
    margin: 0px auto 0px;
  }
  /* Universal Text Size 1 ~Nav */
    .text-1 {
      font-size: 13px;
    }
    /* Universal Text Size ~Main Nav */
    .text-main {
      font-size: 16px;
    }
}
@media only screen and (min-height: 1200px) {
  /* NFT Page */
  .nft-img-container {
    height: 45vh;
  }
  /* Welcome Page */
  .welcome-img-wrapper {
    width: 100%;
    height: 35vh;
    text-align: center;
    margin: 0px auto 0px;
  }
}






























@media only screen and (min-width: 600px) {
  /* Avatar Page */
  .avatar-link-container {
    width:  10%;
  }
  /* NFT Page */
  .avatar-container > img {
    display: inline-block;
    width: 60px;
    height: 60px;
  }
  /* Welcome Avatar */
  .avatar-border > img {
    height: 7vw;
    width: auto;
  }


}


@media only screen and (min-width: 650px) {
  /* Garment Page */
  .garment-link-container {
    width:  25%;
  }
}






@media only screen and (min-width: 760px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 24.375%;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(3n) {
    float: left;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(4n) {
    float: right;
    margin-right: .5%;
    margin-left: 0%;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  9.09%;
  }
  /* NFT Page */
  .avatar-container > img {
    display: inline-block;
    width: 65px;
    height: 65px;
  }
  /* Welcome Avatar */
  .avatar-border > img {
    height: 6vw;
    width: auto;
  }
}


@media only screen and (min-width: 800px) {
  
}


@media only screen and (min-width: 860px) {
  /* 'group' img container */
  .group-img-container {
    width: 200px;
    margin: 15px 15px 30px 0%;
  }
  .group-container div:nth-child(5) {
    float: left;
  }
  /* Garment Page */
  .garment-link-container {
    width:  20%;
  }
}


@media only screen and (min-width: 900px) {
  
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 19.4%;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(4n) {
    float: left;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(5n) {
    float: right;
    margin-right: .5%;
    margin-left: 0%;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  8.33%;
  }


}



@media only screen and (min-width: 1000px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 16.083%;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(5n) {
    float: left;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(6n) {
    float: right;
    margin-right: .5%;
    margin-left: 0%;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  7.69%;
  }
  /* Welcome Avatar */
  .avatar-border > img {
    height: 5vw;
    width: auto;
  }

}


@media only screen and (min-width: 1080px) {
  /* Avatar Page */
  .avatar-link-container {
    width:  6.66%;
  }
}
@media only screen and (min-width: 1140px) {
  /* Garment Page */
  .garment-link-container {
    width:  16.666%;
  }
}
@media only screen and (min-width: 1180px) {
  /* Avatar Page */
  .avatar-link-container {
    width:  6.25%;
  }
  /* Welcome Avatar */
  .avatar-border > img {
    height: 4vw;
    width: auto;
    max-height: 50px;
  }
}


@media only screen and (min-width: 1280px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 13.714%;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(6n) {
    float: left;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(7n) {
    display: inline-block;
    float: right;
    margin-right: .5%;
    margin-left: 0%;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  5.88%;
  }
  /* Map Page  */
  .map-square {
    height: 29px;
    width: 29px;
  }
  /* Garment Page */
  .garment-link-container {
    width:  14.2857%;
  }
}

@media only screen and (min-width: 1500px) {
  /* Avatar Page */
  .avatar-link-container {
    width:  5.263%;
  }
}


@media only screen and (min-width: 1800px) {
  /* Garment Page */
  .garment-link-container {
    width:  12.5%;
  }
}


@media only screen and (min-width: 1900px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 11.9375%;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(7n) {
    float: left;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(8n) {
    display: inline-block;
    float: right;
    margin-right: .5%;
    margin-left: 0%;
  }
  /* Universal Text Size 2 ~NFT Item Text */
    .text-2 {
      font-size: 13px;
    }
  /* avatar on main nav */
  li.main-avatar {
    height: 70px;
    width: 70px;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  5%;
  }
}


@media only screen and (min-width: 2100px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 10.555%;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(8n) {
    float: left;
    margin-right: 0%;
    margin-left: .5%;
  }
  .img-grid-wrapper .img-container:nth-child(9n) {
    display: inline-block;
    float: right;
    margin-right: .5%;
    margin-left: 0%;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  4.166%;
  }
}



@media only screen and (min-width: 2500px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 9.67%;
    margin-right: 0%;
    margin-left: .3%;
  }
  .img-grid-wrapper .img-container:nth-child(3n),
  .img-grid-wrapper .img-container:nth-child(4n),
  .img-grid-wrapper .img-container:nth-child(5n),
  .img-grid-wrapper .img-container:nth-child(6n),
  .img-grid-wrapper .img-container:nth-child(7n),
  .img-grid-wrapper .img-container:nth-child(8n),
  .img-grid-wrapper .img-container:nth-child(9n) {
    float: left;
    margin-right: 0%;
    margin-left: .3%;
  }
  .img-grid-wrapper .img-container:nth-child(10n) {
    display: inline-block;
    float: right;
    margin-right: .3%;
    margin-left: 0%;
  }
  /* Universal Text Size 2 ~NFT Item Text */
  .text-2 {
    font-size: 14px;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  3.571%;
  }
  /* Map Page */
  .map-square {
    height: 31px;
    width: 31px;
  }
  /* Garment Page */
  .garment-link-container {
    width:  11.111%;
  }
}


@media only screen and (min-width: 2750px) {
  /* 'Index' img container */
  .img-container {
    display: inline-block;
    float: left;
    width: 8.76%;
    margin-right: 0%;
    margin-left: .3%;
  }
  .img-grid-wrapper .img-container:nth-child(10n) {
    float: left;
    margin-right: 0%;
    margin-left: .3%;
  }
  .img-grid-wrapper .img-container:nth-child(11n) {
    display: inline-block;
    float: right;
    margin-right: .3%;
    margin-left: 0%;
  }
  /* Avatar Page */
  .avatar-link-container {
    width:  3.125%;
  }
}

















































































@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}













/* 
Iphone X 
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 


        /* Welcome Avatar */
        .avatar-border > img {
          height: 9vw;
          width: auto;
        }

        /* About */
        .about-wrapper {
          line-height: 1.2em;
        }
        
        .img-container {
          display: inline-block;
          float:  left;
          width: 31.3%;
          margin: 15px 0% 30px 1.5%;
        }
        .img-grid-wrapper .img-container:nth-child(4n),
        .img-grid-wrapper .img-container:nth-child(5n),
        .img-grid-wrapper .img-container:nth-child(6n),
        .img-grid-wrapper .img-container:nth-child(7n),
        .img-grid-wrapper .img-container:nth-child(8n),
        .img-grid-wrapper .img-container:nth-child(9n),
        .img-grid-wrapper .img-container:nth-child(10n),
        .img-grid-wrapper .img-container:nth-child(11n) {
          float: left;
          margin-right: 0%;
          margin-left: 1.5%;
        }
        .img-grid-wrapper .img-container:nth-child(3n) {
          float: right;
          margin-right: 1.5%;
          margin-left: 0%;
        }


        /* Marquee */
        .marquee {
          height: 60px;
        }
        .marquee p {
          line-height: 60px;
        }


        /* Universal Text Size 1 */
        .text-1 {
          font-size: 2em;
        }
        /* Universal Text Size 2 ~NFT Item Text */
        .text-2 {
          font-size: 1.8em;
        }
        /* Universal Text Size 3 ~Ascending/Descending Arrows */
        .text-3 {
          font-size: 3em;
        }
        /* Universal Text Size 4 ~NFT Title */
        .text-4 {
          font-size: 2.5em;
        }
        /* Universal Text Size 5 ~NFT Desciption */
        .text-5 {
          font-size: 2em;
        }
        /* Universal Text Size 6 ~About */
        .text-6 {
          font-size: 2em;
        }
        /* Universal Text Size 7 ~About Text */
        .text-7 {
          font-size: 2.5em;
        }
        /* Universal Text Size ~Main Nav */
        .text-main {
          font-size: 2.5em;
        }
        /* Sub Nav Description */
        .sub-description {
          letter-spacing: -.1em;
          padding-top: 10px;
        }
        /* Avatar Caption */
        .avatar-info {
          font-size: 1.8em;
        }
        /* Garment Caption */
        .garment-info {
          font-size: 1.8em;
        }
        /* Welcome Page */
        .welcome-title {
          font-size: 5em;
        }
        .welcome-btn  {
          font-size: 3em;
        }
        /* Map Key */
        .key_square {
          font-size: 1.2em;
        }
        /* Map Square Text */
        .v-center-text {
          font-size: 2em;
        }
        .about-description {
          margin-top: 20px;
        }
        .about-description h1 {
          font-size: 1.15em;
          margin: 0px 0px 20px;
        }
        /* Marquee Text */
        .marquee {
          font-size: 2.25em;
        }



        /* NAV */
          .map-nav-bg-3 {
              padding: 0px;
            }
            .avatar-nav-bg-3 {
              padding: 0px;
            }
            .garment-nav-bg-3 {
              padding: 0px;
            }
            /* Main Nav */
            .nav-wrapper-main li {
              float: left; 
              height: 60px;
              width: auto;
            }
            .nav-wrapper-main li a {
              display: block;
              padding: 15px 15px 20px 15px;
              text-align: center;
              position: relative;
              top: 50%;
              transform: translateY(-50%);
            }
            /* avatar on main nav */
            li.main-avatar {
              display: block;
              padding: 0px !important;
              position: absolute;
              top: 0;
              right: 0;
              height: 110px;
              width: 110px;
              z-index: 3;
            }


            /* Sort by: Nav */
            .nav-wrapper-1 {
              width: 98%;
              display: inline-block;
              padding: 20px 0px 20px 2%;
            }
            .nav-wrapper-1 li a {
              display: block;
              padding: 4px 12px 4px 12px;
            }


            /* Filter: Nav */
            .nav-wrapper-2 li a {
              display: block;
              padding: 4px 15px 4px 0px;
            }
            .nav-wrapper-2 {
              width: 98%;
              display: inline-block;
              padding: 20px 0px 20px 2%;
            }
            .filter-1 {
              width: 25%;
              display: inline-block;
              vertical-align: top;
            }
            .filter-2 {
              width: 42%;
              display: inline-block;
              vertical-align: top;
            }
            .filter-3 {
              width: 30%;
              display: inline-block;
              vertical-align: top;
            }
            li {
              padding: 7px 0px;
            }

            /* Ascend / Descend: Nav */
            .nav-wrapper-3 {
              padding: 0px 0px 20px 0px;
            }
            .nav-wrapper-3 ul {
              width: 100%;
              height: auto;
              vertical-align: top;
              display: inline-block;
              text-align: center;
            }
            .nav-wrapper-3 li {
              display: inline-block;
            }
            .nav-wrapper-3 li a {
              display: block;
              padding: 5px 30px;
            }

            /* Sub Nav */
            .sub-nav-wrapper {
              position: relative;
              left: 0px;
              height: auto;
              width: 100%;
              text-align: center;
            }
            .sub-nav-wrapper ul {
              margin: 0;
              padding: 0;
              display: inline-block;
              vertical-align: bottom;
            }
            .sub-nav-wrapper li {
              float: left;
              padding: 10px 20px 16px;
            }


        /* Totals and Description Box */
        .totals-wrapper {
          display: inline-block;
          width: 100%;
        }
        .totals-desc {
          display: inline-block;
          text-align: center;
          width: 100%;
          margin: 20px 0px 0px 0px;
          line-height: 32px;
        }
        .totals {
          display: inline-block;
          text-align: right;
          width: 46%;
          margin: 20px 4% 20px 0px;
        }
        .totals-groups {
          display: inline-block;
          text-align: left;
          width: 46%;
          margin: 20px 0px 20px 4%;
        }


        /* Map Page */
            /* Key */
            .key_square {
              display: inline-block;
              height: 18px;
              width: 18px;
              margin-right: 10px;
              position: relative;
            }
            .k_twelve {
              box-shadow:0px 0px 0px 3px #FFFFFF inset;
            }
            .k_eight {
              box-shadow:0px 0px 0px 3px #8b0007 inset;
            }
            .k_four {
              box-shadow:0px 0px 0px 3px #000000 inset;
            }
            .k_camo {
              text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
            }
            .k_camobloom {
              text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
            }

            /* Map Squares */
            .map-square {
              display: inline-block;
              height: 50px;
              width: 50px;
              position: relative;
              margin: 2px;
            }
            .twelve {
              border: 5px solid #ffffff;
            }
            .eight {
              border: 5px solid #8b0007;
            }
            .four {
              border: 5px solid #000000;
            }
            .camo {
              text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
            }
            .camobloom {
              text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
            }


          /*  NFT Page  */
              /*  NFT Title  */
              .nft-title-container {
                display: inline-block;
                width: 98%;
                margin: 15px 1% 30px 1%;
                text-align: left;
              }
              .nft-title-container > div {
                display: inline;
                float: left;
                width: 33.3%;
                height: 40px;
              }
              .nft-title-container > div:nth-child(2) {
                text-align: center;
              }
              .nft-title-container > div:nth-child(3) {
                text-align: right;
              }


              /* Shuffle Icon */
              .shuffle-container {
                display: inline-block;
                position: absolute;
                width: 40px;
                height: 40px;
                margin: 0px 1%;
                z-index: 3;
                top: 80px;
                left: 0px;
              }
              .shuffle-container a {
                padding: 5px 5px 5px 0px;
              }
              .shuffle-svg {
                padding: 0px 0px 5px 0px;
                border-bottom: 3px solid #0000FF;
              }


              /* Main Image */
              /*.nft-img-container {
                display: inline-block;
                width: 70%;
                margin: 40px 15% 70px 15%;
              }*/

              .nft-img-wrapper {
                width: 100%;
                text-align: center;
                margin: 40px auto 70px;
              }
              .nft-img-container {
                display: inline-block;
                width: 70%;
                height: auto;
              }
              .nft-img-container > img {
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
              }

              /* Main Image Data */
              .nft-data-container {
                position: relative;
                display: inline-block;
                width: 94%;
                margin: 0px 1% 0px 5%;
              }
              .nft-data-left {
                display: inline;
                width: 45%;
                float: left;
              }
              .nft-data-right {
                display: inline;
                width: 55%;
                float: left;
              }
              /* Avatar */
              .avatar-container {
                display: inline;
                position: absolute;
                top: 0;
                right: 0;
              }
              .avatar-container > img {
                display: inline-block;
                width: 120px;
                height: 120px;
              }

              /* Group Image */
              .group-container {
                display: inline-block;
                width: 98%;
                margin: 60px 1% 40px;
              }
              /* 'group' img container */
              .group-img-container {
                display: inline;
                float: left;
                width: 24%;
                margin: 15px 1.33% 30px 0%;
              }
              .group-container div:nth-child(5) {
                float: right;
                margin-right: 0px;
              }

              /* Sweatshirt Image */
              
              .nft-garment-wrapper {
                width: 98%;
                text-align: left;
                margin: 60px 1% 100px;
                padding: 0px;
              }
              .nft-garment-link-container {
                display: inline-block;
                width: 70%;
                height: auto;
              }
              .nft-garment-link {
                display: block;
              }
              .nft-garment-link > picture > img {
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
              }
              .nft-garment-link > img {
                width: 100%;
                height: 100%;
                max-width: 100%;
                max-height: 100%;
              }



          /* Avatar Page */
          .avatar-link-container {
            display: inline-block;
            width:  12.5%;
            float: left;
            margin-bottom: 10px;
          }
          /* Garment Page */
          .garment-link-container {
            display: inline-block;
            width:  33.33%;
            float: left;
            margin-bottom: 10px;
          }
    
}
/* Iphone X Landscape 
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    .img-container {
      display: inline-block;
      width: 22%;
      margin: 15px 1.5% 30px;
    }
    .item-text {
      font-family: monospace;
      font-size: 1em;
    }
 

}*/