/* styles.css */
/*Colors? From cardback poster*/
/*
#418FBF
#D3D91E
#F2BB13
#F24F13
#A62626
#4BAABF
*/
/* FONTS */
/*  Roboto
font-family: "roboto", sans-serif;
font-family: "roboto-condensed", sans-serif;
font-family: "roboto-mono", sans-serif;
roboto-condensed,
font-weight: 300;
font-weight: 500;
font-weight: 700;
font-style: normal; 
font-style: italic; 
*/
/*  Corporate
font-family: "corporate-a", serif;
font-weight: 300;
font-weight: 500;
font-weight: 700;
font-style: normal; 
font-style: italic; 
*/
/*  Corporate
font-family: "corporate-e", serif;
font-weight: 300;
font-weight: 500;
font-weight: 700;
font-style: normal; 
font-style: italic; 
*/
/*  Corporate
font-family: "neulis-sans", sans-serif;
font-weight: 100;
font-weight: 300;
font-weight: 500;
font-weight: 700;
font-weight: 900;
font-style: normal; 
font-style: italic; 
*/
/* ATF Alternate Gothic Font
font-family: "alternate-gothic-atf", sans-serif;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-style: normal;
*/
/* Avante garde Font
font-family: itc-avant-garde-gothic-pro, sans-serif;
font-style: normal;
font-weight: 100;
font-weight: 300;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-style: normal;
*/
/* Forma DJR Text Font */
/*
font-family: "forma-djr-text", sans-serif;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-style: normal;
*/
/**/
/*
font-family: "forma-djr-display", sans-serif;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-style: normal;*/

/*
font-family: "trade-gothic-next", sans-serif;
font-weight: 300, 400, 700, 800;
font-style: normal;
font-family: "trade-gothic-next-condensed", sans-serif;
font-weight: 400;
font-style: normal;
*/
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

