@back: white; @font: black; @link: #00b9ff; @shadow: #0081b2; @gray: #eeeeee; @price: #642200; @f: 'Open Sans'; @fl: 'Open Sans Light'; @fb: 'Open Sans Bold'; @big: ~"(min-width: 1024px)"; @max: ~"(max-width: 1340px)"; @mid: ~"(max-width: 1024px)"; @small: ~"(max-width: 768px)"; @phone: ~"(max-width: 414px)"; @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans-Regular'), url('/fonts/osans/opensans-regular.eot'), url('/fonts/osans/opensans-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/osans/opensans-regular.woff') format('woff'), url('/fonts/osans/opensans-regular.ttf') format('truetype'), url('/fonts/osans/opensans-regular.svg') format('svg'); } @font-face { font-family: 'Open Sans Light'; font-style: normal; font-weight: 400; src: local('Open Sans Light'), local('OpenSansLight-Regular'), url('/fonts/osans/opensans-light.eot'), url('/fonts/osans/opensans-light.eot?#iefix') format('embedded-opentype'), url('/fonts/osans/opensans-light.woff') format('woff'), url('/fonts/osans/opensans-light.ttf') format('truetype'), url('/fonts/osans/opensans-light.svg') format('svg'); } @font-face { font-family: 'Open Sans Bold'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/osans/opensans-bold.eot'), url('/fonts/osans/opensans-bold.eot?#iefix') format('embedded-opentype'), url('/fonts/osans/opensans-bold.woff') format('woff'), url('/fonts/osans/opensans-bold.ttf') format('truetype'), url('/fonts/osans/opensans-bold.svg') format('svg'); } * { outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; } html { line-height: 1; height: 100%; width: 100%; } body { height: 100%; width: 100%; background: @back; font-family: @fl; font-size: 14px; font-weight: 0; line-height: 1; color: @font; } input, textarea { -webkit-border-radius: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } .clearfix { overflow: hidden; } .clearfix, .wrapper { *zoom: 1; clear: both; } .clear { clear: both; } .center { text-align: center; position: relative; } .left { text-align: left; position: relative; } .right { text-align: right; position: relative; } .overflow { overflow: hidden; } a { text-decoration: underline; color:@link - #222; } a:hover { text-decoration: none; color:@link + #222; } a img { border: none; } b, strong { font-weight: bold; } i, em { } u, ins { text-decoration: underline; } h1, .head { font-size:26px; margin: 0 0 25px 0; font-family: @f; } .head h1 { display: inline-block; } .fhead { font-size: 18px; color: black; line-height: 22px; padding-bottom: 15px; font-weight: normal; margin: 0; position: relative; } h2 { font-size:22px; margin: 0 0 15px 0; font-family: @f; } h3 { font-size:20px; margin: 0 0 15px 0; font-family: @f; } h4 { font-size:18px; margin: 0 0 10px 0; font-family: @f; } h5 { font-size:16px; margin: 0 0 10px 0; font-family: @f; } p { margin: 0; padding-bottom: 15px; } .head { position: relative; h2 { display: inline-block; } } .ajax { color: @link; text-decoration: none; border-bottom: 1px dotted @link; padding: 0 !important; margin: 0 !important; cursor: pointer; } .ajax:hover { color: @link + #222; text-decoration: none !important; border-bottom: 1px dotted @link + #222; } .hidden { display: none; } .more { display: inline-block; padding: 0 20px; color:@link; font-size: 12px; font-family: @f; /*text-decoration: none;*/ text-transform: none; } .more:after { content: '\f0da'; font-family: 'FontAwesome'; margin: 2px 0px 0px 5px; text-decoration: none !important; position: absolute; } nav ul { list-style: none; margin: 0; padding: 0; } .l20 { padding-left: 20px; } .t20 { padding-top: 20px; } .r20 { padding-right: 20px; @media @phone { padding-right: 0; } } .b20 { padding-bottom: 20px; } .l30 { padding-left: 30px; @media @phone { padding-left: 0; } } .t30 { padding-top: 30px; @media @phone { padding-top: 10px; } } .r30 { padding-right: 30px; @media @phone { padding-right: 0; } } .b30 { padding-bottom: 30px; } .ml20 { margin-left: 20px; } .mt20 { margin-top: 20px; } .mr20 { margin-right: 20px; } .mb20 { margin-bottom: 20px; } .ml30 { margin-left: 30px; } .mt30 { margin-top: 30px; } .mr30 { margin-right: 30px; } .mb30 { margin-bottom: 30px; } .ml40 { margin-left: 40px; } .mt40 { margin-top: 55px; @media @phone { margin-top: 20px; } } .mr40 { margin-right: 40px; @media @phone { margin-right: 0; } } .mb40 { margin-bottom: 40px; } .col-8 .l20 { padding-left: 0; } .close { cursor: pointer; width: 30px; height: 30px; background: url(/images/close.png) no-repeat center center; background-size: 100% 100%; position: absolute; right: 20px; top: 20px; z-index: 100; } .oniphone { display: none !important; } @media @phone { .noiphone { display: none !important; } .oniphone { display: block !important; } } /* GRID */ .container { width: 1200px; margin: 0 auto; padding: 0; clear: both; overflow: hidden; position: relative; } .container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7 { float: left; position: relative; } .col-8 { width: 100%; position: relative; clear: both; } .col-7 { width: 87.5%; @media @phone { width: 100%; } } .col-6 { width: 75%; @media @phone { width: 100%; } } .col-5 { width: 62.5%; @media @phone { width: 100%; } } .col-4 { width: 50%; @media @phone { width: 100%; } } .col-3 { width: 37.5%; @media @phone { width: 100%; } } .col-2 { width: 25%; @media @phone { width: 100%; } } .col-2.brand { width: 33%; } .col-1 { width: 12.5%; @media @phone { width: 100%; text-align: center; } } @media @max { .container { width: 1160px; } } @media @mid { .container { width: 1000px; padding: 0 20px; } } @media @phone { .container { width: 100%; padding: 0 20px; } } /* BASKET */ .BasketOk { display: none; background: white; border-bottom: 2px solid @link; height: 52px; position: fixed; width: 100%; left: 0; top: 0; padding-top: 15px; z-index: 10000; } .BasketOk .container { text-align: center; font-family: @f; font-size: 16px; color: @shadow; overflow: visible; } .BasketOk i { position: absolute; right: 25px; top: 5px; cursor: pointer; color: @shadow; } .basket { font-size: 12px; position: relative; top: -30px; left: 58px; border-radius: 10px; border: 2px solid #eeeeee; display: inline-block; padding: 6px 17px 0 17px; height: 30px; @media @max { left: 65px; } @media @mid { left: 33px; } @media @phone { top: 0; left: 0; font-size: 14px; height: auto; width: 100%; padding: 15px; margin-bottom: 20px; } i { color: @gray - #444; padding-right: 10px; } } #basketPage { table { border-left: 1px solid @gray; margin-bottom: 20px; tr:first-child { font-size: 16px; background: @gray; } .col2 input { font-size: 16px; width: 50px; text-align: center; } .col3 { white-space: nowrap; } .col4 { text-align: center; i { cursor: pointer; } } td { padding: 20px; border-right: 1px solid @gray; border-bottom: 1px solid @gray; @media @phone { padding: 5px; font-size: 12px; } .head { font-size: 16px; @media @phone { font-size: 12px; } } } } } #orderSteps table { border-top: 1px solid @gray; } #orderSteps tr:first-child { font-size: 16px; background: white !important; } #rightBasket { td { padding: 10px !important; } .head { font-size: 12px !important; margin: 0 !important; line-height: 1.5; } } .total { text-align: right; .btn { margin-left: 40px; } } /* ----- !form ------*/ #orderSteps .form div { margin-bottom: 10px; } #orderSteps .form { display: inline-block; margin-bottom: 20px; width: 100%; } #orderSteps .form .labelInfo input.error { border: 1px solid #CF0006; } #orderSteps .form .labelInfo label.error { color: #CF0006; } #orderSteps .form .labelInfo textarea.error { border: 1px solid #CF0006; } #orderSteps .errorText { display: inline-block; width: 45%; } #orderSteps .form .labelInfo label, #orderSteps .form .labelInfo input { display: inline-block; } #orderSteps .form .labelInfo label { font-size: 16px; position: relative; height: 25px; padding-top: 10px; width: 40%; @media @phone { width: 100%; padding-bottom: 20px; } } .formFlat .labelInfo input { width: 100%!important; margin-bottom: 10px; } #orderSteps .form .labelInfo input { font-size: 16px; height: 35px; padding: 5px 10px; width: 59%; box-sizing: border-box; -moz-box-sizing: border-box; @media @phone { width: 100%; } } #orderSteps .form .labelInfo.phone input { width: 116px; } #orderSteps .form .labelInfo.phone input.code { display: inline-block; text-align: center; width: 55px; } #orderSteps .form .labelInfo.phone span.required { top: 0; padding: 0; } #orderSteps .form .labelInfo.phone span { font-size: 16px; padding: 0 5px; position: relative; top: 0; } #orderSteps .form .labelInfo .tooltip.phone { padding-left: 50%; @media @phone { padding-left: 60px; } } #orderSteps .form .labelInfo .tooltip.phone span { color: #A4A4A4 !important; font-size: 11px !important; padding-right: 70px; top: 0; } #orderSteps .form .labelInfo input.number { width: 55px; } #orderSteps .form .labelInfo input, #orderSteps .form .labelInfo textarea { background: none repeat scroll 0 0 #FFFFFF; border-color: #CCCCCC #CCCCCC #DEDEDE; border-style: solid; border-width: 1px; position: relative; vertical-align: top; } #orderSteps .form .labelInfo input:hover, #orderSteps .form .labelInfo .textarea:hover { border-color: #B7B7B7 #C5C5C5 #CFCFCF; border-style: solid; border-width: 1px; } #orderSteps .form .labelInfo input:focus { -moz-appearance: none; border-color: #A3A3A3 #B4B4B4 #C1C1C1; border-style: solid; border-width: 1px; outline: medium none; } #orderSteps .form .labelInfo textarea { font-size: 12px; height: 125px; padding: 5px 10px; width: 59%; box-sizing: border-box; -moz-box-sizing: border-box; resize: none; @media @phone { width: 100%; } } #orderSteps .form .labelInfo .tooltip { color: #A4A4A4; font-size: 11px; padding: 5px 0 0 42%; } #devForm1 { display: block; } #orderSteps .form .polya { padding: 0 0 0 42%; } #orderSteps .form .radio { color: #252525; font-size: 18px; } #orderSteps .form form { width: 100%; } #deliveryTypes { border: 2px solid #e2a202; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; padding: 20px 20px 10px 15px; } .errorSummary { color:red; padding: 10px 0; text-align: center; margin: 0 0 10px; padding: 20px; position: relative; li { list-style-type: none; } } /* HEADER */ header { position: relative; width: 100%; margin: 0 auto; } header .container { } header .logo { position: relative; z-index: 100; width: 100px; height: 100px; background: url(/images/logo.png) no-repeat center center; background-size: 100% 100%; display: inline-block; margin: 0px 0 0 0; } header .time { font-size: 12px; height: 30px; font-family: @f; color: #858585; display: block; @media @phone { font-size: 11px; } } header .callback { } header .search { width: 240px; float: left; @media @mid{ width: 200px; } } header .address { border-radius: 10px; border: 2px solid #eeeeee; width: 240px; height: 30px; font-size: 13px; padding: 6px 17px 0 17px; float: right; margin: 0 !important; } header .phone { height: 100px; padding: 37px 0 0 0; .logo { width: 75px; height: 75px; position: absolute; left: 0; top: 15px; } } header .number { height: 40px; font-size: 37px; padding: 0; } header .number a { color: black; text-decoration: none; } header .number a span { color: @link; } p.textlogo { clear: both; color: #003D64; font-weight: bold; padding: 0; position: relative; top: -20px; @media @phone { top: 0; padding-bottom: 15px; text-align: center; } } /* FEEDBACK WRAPPER */ .openFeedback, .addBasket { cursor: pointer; font-size: 16px !important; float: left; height: 35px !important; } .openFeedback.right { float: right; } .openCallback { cursor: pointer; font-size: 12px; } .wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/wrapper.png) repeat; background-attachment: fixed; background-size: cover; z-index: 999; display: none; } .popup { position: relative; width: 100%; max-width: 415px; max-height: 100%; background: #fff; padding: 25px; top: 50px; text-align: center; margin: 0 auto; font-size: 14px; border-radius: 10px; @media @phone { width: 100%; } } .popup .errorSummary { padding: 0 20px; color: red; font-size: 12px; font-family: @fb; } .popup .errorSummary ul { display: none; } .popup .errorSummary li { list-style: none; } .popup .close { cursor: pointer; position: absolute; right: 25px; top: 25px; width: 25px; height: 25px; background: url(../images/close.png) no-repeat; background-size: 100%; } .popup .head { font-size: 24px; padding-bottom: 15px; } .popup .blocks { display: none; } .popup .labelInfo { } .popup .labelInfo.must { font-size: 12px; } .popup .labelInfo.padd { padding: 0 0 10px 0; width: 100%; margin: 0 auto; height: auto; @media @phone { width: 100%; } } .popup .labelInfo input { height: 40px; width: 100%; padding: 0 10px; border: 2px solid @gray; border-radius: 10px; @media @phone { width: 100%; } } .popup .labelInfo input:focus { border: 2px solid @link; } .popup .labelInfo .error { border: 2px solid red; border-radius: 10px; } .popup .labelInfo textarea { height: 100px; width: 100%; padding: 0 10px; border: 2px solid @gray; border-radius: 10px; @media @phone { width: 100%; } } .popup .labelInfo textarea:focus { border: 2px solid @link; } .popup .labelInfo label { width: 100%; display: block; padding-bottom: 10px; } .popup .endform { margin-top: 10px; cursor: pointer; width: 180px !important; border: 0 !important; color: white; font-size: 18px; height: 40px !important; } .feedb, .ask { display: none; } /* NEWS */ .news { } .news .date { color: #818181; padding-bottom: 15px; } .news .title { font-size: 14px; line-height: 1.5; padding-right: 40px; @media @phone { padding-right: 0; } } /* INFO */ .info { width: 100%; height: 150px; background: @link; @media @small { width: 1000px; } @media @phone { width: 100%; height: auto; } } .info div { padding-top: 10px; font-size: 30px; font-family: @f; color: white; text-align: center; line-height: 1; } .info div span.num { font-size: 55px; font-family: @fb; line-height: 1; } .info div span.title { font-size: 16px; line-height: 1; display: inline-block; } /* MENU */ header .menu_holder { width: 100%; min-height: 50px; background: @shadow; /*margin-top: 20px;*/ @media @small { width: 1000px; } @media @phone { width: 100%; } } header .menu nav a.catalog { /* width: 300px; */ } header .menu nav { width: 100%; height: 50px; } header .menu nav a { text-align: center; font-size: 18px; height: 50px; padding: 15px 18px 0 18px; max-width: 300px; text-decoration: none; color: white; float: left; display: block; } header .menu nav a.sale { font-family: @fb; background: @link; } header .menu nav a:hover, header .menu nav a.active { color: white; text-decoration: none; background: @shadow - #444; border-bottom: 2px solid @link; } .open_nav { position: absolute; right: 20px; top: 0; cursor: pointer; padding: 10px !important; } .nav_mobile { display: none; width: 100%; background: @shadow; z-index: 999; a { width: 100%; color: white; display: block; text-align: center; font-size: 20px; line-height: 2; text-decoration: none; } } .back_page { position: absolute; left: 20px; top: 0; padding-top: 10px !important; } @media @max { header .number { font-size: 30px; height: 35px; } header .menu nav a.catalog { /* width: 250px; */ } header .menu nav a { font-size: 16px; padding: 15px 15px 0 15px; } header .mr30 { margin-right: 15px; } header .address { font-size: 11px; width: 210px; @media @phone { font-size: 15px; width: 100%; text-align: center; margin-bottom: 10px !important; } } header .btn { font-size: 12px; padding: 7px 12px 7px 12px; } } @media @mid { header .number { padding: 0; background: url(/images/phone.png) no-repeat left top; background-size: 24px 24px; } header .menu nav a { font-size: 14px; } } @media @phone { header .menu nav a.catalog { width: 100%; max-width: 100%; text-align: center; } header .number { font-size: 24px; } } /* MENU */ #menu { background: @gray; padding: 18px 0 0 0; margin-bottom: 40px; border-radius: 0 0 10px 10px; } #menu .one { padding: 0 10px; border-bottom: 1px solid @back; position: relative; } #menu .one a { font-size: 14px; font-family: @f; color: black; text-decoration: none; padding: 14px 5px 14px 20px; display: block; line-height: 1.2; } #menu .one a span.show { width: 20px; height: 20px; cursor: pointer; background: url(/images/sort_d.png) no-repeat; background-size: 15px 15px; position: absolute; right: 10px; top: 10px; } #menu .one.red a { color: red !important; } #menu .one a:hover, #menu .one.active a, #menu .two a.active, #menu .third a.active, #menu .one.open a { color: @link; } #menu .one.plus.open { } #menu .one.plus.open a:after, #menu .two.plus a.active:after { content: '\f115'; font-family: "FontAwesome"; margin-left: 10px; } #menu .one.plus a:after { content: '\f114'; font-family: "FontAwesome"; margin-left: 10px; } #menu .one.two { } #menu .one.two a { background: none; padding-left: 40px; font-size: 12px; } #menu .one.two.active a { background: none; } #menu .one.third { } #menu .one.third a { background: none; padding-left: 60px; font-size: 12px; padding-top: 7px; padding-bottom: 7px; } #menu .one.third.active a { background: none; } @media @max { #menu .one a { font-size: 13px; } } @media @phone { #menu .one a { font-size: 18px; } } /* PROJECTS */ .project { margin-bottom: 20px; overflow: hidden; } .project .pic img { width: 100%; border-radius: 10px; } .project .pic { font-size: 16px; } .project .coll-3 { width: 32%; float: left; margin-bottom: 20px; margin-right: 2%; } .project .coll-3:nth-child(3n){ margin-right: 0; } .project .coll-3:nth-child(3n):after { content: ''; clear: both; }; /* POSITION */ .positions { overflow: hidden; padding-bottom: 40px; } .col-8 .positions .pos { width: 12.5%; padding: 0 5px; } .col-8 .double .positions .pos { width: 25%; } .col-6 .positions .pos { width: 33.33%; padding-left: 20px; } .col-6 .positions .pos:nth-child(3n+1){ clear: both; } #model .price { font-size: 22px; margin-bottom: 20px; font-family: @f; padding: 20px; border: 2px solid @link; display: inline-block; border-radius: 10px; background: @gray; } #model .discount { font-size: 16px; color: red; font-family: @f; padding-bottom: 15px; } #model .price .old { font-size: 20px; } /* ONE POS */ #position { margin-bottom: 20px; } #position table { margin-bottom: 20px; } #position h3 { font-family: @fl; } #position #gallery { text-align: center; border: 2px solid @gray; border-radius: 10px; } #position table.sale { font-size: 14px; } #position table.sale tr:nth-child(2n-1), { background: @gray; } #position table.sale td { padding: 5px 10px; } .maininfo {} .maininfo label { font-family: @fl; } .catalog { padding: 0 0 20px 0; } @media @big { .catalog .one { float: left; width: 31%; margin-bottom: 3%; border: 2px solid @gray; border-radius: 10px; position: relative; overflow: hidden; } .catalog .one:nth-child(3n) { margin-left: 3.5%; } .catalog .one:nth-child(3n+1) { margin-right: 3.5%; clear: both; } } @media @mid { .catalog .one { float: left; width: 48%; margin-bottom: 3%; border: 2px solid @gray; border-radius: 10px; position: relative; overflow: hidden; } .catalog .one:nth-child(2n) { margin-left: 2%; } .catalog .one:nth-child(2n+1) { margin-right: 2%; clear: both; } } @media @phone { .catalog .one { float: left; width: 100%; margin: 0 0 3% 0; border: 2px solid @gray; border-radius: 10px; position: relative; overflow: hidden; clear: both; } .catalog .one:nth-child(2n) { margin-left: 0; clear: both; } .catalog .one:nth-child(2n+1) { margin-right: 0; clear: both; } } .border_gray .one { position: relative; } .catalog .one .title, .border_gray .one .title { padding: 0 20px 5px 20px; text-align: center; } .catalog .one .discount, .border_gray .one .discount { position: absolute; left: 0; top: 0; padding: 4px 10px; background: red; color: white; z-index: 100; } .catalog .one .price, .border_gray .one .price { padding: 20px 0; font-family: @fb; } .catalog .one .price .old, .border_gray .one .price .old, #model .price .old { text-decoration: line-through; font-family: @f; padding-bottom: 5px; display: block; color: #939393; } .catalog .one .article, .border_gray .one .article { min-height: 40px; font-size: 14px; line-height: 1.2; @media @phone { font-size: 20px; } } .catalog .one .tech table { font-size: 11px; } .catalog .one .tech table tr:nth-child(2n-1), { background: @gray; } .catalog .one .tech table td { margin: 0; padding: 0 5px; color: black; } .catalog .one .pic, .border_gray .one .pic { margin-bottom: 10px; width: 100%; height: 250px; padding-top: 20px; overflow: hidden; text-align: center; } .catalog .one .pic img { position: relative; } .catalog .one .tech { width: 100%; float: left; max-width: 490px; padding-left: 160px; margin-left: -160px; } .apps { font-size: 14px; text-align: left; } .apps a { display: inline-block; width: 30px; height: 30px; margin-right: 3px; } .apps a:nth-child(6n) { margin-right: 0; } .apps div { font-size: 14px; } .apps img { position: relative; top: 7px; } .catalog .tech .text { background: @gray; } .pos_list a { margin: 0 10px 10px 0; display: inline-block; } .pos_list a.active { color: black; border-bottom: 2px solid black; } .tech table { font-size: 12px; margin-bottom: 15px; } .tech table tr:nth-child(2n-1), { background: @gray; } .tech table td { margin: 0; padding: 10px 20px; color: black; } .tech table td span { padding: 5px 0; display: block; } .tech table td p { padding: 0; } .pos { text-align: center; position: relative; width: 100%; float: left; margin-bottom: 20px; } .pos .white { position: relative; width: 100%; height: 100%; background: white; padding: 15px; border: 2px solid white; } .pos .white:hover { border: 2px solid @link; } .pos .white .pic { padding-bottom: 30px; overflow: hidden; } .pos .white .pic a { display: block; } .pos .white .pic img { display: inline-block; } .pos .white .height { min-height: 140px; position: relative; } .pos .white .title { padding-bottom: 10px; } .pos .white .title a { font-size: 18px; font-family: @f; color: black; text-decoration: none; } .pos .white:hover .title a { color: @link; } .pos .white .avail { font-size: 12px; color: @gray; padding-bottom: 60px; } .pos .white .price { font-size: 20px; font-family: @fb; color: @price; position: absolute; left: 0; bottom: 0; display: inline-block; } .pos .white .addBasket { font-size: 16px; font-family: @fb; position: absolute; right: 0; bottom: 0; display: inline-block; cursor: pointer; } @media @max { .pos .white .title a { font-size: 16px; } } @media @mid { .pos .white .price, .pos .white .addBasket { font-size: 100% } } .col-8 .positions .pos .white { padding: 10px; border: 2px solid white; } .col-8 .positions .pos .white:hover { border: 2px solid @link; } .col-8 .positions .pos .white .height { min-height: 120px; } .col-8 .positions .pos .white .title a { font-size: 12px; word-wrap: break-word; } .col-8 .positions .pos .white .avail { font-size: 12px; padding-bottom: 20px; } .col-8 .positions .pos .white .price { font-size: 18px; width: 100%; bottom: 20px; } .col-8 .positions .pos .white .addBasket { font-size: 14px; width: 100%; bottom: 0px; } @media @max { .col-8 .positions .pos .white { padding: 5px; } .col-8 .positions .pos .white .title a { font-size: 11px; word-wrap: break-word; } .col-8 .positions .pos .white .price { font-size: 14px; width: 100%; bottom: 20px; } .col-8 .positions .pos .white .addBasket { font-size: 12px; width: 100%; bottom: 5px; } } .sort { font-size: 14px; font-family: @f; } .sort.in_head { position: absolute; right: 0; bottom: 0; } .sort .sort_d { padding-left: 15px !important; background: url(/images/sort_d.png) no-repeat left 7px; background-size: auto 50%; cursor: pointer; } .sort i { color: @link; padding-right: 4px; } /* BUTTON */ .btn { display: inline-block; color: white; padding: 7px 17px 0 17px; font-size: 13px; font-family: @f; height: 30px; text-decoration: none; cursor: pointer; border: 0; background: @link; border-radius: 10px; box-shadow: inset 0px -3px 0px @shadow; -webkit-appearance: none; @media @mid { padding-right: 14px; padding-left: 14px; } } .btn.clear { background: @gray; color: black; box-shadow: inset 0px -3px 0px @gray - #444; } .btn:hover { background: @link + #111; color: @link - #555; box-shadow: inset 0px -2px 0px @shadow; } .btn.clear:hover { background: @gray + #0f0f0f; box-shadow: inset 0px -2px 0px @gray - #333; } input.btn { padding-top: 0; } /* FILTR */ .filtr { background: white; padding: 0; } .filtr .col3 select { width: 100%; } .filtr .title { font-size: 12px; font-family: @fb; padding-bottom: 10px; @media @max{ font-size: 10px; } } .filtr .list { overflow: hidden; line-height: 1.5; padding-bottom: 20px; } .filtr .list li { list-style-type: none; display: inline-block; margin-right: 10px; } .filtr .list li.active a { border: 0; color: black; font-family: @f; cursor: default; } .filtr .list li.active a.dl { color: @link; cursor: pointer; } .clearFilter { color: black; position: absolute; right: 0; top: -40px; font-size: 14px; font-family: @f; } .filtr a { font-size: 12px; padding: 2px 4px; text-decoration: none; } .filtr a:hover { text-decoration: underline; } .filtr a.active { background: red; color: white; } .filtr .checkbox { padding-bottom: 4px; overflow: hidden; font-family: @f; } .filtr .checkbox input { float: left; width: 17px; height: 17px; margin: 2px 0 0 0; padding: 0; border: 0; } .filtr .checkbox label { float: left; width: 100%; padding-left: 20px; margin-left: -17px; font-size: 12px; cursor: pointer; text-align: left; } .filtr .col2, .filtr .col3 { overflow: hidden; position: relative; margin-bottom: 20px; width: 100%; } .filtr .col3 .list { height: 150px; overflow-x: hidden; overflow-y: auto; position: relative; margin-right: 10px; padding: 5px; border: 2px solid @gray; border-radius: 10px; } .filtr table td:nth-child(3n) .list { margin-right: 0; min-width: 140px; } .filtr .ajax { position: absolute; bottom: 0px; left: 0; font-size: 14px; } /* PAGINATOR */ .paginator { padding: 10px; margin-bottom: 20px; background: white; text-align: center; font-size: 12px; clear: both; @media @phone { font-size: 20px; } } .paginator ul { overflow: hidden; } .paginator li { list-style-type: none; display: inline-block; margin: 0; } .paginator li a { padding: 5px; display: inline-block; @media @phone { padding: 20px; } } .paginator li.hidden a { cursor: default; color: @gray; text-decoration: none; } .paginator li.selected a { background: @link; color: white; font-family: @f; text-decoration: none; border-radius: 10px; } /* INDEX - PAGE */ .slogan { height: 126px; width: 100%; background: url(/images/slogan.png) no-repeat left top; font-family: @fb; font-size: 16px; padding: 70px 0 0 200px; margin-bottom: 20px; } .text { font-size: 16px; line-height: 1.5; padding-bottom: 50px; } .text .quote, .text blockquote { font-size: 22px; color: #0076a3; padding-bottom: 20px; } .text .strong { font-family: @f; } .text ul { list-style: none; } .text li { padding: 0 0 10px 20px; background: url(/images/blue_square.png) no-repeat left 7px; } @media @phone { .text img { width: 100%; } } .smallBanner { display: block; width: 100%; margin-bottom: 20px; } section.page { padding-top: 20px; } .page .container { padding-top: 20px; } .page h1, .page .head { } /* BANNERS */ .banners { } .banners a { display: block; } .banners a img { width: 100%; border-radius: 10px; } /* PARTNERS */ .partners { display: table; width: 100%; height: 200px; margin-bottom: 50px; } .partners > .row { display: table-row; height: 100px; } .partners > .row > .col-2 { display: table-cell; vertical-align: middle; height: 100px; } .partners .col-2 img { display: inline-block; } /* SALE */ .page table.sale { font-size: 14px; } .page table.sale tr:nth-child(2n-1), { background: @gray; } .page table.sale td { padding: 10px 20px; } /* BREAD */ .breadcrumbs { font-size: 12px; font-family: 'Trebuchet MS'; padding-bottom: 20px; color: @gray; @media @phone { display: none; } } .breadcrumbs span { padding: 0 5px; } /* WHY WE? */ .border_gray { padding: 20px; border: 2px solid @gray; border-radius: 10px; position: relative; margin-bottom: 20px; @media @phone { top: 20px; } } .border_gray ul { } .border_gray li { list-style-type: none; font-size: 15px; font-family: @f; line-height: 1.4; padding-left: 40px; position: relative; padding-bottom: 30px; } .border_gray li:last-child { padding-bottom: 27px; } .border_gray li span { position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: @link; color: white; font-family: @fb; border-radius: 24px; padding: 1px 0 0 7px; } /* BORDER LINK */ .border_link { padding: 20px; border: 2px solid @link; border-radius: 10px; position: relative; } .border_link.one { min-height: 368px; } .border_link.one .big a.btn { font-size: 18px; @media @max{ font-size: 14px; } } .big { color: @link; padding: 20px 0; @media @mid{ padding: 15px 0; } } .big a { /*text-decoration: none;*/ font-size: 25px; } .big a.btn { font-size: 20px; height: 40px; @media @max{ height: auto; padding: 5px; } } /* LANGUAGE */ .ln { position: absolute; right: 0; top: 10px; z-index: 10; } .ln span { color: @gray - #222; font-size: 11px; float: left; padding-right: 2px; position: relative; top: 3px; } .ln ul.language { float: left; position: relative; } .ln ul.language li { list-style-type: none; padding: 2px; background: white; width: 21px; height: 21px; float: left; } .ln ul.language li.active { display: block; } /* SEARCH */ .searchBlock { position: relative; } .searchBlock #searchField { padding: 0 10px; font-size: 13px; font-family: @f; width: 100%; height: 30px; border: 2px solid @gray; border-radius: 10px; color: @gray - #333; } .searchBlock input[type="submit"] { position: absolute; right: 0; top: 0; cursor: pointer; width: 50px; height: 30px; border: 0; background: url(/images/lupa.png) @link no-repeat; border-radius: 10px; box-shadow: inset 0px -3px 0px @shadow; } /* FOOTER */ footer { position: relative; width: 100%; margin: 0 auto; background: #e7e7e7; padding: 20px 0; @media @small { width: 1000px; } @media @phone { width: 100%; } } footer .head { color: #0c3244; font-size: 20px; } footer .link { padding-bottom: 10px; padding-right: 20px; } footer .link a { font-size: 13px; text-decoration: none; font-family: @fl; color: black; } .footer { font-family: @fb; font-size: 12px; color: black; padding-top: 20px; height: 40px; } .footer .container { padding-bottom: 0; } /* SLIDER */ .slider { width: 100%; height: 400px; background: url(/images/main-1.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; @media @small { width: 1000px; } @media @phone { width: 100%; } } .slider .container { position: relative; top: 150px; } .slider .head { position: relative; z-index: 10; font-size: 50px; line-height: 1.2; margin: 0; padding: 0; color: #fff; font-family: @fb; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); text-align: center; @media @phone { font-size: 24px; } } .slider #sl_left, .slider #sl_right { z-index: 10; position: absolute; top: 100px; width: 29px; height: 50px; cursor: pointer; } .slider #sl_left { left: 70px; background: url(/images/left.png) no-repeat; background-size: 100% 100%; } .slider #sl_right { left: 600px; background: url(/images/right.png) no-repeat; background-size: 100% 100%; } .slider ul { width: 3000px; position: absolute; z-index: 1; } .slider li { float: left; position: relative; list-style-type: none; } .slider li div.title { font-family: 'DS Greece', arial; width: 500px; min-height: 60px; position: absolute; text-align: center; text-transform: uppercase; left: 100px; top: 100px; color: white; font-size: 50px; } .slider li div.summary { width: 400px; min-height: 60px; position: absolute; text-align: center; text-transform: uppercase; left: 150px; top: 200px; color: white; font-size: 24px; } .slider li div.summary p { color: white; text-decoration: none; margin-bottom: 20px; } div.opr {}