/* pre-HTML5 fix */
header, section, footer, aside, nav, main, article, figure {
    position: relative;
    display: block;
  }
  
  /* UTILITY */
  .flex-wrapper {    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
  }

  .slight-left {
    left: 45%;
  }
  
  /* HTML - LAYOUT */
  html {
    scroll-behavior: smooth;
    width: 100%;
  }
  
  html.nav-is-open {
    position: fixed;
    overflow-y: scroll;
  }
  
  body {
      
      background-color: transparent;
      
      
      color: #000;
      
    min-height: 99vh;
  }
  
  body:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('');
    background-position: center;
    background-size: cover;
    z-index: -10;
  }
  
  body.loading {
    overflow: hidden;
  }
  
  header {
    width: 100%;
    margin: auto;
    max-width: 100vw;
    min-height: 10vh;
    height: 90px;
    
    background-color: #ffffff;
    
    transition: transform ease 1s;
  }
  
  header h1 {
    margin: auto;
    letter-spacing: 2px;
    font-size: 2rem;
    z-index: 2;
    
    color: #000000;
    
  }
  
  @media only screen and (max-width: 600px) {
    header h1 {
      font-size: 5vw;
    }
  }
  
  /* NAV */
  
  nav#main-nav {
    position: relative;
    width: 100%;
    max-width: 100vh;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: space-between
  }
  
  
  
  nav#main-nav h1, nav#main-nav a {
    flex-grow: 1;
    z-index: 10;
  }
  
  nav#main-nav .trigger-container {
    flex-grow: 2;
  }
  
  #nav-closer {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 12;
    transform: scale(0.01);
    transition: transform 0.6s cubic-bezier(.75,-0.30,.15,1.35); 
  }
  
  .trigger {
    margin: 0 20px;
    
    background-color: #000000;
    
    z-index: 11;
  }
  
  .trigger i {
    
    color: #ffffff;
    
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(.75,-0.30,.15,1.35); 
  }
  
  .trigger:hover i {
    transform: scale(1.1);
  }
  
  .trigger:hover .cart-count {
    width: 100%;
  }
  
  .cart-count {
    opacity: 1;
    position: absolute;
    right: 0;
    width: 50%;
    text-align:center;
    font-size: 1rem;
    color: #ffffff;
      -webkit-transition: all 0.1s ease-in;
      -moz-transition: all 0.1s ease-in;
      -ms-transition: all 0.1s ease-in;
      -o-transition: all 0.1s ease-in;
      transition: all 0.1s ease-in;
      z-index: 2;
  }
  
  .cart-count:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.75;
    background-color: #7a7a7a;
      -webkit-transition: all 0.1s ease-in;
      -moz-transition: all 0.1s ease-in;
      -ms-transition: all 0.1s ease-in;
      -o-transition: all 0.1s ease-in;
      transition: all 0.1s ease-in;
      z-index: -1;
  }
  
  .cart-count:hover:after {
    opacity: 0.9;
  }
  
  .trigger-container, nav#main-nav h1 {
    position: relative;
    text-align: center;
  }
  
  .logo-link {
    height: 100%;
  }
  
  .logo.img-container {
    height: 100%;  
    padding: 5px 0;
  }
  
  .logo.img-container img {
    max-height: 100%;
  }
  
  /* MAIN CONTENT */
  
  main {
    min-height: 80vh;
    transition: all 0.5s ease-out; 
    
      background-color: #ffffff;
      
  }
  
  .loaded-content {
    max-width: 100%;
  }
  
  .new-content {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .width-wrapper {
    max-width: 85vw;
    padding: 15px;
    margin: auto;
    background-color: #ffffff;
    width: 1250px;
  }
  
  
  
  
  /* FOOTER */
  
  footer {
    text-align: center;
    min-height: 10vh;
    padding: 10px;
    
    background-color: #ffffff;
    
    
    
    color: #000000;
    
    transition: opacity 0.3s ease-in;
  }
  
  footer a {
    
    color: #000000;
    
  }
  
  footer a:hover {
    color: #7a7a7a;
  }
  
  footer.flex-wrapper {
    flex-direction: column;
  }
  
  footer ul {
    margin: 0;
  }
  
  .loading footer {
    opacity: 0;
  }
  
  /* HTML - Sidenav */
  .nav-is-open #nav-closer {
    transform: scale(1) rotate(180deg);
  }
  
  aside {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.6s cubic-bezier(.75,-0.30,.15,1.35); 
    pointer-events: none;
    opacity: 0;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  
  .nav-is-open aside {
    pointer-events: initial;
    opacity: 1;
  }
  
  aside > ul {
   padding-top: calc(10vh + 20px); 
   align-self: flex-start;
  }
  
  aside ul li {
    display: block;
    text-align: center;
    margin: 3.5vh auto;
    font-size: 4vw;
    transition: all 0.6s cubic-bezier(.75,-0.30,.15,1.35);
    transform: translateX(-50%) rotateY(-90deg);
    opacity: 0;
    text-transform: none;
  }
  
  
  aside ul li a, .aside-footer a, .aside-footer {
    color: #000000;
  }
  
  aside ul li a:hover, .aside-footer a:hover  {
    color: #7a7a7a;
  }
  
  
  
  
  @media only screen and (max-width: 600px) {
    aside ul li {
      font-size: 2rem;
    }
  }
  
  .aside-footer {
    position: absolute;
    top: 65px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    color: white;
    z-index: 100;
  }
  
  .nav-is-open aside ul li {
    transform: translateX(0);
    opacity: 1;
  }
  
  .nav-is-open aside ul li:hover {
    transform: translateY(-10px) skew(2deg);
  }
  
  .nav-is-open aside ul li.special-nav:hover {
    transform: translate(0);
  }
  
  .nav-is-open aside ul li .socials li:hover, .nav-is-open aside ul li .category-dropdown li:hover {
    transform: translateY(-5px);
  }
  
  .dropdown-indicator {
    font-size: 1rem;
  }
  
  .category-dropdown {
    transition: max-height 1s ease-in-out;
    max-height: 0;
    overflow: hidden;
    width: 100%;
    margin: auto;
    text-align: center;
  }
  
  @media only screen and (max-width: 600px) {
    .category-dropdown {
      width: 365px;
    }
  }
  
  .special-nav:hover .category-dropdown {
    max-height: 2000px;
  }
  
  .category-dropdown li {
    font-size: 0.9rem;
    display: inline-block;
    line-height: 1rem;
    padding: 0px 10px;
    margin: 2vw auto;
  }
  
  .category-dropdown li a {
    display: block;
    width: 120px;
    height: 100%;
    
    background-color: #ffffff;
    
    padding: 10px;
    
    border: 2px solid #000000;
    
  }
  
  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: #ffffff;
    
    z-index: -5;
    opacity: 0;
    transition: all 0.6s ease-in; 
  }
  
  .nav-is-open .nav-overlay {
    opacity: 0.7;
  }
  
  /* HTML - ELEMENTS */
  
  strong {
    font-weight: 600;
  }
  
  @media only screen and (max-width: 600px) {
    h1 {
      font-size: 9vw;
    }
  }
  
  h1, h2, h3, h4, h5 {
    
      font-weight: 600;
      letter-spacing: 2px;
      color: #000;
      text-transform: none;
      text-align: center;
  }
  
  a { 
    position: relative;
    color: #7a7a7a;
    font-weight: 600;
    outline: none;
    border: none;
    text-transform: none;
  }
  
  a:hover,a:focus,a.active {
    color: #000;
  }
  
  img {
    max-width: 100%;
  }
  
  .socials {
    display: block;
    width: 200px;
    max-height: 80px;
    margin: auto;
    max-width: 100%;
    text-align: center;
      font-size: 1.5rem;
      margin-bottom: 1rem;
  }
  
  .socials li {
      display: inline-block;
      width: 25px;
      margin: auto 7px;
      font-size: 1.2em;
  }
  
  .socials li a {
    font-weight: 400;
  }
  
  /* LOADER */
  
  #loadscreen {
    z-index: 99;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100%;
    /* transition: all 0.5s ease-out;  */
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #loadscreen img {
    border-radius: 150%;
    width: 393px;
    height: auto;
  }
  
  /* #loadscreen .dots span {
    font-size: 72px;
    animation: DOTZ 5s infinite ease-in-out;
    animation-fill-mode: both;
    display: inline-block;
    animation-play-state: paused;
  }
 /* 
  #loadscreen .dots span:nth-of-type(1) {
    animation-delay: 0.2s;
  }
  
  #loadscreen .dots span:nth-of-type(2) {
    animation-delay: 0.4s;
  }
  
  #loadscreen .dots span:nth-of-type(3) {
    animation-delay: 0.6s;
  } */
  #loadscreen #load-spinner {
    color: #000000 ;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  }
  @-webkit-keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  @keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  @-webkit-keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  
  .loading #loadscreen {
    opacity: 1;
    pointer-events: initial;
  }
  
  .loading #loadscreen .loading-spinner {
    animation-play-state: running;
  }
  
  .loading main {
    opacity: 0;
  }
  
  .initial-load header {
    transform: translateY(-100%);
  }
  
  .initial-load footer {
    opacity: 0;
  }
  
  /* ANIMATIONS */
  /* @keyframes DOTZ {
    0% { 
      background-color: #7a7a7a;
      color: #7a7a7a; 
      transform: translateY(-50px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }
    
    50% { 
      background-color: #000; 
      color: #000; 
      transform: translateY(0px) rotateX(360deg) rotateY(0deg) rotateZ(180deg);
    }
    
    100% {
      background-color: #7a7a7a; 
      color: #7a7a7a; 
      transform: translateY(-50px) rotateX(0deg) rotateY(360deg) rotateZ(360deg);}
  } */
  
  /* COLORING */
  
  .bg-backing {
      background-color: #ffffff;
  }
  
  .bg-body {
      background-color: #000;
  }
  
  .bg-header {
    background-color: #000;
  }
  
  .bg-accent {
      background-color: #7a7a7a;
  }
  
  .hover-bg-backing:hover {
      background-color: #ffffff;
  }
  
  .hover-bg-body:hover {
      background-color: #000;
  }
  
  .hover-bg-header:hover {
    background-color: #000;
  }
  
  .hover-bg-accent:hover {
      background-color: #7a7a7a;
  }
  
  .cl-backing {
      color: #ffffff;
  }
  
  .cl-body {
      color: #000;
  }
  
  .cl-header {
      color: #000;
  }
  
  .cl-accent {
      color: #7a7a7a;
  }
  
  .hover-cl-backing:hover,.hover-cl-backing:focus {
      color: #ffffff;
  }
  
  .hover-cl-body:hover,.hover-cl-body:focus {
      color: #000;
  }
  
  .hover-cl-header:hover,.hover-cl-header:focus {
      color: #000;
  }
  
  .hover-cl-accent:hover,.hover-cl-accent:focus {
      color: #7a7a7a;
  }
  
  /* PAGES - PRODUCT */
  @media only screen and (min-width: 800px) {
    #product-content .row {
      display: flex;
      flex-direction: row;
    }
    
    #product-content .row .col-flex {
      display: flex;
      align-items: center;
    }
  }
  
  .back-button {
    position: absolute;
    z-index: 20;
  }
  
  .nav-is-open .back-button {
    z-index: 9;
  }
  
  #options-header {
    padding: 20px 0;
  }
  
  .selector-container {
    text-align: center;
    transition: opacity 0.5s ease, max-height 1s ease-in;
    margin-bottom: 15px;
    padding-top: 15px;
    width: 200px;
    margin: auto;
    border-top: 2px #000 solid;
  }
  
  .selector {
    display: inline-block;
    border: 2px solid #000;
    color: #000;
    padding: 10px;
    margin: 5px 5px;
    min-width: 50px;
    cursor: pointer;
    border-radius: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    transition: border-radius 1s ease, box-shadow 1s ease, opacity .4s ease;
    overflow: hidden;
  }
  
  .option-selector:focus {
    color: #7a7a7a;
  }
  
  .selector.full-width {
    width: 100%;
  }
  
  .selector:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: #ffffff;
    
    opacity: 0;
    transition: opacity .4s ease;
  }
  
  .selector.in-stock:hover, .selector.available:hover, .selector.selected-color, #selected.selector, .selected-option {
    box-shadow: 0 2px 20px 5px rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    border-color: #7a7a7a;
    color: #7a7a7a;
    opacity: 1;
    border-radius: 50px;
  }
  
  .has-selection .selector {
    opacity: 0.5;
  }
  
  .has-selection:hover .selector.available {
    opacity: 1;
  }
  
  .selector.unavailable, .selector.out-of-stock, .has-selection:hover .selector.out-of-stock {
    opacity: 0.15;
    cursor: not-allowed;
    color: black;
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .not-safari #selected.selector {
    transition: 1s ease;
    transform: rotateY(360deg);
  }
  
  .not-safari #selected.selector.full-width {
    transition: 1s ease;
    transform: rotateY(15deg);
  }
  
  #selected.selector:after, .selected-option:after {
    
    opacity: 1;
    
    z-index: -10;
  }
  
  .sizes-container.unselected {
    opacity: 0;
    max-height: 0px;
  }
  
  .sizes-container .size-selector {
    font-size: 1rem;
  }
  
  .product-copy {
    text-align: left;
  }
  
  #product h5 {
    width: 75%;
    margin: auto;
  }
  
  .product-description {
    margin: auto;
  }
  
  .product-description .btn-container {
    text-align: center;
  }
  
  .product-descripton .btn {
    display: inline-block;
    margin: 10px auto 0;
  }
  
  .btn {
    display: block;
      background-color: #7a7a7a;
      color: #ffffff;
      font-family: inherit;
      font-weight: 600;
    text-transform: none;
      margin: 15px auto auto;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -ms-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      border-radius: 5px;
      border: 2px solid #7a7a7a;
      padding: 10px;
      line-height: 0;
  }
  
  .btn:hover, .btn:focus {
      background-color: #ffffff;
      color: #7a7a7a;
      border-color: #7a7a7a;
  }
  
  .btn.disabled {
    border-color: rgba(0, 0, 0, 0);
  }
  
  @media only screen and (min-width: 600px) {
    .product-description {
      min-height: 80vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  
  /* RELATED PRODUCTS */
  .related-products {
    margin-top: 5vh;
    text-align: center;
  }
  
  .related-products h3 {
    font-size: 1.5vw;
  }
  
  @media only screen and (max-width: 1064px) {
    .related-products h3 {
      font-size: 2rem;
    }
  }
  
  /* PRODUCT GRID - ISOTOPE BASE */
  @media screen and (max-width: 45em) {
   .grid-sizer, .grid-item {
      width: 100%;
    } 
  }
  
  @media screen and (min-width: 45.1em) and (max-width: 63.9375em) {
   .grid-sizer, .grid-item {
      width: 50%;
    } 
  }
  
  
  @media screen and (min-width: 64em) {
   .grid-sizer, .grid-item {
      width: 25%;
    } 
    
   .grid-item.large {
     width: 50%;
   }
  }
  
  
  
  /* SPLASH PAGE */
  
  .splash section {
    margin: 7vh auto;
  }
  
  .splash section:first-of-type {
    margin: auto auto 7vh;
  }
  
  .splash .btn-container, #home .btn-container {
    text-align: center;
    margin: 30px auto;
  }
  
  .splash .btn-container .btn, #home .btn-container .btn {
    display: inline;
    margin: 0 15px;
  }