::-webkit-scrollbar {
}
::-webkit-scrollbar-button {
}
::-webkit-scrollbar-track-piece {
}
::-webkit-scrollbar-corner {
}
::-webkit-resizer {
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb:hover {
}
html {
  scroll-behavior: smooth;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #;
  -webkit-font-variant-numeric: proportional-nums;
  -moz-font-variant-numeric: proportional-nums;
  -o-font-variant-numeric: proportional-nums;
  -ms-font-variant-numeric: proportional-nums;
  font-variant-numeric: proportional-nums;
  font-feature-settings: "pnum", "liga";
  -webkit-font-feature-settings: "pnum", "liga";
  -moz-font-feature-settings: "pnum", "liga";
  -o-font-feature-settings: "pnum", "liga";
  -ms-font-feature-settings: "pnum", "liga";
  text-rendering: optimizeLegibility;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  letter-spacing: normal;
  line-height: 1.618em;
  word-spacing: normal;
  font-family: "praxis-next", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #010308;
}
/*
ECA900
CA9100
8F6600
644800
423000
*/
img {
  max-width: 100%;
}
/*
#262622
#586973
#8097a6
#a6a694
#eeeeee
#111111
#181818
*/
.mobiNav {
  font-size: calc(14.6px + (23.6 - 14.6) * (100vw - 123px) / (843 - 123));
  -webkit-font-variant-numeric: proportional-nums;
  -moz-font-variant-numeric: proportional-nums;
  -o-font-variant-numeric: proportional-nums;
  -ms-font-variant-numeric: proportional-nums;
  font-variant-numeric: proportional-nums;
  font-feature-settings: "pnum", "liga";
  -webkit-font-feature-settings: "pnum", "liga";
  -moz-font-feature-settings: "pnum", "liga";
  -o-font-feature-settings: "pnum", "liga";
  -ms-font-feature-settings: "pnum", "liga";
  text-rendering: optimizeLegibility;
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
}
.mobiNav-bar {
  display: flex;
  flex-flow: row wrap;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  height: 76px;
  z-index: 99999;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
  align-items: center;
  align-content: center;
  justify-content: center;
}
.mobiLogo {
  background: url("https://www.thecollectable.toys/logo/tie-fighter/2-10.svg");
  background-size: contain;
  width: auto;
  height: 76px;
  background-position: right center;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-flow: row wrap;
  flex: 50 0 0;
  background-repeat: no-repeat;
}
.mobiGrid {
  display: none;
  flex-flow: row wrap;
  flex: 1 100%;
  background: #fff;
  margin: 0.25em;
  padding: 0.25em;
}
.mobiRow {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
}
.mobiColumn {
  display: flex;
  flex-flow: row nowrap;
  flex: 100 0 0;
}
.mobiGrid img {
  max-width: 100%;
}
.mobiGrid a {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  max-width: 76px;
}
.mobiAccount {
  display: flex;
  flex-flow: row wrap;
  flex: 25 0 0;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.mobiNav-toggle {
  z-index: 100;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  max-width: 23.6vw;
  flex: 25 0 0;
  height: 47px;
  line-height: 1.618em;
  background: #fff;
  text-align: center;
  position: relative;
  outline: none;
  border: none;
}
.mobiNav-toggle:before,
.mobiNav-toggle:after {
  font-family: "Font Awesome 5 Pro";
  font-size: 29px;
  color: #000;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  font-weight: regular;
  position: absolute;
  left: 0;
  width: 100%;
  -webkit-transition: 0.25s ease-in;
  -moz-transition: 0.25s ease-in;
  -o-transition: 0.25s ease-in;
  -ms-transition: 0.25s ease-in;
  transition: 0.25s ease-in;
}
.mobiNav-toggle:before {
  content: "\f0c9";
  transform: rotate(0deg);
  scale: 1;
  opacity: 1;
  background-image: url("https://www.thecollectable.toys/media/imgs/nav/Menu");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.mobiNav-toggle:after {
  content: "\f00d";
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 0;
  scale: 2;
  text-shadow: 0 0 21px rgba(0, 0, 0, 1);
}
.mobiNav-toggle.active {
  color: #590f08;
}
.mobiNav-toggle.active:before {
  content: "\f0c9";
  -webkit-transform: rotate(0deg);
  opacity: 0;
  scale: 0;
  -webkit-transition: 0.25s ease-out;
  -moz-transition: 0.25s ease-out;
  -o-transition: 0.25s ease-out;
  -ms-transition: 0.25s ease-out;
  transition: 0.25s ease-out;
}
.mobiNav-toggle.active:after {
  content: "\f00d";
  -webkit-transform: rotate(360deg);
  opacity: 1;
  scale: 1;
  color: #b01d10;
  -webkit-transition: 0.25s ease-out;
  -moz-transition: 0.25s ease-out;
  -o-transition: 0.25s ease-out;
  -ms-transition: 0.25s ease-out;
  transition: 0.25s ease-out;
  text-shadow: 0 0 0px rgba(0, 0, 0, 1);
}
.mobiNav-menu::-webkit-scrollbar {
  display: none;
}
.mobiNav-menu {
  position: fixed;
  top: 76px;
  left: -100%;
  width: 100%;
  height: calc(100vh - 47px);
  padding: 1em 0 123px;
  background-color: #010103;
  background: linear-gradient(to bottom, #020204, #010103, #020204);
  background-image: url("https://www.thecollectable.toys/media/imgs/nav/stars.svg"),
    linear-gradient(to bottom, #020204, #010103, #020204);
  background-size: contain;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-transition: all 0.382s ease-in;
  -moz-transition: all 0.382s ease-in;
  -o-transition: all 0.382s ease-in;
  -ms-transition: all 0.382s ease-in;
  transition: all 0.382s ease-in;
  z-index: 9;
}
#mobiNav-menu-logo {
  display: flex;
  flex-flow: row wrap;
  flex: 100 0 0;
}
#mobiNav-menu-logo img {
  height: 322px;
}
.mobiNav .searchContainer {
  display: block;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 0.5em;
  margin: 0.5em;
}
.mobiQuickLinks-container {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  margin: 0.5em;
  padding: 0.5em;
  background: rgba(17, 17, 17, 0.5);
}
.mobiQuickLinks-container a img {
  width: 18px;
  margin-right: 0.5em;
}
.mobiNav-toggle.active + .mobiNav-menu {
  left: 0;
  -webkit-transition: all 0.382s ease-out;
  -moz-transition: all 0.382s ease-out;
  -o-transition: all 0.382s ease-out;
  -ms-transition: all 0.382s ease-out;
  transition: all 0.382s ease-out;
}
.mobiQuickLink {
  display: flex;
  flex-flow: row wrap;
  flex: 0 0 47%;
  color: #111111;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0.5em 0.25em;
  padding: 0.25em 0.25em;
  text-decoration: none;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 500;
  font-size: 1em;
  background: #fff;
  background: rgba(255, 255, 255, 0.95);
  background: linear-gradient(
    135deg,
    #cbcbcb,
    #b6b6bf 8%,
    #7e8398 16%,
    #bfbcc0 20%,
    #9e94a3 26%,
    #d4d6ce 29%,
    #cdcac9 36%,
    #9e94a3 40%,
    #d4cfcb 44%,
    #cebfc4 62%,
    #9f96a5 64%,
    #d8d4c7 76.4%,
    #cacaca,
    #b0a7aa,
    #8a7b84,
    #e5dbd8,
    #887f7a,
    #9d9792,
    #bcbab7,
    #c9c8c5 100%
  );
  text-align: center;
  border: 1px solid #767676;
  border-radius: 100px;
  position: relative;
  z-index: 9;
}
.mobiQuickLink span {
  background: #fff;
  width: 75%;
  padding: 0.125em 0;
}
.mobiQuickLink:nth-child(1) span {
  background: #bf1b80;
}
.mobiQuickLink:nth-child(2) span {
  background: #2675a7;
}
.mobiQuickLink:nth-child(3) span {
  background: #03adbf;
}
.mobiQuickLink:nth-child(4) span {
  background: #57ae47;
}
.mobiQuickLink:nth-child(5) span {
  background: #f8cb28;
}
.mobiQuickLink:nth-child(6) span {
  background: #f29e37;
}
.mobiQuickLink:nth-child(7) span {
  background: #ee3624;
}
.mobiQuickLink:nth-child(8) span {
  background: #f15f3e;
}
.mobiQuickLink:nth-child(9) span {
  background: #e89dc5;
}
.mobiQuickLink:nth-child(10) span {
  background: #049fcb;
}
.mobiQuckLink::after {
  display: flex;
  content: "";
  position: absolute;
  width: 18vw;
  max-width: 18vw;
  height: 100%;
  z-index: -1;
  border-radius: 0px;
  background: #fff;
}
.mobiQuickLink i {
  margin-right: 0.5em;
  color: #181818;
}
span.user-bounty-hunter {
  display: inline-flex;
  flex-flow: row wrap;
  flex: 1 auto;
  align-items: center;
  align-content: center;
  justify-content: center;
  background-image: url("https://www.thecollectable.toys/media/imgs/icons/bounty-hunter-white.svg");
  width: 1em;
  max-width: 1em;
  height: 1em;
  align-self: center;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 0.5em;
}
#mobiContainer3 {
  padding-bottom: 123px;
}
.mobiNav-menu .accordionWrapper {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
  width: 61.8vw;
  font-size: 1em;
}
.mobiNav-menu .accordionContainer {
  flex: 1 100%;
  display: flex;
  width: 100vw;
  flex-flow: row wrap;
  background: rgba(0, 0, 0, 0);
}
.mobiNav-menu .accordion.active + .mobi-ol {
  -webkit-transition: all 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  display: flex;
  height: 100%;
  max-height: 100%;
}
.mobiNav-menu .accordion {
  color: #eee;
  background: rgba(17, 17, 17, 0.5);
  cursor: pointer;
  margin: 0 0.5em;
  padding: 0.5em;
  flex: 1 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1em;
  position: relative;
  font-family: "forma-djr-display", sans-serif;
  font-weight: 900;
  font-style: normal;
  opacity: 1;
  -webkit-transition: all 0s ease-in;
  -moz-transition: all 0s ease-in;
  -o-transition: all 0s ease-in;
  -ms-transition: all 0s ease-in;
  transition: all 0s ease-in;
}
.mobiNav-menu .accordion i {
  color: #eeeeee;
  margin-right: 0.5em;
}
.mobiNav-menu .accordion span {
  display: flex;
  align-items: center;
  align-content: center;
  position: absolute;
  justify-content: center;
  right: 2.5em;
  height: 1em;
  width: 1em;
  max-width: 1em;
  background-image: url("https://www.thecollectable.toys/icons/chevron-down-solid.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -webkit-filter: invert(89%);
  -moz-filter: invert(89%);
  -o-filter: invert(89%);
  -ms-filter: invert(89%);
  filter: invert(89%);
}
.mobiNav-menu .accordion::after {
  display: inline-flex;
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 1px;
  background: #585859;
  left: 0;
  -webkit-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -moz-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -o-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -ms-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
}
.mobiNav-menu .accordion.active {
  color: #fff;
  -webkit-transition: all 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -moz-transition: all 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -o-transition: all 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -ms-transition: all 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  transition: all 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
}
.mobiNav-menu .accordion.active span {
  display: inline-flex;
  align-items: center;
  align-content: center;
  position: absolute;
  justify-content: center;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
  height: 1em;
  width: 1em;
  -webkit-transition: color 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -moz-transition: color 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -o-transition: color 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -ms-transition: color 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  transition: color 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
}
.mobiNav-menu .accordion.active::after {
  display: inline-flex;
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0);
  left: 0;
  -webkit-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -moz-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -o-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  -ms-transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
  transition: background 0.382s cubic-bezier(0.62, 1, 0.62, 1.62);
}
.mobiNav-menu .mobi-ul,
.mobiNav-menu .mobi-ol {
  display: none;
  flex-flow: row wrap;
  flex: 1 100%;
  margin: 0;
  padding: 0;
  height: 0;
  max-height: 0;
  background: rgba(17, 17, 17, 1);
}
.mobiNav-menu li {
  display: flex;
  flex: 1 100%;
  flex-flow: row wrap;
  padding: 0;
  margin: 0;
}
.mobiNav-menu li a {
  color: #eeeeee;
  font-style: normal;
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  font-family: "neulis-sans", sans-serif;
  font-family: "forma-djr-text", sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  position: relative;
  padding: 0.5em 0 0.5em 2.5em;
  margin: 0;
  border-bottom: 1px solid #292929;
  font-size: 1em;
}
@media all and (min-width: 843px) {
  .mobiNav {
    display: none;
  }
}
#navbar,
.navbar {
  display: none;
  flex-flow: row wrap;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: top 0.618s ease-in-out;
  -moz-transition: top 0.618s ease-in-out;
  -o-transition: top 0.618s ease-in-out;
  -ms-transition: top 0.618s ease-in-out;
  transition: top 0.618s ease-in-out;
  color: #07038c;
  background-color: #010103;
  background: linear-gradient(to bottom, #020204, #010103, #020204);
  background-image: url("https://www.thecollectable.toys/media/imgs/nav/stars.svg"),
    linear-gradient(to bottom, #020204, #010103, #020204);
  background-size: 50%;
  z-index: 100;
  text-transform: none;
  font-style: normal;
  font-weight: 400;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
  font-size: calc(11px + (18 - 11) * (100vw - 843px) / (3840 - 843));
}
#navbar .navbar-top {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 76px;
  padding: 0em;
  margin: 0;
  background: #fff;
}
#navbar .navbar-top-left {
  display: flex;
  flex-flow: row wrap;
  flex: 100 0 0;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  height: 76px;
  padding: 0 0.5em 0 0;
  margin: 0 0.5em 0 0;
}
#navbar #navlogo {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 1 100%;
  height: 76px;
  padding: 0;
  margin: 0;
  background-image: url("https://www.thecollectable.toys/logo/tie-fighter/2-10.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px sold #f00;
  -webkit-filter: drop-sadow(1px 2px 3px rgba(0, 0, 0, 0.5));
}
#navbar .navbar-top-center {
  display: flex;
  flex: 100 0 0;
  align-items: center;
  justify-content: flex-end;
  align-content: center;
  height: 76px;
  z-index: 999;
  padding: 0 0.5em;
  margin: 0 0.5em;
}
#navbar .navbar-top-right {
  display: flex;
  flex-flow: row wrap;
  flex: 100 0 0;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 76px;
  padding: 0 0.5em;
  margin: 0 0.5em;
}
.searchContainer {
  display: block;
  flex-flow: row wrap;
  flex: 1 auto;
  align-items: center;
  justify-content: center;
  align-content: center;
}
#navlink-about {
  display: flex;
  flex: 1 auto;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-image: url("https://www.thecollectable.toys/icons/info-solid.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 11px;
  height: 29px;
}
#navlink-blog {
  display: flex;
  flex: 1 auto;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-decoration: none;
  background-image: url("https://www.thecollectable.toys/icons/blog-solid.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 11px;
  height: 29px;
}
#navlink-contact {
  display: flex;
  flex: 1 auto;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-image: url("https://www.thecollectable.toys/icons/headset-solid.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 11px;
  height: 29px;
}
#navaccount {
  display: flex;
  flex-flow: row wrap;
  flex: 1 auto;
  align-items: center;
  align-content: center;
  justify-content: center;
  background-image: url("https://www.thecollectable.toys/media/imgs/icons/user-bounty-hunter.svg");
  width: 11px;
  height: 29px;
  align-self: center;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.navbar img {
  max-width: 100%;
}
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1 100%;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  height: 47px; /*
  background-color: #010103;
  background: linear-gradient(to bottom, #020204, #010103, #020204);
  background-image: url("https://www.thecollectable.toys/media/imgs/nav/stars.svg"),
    linear-gradient(to bottom, #020204, #010103, #020204);
  background-size: 50%;
  */
  background: rgba(0, 0, 0, 0.75);
  margin: 0;
  padding: 0;
}
.nav-link {
  color: #fff;
  text-decoration: none;
  padding: 0 0.25em;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: 100 0 0;
  font-style: normal;
  font-family: "forma-djr-display", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0);
  height: 47px;
  font-size: 1.146em;
}
.nav-link i {
  color: white;
  text-decoration: none;
  padding: 0 0.618em;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  flex: 100 0 0;
  position: ;
  height: 47px;
}
.nav-link:hover {
  background-color: #555;
}
#dropdown-menu1-btn:hover {
}
.dropdown::-webkit-scrollbar {
  display: none;
}
.dropdown {
  position: fixed;
  top: 122px;
  left: 0;
  width: 100%;
  background-color: #010103;
  background: linear-gradient(to bottom, #020204, #010103, #020204);
  background-image: url("https://www.thecollectable.toys/media/imgs/nav/stars.svg"),
    linear-gradient(to bottom, #020204, #010103, #020204);
  background-size: 50%;
  display: none;
  width: 100%;
  flex-flow: row wrap;
  height: calc(100vh - 123px);
  overflow-x: auto;
  overflow-y: scroll;
  flex-direction: row wrap;
  width: 100%;
  aling-items: flex-start;
  align-content: flex-start;
  justify-content: center;
}
#menu1 {
  background: ;
  color: #fff;
}
#menu1 .dropdown-title h2,
#menu2 .dropdown-title h2 {
  color: #000 !important;
}
.dropdown-title {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 47px 0;
  margin: 0;
  color: #fff;
  background-color: #010103;
  background: linear-gradient(to bottom, #020204, #010103, #020204);
  background-image: url("https://www.thecollectable.toys/media/imgs/nav/stars.svg"),
    linear-gradient(to bottom, #020204, #010103, #020204);
  background-size: 50%;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 0.618em;
}
.dropdown-title h2 {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  max-width: 14.6vw;
  letter-spacing: normal;
  border-radius: 0;
  font-family: itc-avant-garde-gothic-pro, sans-serif !important;
  text-transform: capitalize;
  font-weight: 500 !important;
  position: relative;
  z-index: 9;
  font-size: 1em;
  line-height: 1.618em !important;
  color: #000 !important;
}
.dropdown-title h2::before {
  display: flex;
  content: "";
  position: absolute;
  width: 23.6vw;
  max-width: 23.6vw;
  background: linear-gradient(
    135deg,
    #cbcbcb,
    #b6b6bf 8%,
    #7e8398 16%,
    #bfbcc0 20%,
    #9e94a3 26%,
    #d4d6ce 29%,
    #cdcac9 36%,
    #9e94a3 40%,
    #d4cfcb 44%,
    #cebfc4 62%,
    #9f96a5 64%,
    #d8d4c7 76.4%,
    #cacaca,
    #b0a7aa,
    #8a7b84,
    #e5dbd8,
    #887f7a,
    #9d9792,
    #bcbab7,
    #c9c8c5 100%
  );
  height: 161.8%;
  z-index: -1;
  border-radius: 100px;
}
.dropdown-title h2::after {
  display: flex;
  content: "";
  position: absolute;
  width: 18vw;
  max-width: 18vw;
  height: 100%;
  z-index: -1;
  border-radius: 0px;
}
#menu2 {
  background: ;
}
#dropdown-menu1-btn {
  color: #bf1b80;
}
#dropdown-menu1-btn:hover,
#menu1 .dropdown-title h2::after,
#menu1 .dropdown-column header {
  background: #e89dc5;
  background: #bf1b80;
  color: #000;
}
#dropdown-menu2-btn {
  color: #2675a7;
}
#dropdown-menu2-btn:hover,
#menu2 .dropdown-title h2::after,
#menu2 .dropdown-column header {
  background: #2675a7;
  color: #000;
}
#dropdown-menu3-btn {
  color: #03adbf;
}
#dropdown-menu3-btn:hover,
#menu3 .dropdown-title h2::after,
#menu3 .dropdown-column header {
  background: #03adbf;
  color: #000;
}
#dropdown-menu4-btn {
  color: #57ae47;
}
#dropdown-menu4-btn:hover,
#menu4 .dropdown-title h2::after,
#menu4 .dropdown-column header {
  background: #57ae47;
  color: #000;
}
#dropdown-menu5-btn {
  color: #f8cb28;
}
#dropdown-menu5-btn:hover,
#menu5 .dropdown-title h2::after,
#menu5 .dropdown-column header {
  background: #f8cb28;
  color: #000;
}
#dropdown-menu6-btn {
  color: #f29e37;
}
#dropdown-menu6-btn:hover,
#menu6 .dropdown-title h2::after,
#menu6 .dropdown-column header {
  background: #f29e37;
  color: #000;
}
#dropdown-menu7-btn {
  color: #ee3624;
}
#dropdown-menu7-btn:hover,
#menu7 .dropdown-title h2::after,
#menu7 .dropdown-column header {
  background: #ee3624;
  color: #000;
}
/*
.dropdown a {
  padding:;
  color: white;
  text-decoration: none;
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
}
.dropdown a:hover {
  background-color: #666;
}
*/
.dropdown.show {
  display: flex;
}
#navbar .nav-ul {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: flex-start;
  align-content: flex-start;
  list-style: none;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  background: #000;
}
#navbar .nav-li {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  margin: 0.125em 0;
  padding: 0;
}
#navbar .nav-li a {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  margin: 0;
  padding: 0.125em 0;
  font-size: 1em;
  text-decoration: none;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  color: #767676;
  font-weight: 500;
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-family: "neulis-sans", sans-serif;
  font-family: "alternate-gothic-atf", sans-serif;
  font-family: "trade-gothic-next", sans-serif;
   font-family: "forma-djr-text", sans-serif;
  position: relative;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
