/**

 * All of the CSS for your public-facing functionality should be

 * included in this file.

 */



/*

  Header

*/





/* Global Header Mobile */

#global-header {

    display: none;

    position: sticky;

    top: 0;

    width: 100%;

    z-index: 1500;

    transform: translateZ(0);

}



/* -- Header Inner */

#global-header .header-inner {

    position: relative;

    z-index: 50;

    transition: all .4s ease 0s;

}



#global-header .header-pre-canvas {

    box-shadow: 0px 3px 11px -5px rgba(0, 0, 0, .13);

}



/* -- Inside Pre Canvas */

#global-header .header-persistent {

    position: relative;

    overflow: hidden;

    padding: 8px 20px;

    background: #ffffff;

    z-index: 20;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: margin .4s ease 0s;

}



body.mobile-nav-open:not(.mobile-menu-full-width) #global-header .header-persistent {

    box-shadow: 0 10px 20px -20px rgba(40,53,69,.4)

}



/* -- Logo */

#global-header .header-persistent #site-logo {

    display: flex;

    position: relative;

    flex: 0 1 auto;

    width: 58px;

    height: 52px;

    margin-right: 20px;

    transition: all .4s ease 0s;

}



#global-header .header-persistent #site-logo a {

    display: flex;

    align-items: center;

}



#global-header .header-persistent #site-logo img {

    width: 100%;

    height: auto;

}



/* -- Left Side Top Strip */

#global-header .header-persistent .header-persistent-inner {

    display: flex;

    align-items: center;

}



/* -- CTA Button */

#global-header .header-persistent .nav-cta {

    margin-right: 20px;

}



/* -- Search */

#global-header #search-icon {

    margin-right: 20px;

    font-size: 18px;

    cursor: pointer;

}



#global-header #search-icon svg{

    stroke: #000;

    height: 24px;

    position: relative;

    top: 2px;

}



/* -- Cart FlyCart */

#global-header .toggleCart.mobile-cart {

    padding-right: 10px;

    margin-right: 5px;

    position: relative;

    display: flex;

    align-items: center;

}



#global-header .toggleCart .cart-items-count {

    position: absolute;

    top: -8px;

    right: 15px;

}



#global-header .toggleCart .cart-items-count:after {

    content: attr(data-count);

    display: block;

    background-color: #e94b35;

    color: #ffffff;

    font-size: 10px;

    font-weight: 400;

    width: 16px;

    height: 16px;

    line-height: 16px;

    text-align: center;

    border-radius: 8px;

    position: absolute;

    right: -10px;

    top: 0;

}



/*.woofc-count-shake {*/

/*    animation: none !important;*/

/*}*/



/* --- Resetting the bottom position */

/*#woofc-count {*/

/*    position: initial;*/

/*    box-shadow: none;*/

/*}*/



/*#global-header #menu-cart #woofc-count {*/

/*    position: initial;*/

/*    width: 30px;*/

/*    height: 30px;*/

/*    background-color: transparent;*/

/*}*/



/*#global-header #menu-cart #woofc-count i {*/

/*    color: white;*/

/*    position: absolute;*/

/*    left: 50%;*/

/*    top: 50%;*/

/*    transform: translate(-50%, -50%);*/

/*}*/



/*#global-header #menu-cart #woofc-count span {*/

/*    height: 15px;*/

/*    width: 15px;*/

/*    line-height: 15px;*/

/*    right: -3px;*/

/*    background: #434543;*/

/*}*/





/* -- Hamburger */

#global-header .header-persistent #menu-hamburger {

    flex: 0 0 auto;

}



#global-header .header-persistent #menu-hamburger a {

    display: block;

    position: relative;

    overflow: hidden;

    max-height: 20px;

    width: 25px;

    margin: 6px 0;

    padding: 9px 0;

}



#global-header .header-persistent #menu-hamburger a .ico-hamburger {

    display: block;

    background-color: #000;

    width: 100%;

    height: 2px;

    margin: 0 auto;

    transition: width .2s ease 0s;

}



#global-header .header-persistent #menu-hamburger a .ico-hamburger:before,

