.skip-link-nav {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0.06rem;
  margin: 0.06rem;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 0.06rem;
  font-size: 16px;
}

.skip-link-nav:focus {
  position: fixed;
  width: auto;
  height: auto;
  top: 0;
  left: 20px;
  display: block;
  z-index: 500;
  background: transparent;
  color: black;
  clip: auto;
}


/* Menu Mall Navigation */
.main-nav {
  height: 14rem;
}

div.quick-nav {
  margin-top: 4.5rem;
  margin-bottom: 0.5rem;
}

.main-nav.opened {
  min-height: 14rem;
  height: 14rem;
}

.header div.col-md-9 div.center-horizontal, .header div.col-md-3 div.center-horizontal {
  display: flex;
  align-items: center;
}

.header {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.searchBox div.search-wrapper {
  margin-right: 0;
  margin: 0 3rem 0 2rem;
}

.main-nav .component.searchBox {
  width: unset;
}

.main-nav .component.menu {
  width: unset;
}
.main-nav .menu-handler-wrapper, .main-nav.opened .menu-handler-wrapper{
  padding-right: 1rem;
}

.center-horizontal div.component-wrapper div.adaptive-image {
  width: 100%;
}

.main-nav div.col-md-9 .component.changeMall{
  margin: 0.8rem 0 0 0;
}

.searchBox .search-box-wrapper a.search-handler {
  font-size: 2.5rem;
}

.searchBox.active:after {
  right: 2.8rem;
}

.main-nav.opened .menu.active:after{
  right: 1.6rem;
}

.header div.col-md-9 div.center-horizontal div.component-wrapper:nth-child(2) {
  width: 26%;
}

.sign-up {
  padding: 2.5rem 7.5rem;
  background: #0D2240;
  margin: 0 1.5rem 0 5rem;
}

.gigyaSignUp div.signup-holder div.al-hide-if-logged-in a.sign-up{
  color: white;
}

.gigyaSignUp div.signup-holder, .main-nav .changeMall .selector {
  padding-top: unset;
}

.header div.col-md-3 div.center-horizontal {
  justify-content: flex-end;
}

/* Change Mall Chevron*/
.main-nav .changeMall.active:after{
  top: 7.1rem;
}
/* Menu Chevron */
.main-nav.opened .menu.active:after {
  bottom: -7.2rem;
}

/* Search Chevron */
.searchBox.active:after {
  bottom: -8.1rem;
}

/* Delete chevron under sign up */
.gigyaSignUp.active:after {
  content: '';
}

/* Joat language toggle */
.main-nav .main-nav .component.languageToggle{
  width: unset;
}

.main-nav div.joat div.wrap {
  padding: 0;
}

.main-nav div.joat {
  max-width: 300px;
}

.main-nav .component.languageToggle .lang-wrapper{
  text-align: unset;
  padding-right: unset;
}


/* Tablet */
@media (min-width:768px) and (max-width: 1122px) {

  .main-nav .component.languageToggle {
    width: unset;
  }

  .main-nav div.section  div.column-container {
    display: flex;
    align-items: center;
  }

}


/* Mobile Styles Menu */
@media only screen and (max-width : 767px) {
  .main-nav {
    color: white;
  }

  .main-nav.opened div.col-md-9 div.center-horizontal div.component-wrapper:nth-child(2) {
    display: none;
  }

  .main-nav.opened div.col-md-9 div.center-horizontal, .header div.col-md-3 div.center-horizontal {
    justify-content: space-around;
  }

  .main-nav.opened div.clearfix.component.languageToggle {
    width: unset;
  }

  .main-nav.opened div.mobile-signup-holder:nth-child(2) {
    display: none;
  }

  .header div.col-md-9 div.center-horizontal div.component-wrapper:nth-child(2) {
    width: 100%;
  }

  /* Center the image */
  .header .adaptive-image, header .list {
    padding-top: 2rem;
  }

  .main-nav {
    height: auto;
  }

  .sign-up {
    padding: unset;
    background: unset;
    margin: unset;
  }

  .main-nav.opened {
    min-height: 100vh;
    height: auto;
  }

  /* JOAT language toggle */
  .main-nav .component.languageToggle {
    width: unset;
  }
}

/* Guest List (JOAT) override */

div.newsletter-product-block img, div.newsletter-band img {
  box-shadow: none;
}


/* New Colors contrast ratio */

div.storeDetail h4.color-text-blue, div.storeDetail h3.color-text-blue,
div.theme-teal span.pull-right a.color-text-blue{
  color: #003a5d;
}

div.giftCard div.giftCard-purchase div.giftCard-purchase-blue
{
  background-color: #003a5d;
}

div.theme-teal div.hero-small div.gradient-bg{
  background-image: linear-gradient(135deg,#003a5d,#003a5d);
}

div.theme-pink div.hero div.gradient-bg {
  background-color: #CB485E;
}

div.theme-pink a.cta-link {
  color: #CB485E;
}

div.storeDescription p.cta-link, div.storeDetail a.toggle-hours,
div.global-footer div.list-content a,
div.global-footer div.plain-text-image div.caption a.btn-primary,
div.global-footer div.plain-text-image h4,
div.lister #filter div.stones div.desktop a,
div.giftCard div.giftCard-purchase p.giftCard-purchase-pay,
div.giftCard div.giftCard-purchase p.giftCard-purchase-subheadline{
  color: #4C4848;
}

div.theme-pink div.joat  a {
  color: #944753;
}


/* Delete all filter property in header */

div.main-nav.opened div.dropdown-wrapper,
div.main-nav.opened div.row,
div.main-nav.opened div.wrap,
div.main-nav.opened div.dropdown-wrapper,
div.dropdown-wrapper {
  filter: none;
}

@media (min-width:768px) {
  .main-nav.opened .wrap,
  .main-nav.opened .dropdown-wrapper{
    -moz-animation:none;
    -webkit-animation:none;
    animation:none;
    -webkit-backface-visibility:hidden;
    filter: none;
  }

}

/*Delete filter property from tiles inside joat */
div.joat div.tile,
div.joat div.tile.blue::before {
  filter: none;
}


/* Show closest Mall to your area, fix an inline style added in project cf-aem-guest-backend
  !important rule is used in this scenario because is the only way to override an inline style and in this case
   there is no access to change those inline styles added in cf-aem-guest-backend project (file: app/cf/pages/visitor-info.html).
   Please avoid using this rule(!important) is a bad practice and should be avoided because it
   makes debugging more difficult by breaking the natural cascading in your stylesheets
   refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
 */
div.mallFilter  div.overlay div.bx-wrapper div.bx-viewport {
  overflow: visible !important;
}