/* try to less */ @color-dark: #1B1B1B; @color-green: #1C5E5E; @color-green_dark: #004545; @color-green_light: #2C9191; @color-blue_dark: #0061A1; @color-blue_light: #194FD3; @color-white: #ffffff; @bg-light: #edf0f6; @site-font: 'Open Sans', sans-serif; @light: 300; @regular: 400; @bold: 700; @semi-bold: 600; @indent: 40px; html { font-family: @site-font; background: @bg-light; } b { color:#1B1B1B; } h1,h2 { text-align:center; font-weight: @bold; color: @color-dark; font-size:30px; font-family: @site-font; } header>div:first-child { background: @color-white; } .container { max-width:1240px; margin:0 auto; @media (max-width:812px) { padding: 0 10px; } } .no-decor { text-decoration:none; } .top-nav { font-weight: @regular; height:35px; ul { padding-left:0; } li { display:inline-block; padding: 5px 15px; } li:hover { background: #e9f4f4; } .active { background: #e9f4f4; } a { color: @color-green_dark; &:hover { .no-decor; } } div:last-child { text-align:right; padding-top: 5px; } } .header_adress { padding-right: 10px; padding-top: 10px; font-weight: @light; color: @color-dark; line-height: 22px; @media (max-width: 812px) { text-align:center; } } .header_time { padding-top: 10px; font-weight: @light; color: @color-dark; line-height: 22px; b { font-weight:600; } @media (max-width: 812px) { display: none; } } .header_phone { text-align:right; font-weight: @semi-bold; font-size: 20px; color: @color-dark; padding-left: @indent - 30px!important; margin-top: @indent - 33px; @media (max-width: 812px) { display: grid; text-align:center; } span { font-size:15px; font-weight: @regular; text-decoration: underline; } a { color: @color-dark; &:hover { .no-decor; color:#2C9191; transition:0.3s; } } } .header { background: @bg-light; padding:20px 0; @media (max-width: 812px) { img { padding:0 @indent - 10px; } } } .mobile-main>a{ .button; margin: 0px auto; width: 126px; text-align:center; } .nav-bar { background: @color-green; ul { padding-left:0; height: 55px; } li { display: inline-block; /*padding: 16.5px 50px;*/ &:hover { background: @color-green_light; a { color:#fff; } } } a { color: @color-white; font-size:15px; } .top_menu>.uk-nav>.active>a:first-child{ background: @color-green_light; padding: 16.5px 50px!important; } .level1>a { padding: 16.5px 50px!important; } .level1>.active { background: @color-green_light; } .top_menu .level1 .uk-nav>.active { border-bottom: 1px solid #D1D1D1; } .top_menu li.active .uk-open:first-child { /*border-left:3px solid red;*/ } /*.top_menu .level1 .uk-nav>.active a{ color: #1B1B1B; font-size: 17px; line-height: 22px; padding-left: 22px; font-weight: 600; border-left:3px solid #2c9191; background:#fff; }*/ } .slider { margin-top: @indent; margin-bottom: @indent; a { background: @color-green_light; color: @color-white; font-size: 15px; padding: 9px 35px; border:1px solid @color-green_light; border-radius: 5px; position: absolute; bottom: 100px; margin-left: @indent + 10px; &:hover { .no-decor; color: @color-green_light; border:1px solid @color-green_light; background: @color-white; transition:0.3s; } } .slider_content { position: absolute; top: 30%; } .slider_content>p { padding-left: @indent + 10px; font-size: 40px; color: @color-white; width: 80%; font-weight: @semi-bold; line-height: 45px; @media (max-width:812px) { font-size: 27px; } } /*.slider_content>p:first-child { margin-bottom:0px; } .slider_content>p:nth-child(2) { margin-top:0px; }*/ } .slider img { width: 100%; object-fit: cover; height: 395px; } .slick-slide { outline: none; } .slick-dots { position: absolute; bottom: @indent - 10px; padding-left: @indent + 10px; li { display: inline-block; } button { font-size: 0; width: 15px; height: 15px; padding: 7px; cursor: pointer; border: 1px solid @color-white; border-radius: 10px; outline: none; background: @color-white; margin-right: 15px; } .slick-active button { background: @color-dark; } } .banner { margin-top:@indent; margin-bottom: @indent; @media (max-width:812px) { padding-left:0; } img { height: 395px; object-fit: cover; } } .catalog { ul { @media (max-width:812px) { margin-left:0px; } } li { /*background-color: @color-white!important; padding-top: @indent - 10px; padding-bottom: @indent - 10px;*/ list-style:none; /*border-right: 1px solid @bg-light;*/ position: relative; height: 345px; /*background-position: 130% 45%!important;*/ background-position: 180% 45%!important; /*margin-top: @indent - 39px!important;*/ img { position: absolute; /*width: 100%;*/ width:90.5%; height: 106px; /*padding-right: 41px;*/ bottom: 0; z-index: 1; object-fit: cover; @media (max-width:812px) { margin-left: -10px; padding-right: 0; } } div { background-color: #ffffff !important; padding-top: 30px; list-style: none; border-right: 1px solid #edf0f6; position: relative; height: 315px; background-position: 210% 100%!important; background-size: contain; background-repeat: no-repeat; /*margin-top: -30px;*/ padding-left: 30px; @media (max-width:812px) { padding-left:0px; } } a:nth-child(n+6) { display:none; } @media (max-width:812px) { background: #fff!important; padding-left: 10px; } } li:nth-child(3n) { border-right:none; } a { color: @color-dark; font-weight: @regular; display:block; &:hover { color: @color-green_light; } } a:first-child { font-size:22px; font-weight: @bold; line-height: 22px; margin-bottom: @indent - 10px; width: 80%; color: @color-dark; z-index: 999; .no-decor; &:hover { color: @color-green_light!important; } } a:first-child:before { content:'Показать еще'; position:absolute; bottom: @indent + 2px; font-size: 15px; color: @color-white; font-weight: @regular; text-decoration: underline; z-index:99; &:hover { color: @color-white!important; } } } .news>div>div { background: @color-white; border-top: 3px solid @color-green_light; } .news { margin-bottom: @indent; h2 { font-size:22px; font-weight: @bold; color: @color-green_light; text-align:left; padding-top: @indent - 10px; } p { font-size:17px; font-weight: @light; padding-right: @indent - 20px; } a { font-size: 15px; color: #2C9191; font-weight: 400; text-decoration: underline; } img { height: 250px; width: 100%; object-fit: cover; } } .main_content { background: @color-white; /*margin-top: @indent * 2;*/ padding-top: @indent; padding-bottom: @indent; margin-bottom: @indent + 20px; h1 { text-align:left; } ul { list-style: none; font-size: 15px; /*text-transform: uppercase;*/ font-weight: 400; color: @color-green_light; border-left: 4px solid @color-green_light; margin-left: @indent; margin-top: 50px; } li { padding-bottom: 15px; } li:last-child { padding:0; } .uk-accordion-title { color: #2C9191; font-size: 15px; font-weight: 600; text-decoration: underline; &:before { content:none; } } } footer { ul { padding: @indent 0!important; list-style:none; font-size:15px; color: @color-white; } ul>ul { padding:0!important; margin:0!important; } ul>li { font-weight: @regular; text-transform: uppercase; } ul>ul>li { font-weight: @light; text-transform: inherit; } li { line-height: 22px; padding-bottom: @indent - 35px; } a { color: @color-white; &:hover { color: @color-white; } } div>div:first-child { background: @color-green; position:relative; @media (max-width:812px) { border-left:1px solid; display:none; } &:before { content: ''; background: #1C5E5E; width: 100%; height: 100%; z-index: 1; position: absolute; left: -100%; } } p { font-weight: @light; color: @color-dark; font-size:15px; &:first-child { text-transform:uppercase; font-weight: @regular; padding-top: @indent; } } p:last-child { margin-top: @indent; } .email { color: @color-green_light; &:hover { color: @color-green_dark; } } } .footer_phone { font-weight: @semi-bold; a { color: #1B1B1B; &:hover { color: @color-green_light; } } } .button { background: @color-green_dark; color: #ffffff; font-size: 15px; padding: 9px 35px; border: 1px solid @color-green_dark; border-radius: 5px; cursor:pointer; display: block; margin: @indent auto; width: auto; &:hover { .no-decor; color: @color-white; border:1px solid @color-green_light; background: @color-green_light; transition:0.3s; } } #pdopage button{ .button; color: @color-white; background: @color-green_dark; border:1px solid @color-green_dark; &:hover { color: @color-white; background: @color-green_light; border:1px solid @color-green_light; } } .breadcrumb { padding:0; margin-top: @indent - 25px; color: @color-dark; a { color: @color-dark; font-weight: 400; } li { display:inline-block; &:first-child a{ font-weight: @bold; } } } .ridgepole { margin-top: @indent; } .content { padding-bottom: @indent; h1, h2 { text-align:left; } } .useful { div>div { background: @color-white; } h2 { color: @color-green_light; font-weight: @bold; font-size: 22px; margin-top: @indent - 40px; min-height: @indent + 20px; } .useful_content { padding: @indent - 25px; a { position:absolute; bottom: @indent - 10px; text-transform: uppercase; color: @color-blue_light; font-size: @indent - 25px; } } img { height: 210px; width: 100%; object-fit: cover; } } .useful>div>div { min-height: 485px; position:relative; } hr { margin: @indent * 2 0; } .left-side>div:first-child { height:100%; } .left-side { ul { background: @color-white; padding: @indent - 25px; margin-top: @indent - 35px; margin-bottom: @indent - 35px; } ul>a { padding: 10px 50px 10px 0; color: @color-dark; font-weight: @bold; } .uk-nav-parent-icon>.uk-parent>a::after { content:"+"; background-image:none; color: @color-dark; position: absolute; right: 0; font-size: 22px; width: 0; margin-right: @indent - 15px; top: -32px; } .uk-nav-parent-icon>.uk-parent.uk-open>a::after { content:'—'; background-image:none; color: @color-dark; font-size: 12px; font-weight: bold; top: -25px; } .uk-nav-parent-icon>.level1:nth-child(2)>a::after { top:-52px; } .uk-nav-parent-icon>.level1:nth-child(6)>a::after { top:-52px; } .uk-nav-parent-icon>.level1:nth-child(12)>a::after { top:-52px; } .uk-nav-parent-icon>.level1.uk-open:nth-child(2)>a::after { top:-45px; } .uk-nav-parent-icon>.level1.uk-open:nth-child(6)>a::after { top:-45px; } .uk-nav-parent-icon>.level1.uk-open:nth-child(12)>a::after { top:-45px; } li.level1 { padding: 5px 0; ul { padding-top: 0; } } li.level1 li.uk-open a{ color: @color-green_light; } li.level2 { position:relative; a:hover { color: @color-green_light; } a.active { color: @color-green_light; } a.active:before { border:1px solid @color-green_light; } } li.level2 a:hover:before { border:1px solid @color-green_light; } li.level2 a:before { content:''; position:absolute; left: -15px; top: 11px; width: 8px; height: 8px; border:1px solid @color-dark; border-radius:50%; } } .left_name { background: #1C5E5E; padding: 8px 15px; color: #fff; } .left-side>ul { margin-top: @indent - 30px; } .uk-nav-default>li>a { padding: 0px 50px 0px 0; position:relative; font-weight: @bold; color: @color-dark; } .uk-nav-default>li>a:focus, .uk-nav-default>li>a:hover { color: @color-dark; } .cd-gallery { li{ margin-bottom: 1.6em; display: none; /*padding:1px;*/ margin-top: 0!important; div>div { font-size:13px; font-weight: @semi-bold; color: @color-dark; padding:1px 15px; min-height: 70px; background: #fff; /*:nth-child(-n+9) { display:inline; }*/ span { font-weight: @light; /*display:none;*/ display:inline; } p { /*min-height: 57px;*/ /*margin: 0;*/ /*margin-top: -10px; margin-bottom: -10px;*/ color: @color-dark; display:block!important; } a>p { /*padding-bottom:15px;*/ } a:hover { text-decoration:none; } } &:hover { div { border:1px solid #2C9191; } div>div { border:0px; } } } } .catalog_inner { img { width:100%; } .another_li { height:370px; @media (max-width:812px) { height:100%; } li { cursor:pointer; margin-bottom: 40px; div>div{ position:relative; height:100px; transition:0.3s; } .ask_price { /*position:absolute;*/ /*bottom:15px;*/ opacity: 0; height: 0; transition:0.3s; font-size:13px; font-weight:600; width:50%; padding:10px 35px; &:hover { color:#2C9191; background:#fff!important; border:1px solid #2C9191!important; } } &:hover { li { margin-bottom: 40px; } div>div { height:160px; } .ask_price { opacity:1; height:20px; } } } } ul { /*margin:0;*/ li>p { background: @color-green_dark; color: @color-white; text-align:center; padding: @indent - 35px 0; margin:0; height:45px; } .ask_price { .button; margin:30px auto!important; background:#1C5E5E!important; border:1px solid #1C5E5E!important; text-align:center; /*margin-bottom:0;*/ /*margin-top:-80px;*/ @media (max-width:812px) { text-align:center; } &:hover { color:#fff; background:#2C9191!important; border:1px solid #2C9191!important; } } } } .popular { margin-bottom: @indent * 2; li { height:100%; text-align: center; line-height: 18px; color: #fff; div { position:relative; } img { height: 130px; } p { position:absolute; bottom:0; background: #00000070; margin: 0; margin: 0; width: 100%; padding: 5px 0; } a { color: @color-white; text-decoration:none; &:hover { p { background: #2c9191cc; } } } } } .cd-filter-block { .uk-nav-parent-icon > .uk-parent > a::after { top:-5px; } .uk-nav-parent-icon > .uk-parent.uk-open > a::after { top:2px; } ul.uk-nav-sub { padding-left: 0; li { padding: 5px 0; } } } .cd-filter-block { label { display: inline-block; cursor: pointer; position: relative; padding-left: 16px; margin-right: 15px; font-weight: @light; &:hover { color: @color-green_light; &:before { color:#2C9191; } } } input[type=checkbox] { display: none; } label:before { content: ""; display: inline-block; border: 1px solid; width: 8px; height: 8px; color: @color-dark; position: absolute; left: 0; bottom: 5px; /*background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);*/ } label:before { border-radius: 10px; } input[type=checkbox]:checked + label:before { content: "\2022"; color: @color-green_light; font-size: 23px; text-align: center; line-height: 9px; } } .tovar_slide { img { width:100%; height:440px; object-fit:cover; padding-bottom: @indent - 25px; padding-right: 10px; } } .tovar_nav { img { padding-right:10px; height: 100px; object-fit: cover; width: 100%; } } .tovar_inner { p { margin:10px 0; font-weight: @light; color: @color-dark; } a:hover { text-decoration:none; } .ask_price { .button; background: #1C5E5E; border: 1px solid #1C5E5E; margin: @indent - 20px 0; width: 126px; &:hover { background: #2C9191; border: 1px solid #2C9191; color:#fff; } } .another_h2 { font-size: 15px; font-weight: bold; margin: 70px 0 20px 0; color: #1B1B1B; } .instock { color: @color-green_light; font-weight: @semi-bold; } .info { text-transform:uppercase; font-weight: @semi-bold; color: @color-dark; border-bottom:1px solid @color-dark; } span { color: @color-green_light; } p:nth-child(odd) span{ text-decoration:underline; } @media (max-width:812px) { .uk-tab { display:block; text-align:center; } } ul { color: @color-green_light; span { color: #1B1B1B; } } .uk-switcher { color:#1B1B1B; font-weight:300; } } .tabs { margin-top: @indent * 2; .uk-tab li { font-weight: @semi-bold; color: @color-dark; cursor:pointer; padding-right: 20px; a { text-transform: inherit; } } .uk-tab .uk-active a { border-bottom:3px solid #2C9191; } } .uk-switcher { div>div { padding:@indent - 35px @indent - 30px; } div:nth-child(4n+1), div:nth-child(4n+2) { div{ background: @color-white; } } @media (max-width:812px) { div { padding-left:30px!important; } } } .another_tovar { margin-left:-40px!important; li { padding-left:40px; } li div { font-size: 13px; font-weight: @semi-bold!important; color: #1B1B1B; /*padding:15px 15px 30px 15px;*/ min-height: @indent + 30px; background: #fff; div { padding:15px 15px 30px 15px; } /*:nth-child(-n+9){ display: revert; }*/ span { display:none; } p { margin:5px 0; font-weight: 300; height: 19px; } } li>div:hover { border:1px solid #2C9191; } li div a { font-size: 13px; font-weight: @semi-bold; color: #1B1B1B; /*padding: @indent - 25px;*/ background: #fff; &:hover { text-decoration:none; } } li>div>a>p { min-height:40px; } } .another-margin { margin-top: @indent - 80px; } .bisness { margin-top: @indent; padding-top: @indent; img { float: right; } } .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} #mobile-main_menu { .uk-offcanvas-bar { width:375px; padding-top: 30px; } .uk-nav-default { padding-top:50px; li { position: relative; padding: 10px 0; } li.level1>a:after { position:absolute; top:-30px; right:25px; } } .uk-offcanvas-close { margin-top:28px; } } #mobile-main, #mobile-top { ul { list-style: none; color: #fff; line-height: 50px; } } .cd-filter { .left_name { margin-bottom: @indent; } } .left_name { min-height: 24px; ul { list-style:none; float:left; } ul:first-child { border-right:1px solid @color-white; } .uk-nav-sub { margin-top:-10px; } p { float:left; margin-bottom:0px; } li { margin-bottom:0px; } a { color: @color-white; :hover { text-decoration:none; } } } input[name="surname"] {display:none;} .uk-modal-dialog { input { margin:5px 0; } .button { width:100%; } .h2 { text-align:center; font-weight: @bold; color: @color-dark; font-size:30px; font-family: @site-font; } } .green_button { background:#1c5e5e; border:1px solid #1c5e5e; } .green_button:hover { background:#2C9191; color:#fff; border:1px solid #2C9191; } /* try to shit */ /*.left_name { li { display:none!important; } }*/ .top_menu li.level1 { position:relative; .uk-dropdown { min-width: 300px; /*padding: 28px 0 0 0;*/ padding:0; top: 45px!important; } ul { height:100%; position:relative; } } .top_menu li.level2 { padding:0; border-bottom: 1px solid #D1D1D1; width: 100%; a { color:#1B1B1B; font-size: 17px; line-height: 22px; /*border-bottom: 1px solid #D1D1D1;*/ padding-left:22px; /*margin-top: 22px;*/ font-weight:600; } &:hover { background:#fff; border-left:3px solid @color-green_light; } /*.uk-open:first-child { border-left:3px solid #2C9191; }*/ .uk-dropdown { left: 300px!important; /*top: -38px!important;*/ top: -10px!important; min-width: 320px; /*padding-top:50px;*/ padding-top: 22px; margin-top: 10px; } } .top_menu li.level2>a { margin-top: 22px; } .top_menu li.level3 { padding:0; display: block; a { color:#A2A2A2; border:0px; font-size: 17px; font-weight: 400; &:hover { color:#2C9191; text-decoration:underline; } } &:hover { background:#fff; } } .nav-bar { height:55px; } .top_menu .uk-dropdown { min-height: 435px; box-shadow:none; } .top_menu .uk-open { li.level3 a{ border-left:0px!important; } } .uk-nav li.level1:nth-child(2) .uk-dropdown { display:none!important; } .uk-search .src-input { border-radius: 5px; border: 0; } .uk-link, a { color: @color-green_light; &:hover { color: @color-green_dark; } } .form_contact { background:#fff; padding:30px 60px; box-shadow: 0px 2px 5px #45454533; .form_h2 { color: @color-green_light; font-weight:bold; text-align:center; } p { text-align:center; margin: 10px 0; } .uk-input { margin-bottom: 10px; font-size: 15px; } textarea { font-size: 15px; } } footer>div>div { padding-bottom:30px!important; } footer p:last-child { font-weight:300; } .name_of_the_filter2 { height: 310px; overflow-y: scroll; } .name_of_the_filter2::-webkit-scrollbar { background:#fff; width:6px; } .name_of_the_filter2::-webkit-scrollbar-thumb { border-radius: 4px; background: #D5D5D5; } ul li::marker { color: @color-green_light; } ol li::marker { color: @color-green_light; } .sticky { position: sticky; top: 0; } .stickytop { position:fixed; top:0; width:100%; z-index:999; display:block!important; } .fixed-nav .top_menu { width: 55%; } .fixed-phone { padding: 16px 0px; a { &:hover { color:#fff; } } } .fixed-nav { .header_search { width: 23.8%; } } @media screen and (max-width:812px) { .fixed-nav { display:none!important; } }