#navbar .nav-ul img {
  max-height: 1em;
  display: none;
  margin-right: 0.5em;
}
#navbar a.nav-li-coming-soon {
  color: #474747;
  font-weight: 300;
}
#navbar .nav-li a:hover {
  color: #9c111f;
  color: #fff;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
#navbar .nav-li a sup {
  font-size: 11px;
  padding: 0 4.236px;
  margin-top: -2.618px;
}
#navbar .nav-li a::before {
  content: "";
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 100%;
  bottom: 0;
  height: 1px;
  background: #9c111f;
  background: #3cb009;
  border-radius: 0 50% 50% 0;
  width: 0;
  right: 23.6%;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
#navbar .nav-li a:hover::before {
  content: "";
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 100%;
  bottom: 0;
  height: 1px;
  background: #9c111f;
  background: #3cb009;
  width: 76.4%;
  right: 23.6%;
  -webkit-transition: all 0s ease-in 0.25s;
  -moz-transition: all 0s ease-in 0.25s;
  -o-transition: all 0s ease-in 0.25s;
  -ms-transition: all 0s ease-in 0.25s;
  transition: all 0s ease-in 0.25s;
}
#navbar .nav-li a::after {
  content: "";
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 100%;
  height: 1px;
  background: #9c111f;
  background: #3cb009;
  width: 0;
  left: 0;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  -ms-transition: all 0s;
  transition: all 0s;
}
#navbar .nav-li a:hover::after {
  content: "";
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 100%;
  bottom: 0%;
  height: 1px;
  background: #9c111f;
  background: #3cb009;
  width: 76.4%;
  left: 0%;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
