.navbar-static-top { .common-div; .mt(10px); .container { .block; .mt(10px); } } #header-social{ .left; & li{ .left; margin: 0 10px 0 5px; width:auto; text-align: center; } } .navbar-default{ .bg(#fff); border-color: transparent; } .navbar-default .navbar-nav > li > a{ color: #000; background-color: transparent; .size(14px); .oswald-regular(); .uppercase(); letter-spacing:1px; span { .oswald-regular(); } } .navbar-default .navbar-nav > .active > a{ color: black; background-color: #fff; } .header-main-signin{ .mt(-4px) !important; .pt(10px); letter-spacing: 1px; } .main-header{ width:100%; display:inline-block !important; .muli-regular; background-color: #fff; .pt(15px); //.mb(10px); & .main-header-maxW{ .maxW(); & .main-header-left{ width: 30%; .left; .pt(4px); } & .main-header-right{ position: relative; } } } .offer-center{ width:auto; margin:0px auto; } .offer-p{ .center(); } .header_pera_offer { /*.left;*/ .mt(6px); color:gray; .oswald-light(); .pr(8px); font-weight: normal; } & .header_pera_offer_pipe{ border-left: 1px solid gray; .pl(8px); .pr(8px); } .ph-no { display: block; .left(); .pl(2%); .pt(8px); font-weight: bold; .size(13px); } & .main-header-right{ width:35%; .right; position: relative; padding: 20px 0; & .company-phone-div{ display: block; float: right; & li{ list-style: none; text-decoration:unset; & a{ color:#464646; & span{ } } & a:focus{ text-decoration:none; } } & .wish-menu{ & :hover { color:#B1793A; } } & .header-main-signin{ margin: 0; padding: 0; .left; //.pr(15px); .pt(4px); #login_user_name { .pr(10px); } & li a b{ font-weight: normal !important; .size(14px) !important; .oswald-regular(); color:#5a5a5a; .transform(capitalize); letter-spacing: 0px; } & ul{ z-index: 9999 !important; .mt(10px); } } & .dropdown .dropdown-toggle b span{ font-weight: normal !important; .size(14px) !important; .oswald-regular; text-decoration:unset; } } } .navbar { & .navbar-top-collapse{ width:100%; .left(); //padding: 17px 0 5px 0; text-align: center; /*overflow: hidden !important;*/ display:inline-block; & ul.navbar-right{ float: none !important; width: auto; display: inline-block; text-align: left; & .divider{ display: none !important; } & li.active{ color:black; &:before{ content: ""; display: block; width: 100%; height: 0; position: absolute; top: 2px; z-index: 9999; } & a:hover{ background-color: transparent; color:black; } } & .top-custom-menu{ position: inherit; & .category-main-div{ display:none; position: absolute; width: 200px; background: white; margin:0; padding:0; top:115%; ul{ margin: 0; padding: 0; list-style: none; width:200px; li{ position: relative; margin: 0; padding: 10px 0px 5px 15px; height: 35px; width:100%; & a{ color:black; .size(13px); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; width:100%; .oswald-light(); } &:hover{ background:@theme-color; padding-left: 25px; transition:0.5s; } } ul{ display:none; position: relative; top: -27px; left: 100%; padding: 0; list-style: none; background: white; li{ float:none; width:100%; } ul{ top: -27px; left: 100%; position: relative; background: white; } } } } } & .custom-menu-inside-div{ position: relative; background: white; z-index:9999; box-shadow: 0 0 5px 0 #ddd; & .custom-menu-inside-left-div{ width:60%; .left; padding: 0% 0 2% 2%; & .category-heading-div{ width: 32%; .left; padding: 15px 20px 0 20px; display: table; & .category-heading-center{ display: table-cell; & a{ .size(14px); .muli-regular; color:@theme-color; letter-spacing: 1px; } & p{ .size(14px); color:@theme-color; } & .category-heading-p-hr{ padding: 0; .mb(15px); .mt(5px); width: 100px; .left; border-top: 1px solid @theme-color; } & h4{ clear:both; & a{ color:black; .size(13px); .muli-regular; color: gray; &:hover{ color:black; } } } } } & li{ width: 50%; } } & .custom-menu-inside-right-div{ width:40%; .left; & .menu-right-side-img-div{ width:100%; & .menu-right-side-img{ width:auto; max-width:100% } } } & .custom-menu-inside-footer{ width:100%; display: inline-block; .pt(1%); & .custom-menu-inside-footer-center{ text-align: center; & .footer-image-div{ width:33%; .left; & img{ width: auto; max-width: 45%; .left; } & a{ .size(13px); .muli-regular; float: left; white-space: nowrap; width: 150px; overflow: hidden; text-overflow: ellipsis; .mt(20%); margin-left: 10px; color:black; } } } } } } } } .custom-menu-inside-maxW figure { margin: 0 !important; } .navbar-brand { height: 65px; .center; float:none !important; padding:0; img { max-height:65px !important; height: auto !important; width: auto; max-width: 100%; margin-top: unset; .center; } } .header-stick #nth-menu{ top: 80% !important; } #nth-menu{ display:none; position: absolute; width: 80%; top: 92%; left:50%; background: white; z-index:9999; box-shadow: 0 0 5px 0 #ddd; } .static-custom-menu-inside-maxW{ width:100% !important; } .dropdown-menu { min-width: 120px !important; z-index: 9999 !important; color:@theme-color !important; } .custom-menu-inside-maxW{ display:block; margin:0px auto; } .wish_no_count { .oswald-regular(); .my_wish_quantity { .oswald-regular(); } } .wish_count{ background: transparent; color:#fff; padding:0; .oswald-regular(); } .my_cart_quantity{ background: white; color: #464646; font-weight:normal; padding:0; } /*Animation*/ .top-animation{ -webkit-animation:animateright 0.3s; animation:animatetop 0.3s; transition:0.3s; } @-webkit-keyframes animatetop{ from{top:-20px;opacity:0;} to{top:100%;opacity:1;} } @keyframes animatetop{ from{top:-20px;opacity:0;} to{top:100%;opacity:1;} } /*Left to right*/ .left-to-animation{ -webkit-animation:animateright 1s; animation:animateleftright 1s; transition:1s; } @-webkit-keyframes animateleftright{ from{width:0px;} to{width:100%;} } @keyframes animateleftright{ from{width:0px;} to{width:100%;} } .main-header-right-bottom { display:inline-block; .left; & #header-cart-li{ float: right; padding-right: 10px; .size(12px); & :hover { color:@color-black; } } & .mr-common{ .pr(9px); .pl(5px); .left; .oswald-light(); color:@color-black; .size(13px); } & li{ list-style: none; } } .header_language_selector{ width:50%; .left; } .header_dropdown_language{ float: left; width: auto; .mr(3%); } .header_curency_selector{ width: auto; .mr(2%); .left; } .header_admin_border{ padding-left:10px; } .header_btn_style{ border:none !important; background-color:white !important; color: black !important; .oswald-regular(); text-transform: capitalize; color:#5a5a5a; } .container{ width:90% !important; padding-left: unset; padding-right: unset; max-width: 1400px !important; } .header_search_box { box-sizing: border-box; border: 0.5px solid gray; .size(16px); background-color: white; background-position: 10px 10px; background-repeat: no-repeat; padding:10px; position: relative; width: 250px; } .btn-srch { border-radius: unset; border: 1px solid transparent; position: absolute; top: 11px; background: transparent; right: 5px; } .header_form{ padding-left: 10px; } .custom-menu-inside-div-nth-child{ width: 1200px !important; & .custom-menu-inside-maxW-nth-child{ width:100% !important; } } .first-level-category{ width:100%; display:inline-block; .left; .first-level-category-li{ width: 100%; /*.pl(20px); background:#eee; border-bottom:1px solid #CCC;*/ & .first-level-left-div{ width:30%; background: white; border-bottom: 1px solid #E4E4E4; border-right: 1px solid #E4E4E4; padding: 5px 0 5px 0; & .first-level-category-image{ .left; .pl(30px); width:30%; & img{ height: 50px; width: 50px; } } & .first-level-category-a{ color: @color-black; .size(14px); padding: 15px 0 15px 30px; display: inline-block; width: 60%; position: relative; .oswald-light(); .uppercase(); letter-spacing: 1px; } } .second-level-category{ position: absolute; left: 25%; top:10%; display:none; } } } .header-search-li { display: block; font-size: 11px; float:right; .pr(0px) !important; .pl(10px); .mt(1px); } .active-li{ border-right: 5px solid @theme-color !important; .pl(25px) !important; transition: 0.8s; } .header-stick .custom-menu-inside-div{ //top:90% !important; } .custom-menu-nth-div{ width: 70% !important; left: 15% !important; } .toggel_div{ position: absolute; right: 0; top: 0%; width:70%; height:0; & .toggel-inside-div{ width: 100%; display: inline-block; padding: 0% 0 0 3%; background:white; } } .col_1{ width: 35%; } .col_1 .sub_menu{ float: none; .mt(1%); } .menu_1_div{ width: 100%; display:none; min-height:420px; max-height:420px; padding:5% 5% 5% 0; } .menu_1_column_div{ max-width: 100%; overflow-x: auto; } .sub_menu{ list-style-type: none; padding:0; padding:0 15px 10px 0; width:180px; max-height: 380px; display: flex !important; flex-direction: column; flex-wrap: wrap; } .sub-menu-ul-heading:last-child{ .pb(15px) !important; } .sub-menu-ul-heading{ .pr(20px); width:180px; .pb(5px); } .sub_menu .menu_heading{ .size(14px); color:@theme-color; .pb(15px); .muli-semibold(); .ellipsis(); &:hover{ color: @theme-color; } } .third-level-ul{ list-style: none; .pl(0px); } .third-level-li{ padding: 0px 0px 12px 5px; & .sub_menu_list{ color:gray; .size(13px); .ellipsis(); &:hover{ color:black; } } } .header-stick{ position: fixed; top:0px; background:#fff; left:0; transition: 0.3s; border-bottom: 1px solid #eee; padding: 17px 0 5px 0; } .navbar-static-top .navbar-header .navbar-brand .logo-stick{ position: fixed; top: 0px; z-index: 1; max-height: 39px !important; .mt(15px) !important; left: 5%; max-height:40px !important; } .transparentbg{ background: rgba(255, 255, 255, 0.9) !important; z-index: 9999; position: absolute; top: 0px; bottom: 0; width: 100% !important; height: 100% !important; transition: opacity 1s; max-width:100% !important; .pt(15px); } .anim-search { transition: all 0.3s ease 0s; width: auto; max-width:250px; box-shadow: 0 10px 12px rgba(0,0,0,.175); position: absolute; top: 100%; left:-5%; z-index: 9999; display: block; background-color: #fff; visibility: hidden; .input-group { position:relative; .oe_search_button { background-color: transparent; border-color: transparent !important; color: #222; position: absolute !important; top: 0 !important; right: 0 !important; z-index: 99999; height: 45px; transition: all 0.3s ease 0s; } .form-control { border-bottom: 2px solid #222 !important; background: transparent; box-shadow: unset !important; border-radius: 0 !important; transition: all 0.3s ease 0s; height: 45px; width:100%; } } } .clarico_search_border { border-bottom: 1px solid #222 !important; border-top: unset !important; border-left: unset !important; border-right: unset !important; .left(); } .clarico_close{ display:none; position:absolute; top: -380%; right: -120%; z-index: 2; height: 34px; width: 34px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); border: solid 1px rgba(0, 0, 0, 0.06); border-radius: 50%; font-size: 15px; line-height: 32px; color: #878787; text-align: center; cursor: pointer; } .clarico_popup { transition: all 200ms ease-in; transform: scale(1); } .zoom-animation { -webkit-animation:animatezoom 0.6s; animation:animatezoom 0.6s } .fa_icon_search { .left(); } .scroll_remove { overflow: hidden; } sup{ top: -0.8em; } .account-ul{ width:200px; border-radius: 0; & li{ padding: 12px 6px 6px 6px; & .fa_common_style_header{ padding: 3px 5px 0 15px; color:@theme-color; .size(12px); } & .ul_class_admin_name{ & a{ color:gray; .muli-regular; .size(13px); letter-spacing: 0; } } } & #o_logout{ padding: 10px 40px 10px 40px; .mt(14px); .mb(0px); width: 100%; .pl(9px); .pr(9px); .pb(4px); a { color:#fff; &:hover { .bg(@theme-color); } } } } .nav > li > a { position: relative; display: block; padding: 10px 14px !important; } .top_menu{ display:none; } /*Click to scroll top*/ .scrollup-div{ position: fixed; right: 15px; bottom: 15px; background: black; width: 35px; height: 35px; border-radius: 100%; display:none; cursor: pointer; transition:0.3s; z-index:9999; &:hover{ background:@theme-color; } .scrollup-i{ padding: 6px 0px 0 10px; .size(21px); color: white; font-weight: 900; width: 35px; height: 35px; transition:0.3s; } } /*New Static Menu*/ .content-cat{ width: 92%; display: block; .center; margin: 0px auto; .pt(10px); & .title_cat{ .size(14px); font-family:@m-semibold; .capitalize; letter-spacing: 2px; margin: 10px 0 0 0; color:gray; } & .count_cat{ color:gray; .size(12px); } } .column-main{ & .cat-column{ width:25%; padding:2% 1%; .left; position: relative; } } .thumb{ width: 100%; & .menu-cate-image{ width: 100%; max-width:100%; max-height: 100%; max-width: 1400px; display: block; margin: 0px auto; } } .block-cate{ .pt(8%); border-top: none !important; .button_cat{ position: absolute; top: 5%; width: 92%; padding: 10px 10px 10px 10px; .center; .size(12px); .muli-bold; .uppercase; letter-spacing: 1px; border:1px solid @theme-color; &:before{ content: ''; position: absolute; top: auto; left: 47%; border-bottom-width: 7px; border-bottom-style: solid; border-bottom-color: #fff; border-top-style: solid; border-top-color: #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; z-index: 2; border-bottom: 0; border-top-width: 8px; bottom: -6px; } &:after{ content: ''; position: absolute; top: auto; left: 47%; border-top-width: 7px; border-bottom-style: solid; border-bottom-color: @theme-color; border-top-style: solid; border-top-color: @theme-color; border-left: 4px solid transparent; border-right: 4px solid transparent; z-index: 1; border-bottom: 0; bottom: -7px; } } } .block-cate-down{ border-top: none !important; .button_cat{ position: absolute; bottom: -33px; width: 92%; padding: 10px 10px 10px 10px; .center; .size(12px); .muli-bold; .uppercase; letter-spacing: 1px; border:1px solid @theme-color; &:before{ content: ''; position: absolute; top: -6px; left: 47%; border-bottom-width: 7px; border-bottom-style: solid; border-bottom-color: #fff; border-top-width: 0; border-top-style: solid; border-top-color: #fff; border-left: 4px solid transparent; border-right: 4px solid transparent; z-index: 2; } &:after{ content: ''; position: absolute; top: -7px; left: 47%; border-bottom-width: 7px; border-bottom-style: solid; border-bottom-color: @theme-color; border-top-style: solid; border-top-color: @theme-color; border-left: 4px solid transparent; border-right: 4px solid transparent; z-index: 1; border-top: none; } } & .content-cat{ .center; width: 92%; display: block; .pb(6%); margin: 0px auto; & .title_cat{ .size(14px); font-family:@m-semibold; .capitalize; letter-spacing: 2px; margin: 0 0 0px 0; color:gray; & .count_cat{ color:gray; .size(12px); } } } } .menu-cate-hover{ background:@theme-color; border:2px solid @theme-color !important; color: white !important; &:before{ border-bottom-color: @theme-color !important; border-top-color: @theme-color !important; } &:after{ border-bottom-color: @theme-color !important; border-top-color: @theme-color !important; } } .opacity-full{ opacity: 1 !important; transition: opacity 0.8s; } .opacity{ opacity:0.3; transition: 0.3s ease-in; } .clarico_search_border { border-bottom: 1px solid #222 !important; border-top: unset !important; border-left: unset !important; border-right: unset !important; .left(); } .clarico_popup { transition: all 200ms ease-in; transform: scale(1); } .zoom-animation { -webkit-animation:animatezoom 0.6s; animation:animatezoom 0.6s } .fa_icon_search { .left(); } .scroll_remove { overflow: hidden; } /*Compare Error*/ .comparelist_error{ .muli-regular; .size(15px); position: fixed; bottom:3%; right:10%; z-index:9999; background:@theme-color; padding:1%; color:white; display:none; } .block-none{ display:none; position: absolute !important; width: 80%; left: 10% !important; top: 92%; } .static_menu_mobile_view{ display:none; } /* Load icon style in Layout */ .cus_theme_loader_layout svg path, .cus_theme_loader_layout svg rect{ fill: @theme-color; } .cus_theme_loader_layout svg{ .center; } .cus_theme_loader_layout{ position: fixed; top: 0; bottom: 0; left:0; right:0; width: 100%; background: rgba(0,0,0,0.7); z-index: 9999; } .cus_theme_loader_div_layout{ .mt(29%); .common-div; } .oe_login_buttons { width: 50%; float: left; } .login_modle { position: fixed; width: 100%; top: 0; left: 0; bottom: 0; right: 0; height: 100vh; z-index: 9999; visibility: hidden; background: rgba(255,255,255,0.7); .login-main { max-width:800px; display:block; margin: 0px auto; .login-form-left { width: 100%; padding: 10px; box-shadow: 0px 0px 5px #ccc; z-index: 9999; background: white; .mt(10%); display:inline-block; .pb(5%); border-bottom: 4px solid @theme-color; & .left-cnt{ margin-left: 3%; position: relative; & .close-btn{ position: absolute; z-index: 2; top: 0; right: 15px; height: 34px; width: 34px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15); border: solid 1px rgba(0, 0, 0, .06); border-radius: 50%; font-size: 15px; line-height: 32px; color: #878787; text-align: center; cursor: pointer; } /*& .login-form-left-h2{ } & .email-label-wishlist , .password-label-wishlist{ .muli-regular; .size(13px); font-weight: normal; & .mandatory{ color:red; } }*/ & #login , #password{ width: 70%; height: 40px; border-radius: 0; border: 0; padding-left: 10px; border-bottom: 1px solid #000 !important; &:focus{ border-bottom: 1px solid @theme-color !important; border:0; box-shadow:0; } } } } } } .login-form-left-content { display:block; width: 60%; float:left; } .wish_login_img_div { display:block; width:40%; float:left; img { width:auto; max-width:100%; display:block; margin:0px auto; } } .login-form-left-h2{ .mb(10px); } .login-form-hr { .mt(0); } .email-label-wishlist , .password-label-wishlist{ .muli-regular; .size(13px); font-weight: normal; & .mandatory{ color:red; } } ul#top_menu{ > li.active{ border-top:2px solid @theme-color; .mt(-2px); } > li{ position: static; } } .active_menu { border-top:2px solid @theme-color; .mt(-2px); } .category-mobile-view{ display:none; } .fa .fa-chevron-right{ display:none; } .expand-div{ padding:0; } #top_menu ul.dropdown-menu{ right:auto; // top: 90%; // width:100%; & .active > a{ background-color : @theme-color !important; } } .header-stick #top_menu ul.dropdown-menu{ // top:90% !important; } .js_searchBox { display: block; .right(); .pr(5px); .pt(2px); a { font-size: 14px; position: relative; z-index: 15; display: inline-block; color:#464646; &:focus{ text-decoration: none; color: #464646; } i{ .size(14px); } } .close_icon { display: none; } } /* Header Style One */ .main-header-new { .main-header-left { display: none; } .company-phone-div{ .mt(0) !important; .h_style_searchbox{ opacity: 1 !important; width: 350px !important; transition: unset !important; .left() !important; .p(0); } .header-social-new{ .mt(10px); } } } .container-style-new { // compare icon .header_newstyle_icon { display: inline-block; width: 30%; .pt(3%); .right(); li{ list-style: none; text-decoration: unset; } } // header right section .main-header-right-new { display: inline-block; width: 30%; .right(); .pt(2%); .login_acc_new_style { .right(); .mt(15px); .mr(10px); ul{ .p(0); li{ list-style: none; text-decoration: unset; .header_admin_border{ .p(0); } } } } .header_newstyle_icon { .right() !important; .p(0) !important; } .pricelist_right{ .right(); .mt(5px); } #header-social { width: unset !important; } } .navbar-top-collapse{ .mt(0); } } /* Footer new style */ .footer_new_style{ .company_details{ width:30%; .left(); .span_lbl{ display: inline-block; } } .footer_page_new{ width:40%; .left(); } .news_letter { width:30%; .left(); } } #top_menu .dropdown { ul.dropdown-menu >li >a { padding: 7px 20px; span { .oswald-regular(); text-transform: uppercase; font-size: 13px; letter-spacing: 1px; } } ul.dropdown-menu >li.active >a { &:hover { color:#fff; } } } .navbar-header-container,.navbar-top-collapse-container { .block; } .main-header-before { display: inline-block !important; width: 100%; .mt(15px); } .main-header-before-maxW { .block; } .company_logo_main { display: block; float: right; width: 30%; } .pricelist_contact_conatiner { display:block; width:35%; float:right; padding: 20px 0; } .company_pricelist { display: inline-block; .company_pricelist_container { padding: 1px 7px; } a.header_btn_style { padding:0; .bg(transparent) !important; } } .company_pricelist a.header_btn_style { color: #000 !important; } .header_style_logo_stick { display:none; } .header-stick .header_style_logo_stick { position: fixed; top: 0px; z-index: 1; max-height: 39px !important; .mt(15px) !important; left: 5%; max-height:40px !important; } .mr-common { display:inline-block; } .navbar-header { .navbar-brand.logo { display:none; } } .company_logo { display: block; margin: 0px auto; text-align: center; float: none !important; height: 65px; img { max-height: 70px !important; height: auto !important; width: auto; max-width: 100%; margin:0px auto; } } .header_cart_default { .cart-update { display:none; } .cart_style_2 { display: inline-block; a { color:#464646; } } } #header-wishlist { display:none; } #user_sign_in { padding: 0 7px; } .company_language { .ul_margin { .btn-group { >ul { border-radius: 0; box-shadow: unset; > li >a { .oswald-regular(); line-height: 180% !important; color: #666 !important; } } } } } .header_curency_selector { ul { border-radius: 0; box-shadow: unset; >li>a>span { .oswald-regular(); line-height: 180% !important; color: #666 !important; } } } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; text-decoration:none; } //default_check_box .s_website_form{ & .radio label, .checkbox label{ padding:0; } & input[type="radio"], input[type="checkbox"]{ margin: 8px 0 0; } & label > input[type="checkbox"]{ vertical-align: top; padding: 0 5px; } & .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{ position: relative; margin-top: 2px; } } //category changes @media (min-width:1200px) { .main_ctg_list { display: inline-block; width: 30%; max-height: 450px; overflow: auto; .first-level-category-li .first-level-left-div { width: 100%; } } .sub_ctg_list_main { display: inline-block; width: 70%; position: absolute; top: 0; } .toggel_div { left:0; right: auto; width:100%; } .first-level-category .first-level-category-li:last-child .first-level-left-div { border-bottom:0; } }