//@color-1: #fc2143; @color-1: #363636; @color-2: #2e2e2e; @blue: #0085e5; @red: #ff0000; @bg: #f7fbff; @b-color: #e2e2e2; @border: 1px solid @b-color; @shadow: 0 20px 30px 0 rgba(18, 59, 106, 0.05); @text: #313131; @text-p: #2a2a2a; @w: #fff; @font-1: 'Kumbh Sans', 'Arial', 'Helvetica', sans-serif; @font-2: 'Kumbh Sans', 'Arial', 'Helvetica', sans-serif; @font-3: 'Kumbh Sans', 'Arial', 'Helvetica', sans-serif; @import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap'); .clearfix:after { content: ''; clear: both; display: table; } //ОБЩИЕ СТИЛИ body { color: @text; background: #ffffff; font-size: 16px; line-height: normal; font-family: @font-2; @media (max-width: 800px) { font-size: 14px; } } img { max-width: 100%; vertical-align: bottom; } .miniature { video, 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(0, 0, 0, 0.4) 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 150px; @media (max-width: 1650px) { margin: 0 50px; } @media (max-width: 1400px) { margin: 0 30px; } } .container-min { width: 1000px; margin: 0 auto; @media (max-width: 1200px) { width: auto; margin: 0 30px; } } .flex_block { width: 100%; //flex-flow: row wrap; flex-wrap: 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; @media (max-width: 800px) { display: block; } } .title-bold, .descr-modal, p, li { line-height: 22px; margin: 0; color: @text-p; @media (max-width: 800px) { line-height: 20px; } } a { color: @text; transition: 0.3s all; &:hover { color: @color-1; } } ul { margin: 0; padding: 0; li { list-style: none; } } .title-big { font-size: 60px; line-height: 62px; font-weight: bold; letter-spacing: -1px; font-family: @font-1; margin-bottom: 40px; margin-left: -4px; @media (max-width: 1500px) { font-size: 45px; line-height: 47px; } @media (max-width: 800px) { font-size: 30px; line-height: 30px; letter-spacing: -1.5px; } } .content-title { font-size: 40px; line-height: 42px; font-weight: bold; letter-spacing: -1px; margin-bottom: 40px; margin-top: -5px; position: relative; font-family: @font-1; @media (max-width: 1500px) { font-size: 30px; line-height: 32px; } @media (max-width: 800px) { font-size: 24px; line-height: 28px; letter-spacing: -0.6px; margin-bottom: 40px; margin-top: 0; } h1 { font-size: 40px; line-height: 42px; font-weight: bold; margin: 0; @media (max-width: 800px) { font-size: 28px; line-height: 34px; } } br { @media (max-width: 800px) { display: none; } } } .title-modal, .title-block { font-family: @font-1; font-size: 30px; line-height: 35px; letter-spacing: -0.5px; font-weight: bold; margin-bottom: 15px; @media (max-width: 800px) { font-size: 18px; line-height: 23px; } } .title-bold { font-weight: bold; margin-bottom: 20px; } .title-decor { text-decoration: none; padding: 9px 15px; padding-top: 0; position: relative; display: inline-block; transition: 0.3s all; color: @w; z-index: 100; &::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; bottom: 3px; //border: 2px solid @color-2; //border-radius: 40px; background-color: @blue; z-index: -1; @media (max-width: 900px) { top: 0; } } &:hover { color: @w; &::after { background-color: @red; } //color: #ff1e3f; } } .btn { border: none; outline: none; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; vertical-align: text-top; box-sizing: border-box; transition: 0.3s all; padding: 14px 40px; //padding-top: 14px; background: @blue; color: @w; border-radius: none; font-weight: 700; @media (max-width: 800px) { width: 100%; padding-left: 20px; padding-right: 20px; } &:hover { color: @w; background: #ff1e3f; } } .btn-red { background: @color-1; } .btn-white { background: @w; color: @text-p; } .btn-border { padding: 18px 38px; padding-top: 12px; border: 2px solid @color-2; background: transparent; color: @text-p; font-weight: 500; &:hover { border-color: #ff1e3f; } } .btn-decor { position: relative; padding-left: 80px; @media (max-width: 800px) { padding-left: 60px; } &::before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 55px; background: @w 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='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M7 17l9.2-9.2M17 17V7H7'/%3e%3c/svg%3e") no-repeat 50% 50%; //border-radius: 50%; transition: 0.3s all; } &:hover { padding-left: 40px; padding-right: 80px; &::before { left: calc(~'100% - 53px'); } } } .btn-mini { display: inline-block; position: relative; text-decoration: none; font-weight: bold; padding: 3px 0; padding-right: 40px; &::before { content: ''; position: absolute; top: 0; right: -1px; width: 30px; height: 30px; background: @w 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='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='12' y1='5' x2='12' y2='19'%3e%3c/line%3e%3cline x1='5' y1='12' x2='19' y2='12'%3e%3c/line%3e%3c/svg%3e") no-repeat 50% 50%; border-radius: 50%; transition: 0.3s all; } &:hover { &::before { transform: rotate(90deg); } } } //слайдер .swiper { .swiper-wrapper { align-content: flex-start; list-style: none; } } .slider-cont { position: relative; } .slider-nav-item { 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; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .slider-prev { left: -45px; 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; @media (max-width: 1400px) { left: -20px; } &:hover { background-color: #ff1e3f; } } .slider-next { right: -45px; 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; @media (max-width: 1400px) { right: -20px; } &:hover { background-color: #ff1e3f; } } .swiper-slide { display: block; height: auto !important; } .swiper-pagination { position: absolute; right: 200px; bottom: 30px !important; height: auto; padding: 5px 10px; padding-bottom: 6px; border-radius: 20px; background: @bg; display: inline-block; width: auto !important; left: 50% !important; right: auto !important; transform: translate(-50%, 0) !important; } //слайдер .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: @w; z-index: 2; box-shadow: 0 30px 50px 0 rgba(0, 0, 0, 0.3); text-align: center; border-radius: 10px; @media (max-height: 1000px) { height: 80vh; overflow-x: scroll; } @media (max-width: 800px) { width: auto; margin: 0 20px; } select, textarea, input { width: 100%; margin-bottom: 15px; } textarea { min-height: 100px; } } .modal-smg_container { padding: 60px 40px; } .descr-modal { margin-bottom: 20px; } .btn { width: 100%; } .socials { text-align: center; .descr-modal { margin-bottom: 10px; margin-top: 30px; display: block; } .soc--inner { display: inline-block; width: 50px; height: 50px; margin: 0 5px; border-radius: 50%; transition: 0.3s all; @media (max-width: 500px) { width: 40px; height: 40px; } } .whatsapp { background: #6cd96c url('../img/whatsapp.svg') no-repeat center center; background-size: 50%; &:hover { background-color: #65ac65; } } .viber { background: #9e81d1 url('../img/viber.svg') no-repeat center center; background-size: 50%; &:hover { background-color: #7e7196; } } .telegram { background: #61c7f5 url('../img/telegram_app.svg') no-repeat center center; background-size: 50%; &:hover { background-color: #59add3; } } } } .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-onlineform-services, #modal-smg-onlineform { .modal-smg { width: 600px !important; .two-item { margin-bottom: 0; } } } .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: @w; 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 0.3s ease-out; transition: all 0.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; } } .socials { padding: 0; margin: 0; margin-top: 30px; li { display: inline-block; vertical-align: text-top; vertical-align: top; margin-right: 5px; .soc-item { display: block; text-decoration: none; width: 40px; height: 40px; background: @color-1; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 20px; transition: 0.3s all; &:hover { background-color: @color-1; } } .wa { background-image: url('../img/whatsapp.svg'); background-color: #6cd96c; } .tg { background-image: url('../img/telegram_app.svg'); background-color: #61c7f5; } .vk { background-image: url('../img/vk.svg'); background-color: #0077ff; } } } form { select, textarea, input { box-sizing: border-box; background: #fff; border: @border; padding: 0 30px; padding-top: 13px; padding-bottom: 19px; transition: 0.3s all; box-sizing: border-box; outline: none; border-radius: 20px; @media (max-width: 800px) { 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; } } } textarea { width: 100%; max-width: 100%; min-width: 100%; min-height: 75px; height: 75px; margin-right: 0; @media (max-width: 800px) { height: 120px; } } .polit-form { display: block; text-align: left; margin-top: 10px; margin-bottom: 20px; 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: 20px; display: block; position: relative; font-size: 11px; line-height: 14px; &::before { content: ''; position: absolute; left: 0; top: 0.5px; width: 12px; height: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 2px; transition: 0.1s all; cursor: pointer; } } } } .contacts-list { padding: 0; margin: 0; li { margin-bottom: 10px; list-style: none; &:last-child { margin-bottom: 0; } } .ct--inner { display: inline-block; position: relative; text-decoration: none; transition: 0.3s all; } .title-block { margin: 0; } .content-title { margin: 0; margin-bottom: 10px; } } .cont-two { .cont-left { width: calc(~'66.666% - 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(~'33.333% - 15px'); box-sizing: border-box; @media (max-width: 1000px) { width: 100%; } } } .two-item { box-sizing: border-box; width: calc(~'50% - 10px'); margin-right: 20px; margin-bottom: 20px; @media (max-width: 1000px) { width: 100%; margin-right: 0; } &:nth-child(2n) { margin-right: 0; } } .three-item { box-sizing: border-box; margin-right: 20px; margin-bottom: 20px; width: calc(~'33.333% - 14px'); @media (max-width: 900px) { width: 100%; margin-right: 0; } &:nth-child(3n) { margin-right: 0; } } .four-item { box-sizing: border-box; margin-right: 20px; margin-bottom: 20px; width: calc(~'25% - 20px'); @media (max-width: 1400px) { width: calc(~'50% - 20px'); } @media (max-width: 900px) { width: 100%; margin-right: 0; } &:nth-child(4n) { margin-right: 0; @media (max-width: 1200px) { margin-right: 20px; } @media (max-width: 900px) { margin-right: 0; } } &:nth-child(2n) { @media (max-width: 1400px) { // margin-right: 0; } } } .five-item { box-sizing: border-box; width: calc(~'20% - 24px'); margin-right: 30px; margin-bottom: 30px; @media (max-width: 1280px) { margin-right: 20px; margin-bottom: 20px; width: calc(~'20% - 16px'); } @media (max-width: 1200px) { width: calc(~'33.333% - 14px'); } @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: 50px; height: 50px; display: inline-block; vertical-align: text-top; background-position: 0 center; background-repeat: no-repeat; background-size: contain; background-color: @bg; border-radius: 10px; margin-bottom: 15px; } //ОБЩИЕ СТИЛИ .head-smg { //position: fixed; left: 0; top: 0; right: 0; z-index: 101; box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.05); .head-smg-cont { position: relative; z-index: 100; padding: 10px 0px; background: #fff; border-radius: 0 0 20px 20px; @media (max-width: 900px) { margin-right: -20px; margin-left: -20px; display: flex; } @media (max-width: 460px) { padding-left: 10px; padding-right: 10px; } @media (max-width: 350px) { margin-left: -30px; margin-right: -30px; } .site-logo { &_mobile { display: none; //background-image: url('https://theotherukraine.info/wp-content/uploads/2023/07/drugaya-wp-3.png'); //display: block; height: 50px; width: 200px; background-position: center center; background-size: contain; background-repeat: no-repeat; @media (max-width: 800px) { display: block; } } } } .logo { position: relative; z-index: 2; float: left; display: block; width: 100px; height: 54px; background: url('../img/logo-top.svg') no-repeat 0 50%; background-size: contain; margin-right: 50px; @media (max-width: 800px) { height: 45px; margin-right: 0; } @media (max-width: 350px) { width: 70px; } } .head-right { float: right; position: relative; z-index: 2; @media (max-width: 800px) { padding-top: 2px; display: none; } .title-block { display: inline-block; vertical-align: text-top; padding-top: 2px; padding-bottom: 5px; margin: 0; margin-right: 15px; color: @text; text-decoration: none; @media (max-width: 1550px) { margin-right: 0; } span { font-size: 12px; letter-spacing: 0; display: block; line-height: 10px; @media (max-width: 460px) { font-size: 9px; } } } .btn { background-color: @blue; display: inline-block; vertical-align: text-top; @media (max-width: 1550px) { display: none; } } } } .head-logo { text-align: center; @media (max-width: 800px) { display: none; } .slogan { color: @red; text-align: center; font-size: 18px; font-weight: bold; padding: 10px; @media (max-width: 800px) { display: none; } } .logo { text-align: center; } } .menu-smg { float: left; @media (max-width: 800px) { float: right; margin-left: auto; } .btn-menu { display: none; text-decoration: none; text-align: center; color: #fff; @media (max-width: 800px) { 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: 800px) { display: none; position: absolute; top: 70px; background: @text; padding: 20px 30px; left: 0; width: 100%; z-index: 20; border-radius: 20px; text-align: left; box-sizing: border-box; @media (max-width: 800px) { max-height: 80vh; overflow-y: scroll; } } } ul { li { list-style: none; display: inline-block; vertical-align: text-top; position: relative; @media (max-width: 1280px) { display: block; } a { display: block; text-decoration: none; padding: 12px 15px; transition: 0.3s all; color: @text; position: relative; font-weight: 500; @media (max-width: 1280px) { padding: 10px 0; color: #fff; } &:hover { opacity: 0.6; } } &:first-child a { padding-left: 0; } ul { position: absolute; left: 0; top: 40px; width: 300px; text-align: left; background: #fff; padding: 20px; border-radius: 20px; box-shadow: @shadow; display: none; @media (max-width: 900px) { position: static; display: block; padding: 0; background: @text; margin-bottom: 20px; width: auto; } li { display: block; border-bottom: @border; @media (max-width: 900px) { border-bottom-color: rgba(255, 255, 255, 0.07); } &:last-child { border-bottom: none; } } a { padding: 12px 0; @media (max-width: 900px) { font-size: 13px; opacity: 0.5; } } } &:hover > ul { display: block; } } .current-menu-item { a { opacity: 0.5; @media (max-width: 900px) { padding-right: 0; } } } } } .intro { position: relative; padding-top: 50px; padding-bottom: 80px; @media (max-width: 1100px) { text-align: center; padding-top: 120px; padding-bottom: 50px; } .container { position: relative; z-index: 2; } .text { width: 50%; @media (max-width: 1100px) { width: 100%; text-align: center; } .title-big { position: relative; z-index: 2; margin-bottom: 40px; } .descr { width: 70%; margin-bottom: 50px; @media (max-width: 1100px) { width: 100%; margin-bottom: 20px; } } .miniature { position: absolute; right: 0; top: -20px; bottom: -20px; width: 50%; @media (max-width: 1390px) { width: 45%; } @media (max-width: 1280px) { bottom: 100px; } @media (max-width: 1100px) { position: static; display: block; width: 100%; height: 250px; margin-bottom: 40px; } img { object-fit: contain; } } } .btn-block { @media (max-width: 800px) { position: relative; z-index: 2; margin-top: -42px; } .btn { background-color: @blue; } } .miniature { //border-radius: 20px; overflow: hidden; @media (max-width: 800px) { overflow: visible; margin-bottom: 20px; } } } //.features-intro{ // position: relative; // z-index: 2; // // @media(max-width: 1100px){ // text-align: left; // } // @media(max-width: 800px){ // margin-bottom: 40px; // margin-top: -20px; // } // .ft-item{ // padding: 30px; // border: @border; // border-radius: 20px; // margin-right: 0; // width: 33.3333%; // margin-left: -30px; // // @media(max-width: 1100px){ // width: calc(~'33.333% + 20px'); // } // @media(max-width: 800px){ // width: 100%; // margin: 0; // margin-top: -20px; // padding-bottom: 50px; // } // &::before{ // content: ''; // display: block; // width: 10px; // height: 10px; // background: #ff1e3f; // border-radius: 50%; // margin-bottom: 10px; // } // .title-block, // .title-bold{ // margin-bottom: 0; // } // // &:nth-child(1){ // background: #fff9f9; // border-color: #ffe7e7; // margin-left: 0; // // &::before{ // background: #ff1e3f; // } // } // &:nth-child(2){ // background: #fff1eb; // border-color: #ffe7dd; // // &::before{ // background: #f48f61; // } // } // &:nth-child(3){ // background: #fffcf7; // border-color: #fff2d9; // // &::before{ // background: #fac35a; // } // } // &:nth-child(4){ // background: #eafbff; // border-color: #d9f2f8; // } // &:last-child{ // @media(max-width: 800px){ // padding-bottom: 30px; // } // } // } //} .features-intro { position: relative; z-index: 2; margin-bottom: 30px; @media (max-width: 1100px) { text-align: center; } @media (max-width: 800px) { margin-bottom: 0; } .ft-item { padding-left: 25px; margin-right: 0; position: relative; display: inline-block; margin-right: 30px; margin-bottom: 3px; @media (max-width: 800px) { width: 100%; text-align: left; padding: 30px; padding-top: 15px; padding-bottom: 35px; border-radius: 15px; padding-left: 40px; margin: 0; margin-top: -20px; box-sizing: border-box; border: 1px solid #ffe7e7; } &::before { content: ''; display: block; width: 10px; height: 10px; position: absolute; left: 0; top: 13px; background: #ff1e3f; border-radius: 50%; margin-bottom: 10px; z-index: 1; @media (max-width: 800px) { top: 22px; left: 20px; } } .title-block, .title-bold { margin-bottom: 0; } &:nth-child(1) { @media (max-width: 800px) { background: #eeeeee; //border-color: #ffe7e7; } &::before { background: @red; } } &:nth-child(2) { @media (max-width: 800px) { background: #fafafa; //border-color: #ffe7dd; } &::before { background: @red; } } &:nth-child(3) { @media (max-width: 800px) { background: #eeeeee; //border-color: #fff2d9; } &::before { background: @red; } } &:last-child { margin-right: 0; @media (max-width: 800px) { padding-bottom: 60px; } } } } .descr-big { padding-top: 100px; position: relative; @media (max-width: 900px) { padding-top: 50px; margin-bottom: 30px; } .descr-cont { width: 800px; margin: 0 auto; text-align: center; @media (max-width: 900px) { width: auto; } .btn-block { margin-top: 30px; } } } .services { padding-top: 80px; border-top: @border; @media (max-width: 800px) { padding-top: 40px; text-align: center; } .title-cont { padding-right: calc(~'33.3333% + 10px'); margin-bottom: 50px; @media (max-width: 1500px) { padding: 0; } @media (max-width: 800px) { margin-bottom: 20px; } .title-big { margin-bottom: 0; } .descr { padding-top: 15px; @media (max-width: 800px) { padding-top: 0; } } } .features-icon { text-align: center; .flex_block { justify-content: center; } .ft-item { margin: 0 20px; width: 80px; .icon { border: 2px solid @color-2; background-color: transparent; background-size: 60%; background-position: center center; margin-bottom: 3px; } .title-bold { color: @color-2; } } } .services-item { padding: 30px; padding-bottom: 110px; background: #0385e52b; border: 1px solid #e2e2e2; border-color: #fbfbfb; /* border-radius: 20px; */ box-shadow: 0 20px 30px 0 rgba(18, 59, 106, 0.05); text-align: left; position: relative; padding-top: 100px; @media (max-width: 1100px) { width: 100%; margin-right: 0; } .title-block { color: @text-p; } .num { display: block; position: absolute; padding: 10px 20px; background: #ff0000; /* border-radius: 20px; */ margin-bottom: 100px; color: #fff; top: 0; left: 0; @media (max-width: 800px) { margin-bottom: 30px; } } .btn-block { position: absolute; left: 30px; bottom: 30px; right: 30px; box-sizing: border-box; margin-top: 30px; .btn-decor { float: left; @media (max-width: 1100px) { width: auto; } } .btn-mini { float: right; margin-top: 11px; span { @media (max-width: 1330px) { display: none; } } } } } .services-item--big { background: #e9f4ff !important; box-sizing: border-box; .num { display: block; position: absolute; padding: 10px 20px; background: #ff0000; /* border-radius: 20px; */ margin-bottom: 100px; color: #fff; top: 0; left: 0; } &:nth-child(2) { background: #e2e2e2 !important; } } } .services-single { border-top: none; } .video-presentation { padding-top: 100px; @media (max-width: 800px) { padding-top: 50px; } .video-item { width: calc(~'50% - 50px'); position: relative; @media (max-width: 1280px) { width: 100%; margin-bottom: 40px; } // .content-title{ // position: absolute; // left: 40px; // top: 40px; // z-index: 2; // color: @w; // @media(max-width: 800px){ // position: static; // text-align: center; // } // } .miniature { position: relative; //border-radius: 20px; overflow: hidden; height: 100%; @media (max-width: 1280px) { height: 300px; } @media (max-width: 600px) { height: 200px; } } img { object-position: top center; } .btn-play { position: absolute; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; width: 80px; height: 80px; background: #ff1e3f url('../img/play.svg') no-repeat 58% 50%; background-size: 30%; border-radius: 50%; cursor: pointer; transition: 0.3s all; z-index: 2; @media (max-width: 600px) { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; } &:hover { background-color: @text; } } .btn-play-pause { position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; background: #ff1e3f url('../img/pause.svg') no-repeat 50% 50%; background-size: 30%; border-radius: 50%; transition: 0.3s all; z-index: 6; display: none; cursor: pointer; &:hover { background-color: #ff6e83; } } video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: 0.3s all; background: @text; @media (max-width: 500px) { object-fit: cover; } } .active { opacity: 1; z-index: 5; } } .text { padding-left: 25px; @media (max-width: 1280px) { padding: 0; width: 100%; } .btn-block { margin-top: 50px; } } } .single-services { .video-presentation .video-item .miniature { height: auto; } } .steps { padding-top: 30px; padding-bottom: 40px; background-color: #e7e7e7; margin-bottom: 50px; margin-top: 50px; @media (max-width: 800px) { padding-top: 30px; padding-bottom: 70px; } .content-title, .title-big { margin-bottom: 20px; } .step-item { position: relative; padding: 30px; padding-right: 60px; box-shadow: @shadow; //border-radius: 20px; //width: calc(~'20% + 32px'); //margin-left: -40px; background: #fff; box-sizing: border-box; padding-bottom: 105px; @media (max-width: 1000px) { width: 100%; margin: 0; margin-top: -20px; position: relative; z-index: 2; padding-top: 50px; } @media (max-width: 800px) { padding-right: 30px; padding-bottom: 30px; } .num { display: inline-block; padding: 20px 20px; //padding-top: 6px; background: @red; //border-radius: 20px; margin-bottom: 20px; color: @w; } .btn { position: absolute; left: 30px; bottom: 30px; width: 210px; text-align: center; padding: 15px 25px; padding-top: 10px; @media (max-width: 1300px) { width: auto; } @media (max-width: 800px) { width: 100%; position: static; margin-top: 20px; } &:hover { background: @text !important; } } } } .steps-single { padding-bottom: 0; .content-title, .title-big { text-align: center; } } .partners { text-align: center; margin-top: 40px; .partners-cont { margin-bottom: 30px; position: relative; &::after { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 100px; background: linear-gradient(to right, #fff, rgba(0, 0, 0, 0)); z-index: 2; } &::before { content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 100px; background: linear-gradient(to left, #fff, rgba(0, 0, 0, 0)); z-index: 2; } .swiper-wrapper { -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; } .logo-item { width: auto !important; height: 30px; padding-left: 10px; padding-right: 10px; display: inline-block; /* добавить */ vertical-align: top; margin-right: 10px; /* добавить отступ */ display: inline-block; img { height: 30px; width: auto; @media (max-width: 900px) { height: 20px; } } } } } .faq { padding-bottom: 100px; @media (max-width: 800px) { padding-bottom: 70px; } .faq-cont { padding: 50px; padding-bottom: 20px; background: #f7fbff; //border-radius: 20px; @media (max-width: 800px) { padding: 50px 30px; } } .faq-info { padding-right: 15px; @media (max-width: 800px) { padding-right: 0; } .title-block { margin-bottom: 5px; } .btn-block { margin-top: 30px; @media (max-width: 1000px) { margin-bottom: 40px; } .btn { @media (max-width: 1280px) { margin-top: 15px; } } .btn-decor { &::before { background-image: url('../img/faq-btn.svg'); } } .btn-border { margin-left: 10px; @media (max-width: 800px) { margin-left: 0; } } } } .faq-right { padding-left: 15px; @media (max-width: 800px) { padding: 0; } } .faq-item { .title-faq { padding-top: 15px; padding-bottom: 20px; padding-right: 40px; border-bottom: @border; margin: 0; color: @text; position: relative; cursor: pointer; &::before { content: ''; position: absolute; right: 0; top: 24px; width: 19px; height: 2px; background: @text; } &::after { content: ''; position: absolute; right: 9px; top: 16px; width: 2px; height: 19px; transition: 0.3s all; background: @text; } } .active { font-weight: bold; &::after { height: 0; top: 24px; } } .entrytext { display: none; padding-top: 20px; padding-bottom: 20px; opacity: 0.6; } } } .btn-maps { margin-top: 20px; .adres { margin-bottom: 20px; color: @text-p; @media (max-width: 1640px) { margin-bottom: 5px; } span { font-weight: bold; margin-right: 3px; } } .btn { background: @w; color: @text; padding-left: 50px; padding-right: 39px; position: relative; width: 100%; border: @border; text-align: left; margin-top: 10px; @media (max-width: 1640px) { margin-top: 10px; margin-right: 5px; text-align: left; min-width: 220px; } &::before { content: ''; position: absolute; left: 20px; top: 14px; width: 20px; height: 20px; transition: 0.3s all; } &:hover { background: @text; color: @w; } } .btn-gis::before { background: url('../img/2gis.svg') no-repeat 50% 50%; background-size: contain; } .btn-yand::before { background: url('../img/icons8_yandex_logo.svg') no-repeat 50% 50%; background-size: contain; } .btn-goog::before { background: url('../img/icons8_google_logo.svg') no-repeat 50% 50%; background-size: contain; } } .contacts { padding-top: 100px; padding-bottom: 50px; background: #fff9f9; @media (max-width: 800px) { padding-top: 50px; padding-bottom: 20px; } .content-title { @media (max-width: 800px) { text-align: center; } } .flex_block { } .title-block { font-size: 26px; } } .ct-item { padding: 40px; background: @w; box-shadow: @shadow; //border-radius: 20px; @media (max-width: 900px) { padding: 0; box-shadow: none; border-radius: 0; border-bottom: @border; padding-bottom: 30px; margin-bottom: 40px; background: transparent; } &:last-child { @media (max-width: 900px) { margin-bottom: 0; border-bottom: none; } } .phone { margin-top: 10px; } } .smg-footer { background: #fff9f9; font-size: 13px; @media (max-width: 800px) { text-align: center; padding-bottom: 20px; } .smg-footer-cont { padding-top: 30px; padding-bottom: 5px; border-top: @border; } .three-item { @media (max-width: 800px) { margin-bottom: 10px; } } a { color: @text; &:hover { color: @color-1; } } .polit { text-decoration: none; } .danilsmg { text-decoration: none; display: inline-block; vertical-align: middle; padding-right: 60px; background: url('../img/logo_danilsmg.svg') no-repeat right 2.5px; background-size: auto 14px; color: @text; } .three-item { &:nth-child(2) { text-align: center; } &:nth-child(3) { text-align: right; @media (max-width: 800px) { text-align: center; } } } } .intro-page { padding: 50px; padding-top: 125px; padding-bottom: 55px; background-color: #f7fbff; border-radius: 20px; position: relative; text-align: center; @media (max-width: 800px) { padding: 10px; padding-top: 85px; padding-bottom: 25px; } .title-big, .content-title { margin-bottom: 0; } .descr { margin-top: 30px; } } .breadgrumbs { margin-top: 10px; @media (max-width: 800px) { margin-top: 5px; } ul { padding: 0; margin: 0; li { list-style: none; display: inline-block; vertical-align: text-top; font-size: 14px; margin-right: 15px; padding-right: 15px; position: relative; &::before { content: ''; position: absolute; display: block; right: -8px; top: 5px; width: 14px; height: 14px; background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 18l6-6-6-6'/%3e%3c/svg%3e") no-repeat 50% 50%; background-size: contain; } &:last-child { padding-right: 0; margin-right: 0; &::before { display: none; } } a { color: @color-1; text-decoration: none; &:hover { text-decoration: underline; } } } } } .page-content { padding-top: 100px; padding-bottom: 100px; @media (max-width: 800px) { padding-top: 50px; padding-bottom: 50px; } } .entrytext { .wp-block-file { padding: 15px; border: @border; border-radius: 10px; background: @bg; box-sizing: border-box; margin-bottom: 15px; position: relative; &::before { content: ''; display: inline-block; vertical-align: middle; width: 30px; height: 30px; 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='%23313131' stroke-width='1' stroke-linecap='square' stroke-linejoin='arcs'%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; margin-right: 15px; @media (max-width: 800px) { margin-right: 10px; } } a { display: inline-block; vertical-align: middle; margin: 0; text-decoration: none; margin-top: -3px; width: calc(~'100% - 140px'); @media (max-width: 800px) { margin-right: 8px; } } .wp-block-file__button { text-align: center; } .wp-block-file__embed { display: none; } .wp-block-file__button { display: inline-block; vertical-align: middle; color: @w; padding: 10px 20px; padding-bottom: 15px; margin: 0; width: auto; &:hover { color: @w; } } } figure { margin: 0; } .wp-block-image { margin-bottom: 40px; } img { height: auto; //border-radius: 15px; @media (max-width: 800px) { //border-radius: 10px; } } h2, h3, h4, h5, h6 { font-weight: bold; margin: 20px 0; margin-top: 50px; &:first-child { margin-top: 0; } } a { color: #ff1e3f; &:hover { color: @text; } } p { display: block; margin-bottom: 20px; } ul { margin-bottom: 40px; li { margin-bottom: 8px; color: @text-p; list-style: none; position: relative; padding-left: 15px; &::before { content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: @color-1; @media (max-width: 1400px) { top: 7px; } } } } 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); } table { margin-bottom: 30px; width: 100%; @media (max-width: 900px) { overflow: scroll; display: block; } tbody { min-width: 500px; } tr { &:nth-child(1) { font-weight: bold; } &:nth-child(2n) { background: @bg; } td { padding: 20px; @media (max-width: 900px) { padding: 10px; } } } } } .socials-fixed { position: fixed; right: 40px; bottom: 30px; z-index: 20; transition: 0.3s all; @media (max-width: 1400px) { right: 17px; } @media (max-width: 500px) { right: 10px; } .soc--inner { display: block; width: 50px; height: 50px; margin-bottom: 10px; border-radius: 50%; transition: 0.3s all; @media (max-width: 500px) { width: 40px; height: 40px; margin-bottom: 6px; } &:last-child { margin-bottom: 0; } } .psiholog-btn { background: #4175f5 url('../img/icons8_transformation_skill 1.svg') no-repeat center center; background-size: 60%; &:hover { background-color: @text; } } .date { background: #f48f61 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='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e") no-repeat center center; background-size: 60%; &:hover { background-color: @text; } } .whatsapp { background: #6cd96c url('../img/whatsapp.svg') no-repeat center center; background-size: 60%; &:hover { background-color: #65ac65; } } .viber { background: #9e81d1 url('../img/viber.svg') no-repeat center center; background-size: 60%; &:hover { background-color: #7e7196; } } .telegram { background: #61c7f5 url('../img/telegram_app.svg') no-repeat center center; background-size: 60%; &:hover { background-color: #59add3; } } } .socials-fixed--active { bottom: 120px; @media (max-width: 1400px) { bottom: 100px; } @media (max-width: 500px) { } } .btn-top { position: fixed; right: 40px; bottom: 30px; 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='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='arcs'%3e%3cpath d='M18 15l-6-6-6 6'/%3e%3c/svg%3e") no-repeat 50% 45%; border-radius: 50%; transition: 0.3s all; cursor: pointer; opacity: 0; z-index: -1; &:hover { background-color: @color-1; } @media (max-width: 1400px) { right: 17px; } @media (max-width: 500px) { width: 40px; height: 40px; right: 10px; } } .btn-top--active { opacity: 1; z-index: 20; } .page-error { text-align: center; .title { font-size: 200px; font-weight: bold; @media (max-width: 800px) { font-size: 90px; } } .title-block { margin-bottom: 40px; } .error-text { padding: 100px; padding-top: 50px; background: @bg; @media (max-width: 800px) { padding: 50px 30px; padding-top: 30px; } } } .page-company { .text { position: relative; padding-right: calc(~'50% + 50px'); @media (max-width: 1100px) { padding: 0; } @media (max-width: 900px) { padding-right: 0; } } .miniature { position: absolute; width: 50%; right: 0; top: 0; bottom: 90px; //border-radius: 20px; overflow: hidden; background: #fefbf6; @media (max-width: 1100px) { position: static; width: 100%; } @media (max-width: 900px) { display: none; } img { // object-fit: contain; } } .partners { padding: 0; margin-top: 50px; border-top: @border; padding-top: 30px; } } .team { padding-bottom: 80px; .team-item { background: @bg; //border-radius: 20px; position: relative; .miniature { width: calc(~'50% - 20px'); position: absolute; left: 0; top: 0; bottom: 0; //border-radius: 20px; overflow: hidden; @media (max-width: 570px) { position: static; width: 100%; height: 250px; } img { background: #f7fbff; } } .title-bold { margin-bottom: 5px; } .descr { font-size: 13px; color: @text-p; margin-bottom: 10px; } .text { padding: 30px; padding-bottom: 150px; padding-left: calc(~'50% + 20px'); @media (max-width: 570px) { padding: 30px 20px; } } ul { border-top: @border; padding-top: 10px; li { margin-bottom: 3px; a { text-decoration: none; } .phone { font-weight: bold; } &:last-child { margin-bottom: 0; } } } } } .page-news { .news-item { text-decoration: none; //border-radius: 20px; background: @bg; border-color: #d9f2f8; position: relative; .miniature { //border-radius: 20px; overflow: hidden; box-sizing: border-box; height: 300px; width: 100%; @media (max-width: 900px) { height: 200px; } } .text { box-sizing: border-box; padding: 30px; padding-bottom: 70px; padding-right: 50px; @media (max-width: 1100px) { padding: 30px; } .title-bold { transition: 0.3s all; &:hover { color: #f48f61; } } .date { color: @color-1; margin-bottom: 10px; color: #b4b4b4; } .btn-mini { position: absolute; left: 30px; bottom: 30px; margin-top: 15px; @media (max-width: 1100px) { position: relative; left: auto; bottom: auto; } } } } } .page-template-page-contacts { .contacts { background: #fff; } .smg-footer { background: #fff; } } .post-template-default { .intro-page { .content-title h1 { @media (max-width: 1100px) { font-size: 18px; line-height: 24px; } } } } .page-news-single { padding-top: 150px; @media (max-width: 1100px) { padding-top: 100px; } .title-big, .content-title { margin-bottom: 0; } .descr { margin-top: 30px; } .breadgrumbs { margin-bottom: 50px; } .cont-left { border-right: @border; @media (max-width: 1000px) { border: none; } } .cont-right { .news-item { text-decoration: none; padding-top: 30px; padding-bottom: 30px; border-bottom: @border; display: block; &:nth-child(2) { padding-top: 15px; } .title-bold { transition: 0.3s all; margin-bottom: 0; display: block; &:hover { color: #f48f61; } } .descr { margin-top: 15px; } } .laws-item { padding-top: 15px; padding-bottom: 15px; border-bottom: @border; display: block; } .job-item { margin-bottom: 20px; &:last-child { margin-bottom: 0; } .level { margin-bottom: 0; } } } } .info-volonter { .flex_block { } .title-big { @media (max-width: 1100px) { text-align: center; } } .text { position: relative; margin-bottom: 0; padding-right: calc(~'50% + 50px'); @media (max-width: 1100px) { padding: 0; } .volonter-item { background: #0385e52b; //border-radius: 20px; padding: 30px; margin-bottom: 10px; @media (max-width: 800px) { padding: 30px; } } } .miniature { width: 50%; position: absolute; right: 0; top: 0; bottom: 0; @media (max-width: 1100px) { position: static; width: 100%; max-height: 300px; margin-bottom: 30px; } img { object-fit: contain; @media (max-width: 1100px) { max-height: 300px; } @media (max-width: 1800px) { object-position: bottom; } } } } .descr-big-single { padding-top: 100px; padding-bottom: 10px; @media (max-width: 800px) { padding-top: 50px; } .flex_block { border: @border; //border-radius: 20px; .two-item { margin-bottom: 0; } } .miniature { overflow: hidden; //border-radius: 20px; padding: 30px; img { object-fit: contain; } } .text { padding: 50px; @media (max-width: 800px) { padding: 50px 30px; padding-top: 0; } } } .forms-contacts { @media (max-width: 800px) { padding-top: 50px; } textarea, input { width: 100%; margin-bottom: 15px; } textarea { min-height: 150px; } .two-item { margin-bottom: 0; } .form-ct-item { padding: 50px; //border-radius: 20px; @media (max-width: 800px) { padding: 30px; margin-left: -30px; margin-right: -30px; width: auto; } &:nth-child(1) { background: #ffe0e4; @media (max-width: 800px) { padding-bottom: 80px; } } &:nth-child(2) { background: #ffe9bf; @media (max-width: 800px) { margin-top: -50px; } } } } .page-contacts { padding-bottom: 50px; .descr-big { padding-bottom: 50px; .btn-block { text-align: center; } } } .page-contacts-block { @media (max-width: 800px) { border-top: @border; padding-top: 40px; margin-top: 40px; } .ct-item { & > .title-block { @media (max-width: 800px) { color: #f48f61 !important; } } } } .news-feed { padding-top: 80px; padding-bottom: 80px; @media (max-width: 800px) { padding-top: 50px; padding-bottom: 50px; } .news-item { .descr p { @media (max-width: 800px) { font-size: 13px; } } .btn-block { margin-top: 30px; @media (max-width: 800px) { margin-top: 15px; } .btn-mini { @media (max-width: 800px) { position: relative; left: auto; bottom: auto; margin: 0; } } } } .btn-border { margin-top: 30px; } } .modal-psiholog { background: #fff; position: fixed; right: 120px; bottom: 30px; //border-radius: 20px; box-shadow: @shadow; z-index: 100; border: 1px solid #f4f4f4; transform: translate(200%, 0); transition: 0.7s all; @media (max-width: 800px) { left: 0; right: 0; bottom: 0; transform: translate(0, 200%); //border-radius: 20px 20px 0 0; } .modal-cont { padding: 30px; padding-right: 210px; background: url('../img/psihology.svg') no-repeat right 50%; background-size: 200px auto; @media (max-width: 800px) { padding-right: 150px; padding: 30px 20px; background-size: 100px auto; background-position: right 20px; } .title-block { margin-bottom: 10px; } .phone { display: block; text-decoration: none; color: #4175f5; margin-bottom: 18px; } .btn { background: #4175f5; &:hover { background: @text; } } } } .modal-psiholog-active { transform: translate(0, 0); } .page-laws { .laws-cat { position: relative; background: @bg; padding: 30px; //border-radius: 20px; @media (max-width: 900px) { padding: 30px 15px; } &:nth-child(1) { .icon { background: #4175f5; } } &:nth-child(2) { .icon { background: #f48f61; } } &:nth-child(3) { .icon { background: #fac35a; } } &:nth-child(4) { .icon { background: #6cd96c; } } &:nth-child(5) { .icon { background: #ff1e3f; } } } .laws-item { margin-bottom: 10px; @media (max-width: 900px) { padding-bottom: 10px; border-bottom: @border; } &:last-child { @media (max-width: 900px) { padding-bottom: 0; border-bottom: none; margin-bottom: 0; } } } } .laws-item { text-decoration: none; display: block; transition: 0.3s all; &:hover { opacity: 0.5; } .icon { width: auto; height: auto; padding: 7px; background: #4175f5; display: inline-block; vertical-align: middle; margin-bottom: 0; margin-right: 10px; span { display: block; width: 24px; height: 24px; background-size: contain; background-position: center center; background-repeat: no-repeat; } } .text { display: inline-block; vertical-align: middle; width: calc(~'100% - 85px'); .title-bold { transition: 0.3s all; margin-bottom: 5px; @media (max-width: 800px) { margin-bottom: 2px; } } } &:hover .title-bold { color: #ff1e3f; } } .job-item { //border-radius: 20px; background: #fff9f9; position: relative; box-sizing: border-box; padding: 30px; padding-bottom: 110px; padding-right: 50px; display: block; @media (max-width: 1280px) { padding: 30px; } .text { display: block; text-decoration: none; .date { color: @color-1; margin-bottom: 10px; color: #b4b4b4; } .title-bold { transition: 0.3s all; &:hover { color: #f48f61; } } .title-block { color: #f48f61; } .stat { padding-left: 20px; background: 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='%23000000' stroke-width='2' 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") no-repeat 0 3px; background-size: 15px; margin-bottom: 5px; } .level { padding-left: 20px; background: 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='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3e%3c/polygon%3e%3c/svg%3e") no-repeat 0 3px; background-size: 15px; margin-bottom: 20px; } } .btn-block { width: auto; position: absolute; bottom: 30px; left: 30px; right: 30px; justify-content: space-between; align-items: center; @media (max-width: 1280px) { position: static; width: 100%; margin-top: 25px; text-align: center; } .btn { background: #f48f61; @media (max-width: 1280px) { width: 100%; margin-bottom: 15px; } &:hover { background: @text; color: @w; } } .btn-mini { @media (max-width: 1280px) { margin: 0 auto; } } } } .card-job-single { padding: 30px; //border-radius: 30px; background: #fff9f9; margin-bottom: 30px; .text { display: block; text-decoration: none; .date { color: @color-1; margin-bottom: 10px; color: #b4b4b4; } .title-bold { transition: 0.3s all; color: #f48f61; &:hover { color: @text; } } .stat { padding-left: 20px; background: 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='%23000000' stroke-width='2' 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") no-repeat 0 3px; background-size: 15px; margin-bottom: 5px; } .level { padding-left: 20px; background: 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='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3e%3c/polygon%3e%3c/svg%3e") no-repeat 0 3px; background-size: 15px; margin-bottom: 20px; } } .btn-block { .btn { background: #f48f61; &:hover { background: @text; color: @w; } } } } .action { padding-top: 70px; @media (max-width: 1100px) { padding-top: 50px; } @media (max-width: 600px) { text-align: center; } } .action-item { text-decoration: none; display: block; //border-radius: 20px; background: @blue; position: relative; @media (max-width: 600px) { text-align: center; } .miniature { position: absolute; left: 30px; top: 30px; bottom: 30px; width: calc(~'50% - 30px'); //border-radius: 20px; overflow: hidden; @media (max-width: 600px) { position: static; height: 200px; width: 100%; margin-bottom: 20px; } img { // object-fit: contain; } } .text { padding: 45px 30px; padding-bottom: 95px; padding-left: calc(~'50% + 30px'); box-sizing: border-box; color: @w; p { color: @w; } @media (max-width: 600px) { padding: 30px; } .title-block { transition: 0.3s all; } .btn-block { position: absolute; bottom: 50px; @media (max-width: 600px) { position: static; margin-top: 15px; } } } &:hover { .title-block { color: #ff1e3f; } } } .page-action-single { .cont-right { .content-title { margin-bottom: 30px; } } .action-item { margin-bottom: 20px; .text { padding: 30px; .miniature { display: block; position: static; width: 100%; height: 250px; margin-bottom: 20px; @media (max-width: 600px) { height: 200px; } } .descr { margin-top: 0; } .btn-block { position: static; margin-top: 20px; } } } } .modal-go { position: fixed; right: 120px; bottom: 30px; box-shadow: @shadow; z-index: 100; transform: translate(200%, 0); transition: 0.7s all; @media (max-width: 800px) { left: 0; right: 0; bottom: 0; transform: translate(0, 200%); } &__link { display: flex; background-color: @blue; align-items: center; text-decoration: none; border-radius: 10px; padding: 20px; &:hover { text-decoration: none; } @media (max-width: 800px) { border-radius: 0; padding: 15px; //border-radius: 20px 20px 0 0; } } &__icon { width: 50px; height: 50px; background-color: white; padding: 5px; border-radius: 50%; svg { width: 100%; height: 100%; color: red; fill: @red; } } &__text { padding-left: 15px; color: white; text-decoration: none; } &-active { transform: translate(0, 0); } &__close { position: absolute; right: 10px; top: 10px; -webkit-transition: all 0.3s ease-out; transition: all 0.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; } } }