@-webkit-keyframes dropdownAnimation {
  from {
    position: fixed;
    opacity: 0;
    transform: translateY(calc(123px + 2em));
    height: 0;
    top: calc(123px + 2em);
    left: 0;
    width: 100%;
  }
  to {
    opacity: 1;
    transform: translateY(0px);
    height: 76.4vh;
    top: calc(123px + 2em);
    left: 0;
    width: 100%;
  }
}
.dropdown-row {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 0 1em;
  margin: 0 1em;
}
.dropdown-column {
  display: flex;
  flex-flow: row wrap;
  flex: 100 0 0;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  margin: 0.618em;
  padding: 1.618em 1em;
  background: #000;
  border-radius: 14.6px;
  border: 0.618em double #f2f2f1;
}
.dropdown-column header {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  margin: 0;
  padding: 0;
  font-size: 1.236em;
  letter-spacing: 0.0618em;
  /*
  color: #3cb009;
  color: #d52d27;
  color: #00abe3;
 */
  color: #fff;
  font-family: "alternate-gothic-atf", sans-serif;
  font-family: "trade-gothic-next", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  align-content: center;
}
/*
.dropdown-column a {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  text-align: left;
  border: 1px solid #f00;
  margin: 0;
  padding: 0.5em 0;
}
*/
/* Close button styling */
.dropdown .close-btn {
  background-color: #b01d10;
  color: #fff;
  border: none;
  padding: 0.236em 0.764em;
  cursor: pointer;
  text-align: center;
  top: 49px;
  left: 61.8%;
  -webkit-transform: translateX(61.8%);
  -moz-transform: translateX(61.8%);
  -o-transform: translateX(61.8%);
  -ms-transform: translateX(61.8%);
  transform: translateX(61.8%);
  position: absolute;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  font-family: "forma-djr-text", sans-serif;
  font-weight: 400;
}
.dropdown .close-btn:hover {
  background: #000;
  color: #b01d10;
}
.ec-size .ec-store__category-page .ec-store__content-wrapper,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
  display: flex;
  flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
  order: -1;
}
html,
body,
main,
.main,
#main {
  font-size: calc(14.6px + (23.6 - 14.6) * (100vw - 123px) / (843 - 123));
  font-family: "itc-avant-garde-gothic-pro", sans-serif !important;
  font-weight: 500 !important;
}
/*  Input box styles */
input.ecwid-search-widget__input[type="text"] {
  min-width: 100%; /* change width as needed*/
  width: 100%;
  display: block !important;
  height: 2.618em !important; /* change height as needed*/
  padding: 1em 2em !important;
  border: none !important; /* change border color */
  background-color: #fff !important;
  background: #fff !important; /* change background colour */
  font-size: 1em; /* change font size in search field */
  color: #000000 !important; /* change font color in search field */
  position: relative !important;
  font-family: "itc-avant-garde-gothic-pro", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.618em !important;
  border-radius: 0.236em !important;
}
input.ecwid-search-widget__input[type="text"]:focus {
  color: #000 !important;
  font-family: "itc-avant-garde-gothic-pro", sans-serif !important;
  font-weight: 300 !important;
}
/* "Search" button styles */
button.ecwid-search-widget__btn {
  display: inline-block !important;
  width: 2.618em !important; /* change width as needed*/
  height: 2.618em !important; /* change height as needed*/
  border: solid 1px #ffffff; /*change border color */
  background: #fff url(image/button_search.png) no-repeat bottom center !important; /*add background image*/
  background-size: contain;
  background-position: center center;
  position: absolute !important;
  top: 0;
  right: 0;
  border-radius: 0 0.236em 0.236em 0 !important;
}
@media all and (min-width: 843px) {
  #navbar {
    display: flex;
  }
}
@media all and (min-width: 1109px) {
  #navbar .navbar-top-left {
    flex: 100 0 0;
  }
  .nav-link {
    font-size: 1.236em;
  }
}