/*=================================================================================================*/ /*================================================ COMMON =========================================*/ /*=================================================================================================*/ body { background: #E6E7E8; font-family: 'Roboto', sans-serif; } h2, h3 { position: relative; font-size: 32px; margin-left: 50px; font-family: 'Roboto', sans-serif; font-weight: 900; text-transform: uppercase; margin-bottom: 30px; img {width: 36px; height: 36px; position: absolute; top: 2px; left: -50px;} } h3 { font-size: 24px; margin-left: 10px; img {width: 24px; height: 24px; position: absolute; top: 2px; left: -30px;} } @link: #1C75BC; @linkhover: #F7B901; a { color: @link; border-bottom: 1px solid fadeout(@link, 60%); &:hover { text-decoration: none; color: @linkhover; border-bottom: 1px solid @linkhover; } } a.fancybox-close, a.fancybox-close:hover, a.fancybox-nav:hover { border-bottom: 0px; } .transition (@speed: 0.2s) { -webkit-transition: all @speed ease-out; -moz-transition: all @speed ease-out; -o-transition: all @speed ease-out; transition: all @speed ease-out; } .boxsizing { box-sizing: content-box; -moz-box-sizing: border-box; } /*=================================================================================================*/ /*================================================ HEADER =========================================*/ /*=================================================================================================*/ header { min-width: 1000px; height: 160px; background: #F1F2F2; margin: 0 auto; section { width: 1000px; margin: 0 auto; position: relative; } } .introtext, .contacts { position: absolute; } a.logo { width: 179px; height: 88px; position: absolute; display: block; top: 30px; left: 20px; background: url(/tpl/images/logo2.svg) no-repeat center; text-decoration: none; text-indent: -999px; border-bottom: 0px; &:hover {border-bottom: 0px;} } .introtext { position: relative; font-family: 'Roboto', sans-serif; font-style: italic; font-weight: 300; font-size: 21px; width: 460px; top: 30px; left: 260px; } .contacts { width: 220px; top: 30px; right: 30px; .phone, .adres, .worktime {display: block; width: 200px;} .phone {position: relative; margin-left: 40px; font-weight: 900; font-size: 24px; line-height: 18px; margin-bottom: 20px; color: #231F20; border-bottom: 0px;} .phone:hover {color: #231F20; border-bottom: 0px; text-decoration: none;} .phone span {font-size: 12px;} .phone:before {background: url(/tpl/images/icon_phone.png) no-repeat center; position: absolute; left: -40px; top: 13px; width: 25px; height: 25px; content: " ";} .adres {position: relative; margin-left: 40px; font-weight: 900; font-size: 14px; line-height: 18px; margin-bottom: 20px;} .adres:before {background: url(/tpl/images/icon_adres.png) no-repeat center; position: absolute; left: -40px; top: 5px; width: 25px; height: 27px; content: " ";} .worktime {position: relative; margin-left: 40px; font-weight: 900; font-size: 14px; line-height: 18px; margin-bottom: 20px; display: none;} .worktime:before {background: url(/tpl/images/icon_time.png) no-repeat center; position: absolute; left: -40px; top: 5px; width: 25px; height: 27px; content: " ";} } /*=================================================================================================*/ /*================================================ NAV =========================================*/ /*=================================================================================================*/ nav { background: #282828; height: 60px; section { width: 1000px; margin: 0 auto; position: relative; } ul { position: relative; left: -40px; li { display: inline-block; border-right: 1px solid rgba(255,255,255,.2); } li:last-child { border-right: 0px; } a { color: #fff; line-height: 60px; display: inline-block; padding: 0px 20px 0px 20px; font-size: 18px; font-family: 'Roboto Condensed', sans-serif; font-weight: bold; position: relative; border-bottom: 0px; .transition; } a:hover { background: rgba(250,174,66,1); color: rgb(255,255,255); text-decoration: none; } a.active {background: #515151;} a.active:hover {background: #515151; color: #fff;} a:active {color: #fff; text-decoration: none;} a.active:active {color: red !important;} #menuService {cursor: pointer;} #menuService.active:after { position: absolute; top: 60px; left: 900px; content: "Закрыть"; z-index: 150; } } } .navToggle { display: none; background: transparent; border: 0; color: #fff; height: 60px; padding: 0; cursor: pointer; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: bold; text-transform: uppercase; align-items: center; gap: 10px; } .navToggle__box { display: inline-block; width: 22px; } .navToggle__line { display: block; width: 22px; height: 3px; margin-bottom: 4px; background: #fff; border-radius: 2px; .transition; } .navToggle__line:last-child { margin-bottom: 0; } .navToggle__label { display: inline-block; } .navPanel { display: block; } .navContacts { display: none; } /*=================================================================================================*/ /*================================================ SUBMENU =========================================*/ /*=================================================================================================*/ .unfold { height: auto !important; z-index: 150; overflow: auto !important; top: 0px !important; opacity: 1 !important; .transition; } .submenu { width: 1000px; margin: 0 auto; background: #515151; color: #fff; position: absolute; top: 0px; opacity: 0; z-index: 100; height: 0px; overflow: hidden; box-shadow: 0px 20px 20px rgba(0,0,0,.2); .transition; display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; h2 { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; text-transform: uppercase; margin-left: 0; } .menu-column { width: 50%; box-sizing: content-box; padding: 0px 20px 20px 20px; } a { font-size: 16px; line-height: 18px; text-decoration: none; display: inline-block; margin: 2px 0px; border-bottom: 1px solid rgba(255,255,255,.2); .transition(0.1s); } a:hover { border-bottom: 1px solid rgba(247,185,1,.8); color: rgba(247,185,1,1); text-shadow: 0px 0px 10px rgba(247,185,1,.8); } a.active { border-bottom: 0px; cursor: default; color: rgba(247,185,1,1); font-weight: bold; text-shadow: 0px 0px 10px rgba(247,185,1,.8); } ul { margin: 0; padding: 0; a {color: #fff;} li {list-style: none;} li ul {margin-left: 20px; padding: 10px 0px;} } } .unfoldNav { position: relative; width: 1000px; margin: 0 auto; } /*=================================================================================================*/ /*================================================ BREADCRUMBS =========================================*/ /*=================================================================================================*/ .B_crumbBox { color: #ccc; a {color: #000; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,.2);} } /*=================================================================================================*/ /*================================================ SIDEBAR =========================================*/ /*=================================================================================================*/ .sidebarBlock { ul, li {margin: 0; padding: 0; list-style: none;} > ul > li {font-size: 18px; line-height: 24px; font-weight: 700;} > ul > li > ul {padding: 10px 0px;} > ul > li > ul > li {font-size: 14px; margin-left: 16px; font-weight: 300;} > ul > li > ul > li > ul {padding: 6px 0px;} > ul > li > ul > li > ul > li {font-size: 12px; margin-left: 16px;} } /*=================================================================================================*/ /*================================================ КОМИССИОННЫЙ ОТДЕЛ =============================*/ /*=================================================================================================*/ .contentBlock { table { a { border-bottom: 0px;} td { img {margin-right: 10px;} } } } .red_price { color: #ff0000; font-weight: 900; } /*=================================================================================================*/ /*================================================ SERVICE =========================================*/ /*=================================================================================================*/ section.service, section.sale, section.motoklub, section.content { width: 1000px; background: #fff; padding: 40px 30px; margin: 0 auto; border-bottom: 3px solid #D1D3D4; } .selector { margin-bottom: 30px; } section.service { box-sizing: border-box; } .serviceTab { color: #231F20; background: linear-gradient(to top, rgba(0,0,0,.1), rgba(255,255,255,1)); display: inline-block; font-size: 28px; font-family: 'Roboto', sans-serif; font-weight: 900; padding: 5px 20px; border: 1px solid #231F20; box-shadow: 0px 0px 15px rgba(0,0,0,.2); cursor: pointer; .boxsizing; .transition; } .serviceTab.active { color: #fff; background: rgba(247,185,1,1); display: inline-block; font-size: 28px; font-family: 'Roboto', sans-serif; font-weight: 900; padding: 5px 20px; border: 1px solid rgba(255,255,255,0); box-shadow: inset 0px 0px 15px rgba(0,0,0,.2); cursor: default; .boxsizing; } .serviceTab:first-child { border-bottom-left-radius: 6px; border-top-left-radius: 6px; } .serviceTab:last-child { border-bottom-right-radius: 6px; border-top-right-radius: 6px; } .serviceTree { width: 675px; float: left; background: #F1F2F2; border: 3px solid #D1D3D4; position: relative; .tabIndicator { background: url(/tpl/images/tab_indicator.png) no-repeat center; width: 47px; height: 20px; position: absolute; top: -20px; .transition; } .tabIndicator.left { left: 80px; } .tabIndicator.right { left: 300px; } } #paneAuto, #paneMoto { display: none; .transition; } #paneAuto.showBlock, #paneMoto.showBlock { display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; padding: 20px; } .col_1, .col_2, .col_3 { width: 200px; padding: 0px 10px; h3 {font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 21px; margin: 0px 0px 30px 0px;} ul, li {margin: 0; padding: 0; list-style: none;} li {margin-bottom: 10px;} a {display: inline-block; background: #F7B901; padding: 2px 8px; color: #231F20; text-decoration: none; .transition; border-bottom: 0px;} a:hover {background: #231F20; color: #F7B901; border-bottom: 0px;} } .col_1 { width: 350px; } .col_2 { width: 250px; } section.service:after, section.content:after { content: " "; display: block; clear: both; } /*=================================================================================================*/ /*================================================ CONTENT =========================================*/ /*=================================================================================================*/ section.content { .contentBlock { min-height: 400px; position: relative; h3 { margin-left: 0px; } } } /*=================================================================================================*/ /*================================================ КНОПКА ЗАПИСАТЬСЯ =========================================*/ /*=================================================================================================*/ .request_button_sidebar { margin-left: 700px; position: relative; h3 {margin-left: 0px !important;} .priceDownload { display: inline-block; position: relative; margin-left: 35px; font-size: 16px; } .priceDownload:before { position: absolute; content: " "; left: -35px; top: 0px; width: 25px; height: 27px; background: url(/tpl/images/download_icon.png) no-repeat center; } a.button_link, { background: linear-gradient(to top, rgba(41,41,41,1), rgba(67,67,67,1)); font-family: 'Roboto Condensed', sans-serif; color: #fff; font-size: 14px; font-weight: 700; padding: 10px 20px 10px 50px; border: 0px; border-radius: 4px; box-shadow: 0px 15px 30px rgba(0,0,0,.2), 0px 4px 0px rgb(0,0,0); margin-bottom: 30px; position: relative; display: block; border-bottom: 0px; .transition; } a.button_link:hover{ background: linear-gradient(to top, rgba(51,51,51,1), rgba(77,77,77,1)); box-shadow: 0px 0px 30px rgba(247,184,1,.6), 0px 4px 0px rgba(0,0,0,.8); } a.button_link:active { box-shadow: none; top: 4px; } a.button_link:before { position: absolute; content: " "; left: 20px; top: 10px; width: 20px; height: 20px; background: url(/tpl/images/price_icon.png) no-repeat center; } } .button_link { background: linear-gradient(to top, rgba(41,41,41,1), rgba(67,67,67,1)); font-family: 'Roboto Condensed', sans-serif; color: #fff; font-size: 18px; font-weight: 700; padding: 10px 20px 10px 20px; border: 0px; border-radius: 4px; box-shadow: 0px 15px 30px rgba(0,0,0,.2), 0px 4px 0px rgb(0,0,0); margin-bottom: 30px; position: relative; display: block; border-bottom: 0px; .transition; } .button_link:hover { background: linear-gradient(to top, rgba(51,51,51,1), rgba(77,77,77,1)); box-shadow: 0px 0px 30px rgba(247,184,1,.6), 0px 4px 0px rgba(0,0,0,.8); } .button_link:active { box-shadow: none; top: 4px; } .mainFeedbackButton { display: inline-block; margin-top: 12px; margin-bottom: 0; font-size: 27px !important; line-height: 1.2 !important; text-align: center; padding: 15px 30px; background: #F7B901; color: #231F20; box-shadow: 0px 15px 30px rgba(0,0,0,.18), 0px 4px 0px rgba(0,0,0,.85); } .mainFeedbackButton:hover, .mainFeedbackButton:focus { background: #ffd23a; color: #231F20; box-shadow: 0px 0px 30px rgba(247,184,1,.45), 0px 4px 0px rgba(0,0,0,.85); } .mainFeedbackButton:active { color: #231F20; } .feedbackModalBootstrap { &.in { display: flex !important; align-items: center; justify-content: center; padding: 20px; } .modal-dialog { width: 620px; max-width: 100%; margin: 0 auto; } .modal-content { border: 0; border-radius: 0; box-shadow: 0px 18px 45px rgba(0,0,0,.28); } .modal-body { padding: 34px 34px 28px; } } .feedbackModal { position: relative; background: #fff; h3 { margin: 0 48px 18px 0; position: relative; } h3:after { content: " "; display: block; width: 100%; height: 12px; margin-top: 18px; background: #F7B901; } p { margin: 0 0 24px; line-height: 1.35; } .bg-danger { display: none; margin-bottom: 16px; padding: 10px 12px; background: #f2dede; } .bg-danger:not(:empty) { display: block; } .col-md-8, .col-xs-8, .col-sm-8, .col-lg-8 { width: auto; float: none; padding: 0; } .form-group:last-child { margin-bottom: 0; } .button_link { display: inline-block; margin-bottom: 0; } } .feedbackModal__close.close { position: absolute; top: 14px; right: 16px; z-index: 2; float: none; font-size: 36px; line-height: 1; color: #231F20; opacity: 1; text-shadow: none; } .feedbackModal__close.close:hover, .feedbackModal__close.close:focus { color: #F7B901; opacity: 1; } /*=================================================================================================*/ /*================================================ ПРОДАЖА И СТОЯНКА =========================================*/ /*=================================================================================================*/ section.sale { display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; background: rgba(255,255,255,.9); .saleBlock, .parkingBlock { width: 50%; } } .saleBlock { ul { margin: 0; padding: 0; list-style: none; width: 500px; li { width: 230px; display: inline-block; margin-bottom: 20px; img { width: 60px; height: 60px; float: left; margin-right: 10px; } span {font-size: 14px; font-weight: 700;color: #BE1E2D;} .price { color: #000; font-size: 11px; } } } .seeall {font-size: 18px; font-weight: 700;} } .parkingBlock { > img { width: 140px; height: 140px; float: left; margin-right: 10px; font-size: 14px; } .seeall {font-size: 18px; font-weight: 700;} } /*=================================================================================================*/ /*================================================ МОТОКЛУБ =========================================*/ /*=================================================================================================*/ .motoBlock { display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; .sheduleBlock { width: 50%; padding: 0px 10px; } .photoBlock, .schoolBlock { width: 50%; padding: 0px 10px; } .sheduleBlock { .seeall {font-size: 18px; font-weight: 700; margin-left: 60px;} li {margin: 0; padding: 10px 0px; display: inline-block; margin-bottom: 5px; padding-bottom: 5px;} } .schoolBlock, .photoBlock {.seeall {font-size: 18px; font-weight: 700;}} .photoBlock2 small { display: block; line-height: 1.1 !important; } .photoBlock2 {width: 40%; padding: 0px 30px; a {font-size: 12px; line-height: 14px !important;}} h3 {margin: 0; padding: 0; margin-bottom: 20px;} ul {margin: 0; padding: 0; list-style: none; margin-bottom: 10px;} a {font-size: 18px; line-height: 14px !important;} } .thumbsMainpage { display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; li {width: 25%; border-bottom: 0px;} } .sheduleBlock { ul, li {list-style: none; margin: 0; padding: 0;} li {display: block; margin-bottom: 20px;} li:after {content: " "; clear: both; width: 100%; height: 1px; display: block;} .seeall {font-size: 18px; font-weight: 700; margin-left: 60px;} .date {width: 60px; float: left; text-align: center; margin-right: 10px; border: 1px solid rgba(0,0,0,.1);} .num {font-size: 24px; font-weight: 900; display: block;} .mounth {font-size: 10px; display: block; padding: 2px ; background: rgba(0,0,0,.1);} } /*=================================================================================================*/ /*================================================ GALLERY =========================================*/ /*=================================================================================================*/ .gallery_list { list-style: none; padding: 0; margin: 0; li {display: inline-block; margin-right: 10px;} li { margin-bottom: 10px; a {margin-bottom: 8px;} li { margin-right: 10px;} } } .list_of_gallerys { list-style: none; padding: 0; margin: 0; li { margin-bottom: 10px; a {margin-bottom: 8px;} li { margin-right: 10px;} } } .list_of_gallerys.sidebar { strong {margin-bottom: 8px; display: block;} } .list_of_gallerys.sidebar > li { border-bottom: 1px solid #ccc; } .photoBlock .gallery_list img, .list_of_gallerys .gallery_list img { width: 60px; height: 60px; } /*=================================================================================================*/ /*================================================ FOOTER =========================================*/ /*=================================================================================================*/ footer { min-width: 1000px; background: #282828; height: 120px; a { color: #fff; border-bottom: 1px solid fadeout(#fff, 60%); &:hover { text-decoration: none; color: @linkhover; border-bottom: 1px solid #f7b801; } } } .footerBlock { width: 1000px; margin: 0 auto; padding: 20px 30px; color: #fff; display: -moz-flex; display: -o-flex; display: -ms-flex; display: -webkit-flex; display: flex; .year { width: 400px; text-align: center; } .parabit { width: 300px; font-size: 14px; font-weight: 300; text-align: right; .footerPhoneLink { display: inline-block; color: #fff; border-bottom: 0; line-height: 1.15; } .footerPhoneLink:hover, .footerPhoneLink:focus { color: #fff; border-bottom: 0; text-decoration: none; } span { font-size: 24px; font-weight: 900; } } .contactsFooter { width: 300px; font-size: 14px; font-weight: 300; text-align: left; span { font-size: 24px; font-weight: 900; } } } a { color: @link; border-bottom: 1px solid fadeout(@link, 60%); &:hover { text-decoration: none; color: @linkhover; border-bottom: 1px solid @linkhover; } } /*=================================================================================================*/ /*============================================= RESPONSIVE ========================================*/ /*=================================================================================================*/ section.content.row { margin-left: auto; margin-right: auto; } @media (max-width: 1040px) { header, footer { min-width: 0; height: auto; } section.content.row { width: auto; max-width: 1000px; margin-left: 16px; margin-right: 16px; box-sizing: border-box; } header section, nav section, .unfoldNav, .submenu, .footerBlock, section.service, section.sale, section.motoklub, section.content { width: auto; max-width: 1000px; margin-left: 16px; margin-right: 16px; box-sizing: border-box; } header section { padding: 24px 20px; } section.service, section.sale, section.motoklub, section.content { padding: 32px 24px; } a.logo, .introtext, .contacts { position: static; } a.logo { margin: 0 auto 20px; } .introtext { width: auto; top: auto; left: auto; margin-bottom: 20px; text-align: center; } .contacts { width: auto; top: auto; right: auto; text-align: center; } .contacts .phone, .contacts .adres, .contacts .worktime { display: inline-block; width: auto; text-align: left; vertical-align: top; } nav { height: auto; } nav section ul { left: 0; margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } nav section ul li { width: 50%; box-sizing: border-box; text-align: center; border-bottom: 1px solid rgba(255,255,255,.2); } nav section ul li:nth-child(2n) { border-right: 0; } nav section ul a { display: block; line-height: 1.3; min-height: 60px; padding: 18px 12px; } body.mobile-nav-enabled header .introtext, body.mobile-nav-enabled header .contacts { display: none; } body.mobile-nav-enabled header, body.mobile-nav-enabled nav { background: transparent; } body.mobile-nav-enabled header section { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; padding: 18px 20px 14px; background: #fff; } body.mobile-nav-enabled header a.logo { position: static; flex: 0 1 auto; width: 230px; height: 106px; margin: 0; background-position: left center; background-size: contain; } body.mobile-nav-enabled nav section { padding: 0; margin-top: 0; background: transparent; } body.mobile-nav-enabled .navToggle { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; flex: 0 0 86px; width: 86px; height: 86px; margin: 6px 0 0 16px; padding: 0; background: #f7f7f7; color: #231F20; border-radius: 0; box-shadow: none; position: relative; z-index: 5; } body.mobile-nav-enabled .navToggle__label { display: none; } body.mobile-nav-enabled .navToggle__box { width: 40px; } body.mobile-nav-enabled .navToggle__line { width: 40px; height: 5px; margin-bottom: 7px; background: #231F20; border-radius: 3px; } body.mobile-nav-enabled .navPanel { display: none; clear: both; width: 100%; box-sizing: border-box; padding: 14px 20px 18px; background: #f7f7f7; } body.mobile-nav-enabled nav.is-open .navPanel { display: block; } body.mobile-nav-enabled nav section ul { display: block; left: auto; padding-top: 0; } body.mobile-nav-enabled nav section ul li { width: 100%; border-right: 0; text-align: left; border-bottom: 1px solid rgba(35,31,32,.15); } body.mobile-nav-enabled nav section ul a { display: block; padding: 16px 0; min-height: 0; line-height: 1.2; color: #231F20; } body.mobile-nav-enabled nav section ul a:hover { background: transparent; color: #F7B901; } body.mobile-nav-enabled nav section ul a.active, body.mobile-nav-enabled nav section ul a.active:hover { background: #F7B901; color: #231F20; } body.mobile-nav-enabled nav .navContacts { display: block; padding-top: 16px; border-top: 1px solid rgba(35,31,32,.15); } body.mobile-nav-enabled nav .navContacts .contacts { display: block; text-align: left; } body.mobile-nav-enabled nav .navContacts .phone, body.mobile-nav-enabled nav .navContacts .adres { display: block; width: auto; margin: 0 0 16px 40px; } body.mobile-nav-enabled nav .navContacts .adres { margin-bottom: 0; } body.mobile-nav-enabled nav .navContacts a { color: #231F20; } body.mobile-nav-enabled .navPanel, body.mobile-nav-enabled section.service, body.mobile-nav-enabled section.sale, body.mobile-nav-enabled section.motoklub, body.mobile-nav-enabled section.content, body.mobile-nav-enabled .footerBlock { font-size: 125%; } body.mobile-nav-enabled nav section ul a { font-size: 23px; } body.mobile-nav-enabled nav .navContacts .phone { font-size: 30px; line-height: 1.05; } body.mobile-nav-enabled nav .navContacts .phone span { font-size: 15px; } body.mobile-nav-enabled nav .navContacts .adres { font-size: 18px; line-height: 1.25; } body.mobile-nav-enabled .B_crumbBox a { font-size: 15px; } body.mobile-nav-enabled .sidebarBlock > ul > li { font-size: 23px; line-height: 30px; } body.mobile-nav-enabled .sidebarBlock > ul > li > ul > li { font-size: 18px; } body.mobile-nav-enabled .sidebarBlock > ul > li > ul > li > ul > li { font-size: 15px; } body.mobile-nav-enabled .request_button_sidebar .priceDownload, body.mobile-nav-enabled .contentBlock .priceDownload { font-size: 20px; } body.mobile-nav-enabled .button_link, body.mobile-nav-enabled .request_button_sidebar a.button_link { font-size: 23px; } body.mobile-nav-enabled .saleBlock span, body.mobile-nav-enabled .parkingBlock > img, body.mobile-nav-enabled .footerBlock .parabit, body.mobile-nav-enabled .footerBlock .contactsFooter { font-size: 18px; } body.mobile-nav-enabled .footerBlock .parabit span, body.mobile-nav-enabled .footerBlock .contactsFooter span { font-size: 30px; } body.mobile-nav-enabled .saleBlock .price, body.mobile-nav-enabled .motoBlock a, body.mobile-nav-enabled .photoBlock2 a { font-size: 18px; line-height: 18px !important; } body.mobile-nav-enabled .seeall, body.mobile-nav-enabled .saleBlock .seeall, body.mobile-nav-enabled .parkingBlock .seeall, body.mobile-nav-enabled .sheduleBlock .seeall, body.mobile-nav-enabled .schoolBlock .seeall, body.mobile-nav-enabled .photoBlock .seeall { font-size: 23px; } body.mobile-nav-enabled .sheduleBlock .num { font-size: 30px; } body.mobile-nav-enabled .sheduleBlock .mounth { font-size: 13px; } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(1) { transform: translateY(12px) rotate(45deg); } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(2) { opacity: 0; } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(3) { transform: translateY(-12px) rotate(-45deg); } .submenu { box-shadow: 0px 12px 20px rgba(0,0,0,.15); } .request_button_sidebar { margin-left: 0; margin-top: 30px; } .serviceTree, .saleBlock ul, .parkingBlock > img, .saleBlock, .parkingBlock, .motoBlock .sheduleBlock, .motoBlock .photoBlock, .motoBlock .schoolBlock, .motoBlock .photoBlock2 { width: auto; } .saleBlock ul { max-width: none; } .saleBlock ul li { width: 48%; margin-right: 2%; vertical-align: top; } section.sale, .motoBlock, .footerBlock, #paneAuto.showBlock, #paneMoto.showBlock { -webkit-flex-wrap: wrap; flex-wrap: wrap; } #paneAuto.showBlock, #paneMoto.showBlock { padding: 20px; } .col_1, .col_2, .col_3 { width: 33.3333%; box-sizing: border-box; } section.sale { display: block; } section.motoklub h1 { margin: 0 0 24px; font-size: 34px; line-height: 1.08; font-weight: 400; letter-spacing: 0; color: #3a3a3c; } section.motoklub h1 + br { display: none; } .photoBlock2 { padding: 0 10px; } .saleBlock iframe, .contentBlock iframe { width: 100%; max-width: 100%; height: 56vw; max-height: 320px; display: block; } section.content table, .contentBlock table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } img[width], img[height] { max-width: 100%; height: auto; } .motoBlock > div + div, section.sale > div + div { margin-top: 24px; } .motoBlock .saleBlock img, .motoBlock .photoBlock img, section.sale .saleBlock img { display: block; max-width: 100%; height: auto; } .photoBlock .gallery_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -1.5px; } .photoBlock .gallery_list li { width: 50% !important; margin: 0; padding: 1.5px; display: block; box-sizing: border-box; } .photoBlock .gallery_list li a { display: block; margin: 0; border-bottom: 0; } .photoBlock .gallery_list img { display: block; width: 100%; height: auto; } .photoBlock > p { margin-bottom: 12px; } .photoBlock > a, .sheduleBlock > a { display: inline-block; margin-top: 12px; } section.sale .saleBlock { width: 100%; } section.sale .saleBlock p { display: -webkit-flex; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; } section.sale .saleBlock p img { flex: 0 0 58px; margin: 0 !important; } section.sale .saleBlock iframe { width: 100%; max-width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 2; display: block; } } @media (max-width: 767px) { h2, h3 { margin-left: 40px; } h2 { font-size: 26px; margin-bottom: 24px; img { width: 28px; height: 28px; top: 2px; left: -40px; } } h3 { font-size: 20px; margin-left: 0; img { width: 20px; height: 20px; top: 2px; left: -26px; } } header section, nav section, .unfoldNav, .submenu, .footerBlock, section.service, section.sale, section.motoklub, section.content { margin-left: 10px; margin-right: 10px; } section.content.row { margin-left: 10px; margin-right: 10px; } header section { padding: 20px 16px; } body.mobile-nav-enabled header section { padding: 16px 16px 12px; } body.mobile-nav-enabled header a.logo { width: 190px; height: 88px; } body.mobile-nav-enabled nav section { padding: 0; } body.mobile-nav-enabled .navPanel { padding-left: 16px; padding-right: 16px; } body.mobile-nav-enabled .navToggle { flex-basis: 72px; width: 72px; height: 72px; margin-left: 12px; } body.mobile-nav-enabled .navToggle__box { width: 34px; } body.mobile-nav-enabled .navToggle__line { width: 34px; height: 4px; margin-bottom: 6px; } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(1) { transform: translateY(10px) rotate(45deg); } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } section.service, section.sale, section.motoklub, section.content { padding: 24px 16px; } .introtext { font-size: 18px; } section.motoklub h1 { font-size: 30px; margin-bottom: 20px; } .contacts .phone { font-size: 25px; line-height: 1.1; } .submenu, #paneAuto.showBlock, #paneMoto.showBlock, .motoBlock, .footerBlock { display: block; } .menu-column, .saleBlock, .parkingBlock, .motoBlock .sheduleBlock, .motoBlock .photoBlock, .motoBlock .schoolBlock, .motoBlock .photoBlock2, .col_1, .col_2, .col_3, .footerBlock .year, .footerBlock .parabit, .footerBlock .contactsFooter { width: 100%; padding: 0; } .serviceTab, .serviceTab.active { display: block; width: 100%; text-align: center; font-size: 28px; margin-bottom: 8px; border-radius: 6px; } .serviceTree .tabIndicator { display: none; } .saleBlock ul li { width: 100%; margin-right: 0; } .thumbsMainpage li, .gallery_list li { width: 33.3333%; margin-right: 0; vertical-align: top; } section.content .gallery_list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -3px; } section.content .gallery_list > li { width: 50% !important; margin: 0; padding: 3px; display: block; box-sizing: border-box; } section.content .gallery_list > li > a { display: block; margin: 0; border-bottom: 0; } section.content .gallery_list > li > a > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .request_button_sidebar { padding-top: 20px; } section.content [class*='col-'], section.sale [class*='col-'], section.motoklub [class*='col-'] { float: none; width: 100% !important; padding-left: 0; padding-right: 0; } .sidebarBlock { margin-bottom: 24px; } .footerBlock { text-align: center; } .footerBlock .contactsFooter, .footerBlock .parabit, .footerBlock .year { text-align: center; margin-bottom: 16px; } .footer-policy-link { display: none !important; } } @media (max-width: 479px) { h2 { font-size: 22px; margin-left: 34px; img { width: 24px; height: 24px; left: -34px; } } h3 { font-size: 18px; } a.logo { width: 160px; height: 78px; background-size: contain; } body.mobile-nav-enabled header a.logo { width: 166px; height: 76px; } body.mobile-nav-enabled .navToggle { flex-basis: 64px; width: 64px; height: 64px; margin-left: 10px; } body.mobile-nav-enabled .navToggle__box { width: 30px; } body.mobile-nav-enabled .navToggle__line { width: 30px; height: 4px; margin-bottom: 5px; } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(1) { transform: translateY(9px) rotate(45deg); } body.mobile-nav-enabled .navToggle.is-open .navToggle__line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .introtext { font-size: 20px; } section.motoklub h1 { font-size: 27px; line-height: 1.06; } .contacts .phone, .contacts .adres, .contacts .worktime { display: block; max-width: 240px; margin: 0 auto 16px 40px; } .thumbsMainpage li, .gallery_list li { width: 50%; } .button_link, .request_button_sidebar a.button_link { font-size: 20px; padding-left: 20px; padding-right: 20px; } .mainFeedbackButton { display: block; width: 100%; margin-top: 18px; padding-top: 15.5px; padding-bottom: 15.5px; } .feedbackModalBootstrap .modal-dialog { width: auto; margin: 0; } .feedbackModalBootstrap .modal-body { padding: 24px 18px 20px; } .feedbackModal h3 { margin-right: 38px; margin-bottom: 18px; } .feedbackModal h3:after { height: 10px; margin-top: 14px; } .feedbackModal p { margin-bottom: 18px; } .feedbackModal .button_link { width: 100%; } }