/*  
---------------------------------------------------
Header large screens 12
---------------------------------------------------  
*/

/* Site Content / Footer Overlay */
body.header-12-lg #site-content::before { 
    content:"";
    position: fixed; top:0; bottom:0; z-index:902;
    width: 0;
    background-color: rgba(var(--body-bg-color1), 0);
    opacity:0.85;

    -webkit-transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
    transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
}
html[dir="ltr"] body.header-12-lg #site-content::before { 
    right: var(--large-header);
}
html[dir="rtl"] body.header-12-lg #site-content::before { 
    left: var(--large-header);
}

/* Overlay BG */
html.reveal-out body.header-12-lg #site-content::before { 
    width: calc(100% - var(--large-header));
    background: rgba(var(--body-bg-color1), 1); 
}
html.reveal-out body.body-bg-linear.header-12-lg #site-content::before { 
    background: linear-gradient(var(--body-bg-angle), rgba(var(--body-bg-color1), 1) 0%, rgba(var(--body-bg-color2), 1) 100%); 
}
html.reveal-out body.body-bg-radial.header-12-lg #site-content::before { 
    background: radial-gradient(farthest-side at var(--body-bg-start-perc) var(--body-bg-stop-perc), rgba(var(--body-bg-color1), 1) 0%, rgba(var(--body-bg-color2), 1) 100%); 
}

/* Header */
body.header-12-lg header#site-header { 
    position: fixed; top:0!important; bottom:0!important;
    overflow: hidden;
    width: var(--large-header); height:100vh;
    box-shadow: var(--header-box-shadow_h) var(--header-box-shadow_v) var(--header-box-shadow_b) rgba(var(--true-black), var(--header-box-shadow_o));

    -webkit-transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
    transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
}
html[dir="ltr"] body.header-12-lg header#site-header { 
    right:0; 
}
html[dir="rtl"] body.header-12-lg header#site-header { 
    left:0; 
}
html:not(.reveal-out) body.transparent-header-lg.header-12-lg header#site-header { 
    width: var(--large-header); max-width: var(--large-header);
}
html.reveal-out body.header-12-lg header#site-header {
    padding-bottom:0;
}

html.reveal-out body.header-12-lg header#site-header { 
    width: calc(50vw + (var(--large-header) /2));
    max-width: calc(50vw + (var(--large-header) /2));
    z-index:1002;

    -webkit-transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
    transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
}
html.reveal-out[dir="ltr"] body.header-12-lg header#site-header { 
    left:auto;
}
html.reveal-out[dir="rtl"] body.header-12-lg header#site-header { 
    right:auto;
}

html:not(.reveal-out) .header-12-lg.transparent-header-lg header#site-header { 
    box-shadow: none;
}
html.reveal-out body.header-12-lg.transparent-header-lg header#site-header { 
    width: 50vw;
}

html.reveal-out body.header-12-lg header#site-header,
html.reveal-out body.header-12-lg header#site-header.header-bg-solid,
body.header-12-lg header#site-header::after,
body.header-12-lg header#site-header.header-bg-solid::after { 
    background: rgba(var(--header-bg-color1), 1); 
}
html.reveal-out body.header-12-lg header#site-header.header-bg-linear,
body.header-12-lg header#site-header.header-bg-linear::after { 
    background: linear-gradient(var(--header-bg-angle), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}
html.reveal-out body.header-12-lg header#site-header.header-bg-radial,
body.header-12-lg header#site-header.header-bg-radial::after { 
    background: radial-gradient(farthest-side at var(--header-bg-start-perc) var(--header-bg-stop-perc), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}

html.reveal-out body.header-12-lg.transparent-header-lg header#site-header,
html.reveal-out body.header-12-lg.transparent-header-lg header#site-header.header-bg-solid { 
    background: rgba(var(--header-bg-color1), 1); 
}
html.reveal-out body.header-12-lg.transparent-header-lg header#site-header.header-bg-linear { 
    background: linear-gradient(var(--header-bg-angle), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}
html.reveal-out body.header-12-lg.transparent-header-lg header#site-header.header-bg-radial { 
    background: radial-gradient(farthest-side at var(--header-bg-start-perc) var(--header-bg-stop-perc), rgba(var(--header-bg-color1), 1) 0%, rgba(var(--header-bg-color2), 1) 100%); 
}

html.nav-down:not(.reached-top):not(.reveal-out) body.header-12-lg.transparent-header-lg header#site-header,
html.nav-up:not(.reached-top):not(.reveal-out) body.header-12-lg.transparent-header-lg header#site-header { 
    background: transparent;
}