#global-header .header-persistent #menu-hamburger a .ico-hamburger:after {

    content: "";

    display: block;

    position: absolute;

    left: 0;

    background-color: inherit;

    height: 2px;

    width: 100%;

    transition: all .2s ease 0s;

}



#global-header .header-persistent #menu-hamburger a .ico-hamburger:before {

    top: 0;

    transform-origin: left bottom;

}



#global-header .header-persistent #menu-hamburger a .ico-hamburger:after {

    bottom: 0;

    transform-origin: left top;

}



body.mobile-nav-open #global-header .header-persistent #menu-hamburger a .ico-hamburger {

    width: 0;

}



body.mobile-nav-open #global-header .header-persistent #menu-hamburger a .ico-hamburger:before,

body.mobile-nav-open #global-header .header-persistent #menu-hamburger a .ico-hamburger:after {

    left: 3px;

}



body.mobile-nav-open #global-header .header-persistent #menu-hamburger a .ico-hamburger:before {

    transform: rotate(45deg);

}



body.mobile-nav-open #global-header .header-persistent #menu-hamburger a .ico-hamburger:after {

    transform: rotate(-45deg);

}



/* -- Search strip */

#global-header .search-strip {

    padding: 15px;

    background: rgb(255 255 255 / 95%);

    width: 100%;

    position: absolute;

    opacity: 0;

    transform: translateY(-100%);

    transition: 0.2s all ease-in-out;

}



body.search-bar-open #global-header .search-strip {

    opacity: 1;

    transform: translateY(0);

}





/* -- Header Canvas */

#global-header .header-canvas {

    position: absolute;

    width: 0;

    height: 100vh;

    background: #ffffff;

    overflow: hidden;

    transform: translateZ(0);



}



#global-header .header-canvas:not(.full-width) {

    right: 0;

    transition: all .4s ease 0s;

}



/* --- Full Width Style */

#global-header .header-canvas.full-width {

    height: calc(var(--vh, 1vh) * 100);

    padding-top: 75px;

    left: 0;

    top: 0;

    transition: width .4s cubic-bezier(.77,0,.175,1) .2s;

}



body.mobile-nav-open #global-header .header-canvas:not(.full-width) {

    box-shadow: -10px 20px 20px rgba(21,28,37,.2);

    width: 300px;

    overflow-y: scroll;

}



body.mobile-nav-open #global-header .header-canvas.full-width {

    width: 100%;

    overflow-y: scroll;

}



/* ---- Line */

#global-header .header-canvas.full-width .line {

    margin-left: 20px;

    margin-right: 20px;

    position: relative;

    top: 13px;

    transition: width .4s cubic-bezier(.77,0,.175,1) .7s;

}



#global-header .header-canvas.full-width .line:after {

    content: "";

    height: 1px;

    position: absolute;

    width: 0;

    background-color: #f3f5fb;

    transition: width .6s cubic-bezier(.215,.61,.355,1) .6s;

}



body.mobile-nav-open #global-header .header-canvas.full-width .line:after {

    width: 100%;

}





#global-header .header-canvas:not(.full-width) #header-foreground {

    margin-top: 20px;

}



#global-header .header-canvas.full-width #header-foreground {

    margin-top: 35px;

}



/* -- UL Menu */

#global-header .header-canvas .menu:not(.full-width) {

    width: 300px;

}





#global-header .header-canvas.full-width .menu {

    width: 100%;

    opacity: 0;

    transition: all .6s cubic-bezier(.215,.61,.355,1) .6s;

    transform: translateY(10px);

}



body.mobile-nav-open #global-header .header-canvas.full-width .menu {

    width: 100%;

    opacity: 1;

    transform: translateY(0);

}



#global-header .header-canvas .menu ul {

    list-style: none;

    padding-left: 0;

}





#global-header .header-canvas .menu li a:active,

#global-header .header-canvas .menu li a:hover {

    background: #f8f8f8;

}



/* -- UL Menu submenu anchor */

#global-header .header-canvas .menu li.menu-item-has-children > a {

    position: relative;

    padding-right: 50px;

}



