:root {
	--yellow: #FFCA00;
	--red: #900200;
	--middle-gray: #F1F1F1;
}
/* Header - main nav */
#store-selector {
    font-size: 16px;
    padding: 0 0 0 54px;
}

#store-selector u {
    text-decoration: none;
}

#header-main {
    padding: 29px 0 11px 0;
}

.headerv2 #header-main {
    padding: 39px 0 16px 0;
}

.headerv2 #header-main {
    background-color: var(--yellow);
}

#nav {
    height:57px;
    border-top: 7px solid var(--yellow);
	background: #222222;
}

#header-main #logo {
    position: relative;
    top: -8px;
}

.headerv2 #header-main #logo .logo1 {
    display: none;
}

.headerv2 #header-main #logo .logo2 {
    display: block !important;
}

.headerv2 #header-main .icon-loc,
.headerv2 #header-main .icon-pay,
.headerv2 #header-main .icon-search {
    filter: brightness(0) saturate(100%);
}

#header-main .side-nav-toggle {
    width: 32px;
    height: 26px;
}

#header-main .side-nav-toggle span {
    width: 100%;
    height: 3px;
    background-color: #000;
}

#header-main #header-search {
    flex-basis: 306px;
    flex-shrink: 1;
}

#header-main #header-search form {
    max-width: 100%;
    height: 37px;
    border-radius: 50px;
    align-items: center;
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.3);
	margin-right: 10px;
}

#header-main #header-search button {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	margin-right: 3px;
	outline: none;
	background-color: #fff;
}

#header-main #header-search input,
#header-main #header-search ::placeholder {
    font-size: 13px;
    color: #222;
    line-height: normal;
}
#header-main #header-search ::placeholder {
    color: #9b9b9b;
}
#header-main #header-search input {
    text-indent: 5px;
    padding: 0 0 0 10px;
    margin: 0;
    flex-grow: 1;
    outline: none;
}

#header-main .button {
    height: 43.5px;
    padding-top: 1px;
    font-size: 16px;
    margin-right: 0px;
    padding: 0 13px;
    padding-top: 1px;
}

#header-main .separator {
    margin-right: 15px;
}

#header-main .button img {
    margin-right: 9px;
}

#header-main .cart {
    margin: 0 12px 6px 16px;
}

#header-main .cart img {
    max-width: 39px;
}

#header-main .location-container {
    margin-bottom: 10px;
}

#header-main .quantity {
    visibility: hidden;
    background-color: var(--yellow);
    border-radius: 50%;
    width: 23px;
    height: 23px;
    line-height: 21px;
    font-size: 16px;
    top: -7px;
    right: -11px;
	font-weight: 900;
}

.headerv2 #header-main .quantity {
	background-color: var(--yellow);
	color: #000;
}

#header-main .quantity.visible {
    visibility: visible;
}

#nav nav {
    flex-shrink: 0;
}

#nav nav>ul>li {
    margin-left: 2.1875em;
}

#nav nav>ul>li.less-padding {
    margin-left: calc(2.1875em - 18px);
}

#nav nav>ul>li:first-child {
    margin-left: 0;
}

#nav nav>ul>li a {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none !important;
}

#nav nav>ul>li.featured {
    position: relative;
}

#nav nav>ul>li.featured a {
    color: var(--yellow);
    font-size: 18px;
    font-family: 'Gotham Ultra';
}

#nav nav>ul>li.featured::before {
    content: '';
    background-image: url('../images/icons/icon-arrow-right-yellow.png');
    width: 16px;
    height: 12.5px;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: -25px;
    top: 5px;
    pointer-events: none;
    background-repeat: no-repeat;
}

#nav nav .sub-menu {
    overflow: hidden;
    position: absolute;
    top: 37px;
    left: 0;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    margin: 0;
    padding: 0;
    z-index: 3;
    border-left: 3px solid var(--yellow);
    white-space: nowrap;
}

#nav nav .sub-menu>ul {
    display: flex;
    margin: 19px 36px 26px 17px;
    gap: 62px;
}

#nav nav .sub-menu>ul>* {
    flex-shrink: 0;
}

