.wraper_header{
z-index:999;
width:100%;
direction:initial;
}
.wraper_header.static-header{
position:relative;
}
.wraper_header.floating-header{
position:absolute;
} .wraper_header_main{
width:100%;
}
body.admin-bar .wraper_header_main{
top:0;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
body.admin-bar .is-sticky .wraper_header_main{
top:32px !important;
}
.wraper_header_main > .container{
padding-top:25px;
padding-bottom:25px;
}
.header_main{
position:relative;
}
.header_main .brand-logo{
float:left;
text-align:center;
font-size:0;
}
.header_main .brand-logo img{
max-width:145px;
}
.top-bar-toggle{
position:relative;
z-index:2;
width:25px;
height:20px;
float:left;
margin-top:5px;
margin-left:30px;
cursor:pointer;
}
.top-bar-toggle span{
position:absolute;
display:block;
width:100%;
height:2px;
background-color:#0c121f;
transition:all 0.4s ease 0s;
-webkit-transition:all 0.4s ease 0s;
}
.top-bar-toggle span:nth-child(1){
top:0;
}
.top-bar-toggle span:nth-child(2){
top:calc(50% - 1px);
}
.top-bar-toggle span:nth-child(3){
bottom:0;
}
body.top-bar-menu-open .top-bar-toggle span{
background-color:#fff;
}
body.top-bar-menu-open .top-bar-toggle span:nth-child(1){
top:9px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
body.top-bar-menu-open .top-bar-toggle span:nth-child(2){
opacity:0;
visibility:hidden;
transform:scale(0);
-webkit-transform:scale(0);
}
body.top-bar-menu-open .top-bar-toggle span:nth-child(3){
bottom:9px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.top-bar-menu{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1;
background-color:rgba(0,0,0,0.9);
text-align:center;
opacity:0;
visibility:hidden;
transition:all 0.4s ease 0s;
-webkit-transition:all 0.4s ease 0s;
}
body.top-bar-menu-open .top-bar-menu{
opacity:1;
visibility:visible;
}
.top-bar-menu .menu-minimal-header-menu-container{
position:absolute;
top:50%;
left:0;
right:0;
width:400px;
max-width:100%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
visibility:unset !important;
} .top-bar-menu .menu-minimal-header-menu-container li.menu-item{
margin-bottom:30px;
padding-left:20px;
padding-right:20px;
color:#fff;
opacity:0;
visibility:hidden;
transform:translateY(20px);
-webkit-transform:translateY(20px);
transition:all 0.7s ease 0s;
-webkit-transition:all 0.7s ease 0s;
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item:last-child{
margin-bottom:0;
}
body.top-bar-menu-open .top-bar-menu .menu-minimal-header-menu-container li.menu-item{
opacity:1;
visibility:visible;
transform:translateY(0);
-webkit-transform:translateY(0);
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a{
position:relative;
color:inherit;
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:after,
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:before{
position:absolute;
top:50%;
content:" ";
display:inline-block;
width:30px;
height:1px;
background-color:#fff;
opacity:0;
transform:scale(0, 1);
-webkit-transform:scale(0, 1);
transition:all 0.2s ease-in-out 0s;
-webkit-transition:all 0.2s ease-in-out 0s;
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:after{
right:0;
transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
transform:translate(210%, 0);
-webkit-transform:translate(210%, 0);
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:before{
left:0;
transform:translate(-210%, 0);
-webkit-transform:translate(-210%, 0);
transform-origin:0% 50%;
-webkit-transform-origin:0% 50%;
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:hover:after,
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:hover:before{
opacity:1;
transform:scale(1, 1);
-webkit-transform:scale(1, 1);
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:hover:after{
transform:translate(150%, 0);
-webkit-transform:translate(150%, 0);
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item a:hover:before{
transform:translate(-150%, 0);
-webkit-transform:translate(-150%, 0);
} .top-bar-menu .menu-minimal-header-menu-container li.menu-item ul{
margin-top:25px;
}
.top-bar-menu .menu-minimal-header-menu-container li.menu-item ul li.menu-item{
margin-bottom:20px;
font-size:16px;
line-height:26px;
}
.header_main_action{
float:right;
margin-top:10px;
margin-left:25px;
text-align:center;
font-size:0;
}
.header_main_action ul > li{
position:relative;
display:inline-block;
vertical-align:top;
margin-right:25px;
}
.header_main_action ul > li:last-child,
.header_main_action ul > li:only-child{
margin-right:0;
}
.header_main_action ul > li i{
line-height:1;
cursor:pointer;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.header_main_action ul > li.floating-searchbar > i.fa-times,
.header_main_action ul > li.flyout-searchbar-toggle > i.fa-times{
position:absolute;
top:0;
left:0;
opacity:0;
visibility:hidden;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
body.floating-searchbar-active .header_main_action ul > li.floating-searchbar > i.fa-times,
body.flyout-searchbar-active .header_main_action ul > li.flyout-searchbar-toggle > i.fa-times{
opacity:1;
visibility:visible;
}
body.floating-searchbar-active .header_main_action ul > li.floating-searchbar > i.fa-search,
body.flyout-searchbar-active .header_main_action ul > li.flyout-searchbar-toggle > i.fa-search{
opacity:0;
visibility:hidden;
}
.header_main_action ul > li > .floating-search-bar{
position:absolute;
top:calc(100% + 30px);
right:0;
width:310px;
padding:20px;
background-color:rgba(255,255,255,0.9);
box-shadow:0px 2px 5px rgba(0,0,0,0.15);
opacity:0;
visibility:hidden;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
body.floating-searchbar-active .header_main_action ul > li > .floating-search-bar{
top:100%;
opacity:1;
visibility:visible;
}
.header_main_action ul > li > .floating-search-bar .form-row{
position:relative;
padding:0;
margin:0;
}
.header_main_action ul > li > .floating-search-bar .form-row input[type=search]{
width:100%;
height:44px;
padding:0px 40px 0px 15px;
background-color:#fff;
border:1px rgba(0,0,0,0.1) solid;
box-shadow:initial;
font-size:15px;
color:#1e0d32;
}
.header_main_action ul > li > .floating-search-bar .form-row button[type=submit]{
position:absolute;
top:5px;
right:0;
z-index:1;
width:40px;
height:100%;
background-color:initial;
border:none;
cursor:pointer;
}
.header_main_action ul > li > .floating-search-bar .form-row button[type=submit] i{
font-size:16px;
color:#1e0d32;
line-height:16px;
}
.header_main_action ul > li.header-cart-bar{
}
.header_main_action ul > li.header-cart-bar > .header-cart-bar-icon{
position:relative;
display:block;
margin-right:6px;
}
.header_main_action ul > li.header-cart-bar > .header-cart-bar-icon .cart-count{
position:absolute;
top:-8px;
right:-13px;
width:18px;
height:18px;
border-radius:50%;
font-size:10px;
color:#fff;
line-height:20px;
transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.header_main_action ul > li.header-hamburger{
cursor:pointer;
}
.header_main_action ul > li.header-hamburger > i{
font-size:20px;
} .wraper_flyout_search{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:999;
background-color:rgba(39,13,68,0.96);
opacity:0;
visibility:hidden;
transform:scale(1.3);
-webkit-transform:scale(1.3);
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
}
body.flyout-searchbar-active .wraper_flyout_search{
opacity:1;
visibility:visible;
transform:scale(1);
-webkit-transform:scale(1);
}
.wraper_flyout_search > .table{
display:table;
table-layout:fixed;
width:100%;
height:100%;
margin:0;
}
.wraper_flyout_search > .table > .table-cell{
position:relative;
display:table-cell;
width:100%;
height:100%;
padding:20px;
vertical-align:middle;
text-align:center;
}
.flyout-search-close{
position:absolute;
top:20px;
right:20px;
text-align:center;
}
.flyout-search-close i{
font-size:30px;
color:#fff;
line-height:30px;
cursor:pointer;
}
.flyout_search{
display:inline-block;
vertical-align:top;
width:100%;
max-width:1140px;
padding-top:80px;
padding-bottom:40px;
}
.flyout_search .form-row{
position:relative;
padding:0;
margin:0;
}
.flyout_search .form-row input[type=search]{
width:100%;
height:60px;
padding:0px 40px 0px 0px;
background-color:initial;
border:none;
border-bottom:3px #dedede solid;
box-shadow:initial;
font-size:20px;
color:#fff;
}
.flyout_search .form-row button[type=submit]{
position:absolute;
top:17px;
right:0;
z-index:1;
width:40px;
height:auto;
background-color:initial;
border:none;
cursor:pointer;
}
.flyout_search .form-row button[type=submit] i{
font-size:20px;
color:#fff;
line-height:20px;
} @media screen and (min-width:1200px){
} @media screen and (min-width:992px) and (max-width:1199px){
} @media screen and (min-width:768px) and (max-width:991px){
} @media screen and (min-width:480px) and (max-width:767px){ body.admin-bar .is-sticky .wraper_header_main{
top:0 !important;
}
.header_main_action{
margin-left:0;
}
} @media screen and (min-width:321px) and (max-width:479px){ body.admin-bar .is-sticky .wraper_header_main{
top:0 !important;
}
.top-bar-toggle{
float:right;
margin-left:22px;
}
.header_main_action{
margin-top:8px;
margin-left:0;
}
.header_main_action ul > li > .floating-search-bar{
width:230px;
}
} @media screen and (max-width:320px){ body.admin-bar .is-sticky .wraper_header_main{
top:0 !important;
}
.top-bar-toggle{
float:right;
margin-left:22px;
}
.header_main_action{
margin-top:8px;
margin-left:0;
}
.header_main_action ul > li > .floating-search-bar{
width:230px;
}
}