// imports @import "elements.less"; @import "colors.less"; @import "reset.less"; @import "form-elements.less"; // reset body { -webkit-font-smoothing: subpixel-antialiased; font-family: 'Open Sans', sans-serif; font-weight: 400; background: @bg; color: @default-font-color; font-size: 14px; } ::-webkit-input-placeholder { color: #38424a; } :-moz-placeholder { /* Firefox 18- */ color: #38424a; } ::-moz-placeholder { /* Firefox 19+ */ color: #38424a; } :-ms-input-placeholder { color: #38424a; } // top .nav-mobile, .search-mobile, .login-mobile, .cart-mobile { display: none; } .top { position: static; width: 100%; height: 150px; background: @top-bg; z-index: 9999; } .top-links { background: @top-links-bg; border-bottom: 1px solid @top-links-border-bottom; height: 30px; } .top-links a { color: @top-links-link-color; text-decoration: none; font-size: 11px; font-weight: 400; } .top-links a:hover { color: @top-links-link-color-hover; } .top-links a > i { padding: 0 3px 0 0; } .top-links > .inner { width: 1180px; margin: 0 auto; height: 30px; position: relative; } .top-links .c-service { float: left; height: 30px; } .top-links .c-service > a { display: inline-block; margin: 7px 0 0 0; } .top-links .links { margin: 0 auto; position: absolute; left: 0; right: 0; width: 500px; } .top-links .links > ul { list-style-type: none; white-space: nowrap; text-align: center; font-size: 0; } .top-links .links > ul li { display: inline-block; padding: 0 10px 0 0; } .top-links .links > ul li:before { display: inline-block; content: "\f111"; font-size: 5px; font-family: 'FontAwesome'; color: @top-links-link-color; padding: 0 10px 0 0; position: relative; top: 3px; } .top-links .links > ul li:first-child:before { content:""; display: none; } .top-links .links > ul li > a { font-size: 11px; display: inline-block; margin: 7px 0 0 0; vertical-align: middle; } .logout-btn { margin: 0; border-left: 1px solid @top-links-border-bottom; border-right: 1px solid @top-links-border-bottom; display: inline-block; padding: 7px 10px; height: 30px; vertical-align: top; } .login-reg { float: right; height: 30px; } .login-reg-btn { margin: 0; border-left: 1px solid @top-links-border-bottom; border-right: 1px solid @top-links-border-bottom; display: inline-block; padding: 7px 10px; height: 30px; vertical-align: top; } .login-reg-dropdown .login-reg-btn { background: @top-links-border-bottom; color: @top-links-link-color-hover; } .login-dropdown {display: none;} .login-reg-dropdown .login-dropdown { display: block; position: absolute; right: 0; top: 30px; background: @top-links-border-bottom; width: 300px; padding: 0 15px 15px 15px; color: @login-dropdown-font-color; z-index: 99999999; } .login-dropdown .title { width: 100%; border-bottom: 1px solid @login-dropdown-font-color; font-family: 'geomanistbook'; font-size: 14px; text-transform: uppercase; padding: 0 0 5px 0; margin: 15px 0 10px 0; } .login-dropdown .input-row { height: 65px; } .login-dropdown .input-row > label { display: block; font-size: 12px; font-weight: 600; height: 19px; } .login-dropdown .input-row > label > span { display: inline; color: #e5e8ed; } .login-dropdown .input-row > .error-msg { display: none; } .login-dropdown .error > .error-msg { height: 12px; color: @error; font-size: 11px; display: block; } .login-dropdown .input-row > .form-check > .error-msg { display: none; } .login-dropdown .input-row > .form-check > .error-msg { height: 12px; color: @error; font-size: 11px; display: block; } .login-dropdown .input-row > label > .fg-passw { float: right; display: inline-block; } .login-dropdown > .btn { margin: 0 0 10px 0; font-size: 14px; color: @button-color; padding-top: 5px; } .login-dropdown > p, .login-dropdown > p > a { font-size: 12px; } .or { margin: 15px 0 15px 0; height: 1px; border-bottom: 1px solid @or-line; position: relative; } .or > span { display: inline-block; position: absolute; margin: 0 auto; top: -10px; left: 0; right: 0; padding: 0 10px; text-align: center; } .or > span > span { display: inline-block; background: @top-links-border-bottom; font-family: 'geomanistbook'; font-size: 10px; text-transform: uppercase; padding: 0 5px; color: @or-line; } // top-middle - logo, searc, cart .top-middle { background: @top-middle-bg; height: 80px; position: relative; background: @top-bg; z-index: 999; } .top-middle > .inner { width: 1180px; margin: 0 auto; } .logo { display: block; border: none; width: 250px; height: 50px; background: url('../img/logo_web.png') center no-repeat; background-position: left; background-size: contain; float: left; margin: 15px 0 0 0; } .search { display: block; width: 580px; height: 40px; position: absolute; left: 0; right: 0; top: 20px; margin: 0 auto; } .cart { float: right; color: @cart-color; text-align: right; font-size: 16px; font-family: 'geomanistbook'; margin: -22px 0 0 0; text-transform: uppercase; } .cart > span { display: block; } .cart > span > i { padding: 0 8px 0 0; } .cart > .desc { float: right; color: @cart-desc-color; font-family: 'Open Sans', sans-serif; font-size: 12px; text-transform: lowercase; } .cart:hover > .desc { text-decoration: underline; } .cart:hover { text-decoration: none; } // main nav .nav { border-top: 1px solid @nav-border-color; border-bottom: 1px solid @nav-border-color; height: 40px; background: @top-bg; z-index: 99; } .nav > .inner { width: 1180px; height: 40px; margin: 0 auto; } .nav > .inner > ul { -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; display:-ms-flexbox; display:-webkit-box; display:-webkit-flex; display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; position:relative; width:100%; height: 38px; } .nav > .inner > ul li { box-sizing: border-box; height: 38px; -ms-flex:1 1 auto; -webkit-box-flex:1; -webkit-flex:1 1 auto; flex:1 1 auto; position:relative; border-left: 1px solid @nav-border-color; } .nav > .inner > ul li:last-child { border-right: 1px solid @nav-border-color; } .nav > .inner > ul li > a { color: @nav-color; height: 38px; -ms-flex-align:center; -ms-flex-pack:center; -webkit-align-items:center; -webkit-box-align:center; -webkit-box-pack:center; -webkit-justify-content:center; align-items:center; display:-ms-flexbox; display:-webkit-box; display:-webkit-flex; display:flex; justify-content:center; line-height: 14px; font-size: 13px; font-family: 'geomanistbook'; text-transform: uppercase; } .nav > .inner > ul li > a:hover { color: @nav-hover-color; text-decoration: none; } // footer .footer { position: relative; z-index: 0; } .footer > .social { background: @top-links-bg; border-top: 1px solid @top-links-border-bottom; border-bottom: 1px solid @top-links-border-bottom; height: 70px; } .footer > .social > .inner { width: 1180px; text-align: center; margin: 0 auto; } .footer > .social > .inner > a { display: inline-block; width: 36px; height: 36px; margin: 16px 5px 0 5px; color: @top-links-link-color; text-align: center; } .footer > .social > .inner > a:hover { color: @top-links-link-color-hover; background: @social-link-hover; } .footer > .social > .inner > a > i { font-size: 18px; padding: 10px 0 0 0; z-index: 2; } .copyright { background: @copyright-bg; color: @top-links-link-color; text-align: center; padding: 15px 0; font-family: 'geomanistlight'; font-size: 12px; text-transform: uppercase; border-top: 1px solid @top-links-border-bottom; border-bottom: 1px solid @top-links-border-bottom; } .bottom-boxes { background: @copyright-bg; color: @top-links-link-color; } .bottom-boxes > .inner { width: 1180px; margin: 0 auto; display: table; } .bottom-boxes > .inner > .box { width: 25%; display: table-cell; border-left: 1px solid @top-links-border-bottom; padding: 20px 20px; } .bottom-boxes > .inner > .last { border-right: 1px solid @top-links-border-bottom; } .bottom-boxes > .inner > .box > .footer-title { font-size: 16px; color: @bottom-box-title; font-family: 'geomanist_regularregular'; text-transform: uppercase; margin: 0 0 15px 0; } .bottom-boxes > .inner > .box > .footer-title > i { display: none; } .bottom-boxes > .inner > .box > .footer-dropdown > ul { list-style: none; font-size: 12px; } .bottom-boxes > .inner > .box > .footer-dropdown > ul li { display: block; padding: 0 0 1px 13px; position: relative; } .bottom-boxes > .inner > .box > .footer-dropdown > ul li:before { display: inline-block; content: "\f111"; font-size: 5px; font-family: 'FontAwesome'; color: @top-links-link-color; padding: 0 10px 0 0; position: absolute; top: 9px; left: 0px; } .bottom-boxes > .inner > .box > .footer-dropdown > ul li a, .bottom-boxes > .inner > .box > .footer-dropdown > p > a { color: @bottom-box-color; font-size: 12px; } .bottom-boxes > .inner > .box > .footer-dropdown > ul li a:hover, .bottom-boxes > .inner > .box > .footer-dropdown > p > a:hover { color: @bottom-box-color-hover; } .bottom-boxes > .inner > .box > .footer-dropdown > p { font-size: 12px; margin: 0 0 10px 0; } .bottom-boxes > .inner > .box > .footer-dropdown > p > strong { color: @bottom-box-title; } .bottom-boxes > .inner > .box > .footer-dropdown .input-container { position: relative; height: 36px; overflow: hidden; } .bottom-boxes > .inner > .box > .footer-dropdown .txt { margin: 0 0 10px 0; } .bottom-boxes > .inner > .box > .footer-dropdown .search-btn { width: 36px; height: 36px; background: @button-2-color url('../img/newsletter-btn-bg.png') no-repeat center; } // main .main { padding-top: 30px; } .cart-dropdown { display: none; } .cart:hover .cart-dropdown { display: block; position: absolute; top: 40px; right: 0; width: 500px; z-index: 8889; background: #fff; border: 10px solid #38424a; padding: 0 15px 15px 15px; text-align: left; color: #38424a; } .cart-dropdown > .title { width: 100%; border-bottom: 1px solid #e5e8ed; font-family: 'geomanistbook'; font-size: 14px; text-transform: uppercase; padding: 0 0 5px 0; margin: 15px 0 10px 0; } .cart-dropdown > .btn { margin: 0 0 10px 0; font-size: 14px; color: #ffffff; padding-top: 5px; text-decoration: none; } .cart-dropdown > .btn > i { padding: 0 7px 0 0 ; } .cart-dropdown > table { border-collapse: collapse; } //prod-categories .prod-categories { background: @prod-categories-bg; width: 100%; padding: 30px 0 0 0; } .cat, .cat:hover { float: left; padding: 0 10px; width: 25%; display: block; text-transform: uppercase; text-decoration: none; cursor: pointer; margin: 0 0 30px 0; } .cat > .img-container { position: relative; border: 1px solid @img-count-border-color; cursor: pointer; } .cat > .img-container > img { width: 100%; height: auto; display: block; } .prod-count { display: none; } .cat:hover > .img-container > .prod-count { display: block; position: absolute; background: #333; top: 0; left: 0; width: 100%; height: 100%; background: @prod-count-bg; } .cat > .img-container > .prod-count > span { display: block; margin: 0 auto 0 auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; } .cat > .img-container > .prod-count > span > span { display: inline-block; padding: 5px 10px; border: 2px solid @prod-count-color; font-size: 16px; margin: 125px 0 0 0; background: @prod-count-span-bg; font-family: 'geomanistbook'; } .cat > .title { height: 36px; background: @prod-cat-title-bg; color: @prod-cat-title-color; text-align: center; font-size: 14px; font-weight: 600; padding: 7px 0 0 0; overflow: hidden; } .cat:hover > .title { background: @prod-cat-title-bg-hover; color: @prod-cat-title-color-hover; } .cat > .title > i { padding: 0 5px 0 0; } h2 { display: block; font-family: 'geomanistbook'; font-size: 28px; text-transform: uppercase; color: @heading-color; border-bottom: 1px solid @heading-border-color; margin: 0 auto 20px auto; font-weight: normal; position: relative; width: 1180px; } h2 > .more { font-size: 12px; text-transform: lowercase; color: @heading-color; position: absolute; bottom: 5px; right: 0; } // category-list-1 .category-list-1 { margin: 0 0 30px 0; } .category-list-1 > .left, .static-1 > .left { margin: 0 10px; width: 280px; } .left-menu { } .left-menu > .title { height: 36px; cursor: pointer; color: @left-menu-title-color; background: @left-menu-title-bg; position: relative; font-size: 14px; padding: 9px 0 0 15px; font-family: 'geomanistmedium'; text-transform: uppercase; margin: 0 0 1px 0; } .left-menu > .title > i { font-size: 16px; position: absolute; right: 15px; top: 9px; color: @left-menu-title-i; } .left-menu > .title:hover > i { color: @left-menu-title-i-hover; } .title > .fa-minus, .dd-left-menu > .title > .fa-plus { display: none; } .title > .fa-plus, .dd-left-menu > .title > .fa-minus { display: block; } .left-menu > .content { display: none; } .dd-left-menu > .content { display: block; background: @left-menu-content-bg; padding: 15px; } .left-menu > .content > ul { list-style: none; } .left-menu > .content > ul li { padding: 3px 0; } .left-menu > .content > ul li a { font-size: 13px; display: block; color: @left-menu-content-color; } .left-menu > .content > ul li a.active { font-weight: 700; } .left-menu > .content > ul li a:hover { color: @left-menu-content-color-hover; text-decoration: none; } .left-menu > .content > ul li a > span { color: @left-menu-content-span-color; font-style: italic; font-size: 12px; padding-left: 6px; } .left-menu > .content > ul li a.active > span { color: @left-menu-content-color; } .left-menu > .content > ul li > ul { list-style: none; margin: 5px 0 2px 0; } .left-menu > .content > ul li > ul li { padding: 0 0 0 15px; font-size: 12px; position: relative; } .left-menu > .content > ul li > ul li:before { position: absolute; content: "\f068"; left: 2px; top: 5px; font-family: 'FontAwesome'; font-size: 10px; .opacity(.7); } .category-list-1 > .right { margin: 0; width: 900px; } .cat-banner { margin: 0 0 20px 0; width: 100%; padding: 0 10px; } .cat-banner > img { display: block; width: 100%; height: auto; } .category-list-1 > .right > h1 { display: block; font-size: 28px; text-transform: uppercase; padding: 0 10px; margin: 0 0 5px 0; } .category-list-1 > .right > .category-desc { font-size: 12px; font-style: italic; padding: 0 10px; color: @category-desc-color; .opacity(.7); margin: 0 0 15px 0; } .sort { border-top: 1px solid @sort-border; border-bottom: 1px solid @sort-border; margin: 0 10px; height: 36px; color: @sort-color; position: relative; } .filtering { border-bottom: 1px solid @sort-border; margin: 0 10px; margin-top: 10px; min-height: 50px; height: auto; color: @sort-color; position: relative; } .sort > .left { text-transform: uppercase; padding: 8px 0 0 15px; font-size: 13px; } .select-style { padding: 3px 20px 0 0; margin: 0; overflow: hidden; height: 36px; box-sizing: border-box; display: inline-block; width: 220px; cursor: pointer; position: relative; } .select-style:after { position: absolute; content: "\f107"; right: 2px; top: 9px; font-family: 'FontAwesome'; font-size: 14px; } .select-style > select { padding: 5px 30% 0 0; padding-left: 5px; width: 110%; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: @sort-color; font-size: 12px; cursor: pointer; text-transform: uppercase; } .select-style > select > option { text-align: right; } .sort > .view { position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; } .view > a { display: inline-block; text-decoration: none; color: @sort-color; font-size: 14px; margin: 7px 3px 0 3px; .opacity(.5); } .view > a.active, .view > a:hover { .opacity(1); } //pagination .pagination { border-top: 1px solid @sort-border; border-bottom: 1px solid @sort-border; margin: 0 10px; height: 36px; color: @sort-color; text-align: center; } .pagination > ul { list-style: none; font-size: 0; } .pagination > ul li { display: inline-block; height: 34px; font-size: 0; box-sizing: border-box; } .pagination > ul li > a { display: inline-block; height: 34px; padding: 7px 15px; color: @sort-color; font-size: 14px; } .pagination > ul li > a.active { text-decoration: none; background: @pagintaion-active; } .pagination > ul li > a:hover { text-decoration: none; color: @pagintaion-color-hover; } //prod-list-1 .product-list-1 { padding: 10px 0; } .product { position: relative; display: block; padding: 10px; width: 33.333333%; text-align: center; float: left; box-sizing: border-box; } .product:hover { text-decoration: none; } .product > .img-container { position: relative; border: 1px solid @prod-img-border; overflow: hidden; } .product > .big-container { min-height: 442px; height: 442px; } .product > .small-container { min-height: 211px; height: 211px; } .product > .img-container > img { width: 100%; height: auto; display: block; } .quick-view { display: none; } .product > .img-container:hover > .quick-view { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: @prod-count-bg; z-index: 88; text-align: center; } .quick-view > span { display: inline-block; box-sizing: border-box; padding: 9px 10px 0 10px; border: none; text-decoration: none; text-transform: uppercase; cursor: pointer; color: @button-color; font-family: 'geomanistbook'; text-align: center; font-weight: normal; height: 36px; position: relative; top: 82px; } .quick-view > span > i { padding: 0 5px 0 0; } .product-list-2 .large .quick-view > span { top: 262px; } .product-list-2 .quick-view > span { top: 122px; } .badge { display: none; width: 76px; height: 76px; position: absolute; top: 0; left: 0; z-index: 89; } .sale .badge { display: block; background: url('../img/sale-badge-76x76.png'); } .new .badge { display: block; background: url('../img/new-badge-76x76.png'); } .product > .prod-desc > .name { height: 45px; overflow: hidden; font-size: 14px; color: @prod-color; line-height: 16px; padding: 5px 0; } .product > .prod-desc > .name > strong { font-size: 16px; } .product:hover > .prod-desc > .name { text-decoration: underline; } .product > .prod-desc > .price { font-size: 15px; font-weight: 600; color: @prod-price; } .product > .prod-desc > .price > .old { display: inline-block; padding: 0 10px 0 0; text-decoration: line-through; color: @prod-price-old; font-weight: 400; } .product > i { display: none; } // category-list-1 .category-list-2 { margin: 0 0 30px 0; } .category-list-2 > h1 { display: block; font-size: 28px; text-transform: uppercase; padding: 0 10px; margin: 0 0 5px 0; } .category-list-2 > .category-desc { font-size: 12px; font-style: italic; padding: 0 10px; color: @category-desc-color; .opacity(.7); margin: 0 0 15px 0; } //prod-list-2 .product-list-2 { padding: 30px 0; } .product { position: relative; display: block; padding: 10px; width: 25%; text-align: center; float: left; box-sizing: border-box; } .large { width: 50%; } .large > .desc { height: 65px; overflow: hidden; padding: 10px 15px; padding-top: 15px; /* background: @prod-count-bg;*/ font-size: 12px; line-height: 15px; text-align: center; color: @prod-color; border: solid 1px #e5e8ed; border-top: none; } // static 1 .static-1 { margin: 0 0 30px 0; } .static-1 > .right { width: 580px; float: left; padding: 0 10px; } .static-1 > .right > h1, .login-reg-split > .left > h1, .static-2 > h1 { display: block; font-size: 28px; text-transform: uppercase; margin: 10px 0 15px 0; color: @heading-color; border-bottom: 1px solid @heading-border-color; } .static-1 > .right > h2 { display: block; width: 100%; font-size: 24px; border: none; background: none; padding: 0; margin: 20px 0 15px 0; } .static-1 > .right > h3, .static-1 > .right > div > h3 { display: block; width: 100%; font-size: 20px; border: none; background: none; padding: 0; margin: 20px 0 15px 0; font-family: 'geomanistbook'; text-transform: uppercase; } .static-1 > .right > p, .login-reg-split > .left > p { font-size: 14px; line-height: 21px; display: block; margin: 0 0 15px 0; } .static-1 > .right > .fw { width: 100%; height: auto; display: block; margin: 0 0 15px 0; } .static-1 > .right > img { width: 100%; height: auto; display: block; margin: 0 0 15px 0; } .static-1 > .right a { font-weight: 600; text-decoration: underline; color: @static-link-color; } .static-1 > .right a:hover, .static-1 > .right p a:hover{ font-weight: 600; text-decoration: underline; color: @static-link-color-hover; } .static-1 > .right > ul { list-style: none; margin: 0 0 15px 0; } .static-1 > .right > ul li { padding: 3px 0 3px 15px; position: relative; } .static-1 > .right > ul li:before { position: absolute; content: "\f111"; left: 2px; top: 10px; font-family: 'FontAwesome'; font-size: 6px; .opacity(.7); } .static-1 .input-row { height: 75px; width: 50%; } .static-1 .input-row > label { display: block; font-size: 12px; font-weight: 600; height: 19px; } .static-1 .input-row > label > span { display: inline; color: #000; } .static-1 .input-row > .error-msg { display: none; } .static-1 .input-row > .form-check > .error-msg { display: none; } .static-1 .error > .error-msg { height: 12px; color: #E05E73; font-size: 11px; display: block; } .static-1 .error > .form-check > .error-msg { height: 12px; color: @error; font-size: 11px; display: block; } .static-1 .input-row > label > .fg-passw { float: right; display: inline-block; } // reg-login .reg-form { } .reg-form > .left { width: 50%; padding: 0 10px 0 0; } .reg-form > .right { width: 50%; padding: 0 0 0 10px; } .reg-form .input-row { width: 100%; } .zip { width: 22%; float: left; } .city { width: 73%; float: right; } .reg-form .txt-area { height: 150px; } textarea { height: 112px; padding-top: 5px; font-size: 16px; } .form-bottom-info { margin: 25px 0 0 0; padding: 15px 0 0 0; border-top: 1px solid @heading-border-color; } .form-check { border-top: 1px solid @heading-border-color; border-bottom: 1px solid @heading-border-color; min-height: 36px; margin: 0 0 20px 0; padding: 4px 0 0 0; } .static-1 .reg-btn { margin: 20px 0 20px 0; width: 100%; box-sizing: border-box; } // login-reg-split .login-reg-split { } .login-reg-split > .left { width: 280px; margin: 0 0 0 110px; } .login-reg-split > .right { width: 580px; margin: 0 110px 0 0; float: right; } .static-1 .or > span > span { display: inline-block; background: #ffffff; font-family: 'geomanistbook'; font-size: 10px; text-transform: uppercase; padding: 0 5px; color: @or-line; } .static-1 .reg-form .btn-fb, .static-1 .reg-form .btn-fb:hover, .static-1 .reg-form .btn-google, .static-1 .reg-form .btn-google:hover { display: block; margin: 10px 0 10px 0; font-size: 14px; color: #ffffff; padding-top: 13px; text-decoration: none; font-weight: normal; font-size: 16px; } .fg-passw { color: @static-link-color; } .fg-passw:hover { color: @static-link-color-hover; } //mian page prod sugg list .prod-suggest { width: 1200px; margin: 0 auto 20px auto; position: relative; } .prod-suggest > .product-list { width: 1200px; overflow: hidden; height: 260px; } .prod-suggest > .product-list > .product { width: 16.666666%; } .prod-suggest > a { display: block; position: absolute; width: 45px; height: 45px; text-align: center; color: #293437; } .prod-suggest > .left-arrow { left: -35px; top: 137px; } .prod-suggest > .right-arrow { right: -35px; top: 137px; } .prod-suggest > a > i { font-size: 24px; .opacity(.5); position: relative; top: 10px; } .prod-suggest:hover > a > i { .opacity(1); } .prod-suggest > a:hover { background: #293437; color: #ffffff; } .prod-suggest .quick-view > span { top: 72px; } // cat suggest .cat-suggest { width: 1200px; margin: 0 auto 30px auto; } .cat-item { width: 33.3333%; padding: 0 10px; float: left; margin: 0 0 20px 0; } .cat-item > table, .cat-item > table tr td { border-collapse: collapse; border: 1px solid @prod-img-border; } .td-large { width: 280px; height:280px; } .td-small { width: 99px; height: 99px; } .td-large > a, .td-large > a > img, .td-small > a, .td-small > a > img { width: 100%; /* height: 100%;*/ display: block; } .td-large > a:hover > img, .td-small > a:hover > img { .opacity(.8); } .cat-item > .description { padding: 15px; background: @prod-categories-bg; } .cat-item > .description > .title { font-family: 'geomanist_regularregular'; font-size: 18px; text-transform: uppercase; margin: 0 0 5px 0; } .cat-item > .description > .desc { line-height: 17px; font-size: 13px; overflow: hidden; height: 50px; } .cat-item > .bottom { height: 36px; background: @prod-img-border } .cat-item > .bottom > .quant, .cat-item > .bottom > .price, .cat-item > .bottom > .shop-all { float: left; width: 33.33333%; border-right: 1px solid #fff; height: 36px; box-sizing: border-box; text-align: center; padding: 8px 0 0 0; } .cat-item > .bottom > .shop-all { border-right: none; background: @button-dafault-color; color: @button-color; text-transform: uppercase; } .cat-item > .bottom > .shop-all:hover { background: @button-2-color; text-decoration: none; } .cat-item > .bottom > .shop-all > i { font-size: 14px; padding: 0 3px 0 0; } // static-2 .static-2 { width: 780px; margin: 0 auto 30px auto; } .static-2 > .cover-pic { width: 100%; height: auto; position: relative; margin: 0 0 20px 0; } .static-2 > .cover-pic > img { width: 100%; height: auto; display: block; } .static-2 > .cover-pic > .date { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.3); color: #fff; height: 36px; padding: 8px 10px 0 10px; text-transform: uppercase; } .static-2 > .content { padding: 0 0px; } .static-2 > .content > .lead, .static-2 > .content > p { font-size: 14px; line-height: 21px; display: block; margin: 0 0 15px 0; text-align: justify; } .static-2 > .content > .lead { font-weight: 600; } .facebook-like { border-top: 1px solid @heading-border-color; border-bottom: 1px solid @heading-border-color; height: 36px; width: 100%; margin: 0 0 10px 0; padding: 7px 0 0 0; } .static-2 > .content > h2 { background: none; border: none; width: 100%; font-size: 24px; margin: 15px 0 10px 0; padding: 0; } .static-2 > .content > h3 { background: none; border: none; width: 100%; font-size: 20px; margin: 15px 0 10px 0; text-transform: uppercase; padding: 0; } .static-2 > .content a { font-weight: 600; text-decoration: underline; color: @static-link-color; } .static-2 > .content > a:hover, .static-2 > .content > p a:hover{ font-weight: 600; text-decoration: underline; color: @static-link-color-hover; } // static-3 .static-3 { width: 100%; margin: 0 auto 30px auto; } .static-3 > .cover-pic { width: 100%; height: auto; position: relative; margin: 0 0 20px 0; } .static-3 > .cover-pic > img { width: 100%; height: auto; display: block; } .static-3 > .cover-pic > .date { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.3); color: #fff; height: 36px; padding: 8px 10px 0 10px; text-transform: uppercase; } .static-3 > .content { padding: 0 0px; } .static-3 > .content > .lead, .static-3 > .content > p { font-size: 14px; line-height: 21px; display: block; margin: 0 0 15px 0; text-align: justify; } .static-3 > .content > .lead { font-weight: 600; } .facebook-like { border-top: 1px solid @heading-border-color; border-bottom: 1px solid @heading-border-color; height: 36px; width: 100%; margin: 0 0 10px 0; padding: 7px 0 0 0; } .static-3 > .content > h2 { background: none; border: none; width: 100%; font-size: 24px; margin: 15px 0 10px 0; padding: 0; } .static-3 > .content > h3 { background: none; border: none; width: 100%; font-size: 20px; margin: 15px 0 10px 0; text-transform: uppercase; padding: 0; } .static-3 > .content a { font-weight: 600; text-decoration: underline; color: @static-link-color; } .static-3 > .content > a:hover, .static-3 > .content > p a:hover{ font-weight: 600; text-decoration: underline; color: @static-link-color-hover; } // cart-checkout .cart-checkout { } .outer-overflow { max-height: 400px; overflow-y: auto; overflow-x: hidden; padding-right: 5px; } // cart table .cart-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; } .cart-table2 { margin: 0 0 20px 0; } .cart-table tr { border-bottom: 1px solid @prod-img-border; } .cart-table tr td { padding: 10px 0; vertical-align: middle; } .cart-table td.price { color: black; font-weight: 600; text-align: right; text-transform: uppercase; width: 100px; } .cart-table td.sum { color: @prod-price; font-weight: 700; border-top: 1px solid @heading-border-color; border-bottom: 1px solid @heading-border-color; text-transform: uppercase; } .cart-table tr td > .title, { display: block; text-transform: uppercase; font-weight: 700; margin: 0 0 10px 0; } .cart-table tr td > label { padding: 0 0 0 5px; display: inline-block; vertical-align: middle; margin: 0 0 5px 0; } .cart-table tr td > input { display: inline-block; vertical-align: middle; margin: 0 0 5px 0; } .cart-table tr td span.no-marg { margin: 0 0 0 0; } .cart-table tr td span.no-marg .lk, .cart-table tr td.sum .lk{ text-transform: lowercase; font-weight: 400; } .cart-table tr td.prod-img { width: 80px; text-align: left; } .cart-table tr td.prod-img > a, .cart-table tr td.prod-img > a > img { width: 60px; height: 60px; display: block; border: none; } .cart-table tr > td.prod-desc > a { font-weight: 400; color: @prod-color; } .cart-table tr > td.prod-desc > a > span { display: block; margin: 5px 0 0 0; color: @prod-color; font-size: 12px; } .cart-table tr > td.prod-desc > a:hover { text-decoration: none; } .cart-table tr > td.quantity { width: 120px; text-align: right; } .cart-table tr > td.quantity > div { border: 1px solid @prod-img-border; display: inline-block; padding: 3px 10px; } .cart-table tr > td.quantity > div > a { text-decoration: none; color: @prod-color; } .cart-table tr > td.quantity > div > a:hover { text-decoration: none; color: @static-link-color-hover; } .cart-table tr > td.quantity > div > a > i { } .cart-table tr > td.quantity > div > span { width: 30px; text-align: center; } .cart-checkout > h3 { text-transform: uppercase; margin: 0 0 5px 0; } // product .prod { width: 1200px; margin: 0 auto 30px auto; } .prod > .left{ width: 50%; padding: 0 10px; } .prod > .right{ width: 50%; padding: 0 10px; } .prod > .left > .prod-main-pic { border: 1px solid @prod-img-border; position: relative; } .prod > .left > .prod-main-pic { max-height: 575px; min-height: 575px; } #showmebigone { height: 575px; min-height: 575px; max-height: 570px; } .prod > .left > .prod-main-pic > a, .prod > .left > .prod-main-pic > a > img { width: auto; max-width: 100%; max-height: 570px; height: auto; display: block; } .related-containter { min-height: 170px; height: 170px; } .add-images { background: @prod-categories-bg; position: relative; height: 110px; padding: 15px 0; } .add-images > .inner { width: 90%; margin: 0 auto; height: 80px; overflow: hidden; white-space: nowrap; } .add-images > .left-arrow, .add-images > .right-arrow { position: absolute; font-size: 14px; top: 40px; color: #c5cbd2; font-size: 22px; } .add-images > .left-arrow { left: 15px; } .add-images > .right-arrow { right: 15px; } .add-images > a:hover{ color: #293437; } .add-images > .inner > a, .add-images > .inner > a > img { width: 80px; height: auto; display: block; float: left; margin: 0 10px; } .prod > .right { width: 50%; padding: 0 10px; height: 605px; position: relative; } .tab-container { position: absolute; bottom: 0; height: 300px; width: 100%; background: @prod-categories-bg; padding: 0 0 20px 0; margin: 0 10px; } .tabs { height: 36px; width: 100%; } .tabs > a { width: 33.3333%; display: block; float: left; border-right: 1px solid #ffffff; text-align: center; height: 36px; background: #e5e8ed; font-family: 'geomanistmedium'; color: #232a31; text-transform: uppercase; font-size: 16px; text-decoration: none; padding: 7px 0 0 0; } .tabs > a:hover { text-decoration: none; } .tabs > .active { background: @prod-categories-bg; } .last-tab { border-right: none; } .tab-container > .content { margin: 20px 0 0 0; height: 220px; padding: 0 20px 0 20px; overflow-y: scroll; } .tab-container > .content > p { display: block; margin: 0 0 15px 0; } .prod > .right > h1 { display: block; font-size: 28px; text-transform: uppercase; margin: 0 0 5px 0; color: @heading-color; border-bottom: 1px solid @heading-border-color; } .prod > .right > .subtitle { font-size: 18px; font-family: 'geomanistbook'; text-transform: uppercase; margin: 0 0 5px 0; } .prod > .right > .price { font-size: 18px; font-family: 'geomanistbook'; text-transform: uppercase; margin: 0 0 5px 0; color: @prod-price; } .prod > .right > .price > .old-price { padding: 0 15px 0 0; color: @prod-price-old; text-decoration: line-through; } .prod > .right > .option-title { font-size: 14px; font-weight: 700; margin: 0 0 5px 0; } .prod > .right > .select-style { border: 2px solid #b7c0c7; float: none; padding: 2px 15px 0 15px; width: 50%; margin: 0 0 25px 0; } .prod > .right > .select-style > select { font-size: 16px; font-family: 'geomanistbook'; color: #909ba4; } .prod > .right > .select-style:after { position: absolute; content: "\f0d7"; right: 10px; top: 10px; font-family: 'FontAwesome'; font-size: 14px; color: #909ba4; } .add-to-cart { display: block; width: 50%; padding: 11px 0 0 0; } .add-to-cart > i { padding: 0 10px 0 0; } .add-to-cart:hover { text-decoration: none; } // overlay .overlay { position: fixed; top:0; left:0; background: rgba(0,0,0,0.8); z-index: 99999; width: 100%; height: 100%; } .popup { position: relative; width: 500px; min-height: 200px; margin: 0 auto; top: 100px; background: #fff; z-index: 9998; padding: 40px 100px; text-align: center; } .popup .close { width: 45px; height: 45px; position: absolute; z-index: 9999; display: block; background: #333; top: 0; right: 0; text-align: center; color: #333; font-size: 30px; padding: 8px 0 0 0; } .popup > h1 { display: block; font-size: 24px; font-weight: 700; width: 100%; margin: 0 0 35px 0; } .minimalize { width: 50px; padding: 5px; border: 1px solid #e5e8ed; } .maximized { width: 400px; padding: 5px; border: 1px solid #e5e8ed; } .buttonized { background-color: #6fb121; font-size: 13px; color: #fff !important; font-family: 'geomanistbook'; text-align: center; font-weight: normal; cursor: pointer; text-decoration: none; padding: 5px; } .buttonized:hover { .drop-shadow(0, 1px, 2px, 0.4); } .color-boxes { display: block; width: 100%; list-style: none; margin-bottom: 25px !important; } .color-box { display: inline-block; list-style: none; margin: 0 auto; margin-right: 5px; width: 20px; height: 20px; border: solid 1px #ccc; cursor: pointer; text-align: center; padding: 5px; color: #6fb121; } .color-box:hover { .drop-shadow(2px, 2px, 2px, 0.4); } #detailed_search { display: none; position: absolute; width: inherit; min-height: 200px; background: white; border: solid 1px #38424a; .drop-shadow(2px, 2px, 2px, 0.4); z-index: 9999999; padding: 20px; overflow: auto; } #category_settings li { list-style: none; } #category_settings li div.form-check { border-bottom: none; border-top: none; height: auto; margin: 0px; } #category_settings input[type="checkbox"] + label { font-size: 12px; } .mutliSelect { display: block; width: 100%; height: auto; font-size: 16px; font-weight: bold; color: black; text-align: left; padding: 5px; cursor: pointer; } .mutliSelect ul { display: block; width: 100%; height: auto; margin: 0px; padding: 0px; margin-left: -10px; margin-top: 0px; } .mutliSelect ul li { display: inline-block; list-style: none; text-align: left; font-size: 12px; font-weight: bold; color: black; padding-left: 5px; padding-right: 5px; margin: 5px; } .mutliSelect div.form-check { border-bottom: none; border-top: none; height: auto; margin: 0px; } .mutliSelect input[type="checkbox"] + label { font-size: 12px; } .ccheck { display: block; widht: 100%; height: auto; margin-bottom: 5px; cursor: pointer; } .ccheck span { display: inline-block; background-color: white; border: solid 1px #38424a; width: 20px; height: 20px; text-align: center; margin-right: 5px; } .ccheck span i {visibility: hidden;} .ccheck span i.checkedin {visibility: visible;} .topbottom { padding-top: 5px; padding-bottom: 5px; } .check-select { width: 100px; height: 30px; float: left; border: solid 1px #eee; padding: 5px; font-size: 12px; cursor: pointer; margin-right: 20px; } .check-select::after { top: 5px; } .check-select-list { display: none; position: absolute; width: 300px; height: auto; background-color: white; border: solid 1px #eee; margin-top: 29px; z-index: 9999; text-align: center; } .check-select-list ul { margin: 0px; padding: 0px; padding-top: 5px; text-align: justify; } .check-select-list ul li { float: left; color: #000; list-style: none; padding: 5px; margin: 5px; font-size: 10px; font-weight: bold; /* text-shadow: 1px 1px #fff;*/ background-color: #eee; text-align: justify; text-transform: uppercase; } .check-select-list ul li:hover { } .check-select-list ul li .ccheck { margin-bottom: 0px; } .check-select-list ul li.filtered { border-color: #666565; } #price-slider { margin-left: 15px; margin-top: 5px; float: left; width: 200px; font-size: 11px; } #price-slider span { font-size: 11px; font-weight: bold; } #price-slider small { display: block; padding-top: 5px; } #keyword-filter { float: left; margin-left: 30px; } #keyword-filter input { width: 250px; height: 20px; padding: 5px; font-size: 12px; border: solid 1px #eee; } #szukites { width: 100px; height: 30px; float: left; margin-left: 20px; border: solid 1px #eee; text-transform: none; } #reszletes { width: 150px; height: 30px; float: left; margin-left: 20px; border: solid 1px #eee; text-transform: none; background-color: #0a548b; } .info-panel { background-color: #ecf0f1; width: 97%; border: solid 1px #e5e8ed; font-size: 11px; color: black; padding: 10px; margin-top: 10px; margin-bottom: 10px; } .greened { background-color: #8EBF54; } .greened:hover { opacity: 0.7; background-color: #6fb121; } .product_description { height: auto; max-height: 50px; min-height: 50px; } .options-wrap { /* min-height: 75px;*/ height: 77px; } @keyframes blinker { 50% { opacity: 0.0; } } .color-error { display: none; color: #ff6961; font-weight: bold; font-size: 12px; animation: blinker 1s linear infinite; } .detailed-search-btn { /* color: #6fb121;*/ color: #999; text-decoration: none; display: inline-block; padding: 5px; padding-top: 8px; font-size: 11px; } /*.detailed-search-btn:hover { color: #fff; text-decoration: none; background-color: #6fb121; padding: 5px; }*/ #cart_wrapper .fa { color: #000; } .cart-dropdown .fa { color: #000; } #cart_wrapper #add_direct_to_cart .fa { color: white; } .cart-table tr td.cart-trash { padding-bottom: 30px; } #banner_overlay img { display: block; position: absolute; left: 45%; } .sy-box.sy-loading { margin-top: 350px; } #detailer { } // mediaquery import @import "1180w.less"; @import "960w.less"; #mobile-search { display: none; position: absolute; width: 100%; height: 50px; background-color: #38424a; top: 40px; left: 0; z-index: 9999999; padding: 5px; padding-bottom: 10px; } #mobile-menu { display: none; position: absolute; width: 100%; height: auto; background-color: #38424a; top: 40px; left: 0; z-index: 9999999; } #mobile-menu ul { list-style: none; } #mobile-menu ul li { border-bottom: 1px solid #232a31; color: #c5cbd2; height: 25px; text-align: center; padding-top: 7px; } #mobile-menu ul li a { color: #c5cbd2; line-height: 12px; font-size: 12px; font-family: 'geomanistbook'; text-transform: uppercase; } #mobile-menu ul li a:hover { text-decoration: none; } #mobile-login { z-index: 9999999; } #mobile-login ul { list-style: none; } #mobile-login ul li { border-bottom: 1px solid #232a31; color: #c5cbd2; height: 25px; text-align: left; padding-top: 7px; } #mobile-login ul li a { color: #c5cbd2; line-height: 12px; font-size: 12px; font-family: 'geomanistbook'; text-transform: uppercase; } #mobile-login ul li a:hover { text-decoration: none; } #category_selector { margin-left: 50px; } td.price a { color: #000; } .hide { display: none; } .modal-line { display: none; position: absolute; width: 100%; height: 35px; padding: 5px; z-index: 999999; margin-top: -2px; } .modal-line h6 { width: 97%; display: block; font-size: 12px; color: white; float: left; text-align: center; margin-top: 3px; } .modal-line a { width: 3%; display: block; float: right; font-size: 16px; color: white; text-decoration: none; text-align: right; } .modal-mobile { top: 43px; } .error-modal { background-color: #E05E73; color: white; } .success-modal { background-color: #8EBF54; color: white; } .info-modal { background-color: #0099c8; color: white; } .disabledbtn { opacity: 0.3; } #akcios-katalogus { color: white; padding: 2px; background-color: #6fb121; } #search::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #999; } #search:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; opacity: 1; } #search::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; opacity: 1; } #search:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #999; } #search:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: #999; } .txt::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #ccc; } .txt:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; opacity: 1; } .txt::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; opacity: 1; } .txt:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ccc; } .txt:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: #ccc; } textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #ccc; } textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; opacity: 1; } textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; opacity: 1; } textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ccc; } textarea:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */ color: #ccc; }