@import url(https://fonts.googleapis.com/css?family=Roboto:500,400,300,300italic,400italic,700,700italic&subset=latin,cyrillic); @import '../js/fancybox/jquery.fancybox.css'; @import '../js/ui/jquery-ui.min.css'; @import '../js/selectBoxIt/jquery.selectBoxIt.css'; @color_error:#e03c42; @color_success:#4fad51; @color_link:#0088cc; @color_text:#333132; @color_white:#ffffff; @color_gray:#cccccc; @font_base: 'Roboto', sans-serif; .border_radius(@radius:4px){ -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } .box_shadow(@shadow){ -webkit-box-shadow:@shadow; -moz-box-shadow:@shadow; box-shadow:@shadow; } .transition(@transition){ -webkit-transition:@transition; -moz-transition:@transition; -o-transition:@transition; transition:@transition; } .transform(@transform){ -moz-transform:@transform; -ms-transform:@transform; -webkit-transform:@transform; -o-transform:@transform; transform:@transform; } *{ font-size:14px; font-family:@font_base; } 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:14px; line-height:16px; color:@color_text; min-width:1100px; background: url('../images/bg_main.png') no-repeat top center; } a{ color:@color_link; text-decoration:underline; &:hover{ text-decoration:none; } } article{ p{ margin-bottom:10px; text-align:justify; } ul,ol{ margin-left:20px; margin-bottom:10px; } 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; } } input[type=text],input[type=password],textarea{ border:1px solid @color_link; &:focus{ outline:none; box-shadow:inset 0 0 5px fade(@color_link,50%); } } input[type=submit],input[type=button],button{ background:@color_link; /*height:28px;*/ padding:0 20px; border:0px; cursor:pointer; color:@color_white; } .page_title{ h1,.h1{ margin-bottom:10px; line-height:1.2em; font-size:28px; font-weight:bold; } } .clear{ clear:both; } .left{ float:left; } .right{ float:right; } .mess_err{ color:@color_error; font-weight:bold; } .mess_ok{ color:@color_success; font-weight:bold; } .wrap{ width:1100px; margin:0 auto; } #body{ position:absolute; top:0; left:0; width:100%; min-height:100%; min-width:1100px; height:auto; } header{ position:relative; .wrap{ padding: 10px 0 30px 50px; width: 1050px; overflow: hidden; a.logo{ display: inline-block; float: left; margin-right: 55px; } .contacts{ font-size: 18px; line-height: 22px; color: @color_white; padding-left: 20px; margin-top: 37px; border-left: 2px solid #fff; float: left; margin-right: 51px; } .phone2{ background: url('../images/phone_ico.png') no-repeat left center; margin-top: 36px; float: left; height: 86px; padding-left: 112px; padding-top: 10px; font-size: 24px; color: #333132; p{ font-size: 36px; font-weight: 700; line-height: 40px; color: #333132; span{ font-size: 48px; font-weight: 700; line-height: 40px; color: #333132; } } } } } #top_menu{ position:relative; } #middle{ height:auto; position:relative; padding-bottom:120px; .wrap{ background: #fff; border-radius: 10px; /*padding: 40px 0;*/ width: 1100px; #content{ position:relative; overflow:hidden; padding:0; .block1{ overflow: hidden; padding-left: 50px; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 40px; position: relative; .sbl1_1{ float: left; width: 51%; h2{ font-size: 48px; line-height: 52px; font-weight: 500; color: #11afa5; text-shadow: 0 1px 0 grey; } p{ font-size: 22px; margin-top: 20px; line-height: 24px; } } .sbl1_2{ /*float: right;*/ right: 50px; position: absolute; bottom: 104px; } .form_bl1{ width: 1020px; height: 74px; background: url('../images/bg_form.jpg') no-repeat left center; padding-top: 30px; padding-left: 33px; form{ input[type="text"]{ border: 1px solid #fff; border-radius: 5px; padding: 13px; margin-right: 17px; font-size: 16px; width: 177px; } input[type="submit"]{ border: 1px solid #fedb13; border-radius: 5px; background: #fedb13; padding: 0 23px; height: 50px; text-transform: uppercase; color: #333132; font-size: 22px; font-weight: 500; position: relative; top: 2px; } } } } .block2{ padding-top: 70px; /*padding-bottom: 104px;*/ border-left: 2px solid #fff; border-right: 2px solid #fff; padding-left: 50px; padding-right: 50px; p{ font-size: 45px; font-weight: 500; margin-bottom: 60px; text-align: center; } /*img{ margin-left: 57px; }*/ } .block3{ font-size: 45px; line-height: 48px; font-weight: 500; padding-bottom: 60px; text-align: center; border-left: 2px solid #fff; border-right: 2px solid #fff; } .catalog{ /*background: url('../images/sp.jpg') no-repeat left top;*/ overflow: hidden; .catalog_item{ overflow: hidden; padding: 48px 94px 0px 80px; position: relative; width: 924px; /*margin-top: 4px;*/ .top_line{ position: absolute; top: 0; left: 0; height: 5px; width: 1102px; background: url('../images/line_top.jpg') no-repeat left top; } .bottom_line{ position: absolute; bottom: 0; left: 0; height: 5px; width: 1102px; background: url('../images/line_top.jpg') no-repeat left top; } .catalog_item_name{ font-size: 35px; font-weight: 500; margin-bottom: 40px; } a{ text-decoration: none; color: #fff; .catalog_item_price{ background: #ffda14; font-size: 20px; font-weight: 500; padding: 20px 25px; text-align: center; border-radius: 5px; span{ color: #fff; font-size: 20px; font-weight: 500; } } } .catalog_item_photo{ text-align: center; margin-bottom: 45px; /*width: 303px;*/ } .cont{ width: 500px; } &.part0{ border-right: 2px solid #fff; margin-top: 0; /*height: 493px;*/ background: url('../images/line_left.jpg') repeat-y left top; } &.part1{ border-left: 2px solid #fff; /*height: 510px;*/ background: url('../images/line_right.jpg') repeat-y right top; } &.part2{ border-right: 2px solid #fff; /*height: 505px;*/ background: url('../images/line_left.jpg') repeat-y left top; } &.part3{ border-left: 2px solid #fff; /*height: 546px;*/ background: url('../images/line_right.jpg') repeat-y right top; } &.part4{ border-right: 2px solid #fff; /*height: 508px;*/ background: url('../images/line_left.jpg') repeat-y left top; } &.part5{ border-left: 2px solid #fff; /*height: 505px;*/ background: url('../images/line_right.jpg') repeat-y right top; } &.part6{ border-right: 2px solid #fff; /*height: 505px;*/ background: url('../images/line_left.jpg') repeat-y left top; } &.part7{ border-left: 2px solid #fff; /*height: 548px;*/ background: url('../images/line_right.jpg') repeat-y right top; } &.part8{ border-right: 2px solid #fff; /*height: 511px;*/ background: url('../images/line_left.jpg') repeat-y left top; } &.part9{ border-left: 2px solid #fff; /*height: 535px;*/ background: url('../images/line_right.jpg') repeat-y right top; } } } .block4{ padding-top: 60px; padding-bottom: 85px; border-left: 2px solid #fff; border-right: 2px solid #fff; a{ display:block; width: 498px; height: 56px; background: #11afa5; border: 1px solid #11afa5; border-radius: 5px; margin: 0 auto; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 30px; font-weight: 500; line-height: 31px; text-align: center; padding-top: 22px; } } .form2{ width: 1050px; height: 77px; background: url('../images/bg_form2.jpg') no-repeat right center; padding-top: 30px; padding-left: 50px; border-left: 2px solid #fff; form{ input[type="text"]{ border: 1px solid #fff; border-radius: 5px; padding: 13px; margin-right: 17px; font-size: 16px; width: 177px; } input[type="submit"]{ border: 1px solid #11afa5; border-radius: 5px; background: #11afa5; padding: 0 23px; height: 50px; text-transform: uppercase; color: #fff; font-size: 22px; font-weight: 500; position: relative; top:2px; } } } .block5{ padding-top: 70px; padding-bottom: 50px; border-left: 2px solid #fff; border-right: 2px solid #fff; overflow:hidden; .block5_ttl{ font-size: 45px; line-height: 48px; font-weight: 500; padding-bottom: 50px; text-align: center; } } .block6{ padding: 70px 50px 0 50px; border-left: 2px solid #fff; border-right: 2px solid #fff; .block6_ttl{ font-size: 45px; line-height: 48px; font-weight: 500; padding-bottom: 50px; text-align: center; } article{ padding-left: 36px; border-left: 5px solid #11afa5; } } .block7{ padding-top: 70px; padding-bottom: 80px; border-left: 2px solid #fff; border-right: 2px solid #fff; .block7_ttl{ font-size: 45px; line-height: 48px; font-weight: 500; padding-bottom: 50px; text-align: center; } #tinycarousel{ height:1%; overflow:hidden; /*padding:0 0 10px;*/ width: 1025px; margin: 0 auto; .viewport{ float:left; width:945px; height:200px; overflow:hidden; position:relative; } .buttons{ display:block; margin:85px 20px 0 0; float:left; width:25px; height:42px; position:relative; text-decoration:none; } .next{ margin:85px 0 0 10px; background: url('../images/arr_left.png') no-repeat center center; &:hover{ background: url('../images/arr_left_h.png') no-repeat center center; } } .prev{ background: url('../images/arr_right.png') no-repeat center center; &:hover{ background: url('../images/arr_right_h.png') no-repeat center center; } } .disable{ visibility:hidden; } .overview{ list-style:none; position:absolute; padding:0; margin:0; width:240px; left:0; top:0; li{ float:left; margin:0 15px 0 0; height:200px; width:300px; a{ display: block; position: relative; z-index: 1000; &:hover{ background: rgba(123,204,201,0.5); } } } } } } .block8{ padding: 50px; border-left: 2px solid #fff; border-right: 2px solid #fff; .block8_ttl{ font-size: 45px; line-height: 48px; font-weight: 500; padding-bottom: 50px; text-align: center; } .gb_item{ padding: 38px; background: #eaf1f4; margin-bottom: 20px; -webkit-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2); overflow: hidden; img{ display: block; float: left; margin-right: 40px; } .gb_txt{ float: left; h2{ font-size: 23px; font-weight: bold; color: #678a96; margin-bottom: 10px; } .mess{ font-size: 16px; font-style: italic; color: #678a96; margin-bottom: 20px; } .fio{ color: #333; font-size: 16px; font-weight: bold; } } } } .map{ border-left: 2px solid #fff; border-right: 2px solid #fff; height: 500px; position: relative; .addr{ position: absolute; top: 0; left: -2px; height: 75px; width: 1040px; background: rgba(246,52,56,0.9); z-index: 1000; padding: 25px 30px 0 30px; overflow: hidden; .addr_bot{ background: url('../images/addr.png') no-repeat left center; min-height: 49px; float: left; margin-right: 35px; padding-left: 55px; padding-top: 5px; font-size: 18px; font-weight: 500; color: #fff; line-height: 19px; } .phone_bot{ background: url('../images/phone_ico_bot.png') no-repeat left center; min-height: 49px; float: left; margin-right: 35px; padding-left: 55px; font-size: 18px; color: #fff; line-height: 19px; padding-top: 5px; font-weight: 500; span{ font-size: 24px; color: #ffda14; } } .mail_bot{ background: url('../images/mail.png') no-repeat left center; min-height: 39px; float: left; padding-left: 55px; padding-top: 15px; font-size: 18px; color: #fff; line-height: 19px; font-weight: 500; span{ font-size: 18px; color: #ffda14; } } .soc{ padding-top: 6px; .insta{ width: 38px; height: 38px; display: inline-block; background: url('../images/insta.png') no-repeat center center; margin-right: 10px; &:hover{ background: url('../images/insta_active.png') no-repeat center center; } } .fb{ width: 38px; height: 38px; display: inline-block; background: url('../images/fb.png') no-repeat center center; &:hover{ background: url('../images/fb_h.png') no-repeat center center; } } } } } .zayavka{ background: url('../images/bot_bg.jpg') no-repeat center top; height: 320px; padding-top: 70px; .zvk_ttl{ font-size: 45px; line-height: 48px; font-weight: 500; padding-bottom: 20px; text-align: center; color: #fff; } form{ height: 200px; overflow: hidden; .inputs{ width: 802px; height: 87px; margin: 0 auto; padding-top: 35px; padding-left: 50px; background: url('../images/zvk_bg.png') no-repeat center top; input[type="text"]{ border: 1px solid #fff; border-radius: 5px; padding: 13px; margin-right: 31px; font-size: 16px; width: 200px; } } input[type="submit"]{ border: 1px solid #e91e25; border-radius: 5px; background: #e91e25; padding: 0 23px; height: 50px; text-transform: uppercase; color: #fff; font-size: 22px; font-weight: 500; margin: 0 auto; position: relative; top: 25px; display: table; } } } .buttons_scroll{ padding: 20px 0; text-align: center; border-left: 2px solid #fff; border-right: 2px solid #fff; a{ display: inline-block; text-decoration: none; color: #000; font-size: 24px; font-weight: 500; background: #ffda14; padding: 20px 25px; border-radius: 5px; text-transform: uppercase; margin: 0 5px; &:hover{ box-shadow: 0 0 10px 1px #ccc; } } } } } } #left{ float:left; width:280px; } footer{ position:absolute; bottom:0; height:100px; width:100%; .copy{ text-align: center; font-size: 18px; font-weight: 500; padding-top: 30px; span{ font-size: 18px; font-weight: 500; color: #11afa5; } } } .form{ td{ padding-bottom:4px; } input[type=text],textarea{ width:400px; margin-bottom:7px; } input[type=text]{ padding:2px 7px; } input[type=text]#captcha{ width:70px; text-align:center; } textarea{ padding:7px; resize:none; } } .pages{ padding:20px 0px; ul{ list-style:none; text-align:center; li{ display:inline-block; margin:0px 5px; line-height:20px; font-weight:bold; a{ display:inline-block; width:20px; text-align:center; text-decoration:none; color:#ffffff; background:@color_link; .border_radius(50%); &:hover{ background:transparent; color:@color_link; } } } } } .popup_page{ padding:40px; width: 320px; .page_title{ text-align: center; h1{ color: #797979; font-size: 24px; font-weight: 300; span{ color: #11afa5; font-size: 27px; font-weight: bold; text-shadow: 0 1px 0 #7a7a7a; text-transform: uppercase; } } } .popup_content{ text-align: center; form{ .form{ input[type="text"]{ width: 228px; border: 1px solid #e6e9ed; border-radius: 2px; padding: 15px; } input[type="submit"]{ background: #fedb13; font-size: 22px; color: #333132; font-weight: 500; text-transform: uppercase; width: 260px; padding: 17px 0; border-radius: 5px; } } } } } #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; } li.active{ border:1px solid @color_error; } } #back_top{ position:fixed; bottom:50px; right:50px; background:url('../images/arrow_up.png') @color_link no-repeat center center; opacity:0.7; .transition(1s); &:hover{ opacity:1; } a{ width:50px; height:50px; display:block; } } .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; } } .gallery{ ul{ list-style:none; li{ float:left; margin:0 20px 20px 0; &:nth-child(4n){ margin-right:0px; } } } } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }