/*Top bar START--------------------------------------------------------------*/
  #top-bar-container {
    background-color: rgba(155, 96, 164, 1);
    color: rgb(255, 255, 255);
    font-family: 'GillSansMTPro-Medium', "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Frutiger, "Frutiger Linotype", Univers, Calibri, "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    z-index: 200;
    padding: 16px 0;
  }
  .top-bar-inner-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
  }
  .top-bar-announcement {
    flex: 0 0 100%;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
    line-height: 120%;
    margin: 0 0 16px 0;
  }
  .top-bar-announcement.is--hidden {
    margin: 0;
  }
  .top-bar-social {
    flex: 0 0 100%;
  }
  .top-bar-social a {
    display: inline-block;
    margin: 0 24px 0 0;
    text-indent: -9999px;
  }
  .top-bar-social a:last-child {
    margin: 0;
  }
  @media screen and (min-width: 1200px) {
    .top-bar-announcement {
      flex-basis: auto;
      font-size: 1.1rem;
      margin: 0;
      top: 2px;
    }
    .top-bar-social {
      align-items: center;
      display: flex;
      flex-basis: auto;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .top-bar-social a {
      height: 16px;
      margin: 0 16px 0 0;
      width: 16px;
    }
  }
/*END*/

/*Mobile header START--------------------------------------------------------*/
  .mobile-header-container {
    background-color: rgba(255, 255, 255, 1);
  }
  .mobile-header-inner-container {
    margin: 0 auto;
    padding: 32px 0;
    width: 90%;
  }
  .mobile-header,
  .mobile-header-navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-header-logo {
    background: transparent url(../svg/candlestick-press-logo-brand-dark.svg) no-repeat scroll center center;
    height: 80px;
    text-indent: -9999px;
    width: 64px;
  }
  .mobile-header-navigation span {
    margin: 0 24px 0 0;
  }
  .mobile-header-stamp {
    background: transparent url(../svg/usp-stamp.svg) no-repeat scroll center center;
    height: 80px;
    text-indent: -9999px;
    width: 80px;
  }
  #mobile-header-basket {
    height: 24px;
    width: 24px;
  }
  .mobile-header-menu-container {
    font-family:  'ACaslonPro-Semibold', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style",
                  "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    font-size: 2rem;
    max-height: 0;
    overflow: hidden;
    z-index: 50;
    opacity: 0;
    transition: all 0.2s linear 0s;
    background-color: rgba(255, 255, 255, 1.0);
    box-shadow: rgba(81, 15, 87, 0.5) 0px 50px 50px -20px;
    position: absolute;
    left: 0;
    top: 128px;
    width: 100vw;
  }
  .mobile-header-menu-container.is--active {
    transform: translateY(16px);
    opacity: 1;
    max-height: 100vh;
    transition: all 0.2s linear 0s;
    overflow: auto;
    padding: 16px 0 32px 0;
  }
  .mobile-header-menu-inner-container {
    margin: 0 auto;
    width: 90%;
  }
  .mobile-header-menu-inner-container .close-icon {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
  }
  .mobile-header-menu-container .sub-menu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.2s linear;
  }
  .mobile-header-menu-container .sub-menu.is--active {
    opacity: 1;
    max-height: 100vh;
    transition: all 0.2s linear;
  }
  .mobile-header-menu-container .menu-primary-container .has-sub-menu > a:after {
    background: transparent url(../icons/icon-arrow-down-brand-dark.svg) no-repeat scroll center center;
    content: "";
    height: 20px;
    position: absolute;
    top: 4px;
    width: 20px;
  }
  .mobile-header-menu-container .menu-primary-container .shop-menu > a:after {
    left: 56px;
  }
  .mobile-header-menu-container .menu-primary-container .about-menu > a:after {
    left: 90px;
  }
  .mobile-header-menu-container .menu-primary-container .what-menu > a:after {
    left: 170px;
  }
  .mobile-header-menu-container .menu-primary-container a {
    color: rgba(102, 102, 102, 1);
    padding: 0 0 32px 0;
  }
  .mobile-header-menu-container .menu-primary-container > ul > li:last-child a {
    padding: 0;
  }
  .mobile-header-menu-container .menu-primary-container .sub-menu {
    margin: 0 0 0 28px;
  }
  @media screen and (min-width: 768px) {
    .mobile-header-navigation span {
      margin-right: 48px;
    }
  }
  @media screen and (min-width: 1200px) {
    .mobile-header-container {
      display: none;
    }
  }
  .mobile-header-search-form-container {
    position: absolute;
    top: 128px;
    left: 0;
    width: 100vw;
    max-height: 0;
    overflow: hidden;
    z-index: 50;
    opacity: 0;
    transition: all 0.2s linear 0s;
    background-color: rgba(255, 255, 255, 1.0);
    box-shadow: rgba(81, 15, 87, 0.5) 0px 50px 50px -20px;
  }
  .mobile-header-search-form-inner-container {
    padding-bottom: 56px;
  }
  .mobile-header-search-form-container.is--active {
    transform: translateY(16px);
    max-height: 100vh;
    transition: all 0.2s linear 0s;
    opacity: 1;
  }
  .mobile-header-search-form-container .close-icon {
    position: absolute;
    right: 0;
    top: -16px;
  }
/*END*/