html[dir="ltr"] body.header-12-lg:not(.transparent-header-lg):not(.no-header) #site { 
    padding-right: var(--large-header);
}

html[dir="rtl"] body.header-12-lg:not(.transparent-header-lg):not(.no-header) #site { 
    padding-left: var(--large-header);
}

/* Logo */
body.header-12-lg header#site-header #logo { 
    position: fixed; z-index:501;
}

html[dir="ltr"] body.header-12-lg header#site-header #logo {
    top: 0; right: 0; 
    transform: rotate(-90deg) translate(0, -100%);
    transform-origin: 100% 0;
}
html[dir="ltr"] body.header-12-lg header#site-header #logo.no-image {
    transform: rotate(-90deg) translate(0, -100%);
    transform-origin: 100% 0;
}

html[dir="rtl"] body.header-12-lg header#site-header #logo {
    left: 0;
    transform-origin: top left;
    transform: translateY(100vh);
}
html[dir="rtl"] body.header-12-lg header#site-header #logo.no-image {
    transform-origin: top left;
    transform: translateY(100vh) rotate(-90deg);
}

/* Burger expand */
body.header-12-lg header#site-header .expand-header {
    position: fixed; 
    display: block;
    width: var(--large-header); height: var(--large-header);
}
html[dir="ltr"] body.header-12-lg header#site-header .expand-header {
    top: calc(100vh - var(--large-header)); right:0; 
    font-size:0;
}
html[dir="rtl"] body.header-12-lg header#site-header .expand-header {
    top:0; left:0; 
}

/* Shopping Cart */
body.header-12-lg header#site-header nav.shopping-cart { 
    position: fixed;  
    width: var(--large-header); height: var(--large-header);
}
html[dir="ltr"] body.header-12-lg header#site-header nav.shopping-cart { 
    top: calc(100vh - var(--large-header) - var(--large-header));
    right: 0; 
}
html[dir="rtl"] body.header-12-lg header#site-header nav.shopping-cart {
    top: var(--large-header); 
    left: 0; 
}
body.header-12-lg header#site-header nav.shopping-cart button.open-cart,
html#ecwid_html.usn body#ecwid_body.header-12-lg header#site-header nav.shopping-cart .ec-cart-widget, 
html#ecwid_html.usn body#ecwid_body.header-12-lg header#site-header nav.shopping-cart .ec-cart-widget .ec-minicart, 
html#ecwid_html.usn body#ecwid_body.header-12-lg header#site-header nav.shopping-cart .ec-cart-widget .ec-minicart__body { 
    width: var(--large-header); height: var(--large-header);
}


/* All expanded elements */

/* Container */
body.header-12-lg header#site-header .container-fluid,
body.header-12-lg header#site-header .container { 
    position:relative; 
    width: calc(50vw - (var(--large-header) / 2));
    margin:0; padding:0; 

    -webkit-transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
    transition: 
        top 0.3s ease-in-out 0s,
        padding 0.3s ease-in-out 0s,
        padding-top 0.3s ease-in-out 0s,
        opacity 0.3s ease-in-out 0s,
        width 0.3s ease-in-out 0s,
        max-width 0.3s ease-in-out 0s,
        height 0.3s ease-in-out 0s,
        max-height 0.3s ease-in-out 0s,
        box-shadow 0.3s ease-in-out 0s,
        background-color 0.3s ease-in-out 0s;
}

html[dir="ltr"] body.header-12-lg header#site-header .container-fluid,
html[dir="ltr"] body.header-12-lg header#site-header .container { 
    left:var(--large-header);
}
html[dir="rtl"] body.header-12-lg header#site-header .container-fluid,
html[dir="rtl"] body.header-12-lg header#site-header .container { 
    right:var(--large-header); 
}

html[dir="ltr"].reveal-out body.header-12-lg header#site-header .container-fluid,
html[dir="ltr"].reveal-out body.header-12-lg header#site-header .container { 
    right:0; left:auto;
}
html[dir="rtl"].reveal-out body.header-12-lg header#site-header .container-fluid,
html[dir="rtl"].reveal-out body.header-12-lg header#site-header .container { 
    left:0; right:auto;
}

/* Row */
body.header-12-lg header#site-header .row { 
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-justify-content: center;
    justify-content: center;
    margin:0; padding: var(--base-spacing) 0;
    min-height: calc(100vh - var(--base-spacing) - var(--base-spacing));
}

body.header-12-lg header#site-header .site-search,
body.header-12-lg header#site-header nav.main,
body.header-12-lg header#site-header nav.secondary,
body.header-12-lg header#site-header nav.cta-links { 
    text-align: center;
    width: 100%;
}

body.header-12-lg header#site-header nav.main { 
    -ms-flex-order:1;
    order:1;
    padding: var(--base-half-spacing) 0;
}
body.header-12-lg header#site-header nav.cta-links {
    -ms-flex-order:2;
    order:2;
    padding: var(--base-half-spacing) 0;
}
body.header-12-lg header#site-header .site-search { 
    -ms-flex-order:3;
    order:3;
    padding: var(--base-half-spacing) 0;
}
body.header-12-lg header#site-header nav.secondary { 
    -ms-flex-order:4;
    order:4;
    -ms-align-self: flex-end;
    align-self: flex-end;
    padding: var(--base-half-spacing) 0;
}

/* Main Navigation */
body.header-12-lg header#site-header nav.main { 
    height:auto;
}

body.header-12-lg header#site-header nav.main>ul {
    display: block;
}

body.header-12-lg header#site-header nav.main ul li span::before { 
    display:none!important;
}

body.header-12-lg header#site-header .has-child > .expand-subpages,
body.header-12-lg header#site-header nav.main ul li.has-child>span::after { 
    font-size:20px;
    cursor:pointer;
    height:auto;
    min-height: calc(var(--large-header) / 2);
    line-height: calc(var(--large-header) / 2);
    padding-top:0;
    top: 50%; bottom:auto;
    transform: translateY(-50%);
}

body.header-12-lg header#site-header .has-child > .expand-subpages { 
    height: 100%;
    top: 0; transform: none;
}

body.header-12-lg header#site-header nav.main>ul>li>span>a,
body.header-12-lg header#site-header nav.main>ul>li.has-child>span>a { 
    padding: var(--base-half-spacing);
    min-height: calc(var(--large-header) / 2);
}

body.header-12-lg header#site-header nav.main ul ul>li>span>a,
body.header-12-lg header#site-header nav.main ul li.has-child ul span a { 
    padding: var(--base-half-spacing) calc(var(--base-half-spacing) * 2);
}

body.header-12-lg header#site-header nav.main ul ul { 
    display: none;
    position: relative!important; left: auto!important;
}

body.header-12-lg header#site-header nav.main ul ul {
    padding:0; 
}

body.header-12-lg header#site-header nav.main ul>li.open-child_mobile>ul { 
    display:block;
}

html[dir="ltr"] body.header-12-lg header#site-header nav.main ul li i.before { 
    margin-left:10px;
}

html[dir="rtl"] body.header-12-lg header#site-header nav.main ul li i.before { 
    margin-right:10px;
}

/* Site Search */
body.header-12-lg header#site-header .site-search { 
    margin:0 auto;
    width: 100%; max-width: 360px;
}
body.header-12-lg header#site-header .site-search .expand-search { 
    display: none;
}

/* Secondary Navigation */

body.header-12-lg header#site-header nav.secondary>ul {
    display: block;
    text-align: center;
}

body.header-12-lg header#site-header nav.secondary>ul>li>span>div,
body.header-12-lg header#site-header nav.secondary>ul>li>span>a,
body.header-12-lg header#site-header nav.secondary>ul>li>a  {
    padding: calc(var(--base-half-spacing) / 1.5);
    width:100%;
    display: block;
}

body.header-12-lg header#site-header nav.secondary ul li { 
    clear: both;
}

body.header-12-lg header#site-header nav.secondary ul li.dropdown .dropdown-menu { 
    width:100%;
    border:0 none; 
    position:relative!important; top:auto!important; right:0!important; left:0!important;
    transform:none!important;
    padding: calc(var(--base-half-spacing) / 2) 0;
}
body.header-12-lg header#site-header nav.secondary ul li.dropdown .dropdown-menu > a { 
    background:none;
    padding: calc(var(--base-half-spacing) / 2);
    text-align: center;
}

/* CTA Links */
html[dir="ltr"] body.header-12-lg header#site-header nav.cta-links .btn+.btn {
    margin:0 5px 0 -2px;
}
html[dir="rtl"] body.header-12-lg header#site-header nav.cta-links .btn+.btn {
    margin:0 -2px 0 5px;
}

/* Animate in */
html.reveal-out body.header-12-lg header#site-header nav.main>ul>li,
html.reveal-out body.header-12-lg header#site-header .site-search,
html.reveal-out body.header-12-lg header#site-header nav.secondary>ul>li,
html.reveal-out body.header-12-lg header#site-header nav.cta-links {
    -webkit-animation-duration: 0.75s;
    animation-duration:  0.75s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}