@color-1: #14425f; @color-2: #67a0c4; @bg: #e6eff9; @text: #004060; @text-p: #0a567c; @white: #fff; @font-1: 'Kelson Sans RU'; @font-2: 'Kelson Sans RU'; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); @font-face { font-family: 'Kelson Sans RU'; src: url('../fonts/KelsonSans-RegularRU.eot'); src: local('Kelson Sans Regular RU'), local('KelsonSans-RegularRU'), url('../fonts/KelsonSans-RegularRU.eot?#iefix') format('embedded-opentype'), url('../fonts/KelsonSans-RegularRU.woff') format('woff'), url('../fonts/KelsonSans-RegularRU.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Kelson Sans RU'; src: url('../fonts/KelsonSans-LightRU.eot'); src: local('Kelson Sans Light RU'), local('KelsonSans-LightRU'), url('../fonts/KelsonSans-LightRU.eot?#iefix') format('embedded-opentype'), url('../fonts/KelsonSans-LightRU.woff') format('woff'), url('../fonts/KelsonSans-LightRU.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Kelson Sans RU'; src: url('../fonts/KelsonSans-BoldRU.eot'); src: local('Kelson Sans Bold RU'), local('KelsonSans-BoldRU'), url('../fonts/KelsonSans-BoldRU.eot?#iefix') format('embedded-opentype'), url('../fonts/KelsonSans-BoldRU.woff') format('woff'), url('../fonts/KelsonSans-BoldRU.ttf') format('truetype'); font-weight: bold; font-style: normal; } .clearfix:after{ content: ""; clear: both; display: table; } //ОБЩИЕ СТИЛИ body{ color: @text; background: #ffffff; font-size: 17px; line-height: normal; font-family: @font-2; @media(max-width: 1000px){ font-size: 14px; } } img{ max-width: 100%; vertical-align: bottom; } .miniature{ img{ width: 100%; height: 100%; object-fit: cover; } } .miniature-hover{ display: block; text-decoration: none; position: relative; overflow: hidden; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(19, 48, 67, 0.85) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'%3e%3c/circle%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'%3e%3c/line%3e%3cline x1='11' y1='8' x2='11' y2='14'%3e%3c/line%3e%3cline x1='8' y1='11' x2='14' y2='11'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; opacity: 0; transition: 0.3s all; } &:hover{ &::before{ opacity: 1; } } } .container{ margin: 0 100px; @media(max-width: 1200px){ margin: 0 30px; } } .flex_block{ width: 100%; flex-flow: row wrap; display: flex; display: -webkit-flex; -webkit-flex-flow: row wrap; display: -ms-flexbox; -ms-flex-flow: row wrap; -ms-align-content: flex-start; -webkit-align-content: flex-start; align-content: flex-start; list-style: none; } .title-bold, p, li{ line-height: 30px; margin: 0; color: @text-p; @media(max-width: 1000px){ line-height: 24px; } } a{ color: @text; transition: 0.3s all; &:hover{ color: @color-2; } } .btn{ display: inline-block; vertical-align: text-top; text-align: center; background: @color-1; color: @white; text-decoration: none; padding: 20px 40px; padding-top: 17px; transition: 0.3s all; border: none; outline: none; cursor: pointer; box-sizing: border-box; @media(max-width: 1000px){ width: 100%; } &:hover{ background: @color-2; transform: translate3d(0, -5px, 0); color: @white; } } .btn-decor{ display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; position: relative; right: 0; padding-top: 10px; padding-bottom: 10px; padding-right: 60px; color: @color-1; &::before{ content: ''; position: absolute; width: 40px; height: 1px; right: 0; top: 18px; background: @color-1; transition: 0.3s all; } &::after{ content: ''; position: absolute; width: 1px; height: 40px; right: 20px; top: -1px; background: @color-1; transition: 0.3s all; } &:hover{ &::before, &::after{ transform: rotate(90deg); } } } .btn-radius{ background: transparent; text-decoration: none; display: inline-block; position: relative; &::before{ content: ''; position: absolute; left: 50%; margin-left: -130px; width: 260px; background: @color-1; height: 2px; top: 50%; transform: rotate(-45deg); transition: 0.3s all; @media(max-width: 1000px){ width: 180px; margin-left: -90px; } } .btn-cont{ position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: #fff; border: 2px solid @color-1; text-align: center; border-radius: 50%; transition: 0.3s all; @media(max-width: 1000px){ width: 130px; height: 130px; } } span{ display: block; line-height: 24px; } &:hover{ &::before{ transform: rotate(45deg); } .btn-cont{ background: @color-1; color: #fff; } } } .btn-border{ box-shadow: none; background: transparent; color: @text; border: 1px solid #000; padding: 19px 39px; padding-top: 16px; font-weight: 500; &:hover{ border-color: @color-1; background: @color-1; color: @white; } } .title-big{ font-size: 50px; line-height: 62px; font-weight: normal; margin-bottom: 70px; font-family: @font-1; @media(max-width: 1000px){ font-size: 29px; line-height: 43px; margin-bottom: 40px; } } .title-big-decor{ position: relative; &::before{ content: ''; position: absolute; bottom: 16px; left: 10px; right: 0; height: 5px; background: @color-1; @media(max-width: 1000px){ display: none; } } span{ display: inline; position: relative; z-index: 2; background: #fff; padding-right: 50px; } } .content-title{ font-size: 40px; line-height: 52px; font-weight: normal; margin-bottom: 50px; margin-top: -10px; position: relative; font-family: @font-1; @media(max-width: 1300px){ font-size: 34px; line-height: 40px; } @media(max-width: 1000px){ font-size: 28px; line-height: 36px; margin-bottom: 40px; margin-top: 0; } h1{ font-weight: normal; font-size: 42px; line-height: 56px; margin: 0; @media(max-width: 1000px){ font-size: 28px; line-height: 36px; } } br{ @media(max-width: 1000px){ display: none; } } b{ font-weight: normal; color: @color-1; } } .content-title--c{ text-align: center; } .content-descr{ margin-top: -20px; margin-bottom: 55px; @media(max-width: 1000px){ margin-bottom: 0; } p{ margin-bottom: 0; } } .title-block{ font-family: @font-1; font-size: 22px; line-height: 32px; font-weight: 500; margin-bottom: 40px; @media(max-width: 1000px){ font-size: 18px; line-height: 26px; margin-bottom: 20px; } } .title-bold{ font-weight: bold; margin-bottom: 20px; } .title-decor{ font-family: @font-1; margin-bottom: 25px; color: darken(@bg, 10%); text-transform: uppercase; letter-spacing: 1px; } .regular{ position: relative; @media(max-width: 1000px){ width: 100%; } .owl-item{ float: left; } .owl-stage-outer{ position: relative; overflow: hidden; -webkit-transform: translate3d(0,0,0); } .owl-nav{ display: block; z-index: 1; font-size: 0; div{ position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; background-color: #f4f7fc; border-radius: 50%; cursor: pointer; transition: 0.3s all; z-index: 2; } .owl-prev{ left: -60px; background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M15 18l-6-6 6-6'/%3e%3c/svg%3e") no-repeat 45% 50%; background-size: 30px; @media(max-width: 1000px){ left: -20px; } &:hover{ background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M15 18l-6-6 6-6'/%3e%3c/svg%3e") no-repeat 45% 50%; background-size: 30px; } } .owl-next{ right: -60px; background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 65% 50%; background-size: 30px; @media(max-width: 1000px){ right: -20px; } &:hover{ background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 65% 50%; background-size: 30px; } } } .owl-dots{ position: absolute; bottom: -70px; left: 0; right: 0; text-align: center; .owl-dot{ width: 30px; height: 1px; border-radius: 50%; background: darken(@bg, 15%); display: inline-block; vertical-align: text-top; margin: 0 10px; cursor: pointer; transition: 0.3s all; @media(max-width: 1000px){ width: 2px; height: 2px; border-radius: 50%; margin: 0 3px; } } .active{ background: @color-1; } } } .modal-smg_boby{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; backdrop-filter: blur(3px); display: none; .modal-smg_boby-content{ display: flex; width: 100%; height: 100%; align-items: center; align-content: center; justify-content: center; .modal-smg{ width: 400px; position: relative; background-color: @white; z-index: 2; box-shadow: 0 30px 50px 0 rgba(0, 0, 0, 0.3); text-align: center; @media(max-width: 1000px){ width: auto; margin: 0 20px; } select, input{ width: 100%; margin-bottom: 15px; } } .modal-smg_container{ padding: 70px 45px; } .title-modal{ font-size: 22px; line-height: 30px; margin-bottom: 15px; } .descr-modal{ margin-bottom: 40px; line-height: 28px; } .btn{ width: 100%; margin-top: 10px; margin-bottom: 20px; box-sizing: border-box; } } .close-smg_boby{ background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; transition: 0.5s all; } } .modal-smg-thanks{ .modal-smg{ .thanks-content{ text-align: center; .icon-ok{ margin: 0 auto; margin-bottom: 15px; width: 80px; height: 80px; border-radius: 50%; background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; } .descr-modal{ margin-bottom: 0; } } } } .socials-modal{ margin-top: 40px; .soc--inner{ display: block; text-align: left; background: #6cd96c; box-shadow: 0 15px 25px 0 rgba(0, 255, 39, 0.12); color: @white; text-decoration: none; padding: 20px 40px; border-radius: 7px; padding-top: 17px; transition: 0.3s all; border: none; outline: none; cursor: pointer; box-sizing: border-box; padding-left: 60px; position: relative; margin-top: 15px; &::before{ content: ''; position: absolute; left: 20px; top: 13px; width: 26px; height: 26px; } } .whatsapp{ &:hover{ background: #65ac65; } &::before{ background: url("../img/whatsapp.svg") no-repeat 50% 50%; background-size: contain; } } .telegram{ background: #61c7f5; box-shadow: 0 15px 25px 0 rgba(0, 177, 255, 0.12); &:hover{ background: #59add3; } &::before{ background: url("../img/telegram_app.svg") no-repeat 50% 50%; background-size: contain; } } .viber{ background: #9e81d1; box-shadow: 0 15px 25px 0 rgba(98, 0, 255, 0.12); &:hover{ background: #7e7196; } &::before{ background: url("../img/viber.svg") no-repeat 50% 50%; background-size: contain; } } } .close--modal-smg{ position: absolute; right: 10px; top: 10px; -webkit-transition: all .3s ease-out; transition: all .3s ease-out; width: 30px; height: 30px; display: block; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; cursor: pointer; &:hover{ opacity: 0.3; } } form{ select, textarea, input{ box-sizing: border-box; background: #fff; border: 2px solid #ebebeb; padding: 0 30px; padding-top: 15px; padding-bottom: 18px; transition: 0.3s all; box-sizing: border-box; outline: none; @media(max-width: 1000px){ width: 100%; margin-right: 0; } &:nth-child(2n){ margin-right: 0; } &:focus{ border-color: @color-1; &::-webkit-input-placeholder {opacity: 0} &::-moz-placeholder {opacity: 0} &:-moz-placeholder {opacity: 0} &:-ms-input-placeholder {opacity: 0} } } select{ cursor: pointer; } textarea{ width: 100%; max-width: 100%; min-width: 100%; min-height: 75px; height: 75px; margin-right: 0; @media(max-width: 1000px){ height: 120px; } } .polit-form{ display: block; padding-top: 20px; text-align: left; input{ display: none !important; &:checked ~ .checkmark { &::before{ background: rgba(0, 0, 0, 0.2) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 12px; } } } .checkmark{ padding-left: 25px; display: block; position: relative; font-size: 11px; line-height: 14px; &::before{ content: ''; position: absolute; left: 5px; top: 0; width: 12px; height: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 2px; transition: 0.1s all; } } } } .contacts-list{ padding: 0; margin: 0; li{ margin-bottom: 15px; list-style: none; &:last-child{ margin-bottom: 0; } } .ct--inner{ display: inline-block; position: relative; font-weight: bold; font-weight: normal; text-decoration: none; padding: 5px; padding-left: 60px; transition: 0.3s all; &::before{ content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid @color-1; } } .adres::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='maps-location' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M16,9h2.33a1,1,0,0,1,1,.84l1.67,10A1,1,0,0,1,20,21H4a1,1,0,0,1-1-1.16l1.67-10a1,1,0,0,1,1-.84H8' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3cpath id='primary-2' data-name='primary' d='M16,7A4,4,0,0,0,8,7c0,4,4,8,4,8S16,11,16,7Z' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .graphic::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='clock-alt2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M12,3a9,9,0,1,1-9,9' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3cpolyline id='primary-2' data-name='primary' points='8 12 12 12 12 7' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .phone::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='smartphone' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M17,21H7a1,1,0,0,1-1-1V4A1,1,0,0,1,7,3H17a1,1,0,0,1,1,1V20A1,1,0,0,1,17,21ZM14,3H10l.5,2h3Z' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .email::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='open-email' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M12.55,3.17a1,1,0,0,0-1.1,0L3,9l8.45,5.63a1,1,0,0,0,1.1,0L21,9Zm0,11.46L21,9V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9l8.45,5.63A1,1,0,0,0,12.55,14.63Z' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .whatsapp::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='whatsapp' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M20.88,13.46A9,9,0,0,1,7.88,20L3,21l1-4.88a9,9,0,1,1,16.88-2.66ZM8.68,10.94,10.21,9.4,9.81,8H8s-.41,2.54,2.52,5.46S16,16,16,16V14.19l-1.4-.4-1.54,1.53' style='fill: none; stroke: %2314425f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } } .cont-two{ .cont-left{ width: calc(~'33.333% - 15px'); box-sizing: border-box; padding-right: 50px; margin-right: 30px; @media(max-width: 1000px){ width: 100%; padding-right: 0; margin-right: 0; margin-bottom: 40px; } } .cont-right{ width: calc(~'66.666% - 15px'); box-sizing: border-box; @media(max-width: 1000px){ width: 100%; } } } .two-item{ box-sizing: border-box; width: calc(~'50% - 50px'); margin-right: 100px; @media(max-width: 900px){ width: 100%; margin-right: 0; } &:nth-child(2n){ margin-right: 0; } } .three-item{ box-sizing: border-box; width: calc(~'33.333% - 20px'); margin-right: 30px; margin-bottom: 30px; @media(max-width: 900px){ width: 100%; margin-right: 0; } &:nth-child(3n){ margin-right: 0; } } .four-item{ box-sizing: border-box; width: calc(~'25% - 23px'); margin-right: 30px; margin-bottom: 30px; @media(max-width: 1200px){ width: calc(~'33.333% - 20px'); } @media(max-width: 900px){ width: 100%; margin-right: 0; } &:nth-child(3n){ @media(max-width: 1200px){ margin-right: 0; } } &:nth-child(4n){ margin-right: 0; @media(max-width: 1200px){ margin-right: 30px; } @media(max-width: 900px){ margin-right: 0; } } } .five-item{ box-sizing: border-box; width: calc(~'20% - 24px'); margin-right: 30px; margin-bottom: 30px; @media(max-width: 1200px){ width: calc(~'33.333% - 20px'); } @media(max-width: 900px){ width: 100%; margin-right: 0; } &:nth-child(3n){ @media(max-width: 1200px){ margin-right: 0; } } &:nth-child(5n){ margin-right: 0; @media(max-width: 1200px){ margin-right: 30px; } @media(max-width: 900px){ margin-right: 0; } } } .icon{ width: 60px; height: 60px; display: inline-block; vertical-align: text-top; background-position: 50% 50%; background-repeat: no-repeat; background-size: 40px; margin-bottom: 25px; background-color: @bg; } //ОБЩИЕ СТИЛИ .head-smg{ position: relative; z-index: 10; padding: 30px 0; .logo{ float: left; display: block; width: 190px; height: 70px; background: url('../img/logo.svg') no-repeat 0 50%; background-size: contain; margin-right: 150px; @media(max-width: 1000px){ height: 40px; margin-right: 0; } @media(max-width: 600px){ width: 140px; } } .head-right{ float: right; margin-top: 11px; @media(max-width: 1000px){ margin-top: 0; } @media(max-width: 800px){ display: none; } .contacts-list{ display: inline-block; vertical-align: middle; margin-right: 30px; } .btn{ display: inline-block; vertical-align: middle; } } } .menu-smg{ float: left; @media(max-width: 1700px){ float: right; margin-top: 7px; margin-left: 50px; } @media(max-width: 1000px){ margin-top: -2px; } .btn-menu{ display: none; text-decoration: none; text-align: center; color: #fff; @media(max-width: 1700px){ display: block; } .icon-menu{ display: inline-block; vertical-align: middle; padding: 10px; padding-top: 12px; border-radius: 50%; background: @color-1; height: 23px; width: 25px; position: relative; span{ display: block; width: 25px; height: 2px; background: #fff; margin: 4px 0; transition: 0.3s all; } } } .active{ .icon-menu{ span{ position: absolute; &:nth-child(1){ transform: rotate(45deg); top: 17px; } &:nth-child(2){ opacity: 0; } &:nth-child(3){ transform: rotate(-45deg); top: 17px; } } } } .menu-animate-mobile{ @media(max-width: 1700px){ display: none; position: absolute; top: 110px; background: @text; padding: 40px 0; left: 0; width: 100%; z-index: 20; } } ul{ padding: 0; margin: 0; li{ list-style: none; display: inline-block; vertical-align: text-top; margin-right: 50px; @media(max-width: 1700px){ display: block; text-align: center; margin-right: 0; } a{ display: block; text-decoration: none; padding: 20px 0; transition: 0.3s all; color: @text-p; position: relative; font-weight: 500; @media(max-width: 1700px){ padding: 10px 0; color: #fff; } &::before{ content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: @color-1; transition: 0.5s all; @media(max-width: 1700px){ bottom: 5px; } } &:hover{ &::before{ width: 100%; } } } } .current-menu-item{ a{ &::before{ width: 100%; } } } } } .intro{ position: relative; padding-top: 150px; // background: @bg; @media(max-width: 1000px){ padding-top: 30px; padding-bottom: 80px; } .intro-left{ position: relative; z-index: 3; padding-right: 50%; @media(max-width: 1000px){ padding: 0; } .title-big{ margin-bottom: 40px; } .descr{ margin-bottom: 100px; @media(max-width: 1000px){ margin-bottom: 50px; } } } .intro-bottom{ position: relative; z-index: 3; background: #fff; padding-right: 70px; padding-top: 70px; padding-bottom: 70px; border-bottom: 5px solid @color-1; @media(max-width: 1000px){ padding: 40px 0; } .features--inner{ @media(max-width: 1000px){ padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #ebebeb; } &:last-child{ @media(max-width: 1000px){ padding-bottom: 0; border: none; } } } .btn-block{ margin-top: 20px; } } .miniature{ position: absolute; right: 0; top: 0; bottom: 0; width: calc(~'50%'); z-index: 2; background: @bg; @media(max-width: 1000px){ position: relative; top: auto; bottom: auto; width: auto; display: block; height: 220px; margin-left: -30px; margin-right: -30px; } &::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; // background: #14425f; background: rgba(19, 48, 67, 0.85); } video{ width: 100%; height: 100%; object-fit: cover; } } } .intro-services{ @media(max-width: 1000px){ padding-top: 0; } .intro-left{ @media(max-width: 1000px){ padding: 70px 30px; padding-bottom: 30px; margin-bottom: 40px; margin-left: -30px; margin-right: -30px; background: @color-1; color: #fff; p{ color: #cfdee8; } } } .miniature{ @media(max-width: 1000px){ display: none; } } } .services{ @media(max-width: 1000px){ background: @bg; padding-top: 70px; padding-bottom: 70px; } .title-big{ @media(max-width: 1000px){ span{ background: transparent; } } } .services--inner{ position: relative; padding-left: calc(~'50% + 50px'); margin-bottom: 150px; @media(max-width: 1000px){ padding: 0; margin-bottom: 70px; } &:last-child{ @media(max-width: 1000px){ margin-bottom: 0; } } .miniature{ position: absolute; left: 0; top: 0; bottom: 0; width: calc(~'50% - 50px'); @media(max-width: 1000px){ position: static; height: 200px; width: 100%; margin-bottom: 30px; } } .num{ margin-bottom: 150px; color: darken(@bg, 10%); @media(max-width: 1000px){ margin-bottom: 20px; } } .content-title{ } .price-block{ margin-bottom: 50px; @media(max-width: 1000px){ margin-bottom: 20px; } } } } .price-block{ margin-top: 50px; @media(max-width: 1000px){ margin-top: 20px; } .price{ margin-bottom: 0; } .info-text{ opacity: 0.5; font-size: 14px; } } .tehinfo{ @media(max-width: 1000px){ padding-top: 70px; } .title-big{ @media(max-width: 1000px){ font-size: 18px; line-height: 30px; } } .content-descr{ display: inline-block; box-sizing: border-box; width: 50%; padding-left: 65px; border-left: 5px solid @color-1; @media(max-width: 1000px){ width: auto; padding-left: 30px; margin-bottom: 40px; } } .block--inner{ width: 50%; box-sizing: border-box; padding: 150px 70px; @media(max-width: 1000px){ width: 100%; background: @bg; padding: 70px 30px; } .content-title{ margin-bottom: 150px; @media(max-width: 1000px){ margin-bottom: 20px; } } &:nth-child(2){ background: @color-1; color: @white; p{ color: #cfdee8; } } } .btn-block{ text-align: center; margin-top: 100px; @media(max-width: 1000px){ margin-top: 50px; } } } .portfolio{ padding-top: 120px; @media(max-width: 1000px){ padding-top: 70px; padding-bottom: 70px; } .portfolio--inner{ position: relative; .miniature{ display: block; overflow: hidden; height: 600px; @media(max-width: 1000px){ height: 200px; } img{ transition: 0.3s all; } &:hover{ img{ transform: scale(1.1); } } } .text{ position: absolute; right: 0; bottom: 0; padding: 50px; background: @bg; max-width: 50%; @media(max-width: 1000px){ position: static; padding: 40px 30px; max-width: none; } .title-block{ margin-bottom: 15px; } ul{ padding: 0; margin: 0; li{ list-style: none; } } } } } .features{ padding-top: 150px; padding-bottom: 80px; @media(max-width: 1000px){ padding-top: 0; padding-bottom: 30px; text-align: center; } .flex_block{ @media(max-width: 1000px){ justify-content: center; } } .features--inner{ margin-bottom: 50px; @media(max-width: 1000px){ width: calc(~'50% - 20px'); margin: 0 10px; margin-bottom: 50px; } br{ @media(max-width: 1000px){ display: none; } } } } .about{ padding-top: 150px; padding-bottom: 150px; background: @bg; @media(max-width: 1000px){ padding-top: 70px; padding-bottom: 70px; } .ftnum{ margin-top: 100px; @media(max-width: 1000px){ margin-top: 30px; justify-content: center; text-align: center; } .ft--inner{ @media(max-width: 1000px){ width: calc(~'50% - 20px'); margin: 0 10px; margin-bottom: 10px; } .num{ margin-bottom: 20px; } } } .content-title{ @media(max-width: 1000px){ margin-bottom: 0; } } .cont-two{ padding-bottom: 70px; margin-bottom: 150px; border-bottom: 5px solid @color-1; @media(max-width: 1000px){ padding-bottom: 20px; margin-bottom: 70px; } &:last-child{ margin-bottom: 0; padding-bottom: 0; border: none; } } } .partners-logo{ padding-top: 30px; padding-bottom: 30px; @media(max-width: 1000px){ padding-top: 0; overflow-x: scroll; } .flex_block{ @media(max-width: 1000px){ width: 860px; } } .logo--inner{ padding: 20px 30px; background: #fff; // @media(max-width: 1000px){ width: 150px; margin-right: 20px; margin-bottom: 20px; } span{ display: block; width: 100%; height: 60px; background-repeat: no-repeat; background-position: center center; background-size: contain; @media(max-width: 1000px){ height: 40px; } } } } .services-info{ padding-top: 150px; @media(max-width: 1000px){ padding-top: 0; } .miniature{ @media(max-width: 1000px){ margin-bottom: 40px; } } .features_block{ margin-top: 60px; } } .services-info--toping{ .two-item:nth-child(2){ border-bottom: 5px solid @color-1; } .two-item .btn-block{ margin-top: 80px; margin-bottom: 80px; @media(max-width: 1000px){ margin: 50px 0; margin-top: 30px; } } .features_block{ margin-top: 100px; @media(max-width: 1000px){ margin-top: 70px; } } } .services-steps{ padding-top: 130px; margin-top: 150px; border-top: 5px solid @color-1; padding-bottom: 120px; border-bottom: 5px solid @color-1; @media(max-width: 1000px){ margin-top: 70px; padding-top: 60px; padding-bottom: 10px; } .btn-block{ margin-top: 30px; } } .price-list{ padding-top: 130px; @media(max-width: 1000px){ padding-top: 70px; } .content-title{ @media(max-width: 1000px){ margin-bottom: 0; } } .price--inner{ padding: 40px; padding-bottom: 80px; background: @bg; position: relative; overflow: hidden; cursor: pointer; .price{ margin-top: 10px; font-size: 26px; position: absolute; bottom: 40px; left: 40px; } .btn-block{ background: @bg; align-content: center; align-items: center; text-align: center; position: absolute; display: flex; left: 0; top: 100%; right: 0; height: 100%; width: 100%; z-index: 2; transition: 0.3s all; .btn-cont{ width: 100%; } } &:hover{ .btn-block{ top: 0; } } } } .faq{ padding-top: 150px; padding-bottom: 120px; @media(max-width: 1000px){ padding-top: 50px; padding-bottom: 50px; } .content-title{ @media(max-width: 1000px){ margin-bottom: 0; } } .faq--inner{ margin-bottom: 30px; border-bottom: 1px solid @text; .title{ font-weight: bold; padding-bottom: 33px; padding-right: 40px; cursor: pointer; position: relative; @media (max-width: 1000px){ font-size: 14px; } p{ color: @text; transition: 0.3s all; } &:hover{ p{ color: @color-1; } } &::before{ content: ''; position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat 50% 58%; transition: 0.3s all; } } .active{ p{ color: @color-1; } &::before{ background: #fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 15l-6-6-6 6'/%3e%3c/svg%3e") no-repeat 50% 55%; } } .faq-text{ display: none; padding-bottom: 30px; } } .btn-block{ margin-top: 40px; } } .contacts{ padding-top: 150px; padding-bottom: 70px; background: @color-1; color: @white; @media(max-width: 1000px){ padding-top: 70px; padding-bottom: 60px; } p{ color: @white; } a{ color: @white; &:hover{ color: @color-2; } } .btn{ background: @white; color: @text; &:hover{ background: @color-2; color: @text; } } .title-block{ margin-bottom: 30px; } .descr{ padding-top: 5px; } .btn-block{ margin-top: 45px; } .contacts-list{ li{ color: #fff; .ct--inner::before{ border-color: #fff; } } .adres::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='maps-location' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M16,9h2.33a1,1,0,0,1,1,.84l1.67,10A1,1,0,0,1,20,21H4a1,1,0,0,1-1-1.16l1.67-10a1,1,0,0,1,1-.84H8' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3cpath id='primary-2' data-name='primary' d='M16,7A4,4,0,0,0,8,7c0,4,4,8,4,8S16,11,16,7Z' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .graphic::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='clock-alt2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M12,3a9,9,0,1,1-9,9' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3cpolyline id='primary-2' data-name='primary' points='8 12 12 12 12 7' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .phone::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='smartphone' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M17,21H7a1,1,0,0,1-1-1V4A1,1,0,0,1,7,3H17a1,1,0,0,1,1,1V20A1,1,0,0,1,17,21ZM14,3H10l.5,2h3Z' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .email::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='open-email' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M12.55,3.17a1,1,0,0,0-1.1,0L3,9l8.45,5.63a1,1,0,0,0,1.1,0L21,9Zm0,11.46L21,9V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V9l8.45,5.63A1,1,0,0,0,12.55,14.63Z' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } .whatsapp::before{ background: url("data:image/svg+xml;charset=UTF-8,%3csvg class='icon line' width='20' height='20' id='whatsapp' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath id='primary' d='M20.88,13.46A9,9,0,0,1,7.88,20L3,21l1-4.88a9,9,0,1,1,16.88-2.66ZM8.68,10.94,10.21,9.4,9.81,8H8s-.41,2.54,2.52,5.46S16,16,16,16V14.19l-1.4-.4-1.54,1.53' style='fill: none; stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;'%3e%3c/path%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 20px; } } .cont-right{ position: relative; } .qr{ width: 100px; height: 100px; background: url('../img/qr-wa-me.svg') no-repeat 50% 50%; background-size: cover; position: absolute; right: 0; top: 0; @media(max-width: 1000px){ display: none; } } } .smg-footer{ color: @white; background: @color-1; font-size: 13px; @media(max-width: 1000px){ text-align: center; } .cont-two{ border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 70px; padding-bottom: 70px; } a{ color: @white; &:hover{ color: @color-2; } } .polit{ float: left; text-decoration: none; @media(max-width: 1000px){ float: none; display: block; margin-bottom: 10px; } } .danilsmg{ float: right; text-decoration: none; display: inline-block; vertical-align: middle; padding-right: 60px; background: url('../img/logo_danilsmg-white.svg') no-repeat right 1px; background-size: auto 14px; color: #fff; @media(max-width: 1000px){ float: none; } } } .intro-page{ margin-top: -150px; padding-top: 180px; padding-bottom: 110px; background-color: @bg; position: relative; text-align: center; @media(max-width: 1000px){ margin-top: -225px; padding-top: 250px; padding-bottom: 80px; } .content-title{ margin-bottom: 0; } } .page-content{ padding-top: 70px; padding-bottom: 100px; @media(max-width: 1000px){ padding-top: 20px; padding-bottom: 80px; } } .entrytext{ figure{ margin: 0; } .wp-block-image{ margin-bottom: 40px; } img{ height: auto; } h2, h3, h4, h5, h6{ font-weight: bold; margin: 20px 0; margin-top: 50px; &:first-child{ margin-top: 0; } } p{ display: block; margin-bottom: 20px; } ul{ padding: 0; margin: 0; margin-bottom: 40px; li{ margin-bottom: 8px; line-height: 26px; color: @text-p; list-style: none; position: relative; padding-left: 50px; &::before{ content: ''; position: absolute; left: 0; top: 12px; width: 30px; height: 2px; background: @color-1; } } } ol{ padding: 0; margin: 0; margin-bottom: 40px; counter-reset: myCounter; li{ margin-bottom: 10px; line-height: 26px; color: @text-p; list-style: none; position: relative; padding-left: 40px; &::before{ counter-increment: myCounter; content: counter(myCounter); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; background: @color-1; line-height: 24px; text-align: center; color: #fff; border-radius: 50%; font-size: 14px; } } } .wp-block-gallery{ margin-top: 50px; } .blocks-gallery-item{ width: auto; list-style: none; padding-left: 0; &::before{ display: none; } } .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { width: calc(50% - 8px); } } .socials-fixed{ position: fixed; right: 40px; bottom: 120px; z-index: 20; display: none; @media(max-width: 1400px){ display: block; right: 17px; bottom: 90px; } @media(max-width: 1000px){ right: 10px; } .soc--inner{ display: block; width: 50px; height: 50px; margin-bottom: 5px; border-radius: 50%; @media(max-width: 1000px){ width: 40px; height: 40px; } &:last-child{ margin-bottom: 0; } } .phone{ background: @color-2 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e") no-repeat center center; background-size: 50%; } .whatsapp{ background: #6cd96c url('../img/whatsapp.svg') no-repeat center center; background-size: 80%; } .viber{ background: #9e81d1 url('../img/viber.svg') no-repeat center center; background-size: 80%; } .telegram{ background: #61c7f5 url('../img/telegram_app.svg') no-repeat center center; background-size: 80%; } } .btn-top{ position: fixed; right: 40px; bottom: 40px; display: block; width: 50px; height: 50px; background: lighten(@text, 5%) url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 19V6M5 12l7-7 7 7'/%3e%3c/svg%3e") no-repeat 50% 50%; background-size: 30px; border-radius: 50%; z-index: 20; transition: 0.3s all; cursor: pointer; &:hover{ background-color: @color-1; } @media(max-width: 1400px){ right: 17px; } @media(max-width: 1000px){ width: 40px; height: 40px; right: 10px; } } .page-contacts{ padding-top: 100px; @media(max-width: 1000px){ padding-top: 30px; padding-bottom: 70px; } .btn-block{ margin-top: 50px; } .cont-left{ @media(max-width: 1000px){ margin-bottom: 70px; } } .partners-logo{ padding-top: 50px; padding-bottom: 0; .logo--inner{ background: @bg; } } .ftnum{ margin-top: 70px; padding: 90px 70px; padding-bottom: 50px; background: @color-1 url("../img/bg-maps.svg") no-repeat 50% 50%; background-size: auto 90%; color: #fff; position: relative; @media(max-width: 1000px){ padding: 70px 30px; padding-bottom: 30px; justify-content: center; text-align: center; } .title-bold{ color: #fff; } &::before{ content: ''; position: absolute; right: -100px; width: 102px; top: 0; bottom: 0; background: @color-1; @media(max-width: 1000px){ display: none; } } .ft--inner{ @media(max-width: 1000px){ width: calc(~'50% - 20px'); margin: 0 10px; margin-bottom: 10px; } .num{ margin-bottom: 20px; } } } } .page-template-page-contacts{ #contacts{ display: none; } } .margin-top{ @media(max-width: 1000px){ margin-top: 70px; } }