//@color-1: #578151; //@color-1: #40a07f; @color-1: #e25a69; @color-2: #101315; @color-3: #fdc813; @text: #101315; @grad: linear-gradient(to right top, #42eb87, #39f7cd); @width-basic: 1280px; @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); @font-face { font-family: 'Atyp'; src: local('Atyp Medium'), local('Atyp-Medium'), url('../fonts/Montserrat-Medium.woff2') format('woff2'), url('../fonts/Montserrat-Medium.woff') format('woff'), url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } //ОБЩИЕ СТИЛИ body { font-family: 'Open Sans', sans-serif; min-width: 1340px; color: @text; background: #ffffff; font-size: 14px; line-height: normal; @media (max-width: 724px) { min-width: 100%; font-size: 13px; } } h1, h2, h3, p { margin: 0; font-weight: normal; } h5 { font-size: 18px; } li, p { line-height: normal; font-size: 14px; line-height: 26px; @media (max-width: 724px) { font-size: 13px; } } a { color: @text; transition: 0.3s all; &:hover { color: @color-1; } } img { max-width: 100%; } .clearfix:after { content: ""; clear: both; display: table; } .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; } .container { width: @width-basic; margin: 0 auto; @media (max-width: 724px) { width: auto; padding: 0 40px; } @media(max-width: 350px) { padding: 0 20px; } } .container-min { width: 900px; margin: 0 auto; @media (max-width: 724px) { width: auto; padding: 0 40px; } @media(max-width: 350px) { padding: 0 20px; } } .content-title { font-size: 40px; line-height: 55px; margin-bottom: 60px; font-family: 'Montserrat', sans-serif; font-weight: bold; @media (max-width: 724px) { font-size: 32px; line-height: 46px; margin-bottom: 40px; } h1 { font-size: 40px; line-height: 55px; font-weight: normal; margin: 0; @media (max-width: 724px) { font-size: 26px; line-height: 36px; } } b { color: @color-1; } } .content-descr { line-height: 26px; margin-bottom: 50px; position: relative; } .content-dialog { padding: 30px; padding-top: 26px; background: @color-1; color: #fff; line-height: 26px; margin-bottom: 50px; margin-left: 80px; display: inline-block; position: relative; &::before { content: ''; position: absolute; top: 0; left: -80px; width: 40px; height: 40px; background: url('http://test4.danilsmg.ru/wp-content/uploads/2021/03/avatar.png') no-repeat 50% 50%; background-size: contain; border-radius: 50%; } &::after { content: ''; position: absolute; top: 0; left: -27px; width: 28px; height: 40px; background: url('../img/bg-dialog.svg') no-repeat right 0; background-size: contain; } } .title-block { font-size: 22px; line-height: 36px; font-family: 'Montserrat', sans-serif; font-weight: normal; display: block; margin-bottom: 20px; @media (max-width: 724px) { font-size: 16px; line-height: 26px; font-weight: bold; } } .btn { text-decoration: none; color: #fff; line-height: normal; transition: all .3s ease-out; display: inline-block; text-align: center; border: none; outline: none; background: @color-1; padding: 20px 40px; padding-top: 15px; position: relative; z-index: 3; transition: all .3s ease-out; font-family: 'Montserrat', sans-serif; overflow: hidden; @media(max-width: 724px) { width: 100%; box-sizing: border-box; margin-bottom: 7px; font-size: 13px; padding-left: 20px; padding-right: 20px; } &:hover { color: #fff; &::before { transform: scale(1); } } &::before { content: ''; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -200px; width: 400px; height: 400px; border-radius: 50%; background: @color-2; transition: 0.5s all; transform: scale(0); } span { position: relative; z-index: 2; } } .btn-border { border: 1px solid @color-1; background: transparent; color: @text; padding: 16px 38px; padding-top: 12px; font-weight: bold; &:hover { border-color: @color-2; } } .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; } .close-smg_boby { background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .modal-smg { width: 450px; z-index: 2; position: relative; background-color: #101315; color: #fff; text-align: center; @media (max-width: 724px) { width: auto; display: block; padding-right: 0; margin: 0 20px; } .title-modal { font-weight: bold; font-size: 22px; line-height: 28px; margin-bottom: 17px; font-family: 'Montserrat', sans-serif; } .descr-modal { line-height: 25px; margin-bottom: 30px; } form { padding: 60px 70px; @media (max-width: 724px) { padding: 50px 40px; } @media (max-width: 320px) { padding: 30px 20px; } input { width: 100%; margin-bottom: 15px; box-sizing: border-box; color: #fff; } .btn { display: block; width: 100%; margin-top: 40px; margin-bottom: 10px; &:hover { color: @text; } &::before { background: #fff; } } a { color: #fff; } } } } .modal-smg-thanks { .modal-smg { width: 400px; padding: 0; @media (max-width: 724px) { width: auto; margin: 0 30px; } &::before { display: none; } } .modal-smg_container { padding: 0; } .thanks-content { text-align: center; padding: 40px 45px; padding-bottom: 30px; @media (max-width: 724px) { padding-left: 20px; padding-right: 20px; } .icon-ok { margin: 0 auto; margin-bottom: 15px; width: 50px; height: 50px; background: url('../img/Check Document.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='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' 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%; background-size: 26px; &:hover { background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23e25a69' stroke-width='1.5' 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%; background-size: 26px; } } form { textarea, input { outline: none; display: block; box-sizing: border-box; border: none; background: none; border-bottom: 1px solid #fff; color: @text; padding: 17px 0; padding-top: 13px; transition: 0.3s all; @media (max-width: 724px) { font-size: 14px; min-width: 100%; box-sizing: border-box; } &:focus { border-color: @color-1; } } textarea { width: 100%; box-sizing: border-box; height: 70px; max-width: 100%; min-height: 70px; } .btn { @media (max-width: 724px) { box-sizing: border-box; width: 100%; } } .file_upload { input { display: none; } } .polit-form { display: block; padding-top: 30px; text-align: left; input { display: none !important; &:checked ~ .checkmark { &::before { background: rgba(0, 0, 0, 0.2) url('../img/checkmark.svg') no-repeat 50% 50%; background-size: 12px; } } } .checkmark { padding-left: 25px; display: inline-block; position: relative; font-size: 11px; @media (max-width: 724px) { line-height: 14px; } &::before { content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 2px; transition: 0.1s all; } } a { &:hover { color: @color-1; } } } } .entrytext { figure { margin: 0; } .alignleft { float: left; margin-right: 20px; margin-bottom: 10px; } .alignright { float: right; margin-left: 20px; margin-bottom: 10px; } .aligncenter { margin: 0 auto; text-align: center; display: block; width: auto; margin-bottom: 20px; } blockquote { margin: 20px 0; padding-left: 20px; border-left: 5px solid @color-1; } h3, h2 { line-height: normal; font-weight: bold; margin-bottom: 20px; margin-top: 30px; } ul { padding: 0; margin: 0; margin-bottom: 20px; li { list-style: none; padding-left: 30px; position: relative; line-height: 22px; margin-bottom: 7px; &::before { content: ''; position: absolute; left: 0; top: 12px; width: 10px; height: 2px; background: @color-1; } } } p { display: block; margin-bottom: 20px; } iframe, img { max-width: 100%; height: auto; @media (max-width: 724px) { width: auto; } } iframe { height: 300px; border: none; margin-bottom: 20px; @media (max-width: 724px) { width: 100%; height: 200px; } } table { td { padding: 10px; border: 1px solid #d9d9d9; } } .blocks-gallery-grid { margin-top: 30px; margin-bottom: 30px; li { padding: 0; &::before { display: none; } } } .wp-block-gallery{ .blocks-gallery-item{ @media (max-width: 724px) { width: 100% !important; margin-right: 0 !important; } } } } .regular { position: relative; @media (max-width: 425px) { width: 100%; } .owl-item { float: left; } .owl-stage-outer { overflow: hidden; width: 100%; position: relative; z-index: 2; } .owl-nav { display: block; z-index: 1; font-size: 0; text-align: center; width: 100%; margin-top: 50px; @media(max-width: 724px) { position: static; text-align: center; margin-top: 40px; } div { width: 50px; height: 50px; display: inline-block; border: 1px solid @color-1; transition: 0.3s all; cursor: pointer; &:hover { border-color: #fff; } } .owl-prev { left: -20px; background: 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='M15 18l-6-6 6-6'/%3e%3c/svg%3e") no-repeat 45% 50%; background-size: 26px; margin-right: 30px; } .owl-next { right: -20px; background: 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='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 55% 50%; background-size: 26px; } } } .page-content { position: relative; z-index: 2; padding-top: 100px; padding-bottom: 80px; @media (max-width: 724px) { padding-top: 50px; padding-bottom: 50px; } } //ОБЩИЕ СТИЛИ //хедер .my-head { padding: 35px 0; position: relative; z-index: 9; background: #101315; @media(max-width: 724px) { padding: 20px 0; } .container-head { padding: 0 150px; @media (max-width: 1700px) { padding: 0 50px; } @media (max-width: 724px) { padding: 0 30px; } @media (max-width: 350px) { padding: 0 20px; } } .logo { float: left; margin-right: 80px; display: block; width: 230px; height: 52px; background: url('../img/logo.svg') no-repeat 0 50%; background-size: contain; @media (max-width: 724px) { float: none; margin: 0 auto; margin-bottom: 5px; width: 200px; height: 40px; background-position: center center; } } .btn-block { float: right; @media (max-width: 724px) { float: none; clear: both; text-align: center; } .phone { text-decoration: none; display: inline-block; vertical-align: text-top; padding: 9px 30px; padding-bottom: 11px; padding-left: 45px; font-size: 20px; font-weight: bold; margin-right: 20px; position: relative; color: #fff; @media (max-width: 724px) { margin-right: 0; padding-right: 0; padding-top: 9px; padding-bottom: 0; background-position: 0 7px; } &::before { content: ''; position: absolute; left: 0; top: 8px; width: 30px; height: 30px; background-size: contain; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='5' y='2' width='14' height='20' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='12' y1='18' x2='12.01' y2='18'%3e%3c/line%3e%3c/svg%3e"); } } .btn { vertical-align: text-top; color: #fff; @media (max-width: 724px) { display: none; } &:hover { color: @text; border-color: #fff; } &::before { background: #fff; } } } } .intro { text-align: center; background: #101315; color: #fff; .container { padding-top: 100px; padding-bottom: 120px; position: relative; @media (max-width: 1425px) { z-index: 11; padding-bottom: 0; } } .miniature { position: absolute; right: 0; top: 0; width: 50%; height: 100%; overflow: hidden; @media (max-width: 724px) { display: none; } img { width: 100%; height: 100%; object-fit: cover; } } .text { position: relative; z-index: 2; text-align: left; width: 1010px; @media (max-width: 724px) { width: auto; } .title { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 46px; line-height: 66px; margin-bottom: 90px; margin-left: -2px; position: relative; @media(max-width: 724px) { font-size: 32px; line-height: 42px; margin-bottom: 35px; } span { display: block; color: @color-1; } } .descr { position: relative; margin-bottom: 100px; @media(max-width: 724px) { margin-bottom: 55px; } br{ @media (max-width: 724px) { display: none; } } } } form { display: inline-block; background: #162532; padding: 35px; input { display: inline-block; vertical-align: bottom; margin-right: 20px; width: 220px; color: #fff; @media (max-width: 724px) { width: 100%; margin-right: 0; margin-bottom: 25px; } } .btn { vertical-align: bottom; &:hover { color: @text; } &::before { background: #fff; } } } .title-midle { position: absolute; font-family: 'Montserrat', sans-serif; font-size: 40px; line-height: 40px; text-transform: uppercase; transform: rotate(90deg); right: -513px; top: 234px; font-weight: bold; opacity: 0.1; @media (max-width: 724px) { display: none; } } .bg-radius { div { @media (max-width: 1425px) { z-index: 10; } } } } .column-left { padding-left: calc(~'50% + 50px'); padding-top: 20px; padding-bottom: 20px; position: relative; @media (max-width: 724px) { padding: 0; } .miniature { position: absolute; left: 0; top: 0; bottom: 0; width: calc(~'50% - 50px'); @media (max-width: 724px) { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 200px; margin-bottom: 40px; } img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; } } } .column-right { padding-right: calc(~'50% + 50px'); padding-top: 20px; padding-bottom: 20px; position: relative; @media (max-width: 724px) { padding: 0; } .miniature { position: absolute; right: 0; top: 0; bottom: 0; width: calc(~'50% - 50px'); @media (max-width: 724px) { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 200px; margin-bottom: 40px; } img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; } } } .bg-radius { div { display: block; position: absolute; z-index: 10; overflow: hidden; @media (max-width: 1425px) { z-index: auto; } span { position: absolute; display: block; border-radius: 50%; width: 100%; height: 100%; top: 0; } } } .bg-radius--one { div { &:nth-child(1) { top: 100px; left: 0; width: 300px; height: 300px; @media (max-width: 724px) { width: 200px; height: 200px; } span { left: -200px; background: linear-gradient(to right top, #101315, #e25a69); @media (max-width: 724px) { left: -140px; } } } } div { &:nth-child(2) { top: 700px; right: 0; width: 300px; height: 300px; @media (max-width: 724px) { width: 280px; height: 280px; } span { right: -200px; background: linear-gradient(to left bottom, #101315, #e25a69); } } } } .bg-radius--two { div { &:nth-child(1) { top: 150px; left: 0; width: 200px; height: 200px; span { left: -130px; background: linear-gradient(to left bottom, #cecece, #ffffff); } } } div { &:nth-child(2) { top: 700px; right: 0; width: 280px; height: 280px; span { right: -200px; background: linear-gradient(to right top, #cecece, #ffffff); } } } } .bg-radius--thre { span { &:nth-child(1) { width: 100px; height: 100px; background: #f9f9f9; position: absolute; left: 50%; margin-left: -50px; bottom: -200px; z-index: 1; } } } .bg-radius--four { div { &:nth-child(1) { top: 150px; left: 0; width: 200px; height: 200px; span { left: -130px; background: linear-gradient(to right top, #101315, #e25a69); } } } div { &:nth-child(2) { top: 700px; right: 0; width: 280px; height: 280px; span { right: -200px; background: linear-gradient(to left bottom, #101315, #e25a69); } } } div { &:nth-child(3) { top: 1100px; left: -200px; width: 340px; height: 340px; @media (max-width: 724px) { width: 300px; height: 300px; } span { left: 0; background: linear-gradient(to right bottom, #101315, #e25a69); } } } } .bg-radius--five { div { &:nth-child(1) { top: -50px; left: -200px; width: 340px; height: 340px; @media (max-width: 724px) { width: 300px; height: 300px; } span { left: 0; background: linear-gradient(to left bottom, #101315, #e25a69); } } } div { &:nth-child(2) { top: 500px; right: 0; width: 280px; height: 280px; @media (max-width: 724px) { width: 260px; height: 260px; } span { right: -180px; background: linear-gradient(to left bottom, #e25a69, #101315); } } } } .avito-features { position: relative; padding-top: 100px; padding-bottom: 120px; background: #101315; color: #fff; @media(max-width: 724px) { padding-bottom: 100px; } .content-title { position: relative; padding-bottom: 50px; border-bottom: 12px solid #fff; } .avito--inner { width: 360px; margin-right: 100px; @media (max-width: 724px) { width: auto; margin-right: 0; margin-bottom: 40px; } &:nth-child(3n) { margin-right: 0; } &:last-child{ @media (max-width: 724px) { margin-bottom: 0; } } .icon { height: 50px; margin-bottom: 20px; img { width: auto; height: 100%; } } } } .avito-info { position: relative; padding-top: 120px; padding-bottom: 120px; @media (max-width: 724px) { padding-bottom: 80px; } .container{ @media (max-width: 724px) { position: relative; z-index: 2; } } ul { padding: 0; margin: 0; li { list-style: none; text-align: left; position: relative; border-bottom: 1px solid @text; padding-bottom: 20px; margin-bottom: 20px; &::before { content: ''; position: absolute; bottom: 26px; left: 1px; width: 75px; height: 12px; background: #e25a69; } .num { width: 76px; text-align: left; font-size: 60px; line-height: 58px; font-family: 'Montserrat', sans-serif; font-weight: bold; display: inline-block; vertical-align: text-top; margin-right: 35px; text-align: center; color: @color-1; position: relative; // -webkit-text-stroke: 1px @color-1; // color: transparent; span { display: inline-block; } &:nth-child(1) { span { margin-left: -13px; } } } .text { display: inline-block; vertical-align: text-top; width: calc(~'100% - 111px'); } } } .play-btn { position: absolute; z-index: 2; color: #fff; text-decoration: none; left: 50%; margin-left: -115px; top: 50%; margin-top: -40px; &::before { content: ''; display: inline-block; vertical-align: middle; width: 80px; height: 80px; background: @color-1 url('../img/play_button_circled_filled.svg') no-repeat 50% 50%; background-size: 30px; margin-right: 20px; animation: pulse 2s infinite; border-radius: 50%; transition: 0.3s all; } &:hover { &::before { background-color: @text; } } span { display: inline-block; vertical-align: middle; } } .miniature{ .pc-version--img{ @media (max-width: 724px) { display: none; } } .mob-version--img{ display: none; @media (max-width: 724px) { display: block; } } } } .nishe { position: relative; padding-bottom: 120px; overflow: hidden; @media(max-width: 724px) { padding-bottom: 100px; } .cont-item { position: relative; z-index: 2; padding-top: 90px; border-top: 1px solid #f1f1f1; } .content-title{ @media(max-width: 724px) { font-size: 20px; line-height: 36px; } } .nishe_block { align-items: center; } .nishe-list { width: 690px; padding: 45px; padding-bottom: 35px; margin-right: 100px; background: #fafafa; @media (max-width: 724px) { width: auto; display: block; margin-right: 0; margin-bottom: 50px; } ul { padding: 0; margin: 0; li { display: inline-block; vertical-align: text-top; width: calc(~'50% - 52px'); list-style: none; margin-right: 40px; margin-bottom: 10px; position: relative; padding-left: 30px; @media (max-width: 724px) { width: 100%; box-sizing: border-box; margin-right: 0; } &::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: @color-1; } &:nth-child(2n) { margin-right: 0; } } } } .btn-block { width: 400px; @media (max-width: 724px) { width: auto; } .title-block { margin-top: -10px; margin-bottom: 30px; } .btn { display: inline-block; vertical-align: middle; } } } .services { position: relative; padding-top: 120px; padding-bottom: 100px; background: #101315; color: #fff; @media(max-width: 724px) { padding-top: 90px; } .container { @media (max-width: 1425px) { position: relative; z-index: 2; } } .flex_block{ @media (max-width: 724px) { display: block; } } .title-cont { padding-bottom: 50px; margin-bottom: 50px; border-bottom: 12px solid #fff; @media (max-width: 724px) { border-bottom: none; padding-bottom: 0; } .content-title { width: 519px; margin-right: 100px; position: relative; margin-bottom: 0; margin-top: 8px; @media (max-width: 724px) { width: auto; margin-right: 0; margin-bottom: 50px; } } .content-dialog { width: 521px; margin-bottom: 0; @media (max-width: 724px) { width: auto; } } } .services--inner { width: 314px; border: 1px solid rgba(255, 255, 255, 0.13); padding: 45px; margin-right: 30px; margin-bottom: 30px; @media (max-width: 724px) { margin-right: 0; width: auto; } &:nth-child(3n) { margin-right: 0; } .icon { height: 50px; margin-bottom: 20px; img { width: auto; height: 100%; } } } .text-info { margin-top: 50px; .title-block { padding-left: 120px; margin: 0; background: url('../img/camera.svg') no-repeat 0 50%; background-size: 76px; @media (max-width: 724px) { padding-left: 0; padding-top: 70px; background-position: 50% 0; text-align: center; background-size: 60px; } } } } .portfolio { background: @color-1; color: #fff; padding-top: 100px; padding-bottom: 90px; .content-dialog { text-align: left; } .btn-block { margin-bottom: 100px; @media (max-width: 724px) { margin-bottom: 50px; } .btn-border { border-color: #fff; color: #fff; position: relative; padding-left: 50px; &::after { content: ''; position: absolute; left: 17px; top: 11px; width: 20px; height: 20px; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'%3e%3c/path%3e%3ccircle cx='8.5' cy='7' r='4'%3e%3c/circle%3e%3cpolyline points='17 11 19 13 23 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat 50% 50%; background-size: contain; } &:nth-child(1) { margin-right: 10px; &::after { background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z'/%3e%3cpath d='M14 3v5h5M16 13H8M16 17H8M10 9H8'/%3e%3c/svg%3e") no-repeat 50% 50%; background-size: contain; } } &:hover { border-color: @color-2; } } } .portfolio--inner { text-decoration: none; color: @text; position: relative; display: block; height: 450px; background: #1f1f1f; overflow: hidden; @media (max-width: 724px) { height: 300px; } img { object-fit: cover; width: 100%; height: 100%; vertical-align: bottom; } &:hover { .text { opacity: 1; } } .text { position: absolute; padding: 45px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(9.0px); -webkit-backdrop-filter: blur(9.0px); text-align: center; box-sizing: border-box; color: #fff; display: flex; width: 100%; height: 100%; align-items: center; align-content: center; justify-content: center; opacity: 0; transition: 0.5s all; .info_block { width: 70%; margin: 0 auto; margin-bottom: 20px; .info-item { width: 48%; display: inline-block; vertical-align: text-top; margin-bottom: 20px; span { font-weight: bold; } } } .btn { &:hover { color: @text; } &::before { background: #fff; } } } } } .tarif { position: relative; padding-top: 100px; padding-bottom: 90px; background: #f9f9f9; text-align: center; @media(max-width: 724px) { padding-bottom: 100px; } .tarif--inner { width: 314px; padding: 45px; margin-right: 30px; margin-bottom: 30px; border: 1px solid @text; @media (max-width: 724px) { width: auto; display: block; margin-right: 0; margin-bottom: 30px; } &:nth-child(3n) { margin-right: 0; } &:last-child{ @media (max-width: 724px) { margin-bottom: 0; } } &:hover { .num { color: @color-1; } } .num { text-align: left; font-size: 60px; font-family: 'Montserrat', sans-serif; font-weight: bold; display: inline-block; vertical-align: middle; text-align: center; -webkit-text-stroke: 1px @color-1; position: relative; color: transparent; transition: 0.3s all; margin-bottom: 30px; } .title-block { font-weight: bold; margin-bottom: 35px; } .title-info { font-weight: bold; text-align: left; margin-bottom: 20px; color: @color-1; } ul { padding: 0; margin: 0; margin-bottom: 20px; text-align: left; li { list-style: none; padding-left: 35px; position: relative; margin-bottom: 10px; &::before { content: ''; position: absolute; left: 0; top: 12px; width: 13px; height: 1px; background: @color-1; } &::after { content: ''; position: absolute; left: 6px; top: 6px; width: 1px; height: 13px; background: @color-1; } } } .btn-tarif--block { padding: 20px; border-radius: 20px; .price-old { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 28px; margin-bottom: 5px; color: #b2b2b2; text-decoration: line-through; @media(max-width: 724px) { font-size: 24px; } } .price { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 28px; margin-bottom: 30px; @media(max-width: 724px) { font-size: 26px; } span { font-size: 14px; color: #b2b2b2; @media(max-width: 724px) { display: block; } } } } } } .audio-reviews { padding-top: 100px; padding-bottom: 100px; background: #101315; color: #fff; text-align: center; @media(max-width: 724px) { padding-top: 90px; } .content-dialog { text-align: left; width: 850px; padding-right: 50px; @media (max-width: 724px) { width: auto; padding-right: 30px; } } .container { position: relative; } .flex_block { position: relative; z-index: 2; @media (max-width: 724px) { display: block; } } .audio-reviews__inner { width: 314px; text-align: left; margin-right: 30px; margin-bottom: 30px; padding: 30px 45px; border: 1px solid #fff; font-family: 'Montserrat', sans-serif; &:nth-child(3n) { margin-right: 0; } @media (max-width:500px) { margin: 0 auto; margin-bottom: 20px; width: auto; display: block; } .people { font-size: 0; margin-bottom: 15px; .text { .name { font-size: 16px; font-weight: bold; margin-bottom: 10px; @media (max-width:500px) { font-size: 14px; } } .site { color: #000; font-size: 14px; margin-bottom: 10px; } } } .audioplayer { margin: 0; height: 2.5em; color: #e4e4e4; position: relative; z-index: 1; background: transparent; } .audioplayer-mini { width: 2.5em; margin: 0 auto; } .audioplayer > div { position: absolute; } .audioplayer-playpause { width: 26px; height: 100%; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; left: 0; } .audioplayer-mini .audioplayer-playpause { width: 100%; } .audioplayer-playpause a { display: block; } .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a { width: 24px; height: 24px; background: url('../img/play_button_circled_filled.svg') no-repeat 50% 50%; background-size: contain; position: absolute; top: 2px; left: 1px; margin: 1px 0 0 0; } .audioplayer-playing .audioplayer-playpause a { width: 24px; height: 24px; position: absolute; top: 2px; left: 1px; margin: 1px 0 0 0; background: url('../img/circled_pause_filled.svg') no-repeat 50% 50%; background-size: contain; } .audioplayer-playing .audioplayer-playpause a:before { left: 0; } .audioplayer-playing .audioplayer-playpause a:after { right: 0; } .audioplayer-time { margin-top: 5px; line-height: 1.5; text-align: center; z-index: 2; top: 0; } .audioplayer-playing .audioplayer-time-current { color: #414141; } .audioplayer-time-current { display: none; right: 0; top: 20px; font-size: 14px; color: #c4c3c3; } .audioplayer-time-current, .audioplayer-time-duration { right: 0; top: 20px; font-size: 12px; color: #c4c3c3; } .audioplayer-time-current { color: #fff; } .audioplayer-playing .audioplayer-time-current { display: block; } .audioplayer-playing .audioplayer-time-duration { display: none; } .audioplayer-novolume .audioplayer-time-duration { border-right: 0; right: 0; } .audioplayer-bar { height: 4px; /* 14 */ background-color: #f2f2f2; cursor: pointer; z-index: 1; top: 34%; right: 0; /* 110 */ left: 35px; /* 110 */ margin-top: 0; /* 7 */ } .audioplayer-novolume .audioplayer-bar { right: 4.375em; /* 70 */ } .audioplayer-bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; } .audioplayer-bar-loaded { background-color: #e4e4e4; z-index: 1; } .audioplayer-bar-played { background: @color-1; z-index: 2; } .audioplayer-bar-played .audioplayer-bar-played-edge { display: none; position: absolute; width: 2px; height: 13px; background-color: #363542; left: 100%; top: -4px; } .audioplayer-volume { display: none; width: 2.5em; /* 40 */ height: 100%; border-left: 1px solid #111; border-left-color: rgba(0, 0, 0, .25); text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; right: 0; } .audioplayer-volume:hover, .audioplayer-volume:focus { background-color: #222; } .audioplayer-volume-button { display: none; width: 100%; height: 100%; } .audioplayer-volume-button a { width: 0.313em; /* 5 */ height: 0.375em; /* 6 */ background-color: #fff; display: block; position: relative; z-index: 1; top: 42%; left: 30%; } .audioplayer-volume-button a:before, .audioplayer-volume-button a:after { content: ''; position: absolute; } .audioplayer-volume-button a:before { width: 0; height: 0; border: 0.5em solid transparent; /* 8 */ border-left: none; border-right-color: #fff; z-index: 2; top: 50%; right: -0.25em; margin-top: -0.5em; /* 8 */ } .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after { /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */ width: 0.313em; /* 5 */ height: 0.313em; /* 5 */ border: 0.25em double #fff; /* 4 */ border-width: 0.25em 0.25em 0 0; /* 4 */ left: 0.563em; /* 9 */ top: -0.063em; /* 1 */ -webkit-border-radius: 0 0.938em 0 0; /* 15 */ -moz-border-radius: 0 0.938em 0 0; /* 15 */ border-radius: 0 0.938em 0 0; /* 15 */ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .audioplayer-volume-adjust { height: 6.25em; /* 100 */ cursor: default; position: absolute; left: 0; right: -1px; top: -9999px; background: #222; } .audioplayer-volume:not(:hover) .audioplayer-volume-adjust { opacity: 0; } .audioplayer-volume:hover .audioplayer-volume-adjust { top: auto; bottom: 100%; } .audioplayer-volume-adjust > div { width: 40%; height: 80%; background-color: #333; cursor: pointer; position: relative; z-index: 1; margin: 30% auto 0; } .audioplayer-volume-adjust div div { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: #1ba1e2; } .audioplayer-novolume .audioplayer-volume { display: none; } .audioplayer *, .audioplayer *:before, .audioplayer *:after { -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease; -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease; -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease; -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease; transition: color .25s ease, background-color .25s ease, opacity .5s ease; } } } .reviews-docs { padding-bottom: 120px; background: #101315; color: #fff; @media(max-width: 724px) { padding-bottom: 100px; } .title-block { padding-top: 0; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 12px solid #fff; } .title-cont { width: 495px; margin-right: 100px; @media (max-width: 724px) { width: auto; margin-right: 0; } } .docs_block { width: 685px; @media (max-width: 724px) { width: auto; margin-top: 40px; } } .docs--inner { width: 208px; height: 270px; background: #1f1f1f; margin-right: 30px; margin-bottom: 30px; overflow: hidden; position: relative; @media (max-width: 724px) { width: calc(~'30% - 1px'); height: 150px; margin-right: 15px; margin-bottom: 0; } &:nth-child(3n) { margin-right: 0; } &::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8) 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%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cline x1='12' y1='8' x2='12' y2='16'%3e%3c/line%3e%3cline x1='8' y1='12' x2='16' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; backdrop-filter: blur(2.0px); -webkit-backdrop-filter: blur(2.0px); opacity: 0; transition: 0.5s all; } &:hover { &::before { opacity: 1; } } img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; } } .btn-block { margin-top: 40px; .btn { &:hover { color: @text; } &::before { background: #fff; } } } } .team { padding-top: 120px; @media(max-width: 724px) { padding-top: 100px; } .content-title { margin-bottom: 30px; } .container{ position: relative; z-index: 2; } .content-descr { width: 460px; margin-bottom: 30px; margin-left: 3px; @media (max-width: 724px) { width: auto; } } .column-left { margin-bottom: 30px; } .team--inner { width: 232px; margin-right: 30px; margin-bottom: 30px; @media (max-width: 724px) { width: calc(~'50% - 10px'); margin-right: 20px; } &:nth-child(5n) { margin-right: 0; @media (max-width: 724px) { margin-right: 20px; } } &:nth-child(2n){ @media (max-width: 724px) { margin-right: 0; } } .avatar { overflow: hidden; display: inline-block; vertical-align: middle; height: 365px; margin-bottom: 17px; @media (max-width: 724px) { height: 200px; } img { object-fit: cover; width: 100%; height: 100%; } } .name { font-weight: bold; margin-bottom: 10px; } .position { color: #cecece; } } .team-features { .features--inner { display: inline-block; vertical-align: text-top; width: 220px; margin-right: 50px; margin-bottom: 30px; &:nth-child(2n) { margin-right: 0; } .num { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 60px; } } } } .contacts-big { padding-top: 100px; padding-bottom: 120px; @media (max-width: 724px) { padding-top: 0; padding-bottom: 50px; } .container{ @media(max-width: 724px) { position: relative; z-index: 2; } } .column-right { padding-top: 50px; padding-bottom: 50px; } .content-title { margin-bottom: 40px; } .content-descr { width: 460px; margin-bottom: 30px; margin-left: 3px; @media (max-width: 724px) { width: auto; } } .contacts_block { padding: 0; margin: 0; li { display: inline-block; vertical-align: text-top; list-style: none; margin-right: 50px; margin-bottom: 15px; &:nth-child(2n) { margin-right: 0; } .ct--inner { display: inline-block; text-decoration: none; padding-top: 15px; padding-left: 35px; border-radius: 30px; position: relative; font-weight: bold; &::before { content: ''; position: absolute; left: 0; top: 15px; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center center; background-size: contain; } } .phone { width: 250px; @media (max-width: 724px) { width: auto; } &::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23101315' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='5' y='2' width='14' height='20' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='12' y1='18' x2='12.01' y2='18'%3e%3c/line%3e%3c/svg%3e"); } } .email { width: 194px; @media (max-width: 724px) { width: auto; } &::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23101315' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3e%3c/path%3e%3cpolyline points='22,6 12,13 2,6'%3e%3c/polyline%3e%3c/svg%3e"); } } .adres::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23101315' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='10' r='3'/%3e%3cpath d='M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z'/%3e%3c/svg%3e"); } .time::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23101315' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolyline points='12 6 12 12 16 14'%3e%3c/polyline%3e%3c/svg%3e"); } } } .socials { margin-top: 50px; .soc--inner { display: inline-block; vertical-align: middle; margin: 0 6px; width: 40px; height: 40px; border-radius: 50%; transition: 0.3s all; &:hover { background-color: @color-1; } } .whatsapp { background: #101315 url('../img/whatsapp.svg') no-repeat 54% 50%; background-size: 18px; } .viber { background: #101315 url('../img/viber.svg') no-repeat 54% 50%; background-size: 18px; } .telegram { background: #101315 url('../img/telegram_app.svg') no-repeat 45% 50%; background-size: 18px; } // .whatsapp{ // background: #40c351 url('../img/whatsapp.svg') no-repeat 54% 50%; // background-size: 26px; // } // .viber{ // background: #675da9 url('../img/viber.svg') no-repeat 54% 50%; // background-size: 26px; // } // .telegram{ // background: #27a6e7 url('../img/telegram_app.svg') no-repeat 45% 50%; // background-size: 26px; // } } } .form-center { position: relative; padding-top: 100px; padding-bottom: 120px; text-align: center; background: #101315; color: #fff; a { text-decoration: none; color: #fff; } .container{ @media(max-width: 724px) { position: relative; z-index: 2; } } .avatar { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; display: inline-block; vertical-align: middle; margin-bottom: 40px; animation: pulse 2s infinite; @media(max-width: 724px) { width: 160px; height: 160px; } img { object-fit: cover; width: 100%; height: 100%; } } .content-title { margin-bottom: 20px; } .content-descr { margin-bottom: 50px; } form { input { width: 200px; color: #fff; display: inline-block; vertical-align: text-top; margin-right: 10px; @media (max-width: 724px) { width: 100%; margin-right: 0; margin-bottom: 25px; } } .btn { width: 220px; display: inline-block; vertical-align: text-top; @media (max-width: 724px) { width: 100%; } &:hover { color: @text; } &::before { background: #fff; } } .polit-form { text-align: center; } } } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(226, 90, 105, 0.5); } 70% { -webkit-box-shadow: 0 0 0 35px rgba(204, 169, 44, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(226, 90, 105, 0.5); box-shadow: 0 0 0 0 rgba(226, 90, 105, 0.33); } 70% { -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0); box-shadow: 0 0 0 35px rgba(204, 169, 44, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); } } .smg-footer { padding-top: 60px; padding-bottom: 60px; position: relative; background: #101315; color: #fff; @media (max-width: 724px) { text-align: center; } .flex_block{ @media (max-width: 724px) { display: block; } } .footer--inner { width: 33.333%; font-size: 13px; @media (max-width: 724px) { width: auto; } &:nth-child(2) { text-align: center; @media (max-width: 724px) { margin: 10px 0; } } &:nth-child(3) { text-align: right; @media (max-width: 724px) { text-align: center; } } } a { text-decoration: none; color: #fff; &:hover { color: @color-1; } } .danilsmg { display: inline-block; vertical-align: middle; padding-right: 70px; background: url('../img/logo_danilsmg-white.svg') no-repeat right 2px; background-size: auto 14px; } } .intro-page { padding-top: 80px; padding-bottom: 90px; background: #f8f8f8; .content-title { margin: 0; } .home-btn { display: inline-block; margin-top: 30px; text-decoration: none; } }