@import '../css/font-awesome.min.css'; @import '../js/fancybox/jquery.fancybox.css'; @import '../js/ui/jquery-ui.min.css'; @import '../js/selectBoxIt/jquery.selectBoxIt.less'; @import 'vars.less'; @import 'functions.less'; @import 'header.less'; @import 'footer.less'; @import 'catalog.less'; @import 'razdels.less'; @import 'lists.less'; @import 'data.less'; @import 'form.less'; @import 'articles.less'; @import 'gallery.less'; @import 'specialists.less'; @import 'gb.less'; @import 'pricelist.less'; @color_white:#ffffff; @color_black:#000000; @color_gray:#cccccc; @color_red:#e03c42; @color_green:#4fad51; *{ font-size:16px; } 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,font,img,ins, kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,label,legend,caption{ border:0px; margin:0px; outline:0px; padding:0px; } html,body{ margin:0px; padding:0px; width:100%; height:100%; } html{ overflow-y:scroll; } body{ margin:0; padding:0; font-family:@font_base; font-size:16px; line-height:24px; color:@color_text; -ms-text-size-adjust:100%; -moz-text-size-adjust:100%; -webkit-text-size-adjust:100%; } a{ color:@color_link; text-decoration:underline; &:hover{ text-decoration:none; } } article{ font-size:16px; line-height:24px; p{ margin-bottom:10px; text-align:left; } ul,ol{ margin-left:20px; margin-bottom:10px; } ul { list-style:none; margin-left:0; li { padding-left: 20px; position: relative; &:before { content: '\f111'; font-family: FontAwesome; font-size: 8px; line-height: 8px; position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-start; color: #ffd331; } } } h1,h2,h3{ margin-bottom:10px; line-height:1.2em; } h1{ font-size:28px; } h2{ font-size:24px; } h3{ font-size:20px; } table{ margin-bottom:10px; border-collapse:collapse; th,td{ padding-right:20px; } th{ text-align:left; } } } input[type=text],input[type=password],input[type=email],textarea{ border:1px solid @color_gray; font-family:@font_base; &:focus{ outline:none; border-color:@color_link; } } input[type=submit],input[type=button],button{ height:40px; padding:0 20px; border:0px; cursor:pointer; text-transform:uppercase; display: block; width: 100%; border-radius: 30px; font-size: 12px; line-height: 16px; color: #475577; font-weight: 600; background: #ffd331; outline: none; margin-top: 20px; &:hover {box-shadow:0 0 7px #ffd331;} } .page_title{ margin-bottom:20px; h1,.h1{ font-size: 24px; line-height: 36px; text-align: left; text-transform: uppercase; position: relative; padding-left: 15px; font-weight: 800; margin-bottom:30px; &:before { content: ''; width: 4px; background: #ffd331; position: absolute; top: 8px; left: 0; bottom: 8px; } } } .clear{ clear:both; } .left{ float:left; } .right{ float:right; } .mess_err{ color:@color_red; font-weight:bold; } .mess_ok{ color:@color_green; font-weight:bold; } .wrap{ width:@width_wrap; margin:0 auto; position:relative; } #body{ position:absolute; top:0; left:0; width:100%; min-height:100%; height:auto; } #middle{ height:auto; position:relative; padding-bottom:350px; padding-top:40px; &.main { padding-top:0; padding-bottom:289px; } } #left{ float:left; width:@width_left; } #content{ float:right; width:@width_content; position:relative; padding:0; } #right{ float:right; width:@width_right; margin-left:20px; } .block{ padding:60px 0; background-repeat:no-repeat; background-position:center center; background-size:cover; box-sizing:border-box; position:relative; .title{ font-size: 24px; line-height: 36px; text-align: left; text-transform: uppercase; position: relative; padding-left: 15px; font-weight: 800; margin-bottom:30px; &:before { content: ''; width: 4px; background: #ffd331; position: absolute; top: 8px; left: 0; bottom: 8px; } a{ color:@color_text; text-decoration:none; &:hover{ color:@color_link; } } } .block_title_link { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; .title { width: 100%; margin: 0; } .all_link, .pricelist { a { display: block; text-align: center; padding: 15px 30px; font-size: 12px; line-height: 15px; text-transform: uppercase; text-decoration: none; color: #475577; font-weight: 600; border: 2px solid #ffd331; border-radius: 40px; white-space: nowrap; &:hover { box-shadow:0 0 7px #ffd331; } } } .pricelist { margin: 0; margin-left: 30px; a { background: #ffd331; padding-right: 70px; background-image: url(../images/icon-pdf.png); background-position: 85% center; background-repeat: no-repeat; } } } } .rows{ text-align:center; .item{ display:inline-block; vertical-align:top; .photo,.name{ margin-bottom:15px; } .photo{ position:relative; .date{ position:absolute; z-index:20; background:fade(@color_link,70%); color:@color_white; padding:10px; left:0; top:20px; } } .date{ font-size:12px; line-height:14px; margin-bottom:10px; } .name{ font-size:18px; line-height:20px; a{ text-decoration:none; color:@color_text; &:hover{ color:@color_link; } } } .more{ a{ display:inline-block; border:1px solid @color_link; text-transform:uppercase; line-height:40px; padding:0 35px; text-decoration:none; &:hover{ color:@color_white; background:@color_link; } } } } } .pages{ padding:20px 0px; ul{ list-style:none; text-align:center; li{ display:inline-block; vertical-align:top; margin:0 5px; a,span{ display:inline-block; padding:5px; border-bottom:2px solid transparent; } a{ text-decoration:none; } span,a:hover{ color:@color_text; border-color:@color_link; } } } } .popup_page{ padding:40px; } #color_changer{ li{ cursor:pointer; border:1px solid @color_text; display:inline-block; width:20px; height:20px; margin:0 5px 5px 0; vertical-align:top; &.active{ border:1px solid @color_red; } } } #back_top{ position:fixed; bottom:50px; right:50px; background:@color_link; opacity:0.7; .transition(1s); .border_radius(50%); &:hover{ opacity:1; } a{ width:50px; height:50px; line-height:50px; display:block; text-align:center; font-size:25px; color:@color_white; } } .termins{ .termins_letter{ font-size:1.5em; line-height:1.6em; font-weight:bold; } .termins_letter_container{ margin-bottom:1.5em; .termin_item{ width:30%; float:left; padding-bottom:0.4em; } } } .compare_table{ width:100%; border-collapse:collapse; table-layout:fixed; tr{ td{ padding:7px; border-bottom:1px dashed @color_gray; border-right:1px dashed @color_gray; &:last-child{ border-right:0px; } } } .photo{ position:relative; a{ text-decoration:none; } .delete_from_compare{ display:block; position:absolute; right:10px; top:10px; background:@color_link; color:@color_white; .border_radius; padding:2px 4px; } } .name{ font-weight:bold; text-transform:uppercase; a{ text-decoration:none; &:hover{ text-decoration:underline; } } } .param{ font-weight:bold; } } aside{ .article_item{ .article_item_photo,.article_item_text{ float:none; width:100%; } } } .tabs{ .tabs_navigation{ ul{ list-style:none; li{ display:inline-block; vertical-align:top; border:1px solid @color_link; color:@color_link; height:40px; line-height:40px; padding:0 20px; cursor:pointer; &.active{ background:@color_link; color:@color_white; cursor:default; } } } } .tabs_content{ .tab{ display:none; &.active{ display:block; } } } } .form_messages{ margin-bottom:20px; textarea{ width:100%; resize:vertical; height:100px; } } .messages{ .message_item{ padding:10px; border:1px solid @color_gray; margin-bottom:20px; .info{ font-weight:bold; margin-bottom:5px; span{ font-style:italic; font-weight:normal; } } } .message_new{ background:fade(@color_red,20%); } .message_item_sys{ margin-left:70px; } .message_item_user{ margin-right:70px; } } .catalog_limit{ a{ display:inline-block; vertical-align:top; .border_radius(14px); margin:0 2px; line-height:32px; padding:0 15px; background:@color_gray; text-decoration:none; color:@color_text; &.active,&:hover{ color:@color_white; background:@color_text; } } } .catalog_sort{ a{ display:inline-block; vertical-align:top; padding-left:15px; color:@color_text; text-decoration:none; &.active,&:hover{ color:@color_link; } } } .filters{ .filter{ margin-bottom:15px; .name{ display:block; font-size:22px; line-height:24px; margin-bottom:10px; } .range{ margin-bottom:10px; .ui-slider-horizontal{ border-radius:0 !important; height:4px !important; background:@color_gray !important; border:0 !important; margin-bottom:10px; } .ui-slider-range{ background:@color_link; } .ui-slider-handle{ background:@color_gray !important; border-radius:50% !important; width:14px !important; height:14px !important; top:-5px !important; border:0 !important; } } .left,.right{ font-size:14px; line-height:20px; input[type=text]{ width:60px; height:20px; text-align:center; padding:0; } } .vars{ label{ display:block; } } } .submit{ text-align:right; } } .version_desktop,.version_mobile{ text-align:center; background:@color_gray; line-height:40px; text-transform:uppercase; a{ color:@color_text; text-decoration:none; &:hover{ color:@color_link; } } } .questions{ .item{ margin-bottom:20px; .question{ font-size:18px; line-height:20px; font-weight:700; &.full{ padding-left:30px; position:relative; cursor:pointer; i{ position:absolute; top:0; left:0; } &.active,&:hover{ color:@color_link; } &+.answer{ display:none; } } } .answer{ padding-top:10px; padding-left:30px; } } } @import 'custom.less'; .data_img { display: flex; align-items: flex-start; justify-content: space-between; .img_block { width: 35%; img { max-width: 100%; border: 5px solid #ffd331; } } .text { width: 60%; .title { text-transform:none; } .all { margin-top: 30px; a { display: inline-flex; padding: 12px 35px; font-size: 14px; line-height: 16px; font-weight: 600; text-transform: uppercase; color: #fff; background-image:url(../images/bg-button.png); background-size: 100% 100%; text-decoration: none; } } } } .block_3, .block_5 { padding:100px 0; } .block_4 { .item { width: 18%; margin-right: 2%; margin-bottom: 30px; &:nth-child(5n) { margin-right:0; } .photo { a { display: flex; align-items: center; justify-content: center; img { max-width: 100%; } } } } } #carousel_5 { padding: 0; overflow:visible; .viewport { height:400px!important; } ul li { background: #fff; position: relative; padding-bottom: 30px; cursor:pointer; &:hover { .more { display:block; } } .photo { background: #f8fbff; padding-bottom: 30px; margin-bottom: 20px; a { display: flex; align-items: center; justify-content: flex-start; } } .name { padding: 0 10px; text-align: left; margin-bottom: 10px; min-height: 50px; a { font-size: 18px; line-height: 24px; text-decoration: none; font-weight: 700; } } article { height: 48px; overflow: hidden; padding: 0 10px; text-align: left; margin-bottom: 5px; position:relative; } .more { display:none; position: absolute; bottom: 0; left: 0; right: 0; text-align: right; border-bottom: 3px solid #ffd331; a { align-items: center; justify-content: center; float: right; width: 30px; display: flex; height: 30px; background: #ffd331; font-size: 12px; color: #424242; text-decoration: none; margin-bottom: -3px; } } } .buttons { top: -59px; height: 45px; display: flex; align-items: center; justify-content: center; border: 2px solid #424242; width: 49px; border-radius: 50%; color: #424242; font-size:18px; } .next { right: 170px; } .prev { right:240px; left:auto; } } .block_5 .block_title_link .all_link a { background: #ffd331; } .block_6, .block_7 { padding:30px; margin-bottom:40px; .title { font-size: 22px; margin-bottom: 20px; text-transform: none; padding: 0; &:before {display:none;} } ul { list-style: none; li { margin-bottom: 10px; a { font-size: 16px; line-height: 20px; font-weight: 700; } } } } .bc { margin-bottom:10px; font-size:16px; line-height:20px; color:#fac51c; span, a { font-weight: 400; font-size: 12px; line-height: 20px; text-decoration: none; color:@color_text; } &>span { &>a,&>span { &>span { padding:0 5px; } } } a > span { font-weight:600; } } .block_2, .catalog_razdels { .item { background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); margin-bottom:30px; .photo { margin-bottom:0; a { display: flex; align-items: center; justify-content: center; img {max-width:100%;} } } .name { padding: 0 15px; text-align: left; min-height: 50px; overflow: hidden; margin:15px 0; a { font-size: 16px; line-height: 20px; text-decoration: underline; color:@color_link; &:hover { text-decoration:none; } } } } } .catalog_razdels { .item { width:30%; margin-right:3%; float:left; &:nth-child(3n) { margin-right:0; } } } .galleries { .item { width: 48%; margin-right: 4%; float: left; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: flex-start; height: 120px; margin-bottom:30px; &:nth-child(2n) { margin-right:0; } .photo { width: 185px; a { display: flex; align-items: center; justify-content: flex-start; img { width: 100%; } } } .name { width: calc(~"100% - 185px"); padding: 20px; box-sizing: border-box; height: 120px; overflow: hidden; a { overflow: hidden; display: block; max-height: 100%; font-size: 16px; line-height: 20px; font-weight: 500; text-decoration: none; } } } } .page_cont { .contacts { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 50px; .info { width: calc(~"100% - 465px"); padding-right: 40px; box-sizing: border-box; p { margin-bottom: 20px; span { display: block; font-weight: 700; } a { text-decoration: none; color: @color_text; } } } .map { width: 465px; iframe { width:100%; } } } .content { display: flex; align-items: flex-start; justify-content: space-between; form { box-sizing: border-box; width: calc(~"100% - 465px"); padding-right: 40px; .form { width: 100%; padding: 40px 30px; box-sizing: border-box; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); .title { font-size: 18px; line-height: 24px; text-align: center; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; } } } article { width: 465px; float: right; } } }