/*Desktop header START-------------------------------------------------------*/
  .desktop-header-container {
    display: none;
    height: 122px;
    padding: 24px 0;
  }
  @media screen and (min-width: 1200px) {
    .desktop-header-container {
      display: block;
    }
  }
  .desktop-header-inner-container {
    margin: 0 auto;
    width: 90%;
    max-width: 1500px;
  }
  .desktop-header-logo {
    background: transparent url(../svg/candlestick-press-logo-brand-dark.svg) no-repeat scroll center center;
    height: 72px;
    text-indent: -9999px;
    width: 58px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .desktop-header-container .desktop-header-right {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    z-index: 100;
  }
  .desktop-header-search-form-container {
    border-bottom: 1px solid rgba(81, 15, 87, 1);
  }
  #desktop-header-basket {
    height: 24px;
    margin-right: 48px;
    width: 24px;
  }
  .desktop-header-search-form-container span {
    display: inline-block;
  }
  .desktop-header-search-form-container #desktop-header-search-submit {
    background: transparent url(../icons/icon-search-brand-dark.svg) no-repeat scroll center center;
    border: none;
    height: 24px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    width: 24px;
  }
  .desktop-header-stamp {
    background: transparent url(../svg/usp-stamp.svg) no-repeat scroll center center;
    height: 72px;
    margin-left: 48px;
    text-indent: -9999px;
    width: 72px;
  }
  .desktop-header-container .menu-primary-container {
    background-color: rgba(255, 255, 255, 1.0);
    z-index: 50;
    padding: 26px 0 0 0;
  }
  .desktop-header-container .menu-primary-container a {
    color: rgba(102, 102, 102, 1);
    font-family:  'ACaslonPro-Semibold', "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter",
                  "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
  }
  .desktop-header-container #menu-primary-1 li.shop-menu,
  .desktop-header-container #menu-primary-1 li.about-menu,
  .desktop-header-container #menu-primary-1 li.what-menu,
  .desktop-header-container #menu-primary-1 li.blog-menu,
  .desktop-header-container #menu-primary-1 li.contact-menu {
    position: absolute;
  }
  .desktop-header-container #menu-primary-1 li.shop-menu {
    left: 90px;
  }
  .desktop-header-container #menu-primary-1 li.about-menu {
    left: 186px;
  }
  .desktop-header-container #menu-primary-1 li.what-menu {
    left: 312px;
  }
  .desktop-header-container #menu-primary-1 li.blog-menu {
    left: 508px;
  }
  .desktop-header-container #menu-primary-1 li.contact-menu {
    left: 578px;
  }
  .desktop-header-container #menu-primary-1 .has-sub-menu:after {
    background: transparent url(../icons/icon-arrow-down-brand-dark.svg) no-repeat scroll center center;
    content: "";
    height: 16px;
    position: absolute;
    right: 0;
    top: 6px;
    width: 16px;
  }
  .desktop-header-container #menu-primary-1 li.has-sub-menu > a {
    padding: 0 26px 45px 0;
  }
  .desktop-header-container #menu-primary-1 > li:hover > a,
  .desktop-header-container #menu-primary-1 .sub-menu a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(102, 102, 102, 1);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .desktop-header-container #menu-primary-1 .sub-menu-container {
    position: absolute;
    background-color: white;
    box-shadow: rgba(81, 15, 87, 0.5) 0px 50px 50px 0px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s linear 0s;
  }
  .desktop-header-container #menu-primary-1 .sub-menu-container.is--active {
    transform: translateY(16px);
    opacity: 1;
    max-height: 100vh;
    transition: all 0.2s linear 0s;
    overflow: auto;
  }
  .desktop-header-container #menu-primary-1 .sub-menu-container .sub-menu li a {
    padding: 0 0 16px 0;
    display: inline-block;
  }
  .desktop-header-container #menu-primary-1 .shop-menu .sub-menu-container {
    top: 24px;
    /*left + right set in JS*/
  }
  .desktop-header-container #menu-primary-1 .about-menu .sub-menu-container,
  .desktop-header-container #menu-primary-1 .what-menu .sub-menu-container {
    top: 48px;
    left: -32px;
    padding: 16px 32px 0 32px;
  }
  .desktop-header-container #menu-primary-1 .about-menu .sub-menu-container {
    width: 248px;
  }
  .desktop-header-container #menu-primary-1 .what-menu .sub-menu-container {
    width: 230px;
  }
  .desktop-header-container #menu-primary-1 .shop-menu .sub-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    width: 90%;
    padding: 56px 0 16px 0;
    max-width: 1500px;
  }
  @media screen and (min-width: 1500px) {
    .xdesktop-header-container #menu-primary-1 .shop-menu .sub-menu {
      width: 75%;
    }
  }
  @media screen and (min-width: 1900px) {
    .xdesktop-header-container #menu-primary-1 .shop-menu .sub-menu {
      width: 60%;
    }
  }
  @media screen and (min-width: 2500px) {
    .xdesktop-header-container #menu-primary-1 .shop-menu .sub-menu {
      width: 50%;
    }
  }
  .desktop-header-container #menu-primary-1 .shop-menu .sub-menu li a {
    padding: 0 16px 16px 16px;
  }
  .desktop-header-container #menu-primary-1 .shop-menu .sub-menu li:first-of-type a {
    padding-left: 0;
  }
  .desktop-header-container #menu-primary-1 .shop-menu .sub-menu li:last-of-type a {
    padding-right: 0;
  }
  .desktop-header-container #menu-primary-1 .about-menu .sub-menu-container .sub-menu,
  .desktop-header-container #menu-primary-1 .what-menu .sub-menu-container .sub-menu {
    padding: 6px 0 8px 0;
  }
/*END*/