#nav nav .sub-menu>ul li {
    line-height: 27px;
}

#nav nav .menu-item-has-children::before {
    content: '';
    background-image: url('../images/icons/icon-nav-dropdown.png');
    width: 10.5px;
    height: 11px;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: -18px;
    top: 6px;
    pointer-events: none;
    background-repeat: no-repeat;
}

#nav nav .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 82%;
    left: 0;
    height: 30px;
    width: 100%;
}

#nav nav .menu-item-has-children:hover .sub-menu {
    visibility: visible;
    opacity: 1;
}

#nav nav .menu-item-has-children:hover .sub-menu ul {
    list-style: none;
    padding: 0;
}

#nav nav .sub-menu .menu-item {
    margin-left: 0;
    line-height: 30.5px;
    margin-bottom: 0;
    min-width: 120px;
}

#nav nav .sub-menu .menu-item li {
    width: fit-content;
}

#nav nav .sub-menu .menu-item li.has-sub {
    position: relative;
    font-size: 15px;
}

#nav nav .sub-menu .menu-item li.has-sub a {
    color: #000;
}

/* #nav nav .sub-menu .menu-item li:first-child a::after, */
#nav nav .sub-menu .menu-item li.has-sub::before,
#nav nav .sub-menu .menu-item>a::after {
    /* content: ''; */
    position: absolute;
    width: 13px;
    height: 9.5px;
    top: 8px;
    right: -26px;
    background-image: url('../images/icons/nav-arrow.png');
    background-size: contain;
    background-position: center;
}

#nav nav .sub-menu .menu-item a {
    position: relative;
    color: #4c4c4c;
}

#nav nav .sub-menu .menu-item a:hover {
    text-decoration: none;
}

#nav nav .sub-menu .menu-item-sub a {
    font-size: 14px;
    color: #4c4c4c;
}
#nav nav .sub-menu .has-sub a {
	font-size: 14.5px !important;
}
#nav nav .sub-menu img {
    max-width: 341px;
    object-fit: cover;
    object-position: left bottom;
    margin: 0px 15px 2px 5px;
}

#nav .button {
    height: 51px;
    font-size: 22.5px;
    padding: 0 16px;
    background-color: var(--yellow);
}
#nav .button strong {
    padding-top: 2px;
}

.slogun {
	font-size: 18px;
	color: var(--red);
	margin-right: 16px;
}
.header-top {
	padding: 5px 0 10px 0;
}
.store-selector {
	padding: 25px 0 0 20px;
}
.icon-loc {
	margin-left: 20px;
}
.search-btn-container button {
	background: none;
}


/* Mobile menu */
body {
    width: 100%;
    height: 100%;
}

.slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    min-height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
}

.slideout-menu-left {
    left: 0;
}

.slideout-menu-right {
    right: 0;
}

.slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
    background-color: #FFF;
    /* A background-color is required */
    min-height: 100vh;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: block;
}

.slideout-menu a {
    font-size: 18px;
    width: 256px
}

.slideout-menu a:hover {
    color: #fff;
    text-decoration: none;
}

#side-nav {
    display: none;
}

.slideout-open #side-nav {
    display: block;
}

#panel:before {
    content: '';
    display: block;
    transition: background-color 0.5s ease-in-out;
}

#panel.panel-open:before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 99;
}
body {
	/* background: linear-gradient(180deg, #FFF 98%, #222 2%);	 */
}
.slogun {
	text-transform: uppercase;
}
#header-search-m input {
    width: 100%;
    height: 29px;
    line-height: 28px;
    padding: 0 10px;
    font-size: 11px;
}
#header-search-m form {
    border-radius: 20px;
    border: none;
    position: relative;
}
#header-search-m button {
    border-radius: 10px;
    margin-right: 10px;
    padding: 0;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    outline: none;
    -webkit-appearance: none;
    background: #fff;
    width: 21px;
    height: 21px;
    border: 1px solid #fff;
}
.mobile-search {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #222222;
}
.store-selector .lato, .primary-nav .lato, .heavy {
    font-weight: 900;
}
#nav nav .menu-item-has-children::before {
    right: -15px !important;
    top: 7px !important;
}
.fs-2 {
    line-height: 2;
}
.cleeks-home-joinus .tk-alkaline {
    font-size: 46px;
    font-weight: 900;
}
.cleeks-home-about-us .tk-alkaline {
    font-size: 36px;
    font-weight: 900;
    display: block;
    margin-top: -10px;
}
.cleeks-friend-referral .tk-alkaline {
    font-size: 36px;
    font-weight: 900;
    display: block;
    margin-top: -10px;
}
.cleeks-perks .tk-alkaline {
    font-size: 46px;
    font-weight: 900;
    display: block;
    margin-top: -18px;
}
.cleeks-service-thanks .tk-alkaline {
    font-size: 36px;
    font-weight: 900;
}
.join-club {
    font-size: 60px !important;
    font-weight: 900 !important;
}
.deals .week-text {
    font-weight: 900;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url("/themes/cleeks/images/icons/arrow-right.svg") !important;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url("/themes/cleeks/images/icons/arrow-left.svg") !important;
}
#menu li:not(.drop) a::after {
    display: none;
}
#menu .mobile-menu a{
    padding: 1rem;
    font-size: 18px;
    height: auto !important;
}

.footer-disclaimer {
    font-size: 13px;
    background-color: #ebebeb;
}

.form-field.select,
.form-field .select {
    position: relative;
}
.form-field.select::after,
.form-field .select::after {
    content: '';
    display: block;
    width: 17px;
    height: 10px;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/down-arrow.png");
    background-image: -webkit-image-set(url("../images/down-arrow.png") 1x, url("../images/down-arrow@2x.png") 2x);
    background-size: cover;
    pointer-events: none;
}
.with-label .form-field {
    padding: 8px;
}
.with-label .field-wrapper {
    position: relative;
}
.with-label .field-wrapper label {
    left: 16px;
    font-size: 1.125em;
    margin-bottom: 0;
    line-height: 1;
    transition: all 0.3s;
    color: #000;
}
.with-label .field-wrapper textarea + label {
	top: 19px;
}
.with-label .field-wrapper.focused textarea + label,
.with-label .field-wrapper.has-value textarea + label {
	top: 30px;
}
.with-label .field-wrapper select,
.with-label .field-wrapper textarea,
.with-label .field-wrapper input {
    text-indent: 0;
    color: #000;
}
.with-label .field-wrapper textarea:focus,
.with-label .field-wrapper select:focus,
.with-label .field-wrapper input:focus {
    border-color: #000;
    border-width: 2px;
}
.with-label .field-wrapper.focused label,
.with-label .field-wrapper.has-value label {
    font-size: 0.84375em;
    margin-top: calc(-2.9em + 20px);
    color: #79797B;
}
.with-label .form-field select,
.with-label .form-field input,
.with-label .form-field textarea,
.with-label .form-field email {
    border: 1px solid #A3A3A6;
    border-radius: 5px;
    width: 100%;
}
.with-label .form-field select,
.with-label .form-field textarea,
.with-label .form-field input {
    padding: 17px 0 0px 16px;
    text-indent: 0;
    font-size: 16px;
}
.with-label .form-field textarea {
    padding: 24px 0 0 16px;
}
.with-label .form-field select,
.with-label .form-field input,
.with-label .form-field email {
    height: 58px;
}
form.with-validation .form-field .validation-error select,
form.with-validation .form-field .validation-error textarea,
form.with-validation .form-field .validation-error input,
form.with-validation .form-field .incomplete-mask input {
    border-color: #E32E22;
    border-width: 2px;
}
form.with-validation .form-field .validation-error:before,
form.with-validation .form-field .incomplete-mask:before {
    content: '';
    display: block;
    width: 23px;
    height: 23px;
    position: absolute;
    top: 18px;
    z-index: 2;
    right: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/error.png);
    background-image: -webkit-image-set(url(../images/error.png) 1x, url(../images/error@2x.png) 2x);
    background-size: cover;
    pointer-events: none;
}