#global-header .header-canvas .menu li.menu-item-has-children > a:before,

#global-header .header-canvas .menu li.menu-item-has-children > a:after {

    content: '';

    display: block;

    background-color: #1e1e1e;

    width: 13px;

    height: 2px;

    position: absolute;

    right: 25px;

    top: 50%;

    transform: translateY(-50%);

    transition: all 0.2s ease-in-out;

}



#global-header .header-canvas .menu li.menu-item-has-children > a:after {

    transform: translateY(-50%) rotate(90deg);

}





/* -- UL Submenu */

#global-header .header-canvas .menu li.menu-item-has-children ul.sub-menu {

    height: 0;

    opacity: 0;

    overflow: hidden;

    transition: all 0.15s ease-in-out;

}



/* -- UL Submenu Anchor */

#global-header .header-canvas .menu li.menu-item-has-children ul.sub-menu li a {

    background: #f0f0f0;

    padding-left: 30px;

}



/* -- UL Submenu Opened Line  */

#global-header .header-canvas .menu li.menu-item-has-children > a.submenu-open:before {

    opacity: 0;

}



#global-header .header-canvas .menu li.menu-item-has-children > a.submenu-open:after {

    transform: rotate(180deg);

}



/* -- UL Submenu Opened  */

#global-header .header-canvas .menu li.menu-item-has-children > a.submenu-open ~ .sub-menu {

    height: 100%;

    opacity: 1;

}





/* -- UL Menu Anchor */

#global-header .header-canvas .menu li a {

    display: block;

    padding: 14px 20px;

    font-size: 17px;

    color: #1e1e1e;

    font-weight: 600;

    /*white-space: nowrap;*/

    text-decoration: none;

    transition: all 0.1s ease;

}



#global-header .header-canvas .menu li:not(:last-child) a {

    border-bottom: 1px solid #f2f2f2;

}







/* -- Language Switcher */

#global-header .header-canvas #language-switcher {

    padding: 10px 20px;

    margin-top: 20px;

    margin-bottom: 10px;

    opacity: 0;

    transition: all .6s cubic-bezier(.215,.61,.355,1) .6s;

    transform: translateY(10px);

}



body.mobile-nav-open #global-header .header-canvas #language-switcher {

    opacity: 1;

    transform: translateY(0);

}



#global-header .header-canvas #language-switcher ul {

    white-space: nowrap;

}



#global-header .header-canvas #language-switcher li {

    display: inline-block;

}



#global-header .header-canvas #language-switcher li a {

    display: block;

    font-size: 20px;

    font-weight: 500;

    transition: all 0.1s ease;

    font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;

}



#global-header .header-canvas #language-switcher li a:not(.current-language) {

    opacity: 0.5;

}



#global-header .header-canvas #language-switcher li:not(:last-child) a {

    margin-right: 20px;

}





/* -- Social Icons */

#global-header .header-canvas #social-icons {

    padding: 20px;

    font-size: 18px;

    width: 300px;

    border-top: 1px solid #f2f2f2;

}



#global-header .header-canvas.full-width #social-icons {

    padding: 20px;

    font-size: 18px;

    width: 100%;

    position: fixed;

    bottom: 10px;

    font-weight: 300;

    white-space: nowrap;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    border-color: transparent;

}



#global-header .header-canvas #social-icons a {

    color: #484848;

}

#global-header .header-canvas #social-icons a:not(:last-child) {

    margin-right: 17px;

}



#global-header .header-canvas.full-width #social-icons a:not(:last-child) {

    margin-right: 25px;

}



#global-header .header-canvas.full-width #social-icons a i {

    margin-right: 5px;

}





/* -- Overlay */

#global-header-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 0;

    background-color: #1e1e1e;

    opacity: 0;

    z-index: 40;

    pointer-events: none;

    transition: opacity .4s ease 0s,height 0s linear .5s;

}



body.mobile-nav-open #global-header-overlay {

    height: 100vh;

    opacity: .8;

    pointer-events: auto;

    transition: opacity .4s ease 0s,height 0s linear 0s;

}