/***** Header Start Here *****/
.site-header {
    background: var(--body-bg);
    -webkit-box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
    position: relative;
    /* padding-top: 15px; padding-bottom: 15px; */
}

.site-header .row-align {
    padding-left: 40px;
    padding-right: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-align-items: center;
    -ms-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.site-header .cl-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-align-items: center;
    -ms-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
}

.site-header .cl-left .site-logo {
    margin-right: 34px;
}

.site-header .cl-left .site-logo a {
    display: inline-block;
}

.site-header .cl-left .site-logo a img {
    max-width: 150px;
    width: 100%;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline {
    background: transparent !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li {
    margin: 0 15px;
    padding: 0;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li.active>a {
    color: var(--flamingo);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li.active>a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 50px;
    background: var(--flamingo);
    width: 100%;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li>a {
    font-family: "Atkinson Hyperlegible";
    font-weight: 700;
    color: var(--revolver);
    font-size: var(--fs15);
    display: block;
    margin: 0;
    padding: 25px 6px;
    position: relative;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li>a:hover {
    color: var(--flamingo);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li>a:hover:before {
    width: 100%;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

>.site-header .cl-left .site-navigation .site-primary ul.list-inline>li>a:before {
    content: "";
    display: inline-block;
    background: var(--flamingo);
    width: 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu {
    background: #F6F3EF;
    -webkit-box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    padding: 0px 0 0 0;
    z-index: 33333;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu:after {
    content: '';
    position: absolute;
    background-color: #f6f3ef;
    width: 80%;
    min-height: 100%;
    top: 0;
    right: -80%;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .menu-row-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side-menu {
    padding: 40px 30px 20px 30px;
    background-color: var(--body-bg);
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side-menuu {
    padding: 40px 50px 35px 50px;
    background-color: #f6f3ef;
    max-width: 610px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .block-title {
    font-size: var(--fs14);
    font-family: "Atkinson Hyperlegible";
    letter-spacing: 0.9px;
    line-height: 12px;
    color: var(--cod-grey);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-gray);
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-weight: 700;
    max-width: 650px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    max-width: 650px;
    margin-left: -10px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li {
    line-height: 35px;
    position: relative;
    margin-bottom: 6px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li.active>a {
    color: var(--flamingo);
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.09);
    border-radius: 3px;
    background-color: var(--white);
    border: 1px solid var(--light-border-color);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li.active img.hov-img {
    display: initial;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li.active img.def-img {
    display: none;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li a {
    color: var(--cod-grey);
    font-size: var(--fs15);
    line-height: initial;
    font-family: "Atkinson Hyperlegible";
    font-weight: 700;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    z-index: 1;
    padding: 11px 10px 11px 45px;
    position: relative;
    -webkit-box-shadow: transparent;
    box-shadow: transparent;
    border-radius: 3px;
    display: inline-block;
    background-color: transparent;
    border: 1px solid transparent;
    width: 100%;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li a .thumb-img {
    position: absolute;
    left: 10px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li a img {
    margin-right: 15px;
    height: 20px;
    width: 20px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li a img.def-img {
    display: initial;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li a img.hov-img {
    display: none;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li:hover a {
    color: var(--flamingo);
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0.09);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.09);
    border-radius: 3px;
    background-color: var(--white);
    border: 1px solid var(--light-border-color);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li:hover img.def-img {
    display: none;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .left-side.sub-menu-list ul li:hover img.hov-img {
    display: initial;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .img-text-details {
    margin-bottom: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: var(--white);
    border-radius: 3px;
    border: 1px solid var(--light-gray-border);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .img-text-details:last-child {
    margin-bottom: 0;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .img-text-details .col-image {
    max-width: 226px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .img-text-details .col-desc {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .img-text-details .img-info {
    height: 80px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .img-text-details .img-info img {
    height: 100%;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details {
    padding: 0px 15px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details .item-title {
    display: block;
    line-height: 1;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details .item-title a {
    font-size: var(--fs15);
    color: var(--cod-grey);
    line-height: 20px;
    font-family: "Atkinson Hyperlegible";
    font-weight: 700;
    text-transform: revert;
    border: none;
    margin: 0;
    padding: 0;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details .item-title a:hover {
    color: var(--flamingo);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details .btn-link {
    text-decoration: none;
    color: var(--blue);;
    font-size: var(--fs14);
    line-height: 17px;
    font-weight: 700;
    display: block;
    margin-top: 5px;
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details .btn-link i {
    position: relative;
    top: 1px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .right-side .text-details .btn-link:hover {
    color: var(--flamingo);
    transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu {
    border-top: 1px solid var(--border-gray);
    position: relative;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 5px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul li {
    margin: 0 20px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul li a {
    font-size: var(--fs13);
    position: relative;
    color: var(--blue);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul li a:hover {
    color: var(--elm);
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul li a:after {
    content: '';
    position: absolute;
    background-color: #C9C9C9;
    width: 1px;
    height: 100%;
    bottom: 0;
    right: -20px;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul li:first-child {
    margin-left: 0;
}

.site-header .cl-left .site-navigation .site-primary ul.list-inline>li .sub-menu .bottom-menu ul li:last-child a:after {
    display: none;
}

.site-header .cl-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-align-items: center;
    -ms-align-items: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
}

.site-header .cl-right .live-chat a,
.site-header .cl-right .info-number a {
    font-family: "Atkinson Hyperlegible";
    font-weight: 700;
    color: var(--cod-grey);
    font-size: var(--fs15);
}

.site-header .cl-right .live-chat a:hover,
.site-header .cl-right .info-number a:hover {
    color: var(--flamingo);
}

.site-header .cl-right .info-number {
    margin-left: 20px;
}

.site-header .cl-right .trial-btn {
    margin-left: 40px;
}

.site-header .cl-right .login-btn {
    margin-left: 15px;
}
.site-header .cl-right .login-btn .site-btn.orange-btn {
    border: none;
}
.site-header .cl-right .cart-btn {
    margin-left: 25px;
    margin-right: 15px;
    line-height: 0px;
    position: relative;
}

.site-header .cl-right .cart-btn a svg path {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-right .cart-btn a:hover svg path {
    fill: var(--flamingo);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-right .cart-btn a .cart-qty {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: var(--fs12);
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    position: absolute;
    left: 100% !important;
    -webkit-transform: translate(-25%, -50%) !important;
    transform: translate(-25%, -50%) !important;
    top: 0 !important;
    border-radius: 50rem !important;
    background-color: var(--elm);
    z-index: 1;
}

.site-header .cl-right .search-row {
    position: relative;
    margin-left: 25px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    line-height: 0px;
}

.site-header .cl-right .search-row .search-icon {
    cursor: pointer;
    display: inline-block;
}

.site-header .cl-right .search-row .search-icon .fa {
    color: var(--cod-grey);
}

.site-header .cl-right .search-row .search-icon:hover .fa {
    color: var(--flamingo);
}

.site-header .cl-right .search-row form {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--white);
    padding: 0px 20px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
    height: 84px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    z-index: 999999;
}

.site-header .cl-right .search-row form #search-container {
    position: relative;
}

.site-header .cl-right .search-row form input.input-search {
    padding: 6px 120px 6px 10px;
    margin: 0;
    border: 1px solid var(--cod-grey);
    height: 44px;
    font-family: "Lato";
    font-size: var(--fs16);
    color: var(--cod-grey);
    line-height: 28px;
}

.site-header .cl-right .search-row form button[type="submit"] {
    background: transparent;
    border: none;
    width: auto !important;
    padding: 0;
    margin: 0;
    width: auto;
    min-width: auto;
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
}

.site-header .cl-right .search-row form button[type="submit"] span {
    position: relative;
    border: none;
    background: var(--flamingo);
    color: var(--white);
    clip: inherit;
    font-size: var(--fs16);
    line-height: var(--lh24);
    margin: 0;
    padding: 10px 15px;
    display: inline-block;
    width: 100%;
    height: 44px;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-right .search-row form button[type="submit"]:hover span {
    background: var(--jungle-green);;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}

.site-header .cl-right .search-row form div#clear_search {
    position: absolute;
    right: 100px;
    top: 11px;
    cursor: pointer;
}

.site-header.header-fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9999;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: smoothScroll 1s forwards;
    animation: smoothScroll 1s forwards;
}

@-webkit-keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes smoothScroll {
    0% {
        -webkit-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}




.site-header .login-btn .my-account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;
    border-radius: 4px;
    display: none;
    min-width: inherit;
    font-size: inherit;
    background: #FFFDFB;
    -webkit-box-shadow: 0 0 9px rgba(0,0,0,0.10);
    box-shadow: 0 0 9px rgba(0,0,0,0.10);
    padding: 15px 20px;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
}
.site-header .cl-right .login-btn:hover ul.my-account-dropdown {
    display: block;
}
.site-header .login-btn .my-account-dropdown li {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
}
.site-header .login-btn .my-account-dropdown li:last-child {
    margin-bottom: 0;
}
.site-header .login-btn .my-account-dropdown li a {
    color: #2C2E30;
    position: relative;
    padding: 0 0 0 25px;
    font-size: 16px;
}
.site-header .login-btn .my-account-dropdown li a:hover,
.site-header .login-btn .my-account-dropdown li a:hover i {
    color: #268378;
}
.site-header .login-btn .my-account-dropdown li a i {
    color: #000;
    margin: 0;
    position: absolute;
    left: 0;
    top: 2px;
}

.site-header .login-btn .my-account-dropdown li i.fa-dashboard:before {
    content: "\f3fd";
}
.site-header .login-btn .my-account-dropdown li i.fa-dollar:before {
    content: "\f155";
}
.site-header .login-btn .my-account-dropdown li i.fa-sign-out:before {
    content: "\f2f5";
}
.Friendbuy-ribbon-transition{
    margin-bottom: 75px !important;
    margin-top: 0 !important;
    bottom: 0 !important;
    top: inherit !important;
}
/***** Header END Here *****/