/** * Сброс CSS стилей * **/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; max-width: 100%; } html { -webkit-text-size-adjust: none; } 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, sub, sup, 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-size: 100%; vertical-align: baseline; } body { &.__hidden { overflow: hidden; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } a {text-decoration: none;} input, textarea, button, select { resize: none; border: none; background-color: transparent; outline: none; padding: 0; } img { border: 0; vertical-align: top; } html,body { overflow-x: hidden; -webkit-overflow-scrolling: touch; } /** * Flex * **/ .flex_w { display: flex; flex-wrap: wrap; &.__ai_fs {align-items: flex-start;} &.__ai_fe {align-items: flex-end;} &.__ai_c {align-items: center;} &.__jc_sa {justify-content: space-around;} &.__jc_sb {justify-content: space-between;} &.__jc_c {justify-content: center;} } /** * Функции * **/ .radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .transition(@properties: all .6s) { -webkit-transition: @properties; -moz-transition: @properties; -ms-transition: @properties; -o-transition: @properties; transition: @properties; } .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { text-shadow: @string; } .box-shadow (@string) { -webkit-box-shadow: @string; -moz-box-shadow: @string; box-shadow: @string; } .box-shadow2 (@string, @string) { -webkit-box-shadow: @string, @string; -moz-box-shadow: @string, @string; box-shadow: @string, @string; } .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); } .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); } .box-sizing (@type: border-box) { -webkit-box-sizing: @type; -moz-box-sizing: @type; box-sizing: @type; } .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .opacity (@opacity: 0.5) { -webkit-opacity: @opacity; -moz-opacity: @opacity; opacity: @opacity; } .gradient (@startColor: #eee, @endColor: white) { background-color: @startColor; background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); background: -webkit-linear-gradient(top, @startColor, @endColor); background: -moz-linear-gradient(top, @startColor, @endColor); background: -ms-linear-gradient(top, @startColor, @endColor); background: -o-linear-gradient(top, @startColor, @endColor); } .horizontal-gradient (@startColor, @endColor) { background-color: @startColor; background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(left, @startColor, @endColor); background-image: -moz-linear-gradient(left, @startColor, @endColor); background-image: -ms-linear-gradient(left, @startColor, @endColor); background-image: -o-linear-gradient(left, @startColor, @endColor); } .vertical-gradient (@startColor, @endColor) { background-color: @endColor; background-image: -webkit-gradient(linear, top, bottom, from(@startColor), to(@endColor)); background-image: -webkit-linear-gradient(bottom, @startColor, @endColor); background-image: -moz-linear-gradient(bottom, @startColor, @endColor); background-image: -ms-linear-gradient(bottom, @startColor, @endColor); background-image: -o-linear-gradient(bottom, @startColor, @endColor); } .animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { -webkit-animation: @name @duration @delay @ease; -moz-animation: @name @duration @delay @ease; -ms-animation: @name @duration @delay @ease; } .transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; } .transform(@string){ -webkit-transform: @string; -moz-transform: @string; -ms-transform: @string; -o-transform: @string; transform: @string; } .scale (@factor) { -webkit-transform: scale(@factor); -moz-transform: scale(@factor); -ms-transform: scale(@factor); -o-transform: scale(@factor); transform: scale(@factor); } .rotate (@deg) { -webkit-transform: rotate(@deg); -moz-transform: rotate(@deg); -ms-transform: rotate(@deg); -o-transform: rotate(@deg); transform: rotate(@deg); } .skew (@deg, @deg2) { -webkit-transform: skew(@deg, @deg2); -moz-transform: skew(@deg, @deg2); -ms-transform: skew(@deg, @deg2); -o-transform: skew(@deg, @deg2); transform: skew(@deg, @deg2); } .translate (@x, @y:0) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } .translate3d (@x, @y: 0, @z: 0) { -webkit-transform: translate3d(@x, @y, @z); -moz-transform: translate3d(@x, @y, @z); -ms-transform: translate3d(@x, @y, @z); -o-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .perspective (@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; } .transform-origin (@x:center, @y:center) { -webkit-transform-origin: @x @y; -moz-transform-origin: @x @y; -ms-transform-origin: @x @y; -o-transform-origin: @x @y; } .background(@path, @position: center center, @repeat: no-repeat) { background: url(@path) @position @repeat; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; } .text-overflow(@lineClamp, @lineHeight) { display: -webkit-box; display: -moz-box; -webkit-box-orient: vertical; -webkit-line-clamp: @lineClamp; overflow: hidden; height: @lineClamp * @lineHeight; } .placeholder-style(@placeholder-font, @placeholder-color) { &::-webkit-input-placeholder { font: @placeholder-font; color: @placeholder-color; } &::-moz-placeholder { font: @placeholder-font; color: @placeholder-color; } &:-moz-placeholder { font: @placeholder-font; color: @placeholder-color; } &:-ms-input-placeholder { font: @placeholder-font; color: @placeholder-color; } } /** * Подключение шрифтов * **/ @font-face { font-family: "UltraLight"; src: url('/path_to_font.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url('../fonts/Montserrat-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url('../fonts/Montserrat-SemiBold.ttf'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url('../fonts/Montserrat-Bold.ttf'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url('../fonts/Montserrat-Medium.ttf'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url('../fonts/WorkSans-SemiBold.ttf'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url('../fonts/WorkSans-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gilroy"; src: url('../fonts/Gilroy-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url('../fonts/WorkSans-Regular.ttf'); font-weight: 400; font-style: normal; font-display: swap; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; // Yeah, yeah everybody write about it } input[type='number'], input[type="number"]:hover, input[type="number"]:focus { appearance: none; -moz-appearance: textfield; } .owl-carousel { div{ max-width: 1045435430000px; } } .gta{ cursor: pointer;} /** * Общие классы * **/ .show {display: block !important;} .hide, .xs-show, .sm-show, .md-show { display: none !important; } .flf {float: left !important;} .flr {float: right !important;} .clear { display: block; clear: both; } .t_center {text-align: center;} .t_right {text-align: right;} .pos_rel {position: relative;} .ypos_ab { position: absolute; top: 50%; .translate(0, -50%); } .xpos_ab { position: absolute; left: 50%; .translate(-50%, 0); } .pos_absc { position: absolute; top: 50%; left: 50%; .translate(-50%, -50%); } .c_img { width: 100% !important; height: 100% !important; object-fit: cover; } .b_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } .psevdo-item{ margin: 0!important; padding: 0!important; height: 0!important; opacity: 0!important; } .container{ margin: 0 auto; padding-left: 10px; padding-right: 10px; width: 1220px; } body{ background-color: #FFFFFF; color: #000000; font-family: 'Montserrat'; font-size: 16px; font-weight: 400; } /////header .header{ padding: 25px 0px; .container{ display: flex; align-items: center; justify-content: space-between; } } .header__contact{ display: flex; align-items: center; } .header-logo{ margin-right: 60px; } .header__block{ display: flex; flex-direction: column; margin-right: 60px; &:last-child{ margin-right: 0; } } .head-tel{ margin-bottom: 8px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 100%; display: flex; align-items: center; color: #000000; .transition; &:hover{ color: #DB2336; } } .head-mail{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 100%; display: flex; align-items: center; color: #000000; .transition; &:hover{ color: #DB2336; } } .header__block2{ display: flex; align-items: center; } .header__block-info{ display: flex; flex-direction: column; span{ margin-bottom: 8px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 100%; display: flex; align-items: center; color: #000000; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 100%; display: flex; align-items: center; color: #000000; } } .header__block-img{ margin-right: 16px; width: 53px; height: 34px; border-radius: 4px; cursor: pointer; } .header__social{ display: flex; align-items: center; } .header__social-blocks{ display: flex; align-items: center; } .header__social-block{ cursor: pointer; .transition; width: 35px; height: 35px; border: 1px solid #DB2336; margin-right: 10px; display: flex; align-items: center; justify-content: center; border-radius: 50%; svg{ path{ .transition; } } &:hover{ background: #DB2336; svg{ path{ fill: white; } } } &:last-child{ margin-right: 0; } } .header__btn{ border: 1px solid #DB2336; border-radius: 6px; width: 179px; height: 46px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 100%; display: flex; align-items: center; text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 20px; color: #000000; .transition; &:hover{ color: #FFFFFF; background-color: #DB2336; } } //// d1 .d1{ background: radial-gradient(54.83% 60.24% at 81.31% 41.69%, #2E424D 0%, #222222 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */; height: 830px; h1{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 48px; line-height: 120%; display: flex; align-items: center; color: #FFFFFF; margin-bottom: 30px; } .container{ position: relative; } } .d1__top{ display: flex; padding: 30px 0px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.2); justify-content: space-between; a{ font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 29px; display: flex; align-items: center; color: #FFFFFF; .transition; &:hover{ color: #DB2336; } } } .d1__content{ padding-top: 100px; padding-bottom: 170px; } .d1__prew{ width: 205px; height: 49px; border: 1px solid #DB2336; border-radius: 4px; font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-size: 14px; line-height: 29px; display: flex; align-items: center; justify-content: center; cursor: pointer; .transition; text-transform: uppercase; color: #FFFFFF; margin-bottom: 20px; &:hover{ color: #DB2336; border: 1px solid #fff; background-color: #fff; } } .d1__text{ display: flex; align-items: center; div{ width: 4px; height: 63px; background-color: #DB2336; margin-right: 20px; } p{ width: 605px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 140%; color: #FFFFFF; span{ font-weight: 600; } } } .d1__btn{ margin-top: 60px; background: #DB2336; border-radius: 6px; width: 325px; height: 64px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; display: flex; align-items: center; text-align: center; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; .transition; &:hover{ color: #DB2336; background-color: #fff; border: 1px solid #DB2336; } } .d1__img{ position: absolute; right: -66px; top: 161px; } //// prew .prew{ margin-top: -55px; .container{ display: flex; align-items: center; justify-content: space-between; } } .prew__block{ background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(30px); padding: 30px 40px 0px 40px; border-radius: 10px; width: 380px; h2{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; display: flex; align-items: center; margin-bottom: 12px; color: #DB2336; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; display: flex; align-items: center; color: #000000; } } //// scheme .scheme{ margin-top: 140px; h2{ margin-bottom: 60px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 32px; line-height: 140%; color: #000000; width: 995px; } } .scheme__content{ display: flex; justify-content: space-between; } .header__burger div{ &:last-child{ margin-bottom: 0; } } .scheme__info{ width: 600px; } .scheme__img{ width: 542px!important; } .scheme__text-block{ display: flex; align-items: center; margin-bottom: 50px; &:last-child{ margin-bottom: 0; } p{ margin-left: 25px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; display: flex; align-items: center; color: #000000; } } .scheme__block-num{ flex-shrink: 0; width: 45px; height: 45px; background: rgba(219, 35, 53, 0.2); display: flex; align-items: center; position: relative; justify-content: center; border-radius: 50%; span{ position: absolute; z-index: 5; .pos_absc; color: #FFFFFF; } div{ background: #DB2336; width: 30px; position: relative; z-index: 3; height: 30px; border-radius: 50%; } } .scheme__btn{ width: 276px; height: 64px; cursor: pointer; margin-top: 82px; background: #DB2336; border-radius: 6px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; display: flex; justify-content: center; align-items: center; text-align: center; color: #FFFFFF; .transition; &:hover{ color: #DB2336; background-color: #ffffff; border: 1px solid #DB2336; } } .job__block{ width: 380px; border-radius: 10px; img{ width: 100%; height: 240px; } } .job__info{ padding: 30px; background: rgba(34, 34, 34, 0.05); h3{ margin-bottom: 15px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; display: flex; align-items: center; color: #000000; } p{ margin-bottom: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } } .job__info-sum{ display: flex; margin-bottom: 30px; align-items: center; } .job-act{ margin-right: 12px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; display: flex; align-items: center; color: #DB2336; } .job-old-sum{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 100%; display: flex; align-items: center; text-decoration-line: line-through; color: rgba(0, 0, 0, 0.5); } .job__btn{ width: 100%; height: 64px; cursor: pointer; display: flex; align-items: center; justify-content: center; .transition; border-radius: 6px; } .job__btn2{ border: 1px solid #DB2336; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; display: flex; align-items: center; margin-bottom: 15px; text-align: center; color: #000000; &:hover{ border: 1px solid #DB2336; color: #ffffff; background-color: #DB2336; } } .job__btn1{ background: #DB2336; border-radius: 6px; font-family: 'Montserrat'; font-style: normal; border: 1px solid #DB2336; font-weight: 600; font-size: 16px; line-height: 20px; display: flex; align-items: center; text-align: center; color: #FFFFFF; &:hover{ border: 1px solid #DB2336; color: #000000; background-color: transparent; } } .job{ margin-top: 160px; h2{ margin-bottom: 60px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; display: flex; align-items: center; text-align: center; color: #000000; justify-content: center; } } .job__blocks{ display: flex; align-items: center; justify-content: space-between; } .project{ h2{ margin-bottom: 40px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; display: flex; align-items: center; text-align: center; justify-content: center; color: #000000; } } .project__blocks{ display: flex; justify-content: space-between; flex-wrap: wrap; } .project__block{ width: 380px; background: #F4F4F4; border-radius: 10px; margin-bottom: 30px; padding: 20px; p{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 140%; color: #000000; } } .project__head{ display: flex; margin-bottom: 15px; align-items: center; h3{ font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 50px; display: flex; align-items: center; color: #DB2336; } } .project__img{ display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #FFFFFF; border: 1px solid #000000; border-radius: 4px; margin-right: 20px; } .project{ margin-top: 140px; } .consult__bg{ position: absolute; width: 100%; height: 502px; object-fit: cover; } .consult{ position: relative; .container{ position: relative; z-index: 5; } h2{ margin-bottom: 15px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 32px; line-height: 140%; color: #FFFFFF; } } .consult__text{ display: flex; align-items: center; div{ background-color: #DB2336; width: 4px; height: 63px; } p{ width: 327px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 140%; color: #FFFFFF; } } .consult__form{ width: 380px; background: #FFFFFF; border-radius: 10px; padding: 30px; input{ height: 65px; font-family: 'Gilroy'; font-style: normal; font-weight: 400; cursor: pointer; .transition; font-size: 16px; line-height: 140%; border: 1px solid rgba(38, 38, 38, 0.2); color: #262626; padding: 22px 20px; border-radius: 4px; width: 100%; margin-bottom: 15px; &:last-child{ margin-bottom: 0; } &:hover{ border: 1px solid #DB2336; } } } .consult__info{ h2{ width: 474px; } } .consult__text{ div{ margin-right: 20px; } } .consult .container{ display: flex; align-items: center; padding-top: 69px; justify-content: space-between; } .consult__form{ button{ height: 64px; width: 100%; margin-top: 20px; background: #DB2336; border-radius: 6px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; text-align: center; color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid #DB2336; .transition; &:hover{ color: #DB2336; background-color: #fff; border: 1px solid #DB2336; } } p{ margin-top: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 120%; width: 100%; color: #000000; a{ color: #DB2336; .transition; &:hover{ color: #7c101b; } } } } .consult{ margin-bottom: 140px; position: relative; } .cons__man{ position: absolute; .xpos_ab; left: 48%; z-index: 5 } .project-2{ h2{ display: flex; align-items: center; justify-content: center; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; text-align: center; color: #000000; margin-bottom: 60px; } } .project2__block{ width: 380px; margin-bottom: 60px; h4{ font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 19px; line-height: 29px; display: flex; align-items: center; color: #000000; margin-bottom: 10px; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } } .project2__blocks{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .products{ margin-top: 100px; h2{ font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; display: flex; align-items: center; text-align: center; justify-content: center; color: #000000; margin-bottom: 60px; } } .products__content{ display: flex; justify-content: space-between; } .product__block{ width: 585px; img{ width: 100%; object-fit: cover; height: 360px; border-radius: 10px; margin-bottom: 30px; } h3{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 20px; line-height: 100%; margin-bottom: 15px; color: #000000; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } } .produvt__but{ display: flex; align-items: center; justify-content: center; margin-top: 60px; } .prod__btn{ display: flex; align-items: center; justify-content: center; border: 1px solid #DB2336; border-radius: 6px; width: 320px; height: 64px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; text-align: center; color: #000000; cursor: pointer; .transition; &:hover{ color: #FFFFFF; background-color: #DB2336; } } .chips{ margin-top: 140px; h2{ margin-bottom: 65px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; display: flex; align-items: center; text-align: center; justify-content: center; color: #000000; } } .chips__block{ display: flex; align-items: center; position: relative; justify-content: space-between; } .chips__text{ width: 585px; } .chips__text-block{ margin-bottom: 15px; &:last-child{ margin-bottom: 0; } h3{ margin-bottom: 10px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 19px; line-height: 29px; color: #000000; span{ color: #DB2336; } } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } } .chips__img{ left: 585px; top: 0; position: absolute; max-width: 100000px; max-height: 552px; } .chips__block:nth-child(2n){ display: flex; flex-direction: row-reverse; img{ right: 634px; left: auto; } } .chips__block{ min-height: 484px; margin-bottom: 25px; &:last-child{ margin-bottom: 0; } } .chips__btn{ background: #DB2336; border-radius: 6px; width: 320px; height: 64px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; border: 1px solid #DB2336; cursor: pointer; display: flex; align-items: center; text-align: center; justify-content: center; margin-top: 30px; color: #FFFFFF; .transition; &:hover{ color: #DB2336; background-color: #FFFFFF; border: 1px solid #DB2336; } } .experience{ margin-top: 185px; } .experience__top{ display: flex; align-items: center; justify-content: space-between; } .experience__text{ width: 585px; h2{ margin-bottom: 30px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; color: #000000; } } .experience__img{ width: 585px; height: 565px; img{ height: 100%; width: 100%; object-fit: cover; border-radius: 10px; } } .exp__people{ display: flex; align-items: center; } .exp__img{ width: 74px; height: 74px; border-radius: 50%; margin-right: 20px; } .exp__name{ h3{ margin-bottom: 5px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 19px; line-height: 29px; color: #DB2336; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; } } .exp__info-text{ margin-top: 30px; p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; margin-bottom: 18px; &:last-child{ margin-bottom: 0; } } } .experience__files{ display: flex; align-items: center; justify-content: space-between; background: #F4F4F4; position: relative; &::after{ position: absolute; content: ""; background-color: #DB2336; width: 4px; height: 70px; left: 0; } } .exp__block{ display: flex; max-width: 250px; } .exp__block-img{ margin-right: 15px; } .exp__info{ display: flex; flex-direction: column; a{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; text-decoration-line: underline; color: #000000; .transition; &:hover{ color: #DB2336; } } } .exp__b{ font-weight: 600!important; color: #000000; } .exp__block{ display: flex; align-items: center; } .experience__files{ margin-top: 30px; padding: 15px 20px; } .con{ background: #DB2336; } .con{ .container{ display: flex; align-items: center; justify-content: space-between; } h2{ margin-bottom: 15px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 26px; line-height: 140%; color: #FFFFFF; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; display: flex; align-items: center; color: #FFFFFF; } } .con{ margin-top: 140px; padding: 30px; } .con__form{ display: flex; margin-left: 40px; align-items: center; input{ height: 65px; background: #FFFFFF; border: 1px solid #DB2336; border-radius: 4px; margin-right: 20px; padding: 22px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } button{ width: 228px; height: 64px; background: #FFFFFF; padding: 22px 30px; border-radius: 6px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: #DB2336; cursor: pointer; .transition; &:hover{ color: #000000; } } } .con__inp1{ width: 259px; } .con__inp2{ width: 181px; } .foot__top{ display: flex; justify-content: space-between; } .footer__nav{ display: flex; margin-left: 75px; } .foot__logo{ margin-bottom: 30px; } .foot__top{ padding-top: 80px; padding-bottom: 100px; } .footer__content{ display: flex; align-items: center; a{ border: 1px solid #DB2336; border-radius: 6px; width: 179px; height: 46px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 100%; display: flex; align-items: center; text-align: center; color: #000000; cursor: pointer; display: flex; align-items: center; justify-content: center; .transition; &:hover{ color: #FFFFFF; background-color: #DB2336; } } } .foot__blocks{ display: flex; align-items: center; margin-left: 20px; } .foot__block{ display: flex; margin-right: 10px; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; .transition; width: 35px; height: 35px; border: 1px solid #DB2336; background-color: #FFFFFF; svg{ path{ .transition; } } &:hover{ background-color: #DB2336; svg{ path{ fill: #fff; } } } &:last-child{ margin-right: 0; } } .footer__nav-block{ margin-right: 75px; h2{ margin-bottom: 15px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 19px; line-height: 29px; color: #000000; } ul{ li{ margin-bottom: 15px; &:last-child{ margin-bottom: 0; } } a{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; .transition; &:hover{ color: #DB2336; } } } &:last-child{ margin-right: 0; } } .tel__mal{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; color: #000000; .transition; &:hover{ color: #DB2336; } } .fot__mal{ font-family: 'Montserrat'; font-style: normal; margin-top: 15px; font-weight: 400; font-size: 14px; line-height: 100%; display: flex; align-items: center; text-decoration-line: underline; color: #000000; .transition; &:hover{ color: #DB2336; } } .footer__nav-block{ p{ margin-bottom: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; } h3{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 14px; line-height: 140%; color: #000000; } span{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; } } .foot__bot{ display: flex; align-items: center; justify-content: space-between; background: #F4F4F4; padding: 15px; span{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; display: flex; align-items: center; color: #000000; a{ color: #DB2336; margin-left: 5px; .transition; &:hover{ color: #7c101b; } } } .foot-link{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; display: flex; align-items: center; text-decoration-line: underline; color: #000000; .transition; &:hover{ color: #DB2336; } } } .foot__bot{ .container{ display: flex; align-items: center; justify-content: space-between; } } .calc{ margin-bottom: 140px; h2{ margin-bottom: 40px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 44px; line-height: 120%; justify-content: center; display: flex; align-items: center; text-align: center; color: #000000; } } .calc__form{ display: flex; justify-content: space-between; } .calc__content{ width: 790px; background: #F4F4F4; border-radius: 10px; padding: 40px; } .calc__info{ width: 380px; } .calc__p{ h3{ margin-bottom: 30px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; color: #000000; } } .calc__home{ display: flex; flex-direction: column; span{ margin-bottom: 10px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; } input{ width: 694px; height: 60px; background: #FFFFFF; padding: 20px; border: 1px solid #DB2336; border-radius: 4px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } } .cal__list{ margin-top: 12px; h3{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; margin-bottom: 40px; } } .calc__el{ margin-top: 15px; h3{ margin-bottom: 25px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; color: #000000; } } .calc-p__blocks{ display: flex; justify-content: space-between; align-items: end; } .calc-p__block{ width: 340px; span{ margin-bottom: 10px; display: block; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #000000; } select{ background: #FFFFFF; width: 100%; border: 1px solid #DB2336; border-radius: 4px; padding: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; cursor: pointer; font-size: 16px; line-height: 140%; display: flex; align-items: center; color: #000000; position: relative; option{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; display: flex; align-items: center; color: #000000; .transition; &:hover{ color: #DB2336; } } &::after{ position: absolute; content: ""; background-image: url(../imgs/icons/arrow_back.svg); background-repeat: no-repeat; width: 16px; height: 16px; background-size: cover; } } input{ background: #FFFFFF; padding: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; width: 340px; line-height: 140%; display: flex; align-items: center; color: #000000; border: 1px solid #DB2336; border-radius: 4px; } } .calc__form{ button{ background: #DB2336; border-radius: 6px; height: 64px; width: 100%; cursor: pointer; .transition; font-family: 'Montserrat'; font-style: normal; font-weight: 600; margin-top: 35px; font-size: 16px; line-height: 20px; display: flex; align-items: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #FFFFFF; &:hover{ color: #DB2336; background-color: #FFFFFF; border: 1px solid #DB2336; } } } .calc__info-wr{ background: #F4F4F4; border-radius: 10px; padding: 30px; h3{ margin-bottom: 15px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 26px; line-height: 100%; display: flex; align-items: center; color: #000000; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 17px; line-height: 140%; color: #000000; margin-bottom: 20px; } button{ margin-bottom: 20px; } } .calc__form{ align-items: flex-start; } .cal-info__block{ display: flex; flex-direction: column; margin-bottom: 30px; &:last-child{ margin-bottom: 0; } span{ display:block; margin-bottom: 10px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 100%; display: flex; align-items: center; color: #000000; } a{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 17px; line-height: 100%; display: flex; align-items: center; color: #000000; .transition; &:hover{ color: #DB2336; } } } .clacl_save{ display: flex; align-items: center; margin-top: 30px; img{ margin-right: 10px; } font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; .transition; color: #DB2336; &:hover{ color: #7c101b; } } .project{ margin-bottom: 140px; } .check{ display: flex; align-items: center; margin-bottom: 10px; &:last-child{ margin-bottom: 0; } cursor: pointer; span{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; margin-left: 8px; color: #000000; } } .check input { display: none; } .check div{ flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #DB2336; border-radius: 2px; width: 17px; height: 17px; } .check div img { display: none; } .check input:checked + div img { display: block; } .cal__list h3{ margin-bottom: 30px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; color: #000000; } .cal__list{ margin: 35px 0px; } .header__burger{ cursor: pointer; flex-shrink: 0; width: 26px; div{ width: 100%; height: 3px; margin-bottom: 6px; background-color: #DB2336; } } .prew .container{ align-items: flex-start; } .owl-dots{ display: flex; justify-content: center; margin-top: 40px; align-items: center; } .owl-dot{ cursor: pointer; background: #E1E1E1!important; width: 6px!important; height: 6px!important; border-radius: 50%; margin-right: 10px; .transition; &:last-child{ margin-right: 0; } &:hover{ background-color: #DB2336; } } .scheme .owl-dot.active{ background: #DB2336!important; } .scheme .owl-prev{ position: absolute; width: 27px!important; height: 27px!important; background: #DB2336!important; border-radius: 50%; cursor: pointer; display: flex; bottom: 33px; left: 192px; align-items: center; border: 1px solid #DB2336; justify-content: center; .transition; svg{ path{ .transition; } } &:hover{ border: 1px solid #DB2336!important; background-color: #FFFFFF!important; svg{ path{ fill: #DB2336!important; } } } } .scheme .owl-next{ position: absolute; width: 27px!important; height: 27px!important; background: #DB2336!important; border-radius: 50%; cursor: pointer; display: flex; bottom: 33px; border: 1px solid #DB2336; right: 194px; align-items: center; justify-content: center; .transition; svg{ path{ .transition; } } &:hover{ border: 1px solid #DB2336!important; background-color: #FFFFFF!important; svg{ path{ fill: #DB2336!important; } } } } .products{ .owl-prev{ position: absolute; .pos_absc; width: 60px; height: 60px; background: #FFFFFF!important; border-radius: 50%; top: 200px; .transition; left: 0; svg{ path{ .transition; } } &:hover{ background-color: #DB2336!important; svg{ path{ fill: #FFFFFF!important; } } } } .owl-next{ position: absolute; .pos_absc; width: 60px; height: 60px; background: #FFFFFF!important; border-radius: 50%; top: 200px; left: auto; .transition; right: -51px; svg{ path{ .transition; } } &:hover{ background-color: #DB2336!important; svg{ path{ fill: #FFFFFF!important; } } } } } .consult{ height: 502px; .consult__bg{ height: 100%; } } .header__burger{ display: none; } ////// .burger-menu{ padding: 30px; width: 300px; position: fixed; right: 0; z-index: 10001; top: 0; .transition(); transform: translateX(100%); &.active{ transform: translateX(0%); } bottom: 0; background: white; color: black; } .dark{ position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 10000; background: rgba(0, 0, 0, 0.75); display: block; } .burger-menu{ .header__block2{ display: block; } ul{ li{ margin-bottom: 5px; a{ font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 29px; color: #000000; .transition; &:hover{ color: #DB2336; } } } } .header__block{ margin-top: 15px; .head-tel { font-size: 17px; } .head-mail { font-size: 14px; } } .header__social-blocks{ margin-top: 15px; } .header__block2{ display: flex!important; align-items: center; margin-top: 15px; } } .burger__img{ display: flex; align-items: center; margin-bottom: 30px; justify-content: center; } .modal { position: relative; width: 850px; box-shadow: 0px 10px 50px rgba(117, 117, 117, 0.06), 0px 10px 30px rgba(29, 29, 29, 0.04); border-radius: 20px; background-color: white; padding: 50px } .modal1 { .pos_absc; position: fixed; z-index: 1000001; max-height: 90%; overflow-y: auto; h2{ margin-bottom: 40px; font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 28px; line-height: 120%; display: flex; color: #000000; } p{ margin-bottom: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } h3{ margin-bottom: 15px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; display: flex; align-items: center; color: #000000; } } .modal2{ .pos_absc; position: fixed; z-index: 1000001; max-height: 90%; overflow-y: auto; } .modal__inp{ display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; input{ padding: 22px 20px; font-family: 'Gilroy'; font-style: normal; .transition; font-weight: 400; font-size: 16px; background: #FFFFFF; border: 1px solid rgba(38, 38, 38, 0.2); border-radius: 4px; line-height: 140%; color: #262626; &:placeholder{ font-family: 'Gilroy'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 140%; color: #262626; } &:hover{ border: 1px solid #DB2336; } } } .modal-form{ margin-top: 50px; h2{ margin-bottom: 30px; } button{ width: 253px; height: 64px; cursor: pointer; .transition; background: #DB2336; border-radius: 6px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; display: flex; align-items: center; border: 1px solid #DB2336; text-align: center; color: #FFFFFF; margin-top: 30px; display: flex; align-items: center; justify-content: center; &:hover{ color: #DB2336; background-color: #FFFFFF; border: 1px solid #DB2336; } } } .modal__inp input:nth-child(1){ width: 360px; height: 65px; } .modal__inp input:nth-child(2){ width: 360px; height: 65px; } .modal__inp input:nth-child(3){ width: 100%; height: 65px; margin-top: 20px; } .modal__img-prew{ height: 429px; width: 100%; object-fit: cover; margin-bottom: 50px; } .modal-info--text{ margin-bottom: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; color: #000000; &:last-child{ margin-bottom: 0; } } .modal__blocks{ display: flex; justify-content: space-between; } .modal__block{ width: 360px; img{ width: 100%; height: 253px; object-fit: cover; margin-bottom: 20px; } span{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; color: #000000; } } .modal-info--text{ font-weight: 600!important; } .modal2{ h2{ font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-size: 28px; line-height: 120%; margin-bottom: 60px; display: flex; align-items: center; color: #000000; margin-bottom: 60px; } h3{ margin-bottom: 20px; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; display: flex; align-items: center; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 140%; margin-bottom: 20px; color: #000000; } } .download{ display: flex; align-items: center; font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 18px; line-height: 100%; display: flex; align-items: center; color: #DB2336; .transition; svg{ margin-right: 10px; } } .modal2__video{ margin-top: 40px; } .modal2__vid{ width: 100%; height: 429px; position: relative; margin-bottom: 15px; cursor: pointer; &>img{ width: 100%; height: 100%; object-fit: cover; } } .modal2__play{ position: absolute; .pos_absc; width: 94px; height: 94px; } .modal2__blocks{ display: flex; margin-bottom: 30px; justify-content: space-between; flex-wrap: wrap; } .modal2__block{ width: 177px; height: 125px; margin-bottom: 20px; img{ width: 100%; height: 100%; object-fit: cover; } } .modal-form{ h2{ font-weight: 600; font-size: 18px; margin-bottom: 30px; } } .fancybox__container{ z-index: 100000090!important; } .calc-p__blocks{ flex-wrap: wrap; //.calc-p__block{ // &:last-child{ // width: 100%; // } //} } .calc-full{ margin-top: 30px; width: 100%; input{ width: 100%; } } .modal-ok{ .pos_absc; position: fixed;z-index: 100099; width: 480px; padding: 40px; text-align: center; h2{ font-size: 32px; margin-bottom: 20px; } } /** * Адаптивка * **/ @media only screen and(max-width: 1199px) { .modal-ok{h2{ font-size: 24px} } .md-show {display: block !important;} .md-hide {display: none !important;} .container{ width: 768px; } .calc-full{ margin-top: 0; } .header__burger{ display: block; } .header__block2{ display: none; } .head-mail{ font-size: 12px; } .head-tel{ font-size: 13px; } .header__btn{ width: 157px; font-size: 13px; } .d1__top{ display: none; } .d1__content{ position: relative; z-index: 10; } .d1__prew{ width: 189px; font-size: 12px; } .d1 h1{ font-size: 41px; line-height: 1.2; } .d1__text p{ font-size: 17px; } .d1__btn{ width: 297px; margin-top: 44px; font-size: 15px; } .d1__img { position: absolute; right: -271px; top: 37px; opacity: 0.4; } .d1{ height: 665px; } .d1__content { padding-top: 70px; padding-bottom: 70px; } .prew__block { padding: 22px 20px 0px 20px; width: 243px; } .prew { margin-top: -91px; } .scheme { margin-top: 100px; } .scheme h2{ font-size: 27px; line-height: 1.2; margin-bottom: 40px; } .scheme__content{ flex-direction: column-reverse; } .scheme .owl-prev{ bottom: -10px; left: 297px; } .scheme .owl-next{ bottom: -10px; right: 298px; } .scheme__text{ margin-top: 45px; } .scheme__info { width: 100%; } .scheme__img { width: 100%!important; } .scheme__text-block{ margin-bottom: 30px; } .scheme__btn{ margin-top: 40px; width: 251px; font-size: 14px; } .job { margin-top: 100px; } .job__block { margin-bottom: 30px; width: 366px; } .job__blocks{ flex-wrap: wrap; } .job h2{ margin-bottom: 40px; font-size: 39px; line-height: 1.2; } .job__btn2{ height: 54px; font-size: 14px; } .job__info{ padding: 25px; } .project { margin-bottom: 70px; margin-top: 70px; } .project h2{ font-size: 39px; } .project__block { width: 367px; margin-bottom: 20px; } .project__head h3{ font-size: 28px; } .project__img{ margin-right: 15px; width: 50px; height: 50px; } .project__block p{ font-size: 16px; } .consult__info{ width: 400px; } .consult h2{ line-height: 1.2; font-size: 27px; } .consult__text p{ font-size: 16px; } .consult__text div { margin-right: 15px; } .consult__form{ padding: 25px; } .consult__form button{ font-size: 14px; margin-top: 0; height: 54px; } .consult__form input{ height: 55px; font-size: 14px; } .consult__form p{ font-size: 13px; } .consult { height: 475px; } .cons__man{ height: 100%; } .consult{ margin-bottom: 100px; } .calc h2{ font-size: 39px; margin-bottom: 30px; } .calc__content{ width: 100%; } .job { margin-top: 70px; } .consult{ margin-bottom: 70px; } .calc__p h3{ margin-bottom: 25px; } .calc-p__block { width: 327px; } .calc { margin-bottom: 70px; } .project-2 h2{ font-size: 39px; line-height: 1.2; margin-bottom: 40px; } .project2__block { width: 367px; margin-bottom: 40px; } .products{ margin-top: 70px; } .products h2{ font-size: 39px; margin-bottom: 40px; line-height: 1.2; } .product__block { width: 363px; } .product__block h3{ font-size: 19px; } .product__block p{ font-size: 14px; } .product__block img{ margin-bottom: 20px; } .produvt__but{ margin-top: 30px; } .prod__btn{ width: 284px; font-size: 14px; } .chips{ margin-top: 70px; } .chips h2{ font-size: 39px; line-height: 1.2; margin-bottom: 40px; } .chips__block{ flex-direction: column; } .chips__img{ left: auto; top: auto; position: relative; max-width: none; width: 100%; margin: 0 auto; margin-top: 35px; max-height: 552px; } .chips__block{ align-items: flex-start; } .chips__text{ width: 100%; } .chips__block:nth-child(2n){ flex-direction: column; } .chips__block:nth-child(2n) img{ right: auto; width: 100%; max-height: 455px; margin-top: 35px; } .experience{ margin-top: 70px; } .experience__top{ flex-direction: column; align-items: flex-start; } .experience__text h2{ font-size: 39px; line-height: 1.2; br{ display: none; } } .experience__text { width: 100%; } .experience__img{ width: 100%; height: 300px; margin-top: 20px; } .exp__info a{ font-size: 11px; } .con{ margin-top: 70px; padding: 20px; } .con .container{ flex-direction: column; align-items: flex-start; } .con__form{ margin-left: 0; margin-top: 20px; } .con__form input{ margin-right: 10px; } .con__form button{ width: 200px; } .foot__top{ flex-direction: column; } .footer__nav{ margin-left: 0; } .footer__soc{ display: flex; align-items: center; } .foot__logo{ margin-bottom: 0; } .footer__content{ margin-left: 30px; } .footer__nav-block { margin-right: 48px; } .footer__nav{ margin-top: 30px; } .foot__top { padding-top: 50px; padding-bottom: 50px; } .footer__nav-block h2{ font-size: 17px; margin-bottom: 10px; } .footer__nav-block ul a{ font-size: 13px; } .footer__nav-block ul li { margin-bottom: 10px; } .tel__mal{ font-size: 15px; margin-top: 10px; } .footer__nav-block p{ margin-bottom: 15px; } .foot__bot span{ font-size: 11px; } .foot__bot .foot-link{ font-size: 11px; } .con h2{ font-size: 24px; line-height: 1.2; } .con p{ font-size: 15px; } .con__form input{ height: 55px; font-size: 14px; } .con__form button{ height: 55px; font-size: 14px; } .calc__form{ flex-direction: column; } .calc__info{ width: 100%; margin-top: 30px; } .cal-info__blocks{ display: flex; align-items: center; justify-content: space-between; } .cal-info__block{ margin-bottom: 0; } .modal{ padding: 35px; width: 689px; } .modal__img-prew { height: 370px; margin-bottom: 30px; } .modal1 h2{ margin-bottom: 25px; font-size: 26px; line-height: 1.2; } .modal1 p { margin-bottom: 15px; font-size: 14px; line-height: 1.2; } .modal__block { width: 304px; } .modal__block img { width: 100%; height: 227px; margin-bottom: 15px; } .modal__block span{ font-size: 14px; } .modal1 .modal-form h2 { margin-bottom: 20px; font-size: 24px; } .modal__inp input:nth-child(1) { width: 303px; height: 65px; } .modal__inp input:nth-child(2) { width: 303px; height: 65px; } .modal1 .modal-form { margin-top: 40px; } .modal__inp input:nth-child(3){ margin-top: 15px; } .modal1 .modal-form button{ width: 216px; height: 60px; font-size: 15px; margin-top: 20px; } .modal1 p{ font-size: 15px; } .modal2__block { width: 198px; height: 125px; margin-bottom: 20px; } .modal2 h2{ margin-bottom: 40px; line-height: 1.2; } .download{ font-size: 17px; } .modal2__vid{ height: 350px; } .modal2__play{ width: 70px; height: auto; } .modal2 p{ font-size: 15px; } } @media only screen and(max-width: 767px) { .xs-show {display: block !important;} .xs-hide {display: none !important;} .row { margin-left: -10px; margin-right: -10px; } .modal2__block{ width: ~"calc(50% - 10px)"!important; border-radius: 5px; overflow: hidden; } .modal2__vid{ margin-bottom: 20px!important; } .modal-form button{ width: 100%; } [class*="col-"] { padding-left: 10px; padding-right: 10px; } .container{ width: 360px; } .header__block{ display: none; } .header__social-blocks{ display: none; } .header-logo { margin-right: 0; } .header__burger{ margin-left: 20px; } .header__btn { width: 147px; font-size: 12px; height: 37px; } .header { padding: 20px 0px; } .d1__content{ padding-top: 37px; } .d1__prew { width: 166px; font-size: 11px; height: 41px; } .d1 h1{ font-size: 28px; margin-bottom: 20px; br{ display: none; } } .d1__text p { font-size: 13px; br{ display: none; } } .d1__btn { width: 244px; margin-top: 33px; font-size: 13px; height: 48px; } .d1 { height: 561px; } .prew__block{ display: none; } .prew__block:first-child{ display: block; } .prew__block{ width: 100%; padding: 22px 20px 22px 20px; } .prew__block h2{ margin-bottom: 10px; font-size: 16px; } .prew__block p{ font-size: 13px; } .d1__content{ padding-top: 44px; } .scheme { margin-top: 55px; } .scheme h2 { font-size: 21px; margin-bottom: 32px; } .scheme .owl-prev{ left: 92px; } .scheme .owl-next{ right: 92px; } .scheme__text-block{ align-items: flex-start; } .scheme__text-block p{ margin-left: 15px; font-size: 14px; } .scheme__btn { margin-top: 26px; width: 229px; font-size: 13px; height: 60px; } .job h2 { margin-bottom: 31px; font-size: 35px; line-height: 1.2; } .job { margin-top: 50px; } .job__block{ width: 100%; } .project { margin-bottom: 38px; margin-top: 34px; } .project h2 { font-size: 35px; line-height: 1.2; } .project__block{ width: 100%; } .project__block p { font-size: 15px; } .consult .container{ flex-direction: column; } .consult { height: auto; } .consult .container{ padding-bottom: 55px; } .cons__man{ display: none; } .consult__text{ margin-bottom: 20px; } .consult .container{ padding-top: 55px; } .consult__form { padding: 30px; } .consult { margin-bottom: 44px; } .calc h2 { font-size: 35px; margin-bottom: 29px; line-height: 1.2; } .calc__content{ padding: 25px; } .calc-p__blocks{ flex-direction: column; } .calc-p__block{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .calc { margin-bottom: 50px; } .project-2 h2 { font-size: 36px; line-height: 1.2; margin-bottom: 38px; } .project2__block{ width: 100%; } .project2__block p{ font-size: 15px; } .products { margin-top: 27px; } .products h2 { font-size: 35px; margin-bottom: 26px; line-height: 1.2; } .chips h2 { font-size: 35px; line-height: 1.2; margin-bottom: 26px; } .chips__text-block{ width: 100%; margin-bottom: 30px; } .experience__text h2 { font-size: 36px; line-height: 1.2; text-align: center; } .experience { margin-top: 43px; } .exp__people{ width: 100%; } .exp__name h3{ font-size: 17px; } .exp__name p{ font-size: 12px; } .exp__info-text p{ font-size: 14px; margin-bottom: 15px; } .experience__img{ height: 200px; } .experience__files{ flex-direction: column; align-items: flex-start; } .experience__files::after{ height: 100%; } .experience__files{ justify-content: center; } .exp__block{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .con{ margin-top: 40px; } .cal-info__blocks{ display: flex; align-items: center; flex-direction: column; justify-content: space-between; } .cal-info__block{ margin-bottom: 0; } .cal-info__blocks{ align-items: flex-start; } .cal-info__block{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .con__form{ flex-direction: column; align-items: flex-start; } .con__form input{ margin-right: 0; } .con__form input{ width: 100%; margin-bottom: 15px; &:last-child{ margin-bottom: 0; } } .con__form{ width: 100%; } .con__form button{ width: 100%; } .con p{ br{ display: none; } } .footer__soc{ flex-direction: column; align-items: flex-start; } .footer__content{ margin-left: 0; } .foot__top { padding-top: 30px; padding-bottom: 30px; } .foot__logo { margin-bottom: 15px; } .footer__nav{ flex-direction: column; } .footer__nav-block{ margin-right: 0; width: 100%; margin-bottom: 20px; &:last-child{ margin-bottom: 0; } } .foot__bot .container{ flex-wrap: wrap; } .foot__bot span{ margin-bottom: 10px; &:last-child{ margin-bottom: 0; } } .modal { padding: 27px; width: 349px; } .modal1 h2 { margin-bottom: 20px; font-size: 23px; line-height: 1.2; } .modal__img-prew { height: auto; margin-bottom: 26px; } .modal1 p { font-size: 14px; } .modal__blocks{ flex-direction: column; } .modal__block{ width: 100%; margin-bottom: 20px; &:last-child{ margin-bottom: 0; } img{ height: auto; } } .modal1 .modal-form { margin-top: 30px; } .modal__inp input:nth-child(1){ margin-bottom: 10px; } .modal__inp input{ width: 100%!important; height: 60px!important; padding: 15px!important; font-size: 14px!important; } .modal1 .modal-form button { width: 100%; height: 57px; font-size: 15px; margin-top: 20px; } .modal2__block{ width: 100%; height: auto; } .modal2 h2 { margin-bottom: 31px; line-height: 1.2; font-size: 25px; } .modal2 h3{ font-size: 15px; margin-bottom: 15px; } .modal2__blocks{ margin-bottom: 15px; } .modal2 p { font-size: 14px; } .download { font-size: 15px; } .modal2__vid { height: auto; width: 100%; } .modal2__video .modal2__block { width: 143px; height: auto; } .modal2__play { width: 60px; height: auto; } } @media only screen and(max-width: 320px) { } /** * Owl Carousel * **/ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }