Flex.Media — разрабатываем веб-проекты, решаем задачи бизнеса

<!DOCTYPE html> <html prefix="og: http://ogp.me/ns#" lang="ru-RU"> <head> <script data-skip-moving="true" async src="https://www.googletagmanager.com/gtag/js?id=UA-36214583-14"></script> <script data-skip-moving="true"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-36214583-14'); setTimeout("gtag('event','Engaged users', { 'send_to': 'More than 15 seconds'});",15000); </script> <title>Flex.Media — разрабатываем веб-проекты, решаем задачи бизнеса</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=980"> <meta name="theme-color" content="#fff"> <meta name="format-detection" content="telephone=no"> <link rel="apple-touch-icon" sizes="180x180" href="/local/templates/main/img/fav/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/local/templates/main/img/fav/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/local/templates/main/img/fav/favicon-16x16.png"> <link rel="manifest" href="/local/templates/main/img/fav/site.webmanifest"> <link rel="mask-icon" href="/local/templates/main/img/fav/safari-pinned-tab.svg" color="#ff0000"> <link rel="shortcut icon" href="/local/templates/main/img/fav/favicon.ico"> <meta name="msapplication-TileColor" content="#ff0000"> <meta name="msapplication-config" content="/local/templates/main/img/fav/browserconfig.xml"> <meta name="theme-color" content="#fc342a"> <meta name="yandex-verification" content="e0f13164f72a8fec" /> <meta name="google-site-verification" content="bKgagHoQ3Cc4detsoUmIuMPIbZKU_sqDzikwyIDjNQk" /> <meta name="google-site-verification" content="bYRKbcVkjhV4HSUZmrz3At-uzsnzo7ZD86wTg5kKLAs" /> <style type="text/css"> a, body, canvas, div, h1, header, html, i, img, li, nav, p, section, span, ul { margin: 0; padding: 0; border: 0; vertical-align: baseline } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } a img, img { border: none } a, div, h1, span { outline: 0 } ul { list-style-type: none } html { -webkit-box-sizing: border-box; box-sizing: border-box } *, :after, :before { -webkit-box-sizing: inherit; box-sizing: inherit } :root { --color-menu: #f7f7f7; --color-link: #b1b1b1 } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1 } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: content-box; box-sizing: content-box } .swiper-wrapper { -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0) } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative } .site-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; contain: paint } .site-loader .loader-logo { position: relative; color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity, transform } .site-loader .loader-logo-icon { position: absolute; top: 0; width: 2.625rem; z-index: 1; height: 100%; will-change: transform } .site-loader .loader-logo-icon svg { width: 100%; height: 100% } .site-loader .loader-logo-cont { margin-left: 3.125rem; overflow: hidden; padding-top: .9375rem; padding-bottom: 1.5625rem; height: 5.625rem } .site-loader .loader-logo-cont > div { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); font-size: 0 } .site-loader .loader-logo-cont .logo-text { color: currentcolor; opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; display: block; height: 3.125rem; display: -webkit-box; display: -ms-flexbox; display: flex; padding-bottom: 0 !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; will-change: transform; padding-top: .625rem; opacity: 0 } .site-loader .loader-logo-cont .logo-text span { font-size: 1.25rem; font-family: Graphik Medium, Arial, Roboto !important; letter-spacing: -.03438rem } *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box } a { text-decoration: none } img { display: block } html { width: 100%; font-size: 16px; min-width: 980px; -webkit-user-drag: none; -webkit-text-size-adjust: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } body, html { height: 100%; -webkit-box-shadow: none !important; box-shadow: none !important; background-color: #fff } body { font-family: Graphik Regular, Arial, Roboto; -webkit-overflow-scrolling: touch } body ::-webkit-scrollbar { width: 4px; background-color: #b1b1b1; background-color: var(--color-link) } body ::-webkit-scrollbar-track { background-color: #fff } body ::-webkit-scrollbar-thumb, body::-webkit-scrollbar { background-color: #b1b1b1; background-color: var(--color-link) } body::-webkit-scrollbar { width: 4px } body::-webkit-scrollbar-track { background-color: #fff } body::-webkit-scrollbar-thumb { background-color: #b1b1b1; background-color: var(--color-link) } .root-frame { height: 100%; width: 100% } .root-frame { opacity: 0; visibility: hidden; background-color: #fff } .root-wrapper { width: 100% } .header { position: fixed; z-index: 15; width: 100%; top: 0; left: 0; will-change: transform } .logo { position: absolute; left: 4.3%; width: 9.375rem; top: 1.9375rem; z-index: 15; color: #000; -moz-transform-style: preserve-3d; white-space: nowrap } .logo i { -moz-transform-style: preserve-3d; display: inline-block; height: 5rem } .logo i:not(.staylime) { margin-left: 8%; width: 2.625rem; height: 2.625rem } .logo i svg { width: 100%; display: inline-block; vertical-align: middle } .logo i path { fill: currentcolor } .logo-text { font-style: normal; display: inline-block; vertical-align: middle; padding-left: .625rem; opacity: 0; -webkit-transform: translateX(-3.75rem); -ms-transform: translateX(-3.75rem); transform: translateX(-3.75rem); padding-top: 1px; font-family: Graphik Medium, Arial, Roboto; font-size: 1.25rem; letter-spacing: -.03438rem; -moz-transform-style: preserve-3d } .menu-trigger { position: fixed; width: 4.8rem; height: 5rem; right: 0; top: 0; will-change: transform; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 5 } @supports (mix-blend-mode:difference) { .menu-trigger { mix-blend-mode: difference } } .menu-trigger .burger { width: 2.5rem } .menu-trigger .burger, .menu-trigger .burger div { height: 1.25rem; display: -webkit-box; display: -ms-flexbox; display: flex } .menu-trigger .burger div { width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .menu-trigger .burger div span { width: 100%; height: 4px; position: relative } .menu-trigger .burger div span:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #000 } @supports (mix-blend-mode:difference) { .menu-trigger .burger div span:before { background: #fff } } .home-page { overflow: hidden } .home-page .wrapper-frame { height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex } .wrapper-frame { width: 100%; background-color: #fff; height: 100% } #scene { position: absolute !important; top: 0; left: 0; width: 60vw; height: 100%; opacity: 1; z-index: 0; visibility: visible; will-change: opacity, visibility } #scene.hidden { opacity: 0; visibility: hidden } .full-screen-container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; overflow: hidden; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap } .full-screen-container .work-wrapper__container { width: 60vw; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transform: translateZ(0); transform: translateZ(0) } .full-screen-container .work-wrapper__sidecontainer { width: auto !important; position: relative; background-color: #fff; contain: paint; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 } .full-screen-container .work-wrapper__sidecontainer .content__side { max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100% } .full-screen-container .work-wrapper__sidecontainer .content__side-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100% } .full-screen-container .work-wrapper__sidecontainer .reval { overflow: hidden; display: block } .full-screen-container .work-wrapper__sidecontainer .reval .reval__span { -webkit-transform: translateY(108%); -ms-transform: translateY(108%); transform: translateY(108%); display: block } .full-screen-container .screen { position: absolute; width: 100%; height: 100%; visibility: hidden; z-index: 1; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; will-change: transform } .full-screen-container .content__side { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative } .full-screen-container .content__side:first-child { width: 60vw; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 100% } .full-screen-container .content__side-name { padding-left: 12.3%; padding-right: 13%; padding-bottom: 17%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 100%; -ms-flex-pack: distribute; justify-content: space-around } .full-screen-container .side-upp__container { margin-bottom: 1.0625rem } .full-screen-container .side-upp__container span { font-family: Graphik Medium, Arial, Roboto; font-size: 1.25rem; color: #b1b1b1; letter-spacing: -.8px; line-height: 1.8 } .full-screen-container .side-name__container { margin-bottom: 2.375rem; position: relative } .full-screen-container .side-name__container .container-title { font-family: Graphik Bold, Arial, Roboto; font-size: 2.5rem; line-height: 1.25; letter-spacing: -.9px } .full-screen-container .side-body__container { position: relative; padding-right: 10.5%; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100% } .work-wrapper__overlay { position: fixed; top: 0; left: 0; bottom: 0; width: 60%; will-change: background-color } .work-wrapper__navigation { position: fixed; z-index: 5; bottom: 3.25rem; left: 5% } .work-wrapper__navigation .navigation__container .navigation__item { line-height: 0 } .work-wrapper__navigation .navigation__container .navigation__item a { display: inline-block; position: relative } .work-wrapper__navigation .navigation__container .navigation__item a span { font-family: Druk Medium, Arial, Roboto; font-size: 3rem; color: rgba(0, 0, 0, .3); text-transform: uppercase; line-height: 1; position: relative; letter-spacing: 1px } .work-wrapper__navigation .navigation__container .navigation__item a .mask-nav { position: absolute; top: 0; right: 0; overflow: hidden; width: 0; height: 100% } .work-wrapper__navigation .navigation__container .navigation__item a .mask-nav span { position: absolute; right: 0; left: auto; top: 0; bottom: 0; color: #fff } .content__side .swiper-wrapper { width: calc(100% + 1px) } .content__side .swiper-container { height: 100%; width: 83.2%; position: relative; overflow: hidden; margin-left: auto; margin-right: 0 } .content__side .swiper-container .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden } .content__side .image-container { height: 100%; width: 100%; position: relative; display: block; overflow: hidden; background-color: #b1b1b1; background-color: var(--color-link) } .content__side .image-container img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .content__side [class^=swiper-button-] { position: absolute; right: 0; width: 12.5rem; height: 25%; z-index: 5; text-align: center; font-size: 0; -webkit-touch-callout: none } .content__side [class^=swiper-button-]:before { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 100% } .content__side [class^=swiper-button-] .swiper-button_text { display: inline-block; position: relative } .content__side [class^=swiper-button-] .swiper-button_text span { font-size: 2.25rem; text-transform: uppercase; color: #fff; font-family: Druk Medium, Arial, Roboto; position: relative; display: inline-block } .content__side [class^=swiper-button-] .swiper-button_text .icon { position: absolute; top: 50%; margin-top: -11px; opacity: 0 } .content__side [class^=swiper-button-] .swiper-button_text .icon svg path { fill: #fff } .content__side .swiper-button-next { bottom: 0 } .content__side .swiper-button-next .swiper-button_text { vertical-align: bottom; margin-bottom: 3.125rem } .content__side .swiper-button-next .swiper-button_text span { left: 0 } .content__side .swiper-button-next .swiper-button_text .icon { left: 100% } .content__side .swiper-button-prev { top: 0 } .content__side .swiper-button-prev .swiper-button_text { vertical-align: top; margin-top: 3.125rem } .content__side .swiper-button-prev .swiper-button_text span { right: 0 } .content__side .swiper-button-prev .swiper-button_text .icon { right: 100% } .content__side .content__side-news { position: absolute; left: 7.3%; bottom: 3.125rem; right: 13%; padding-left: 5% } .content__side .content__side-news .news-body .news-app { margin-bottom: .5625rem } .content__side .content__side-news .news-body .news-app span { color: #b1b1b1; font-family: Graphik Regular, Arial, Roboto; font-size: 1.0625rem } .content__side .content__side-news .news-body .news-item { position: relative } .content__side .content__side-news .news-body .news-item:before { content: ""; position: absolute; left: -6.5%; top: .6875rem; width: .375rem; height: .375rem; background-color: #fa2c2c; border-radius: 100% } .content__side .content__side-news .news-body .news-item a { font-size: 1.0625rem; color: #4c4c4c; font-family: Graphik Medium, Arial, Roboto; line-height: 1.76; letter-spacing: -.3px; display: inline-block } .content__side .icon-scroll { width: 1.5rem; height: 2.3125rem; position: absolute; right: 5rem; bottom: 3.75rem; -webkit-animation: a 1.8s ease-in-out infinite; animation: a 1.8s ease-in-out infinite; -moz-transform-style: preserve-3d; color: #000 } .content__side .icon-scroll:after { content: ""; display: block; margin-left: .125rem; margin-top: -1.875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; opacity: .5; -webkit-box-shadow: 0 0 0 0 currentcolor; box-shadow: 0 0 0 0 currentcolor; -webkit-animation: b 1.8s infinite cubic-bezier(.66, 0, 0, 1); animation: b 1.8s infinite cubic-bezier(.66, 0, 0, 1); will-change: box-shadow } @keyframes a { 0% { -webkit-transform: none; transform: none } 10% { -webkit-transform: none; transform: none } 45% { -webkit-transform: translateY(15px); transform: translateY(15px) } 55% { -webkit-transform: translateY(15px); transform: translateY(15px) } 90% { -webkit-transform: none; transform: none } to { -webkit-transform: none; transform: none } } @keyframes b { to { -webkit-box-shadow: 0 0 0 45px rgba(232, 76, 61, 0); box-shadow: 0 0 0 45px rgba(232, 76, 61, 0) } } .swiper-container:not(.swiper-container-horizontal) ~ div { display: none } .overlay { left: 0; width: 100%; background-color: rgba(0, 0, 0, .2); z-index: 910; opacity: 0; visibility: hidden } .menu, .overlay { position: fixed; top: 0; height: 100% } .menu { right: 0; width: 77.5%; background-color: #fff; z-index: 915; -webkit-transform: translate(100%); -ms-transform: translate(100%); transform: translate(100%); contain: paint } .menu .menu-content { position: absolute; left: 9.5%; bottom: 0; right: 6.4%; top: 0 } .menu .menu-close { position: absolute; width: 2.25rem; height: 2.25rem; right: 1.3125rem; top: 1.375rem } .menu .menu-close span { display: block; width: 100%; height: 100% } .menu .menu-close span svg { width: 100%; height: 100%; fill: #000 } .menu .menu-hover__container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1 } .menu .menu-hover__container .menu-hover__item { display: -webkit-box; display: -ms-flexbox; display: flex; width: 33.33% } .menu .menu-hover__container .menu-hover__item .cover__color { width: 100%; background-color: #f7f7f7; background-color: var(--color-menu); -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0 } .menu .menu-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; position: relative; z-index: 1; padding-top: 14.5% } .menu .menu-container, .menu .menu-container .menu-topper { display: -webkit-box; display: -ms-flexbox; display: flex } .menu .menu-container .menu-topper .topper-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100% } .menu .menu-container .menu-topper .topper-container .navigation-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 80px; -webkit-touch-callout: none; width: 66.66% } .menu .menu-container .menu-topper .topper-container .navigation-request { width: 33.33%; padding-left: 80px } .menu .menu-container .menu-lower { position: absolute; bottom: 57px; display: -webkit-box; display: -ms-flexbox; display: flex; left: 0; right: 0 } .menu .menu-container .menu-lower .lower-container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .menu .menu-container .menu-lower .lower-container .lang-container { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 80px } .menu .menu-container .menu-lower .lower-container .lang-container .lang { display: -webkit-box; display: -ms-flexbox; display: flex } .menu .menu-container .menu-lower .lower-container .lang-container .lang__item { margin-right: 21px } .menu .menu-container .menu-lower .lower-container .lang-container a { font-family: Graphik Regular, Arial, Roboto; font-size: 16px; color: #4c4c4c } .menu .menu-container .menu-lower .lower-container .lang-container a.active { opacity: .5; font-family: Graphik Medium, Arial, Roboto } .menu .menu-container .menu-lower .lower-container .social-container { width: 66.66%; padding-left: 80px } .menu a { font-family: Graphik Regular, Arial, Roboto; font-size: 17px; color: #4c4c4c; position: relative; line-height: 1 } .menu a:after { content: ""; position: absolute; bottom: -7px; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; background-color: #4c4c4c } .social { display: -webkit-box; display: -ms-flexbox; display: flex } .social__item { margin-right: 31px; font-family: Graphik Regular, Arial, Roboto; font-size: 17px; color: #4c4c4c; position: relative; line-height: 1 } .social__item:after { content: ""; position: absolute; bottom: -7px; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; background-color: #4c4c4c } .order-container .order_1, .order-container .order_2, .order-container .order_3, .order-container .order_4, .order-container .order_5, .order-container .order_6, .order-container .order_7 { opacity: 0; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px) } .navigation-site { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .navigation-site .site__links span { font-family: Graphik Medium, Arial, Roboto; font-size: 1.25rem; color: #000; position: relative } .navigation-site .site__links span:after { content: ""; bottom: -.25rem; height: 2px; background-color: #000; width: 100%; position: absolute; left: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0 } .navigation-site .site__links:not(:last-child) { margin-right: 3rem } .navigation-site .site__links.active span { color: #b1b1b1; color: var(--color-link) } .navigation-site .site__links.active span:after { background-color: #b1b1b1; background-color: var(--color-link) } .navigation-category { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 7%; -webkit-touch-callout: none } .navigation-category .navigation-category__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 33.33%; padding-left: 80px; padding-right: 5% } .navigation-category .navigation-category__item:nth-child(2) { padding-right: 0 } .navigation-category .category-head { margin-bottom: 1.625rem } .navigation-category .category-head a { font-family: Graphik Bold, Arial, Roboto; font-size: 40px; letter-spacing: -.8px; line-height: 1.25; display: inline-block } .navigation-category .category-head a span { color: #b1b1b1 } .navigation-category .category-body ul { margin-top: -9px } .navigation-category .category-body li { position: relative } .navigation-category .category-body li a { font-family: Graphik Regular, Arial, Roboto; font-size: 1.0625rem; color: #000; position: relative; display: inline-block; line-height: 1.3; display: block; padding-top: 9px; padding-bottom: 9px } .navigation-category .category-body li a .touch-down-elem { display: inline-block; position: relative } .navigation-category .category-body li a .touch-down-elem:after { content: ""; position: absolute; bottom: -7px; left: .5px; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; background-color: #b1b1b1; background-color: var(--color-link) } .navigation-category .category-body li a.marker { font-family: Graphik Medium, Arial, Roboto } .navigation-category .category-body li a.marker:before { content: ""; position: absolute; left: -28px; top: 14px; width: 6px; height: 6px; background-color: #000; border-radius: 50% } .side-body__projects { position: absolute; bottom: 2.9375rem; left: 12.4%; right: 13%; min-height: 9.375rem; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch } .side-body__projects .swiper-projects { padding-bottom: 0 !important; min-height: 0 !important } .side-body__projects .name-projects_container { width: 100%; padding-bottom: 2.5rem } .side-body__projects .slider-container { position: relative; width: 100%; height: 100% } .frame__container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; position: relative; z-index: 2; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; overflow: hidden } .frame__container .frame__side { position: relative } .frame__container .frame__side:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 30rem; padding: 7.1875rem 5% 2.625rem 4.6%; height: 100vh; position: fixed; left: 0; top: 0; overflow: hidden } .frame__container .frame__side:last-child { width: calc(100% - 30rem); padding-right: 4.5%; float: right; padding-top: 7.8125rem; min-height: 100% } .screen[data-dark=false] .icon-scroll { color: #fff } h1 { font-family: Graphik Bold, Arial, Roboto; font-size: 5rem; letter-spacing: -1.6px; line-height: 1.18 } #barba-wrapper, .barba-container { height: 100%; width: 100% } .page-transition { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100% } .page-transition .page { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex } .page-transition #in, .page-transition #out { height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden } .page-transition #out { will-change: width } .notfound { background-color: currentcolor } .notfound .frame__container { -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: flex-start !important } .notfound .frame__side:first-child { padding-bottom: 4.375rem; position: static !important; float: none !important } .notfound-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 25rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start } .notfound-container.white .notfound-title, .notfound-container.white > p { color: #fff } .notfound-container a { display: inline-block; width: auto } .notfound-container a:not(.logo) { margin-top: 30px } .notfound-title { font-size: 46px; font-family: Druk Medium, Arial, Roboto; font-size: 3rem; text-transform: uppercase; line-height: 1; position: relative; letter-spacing: 1px; font-weight: 400 } .notfound p { font-size: 1rem; opacity: .7; margin-top: .625rem; font-family: Graphik Regular, Arial, Roboto; line-height: 1.3 } .notfound p.primary { line-height: 1.3; opacity: 1; font-family: Graphik Medium, Arial, Roboto; font-size: 1.5rem; letter-spacing: -.03462rem; margin-top: 1.25rem } .cap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1101; display: none; background-color: currentcolor } .cap .frame__side { width: 100% !important; overflow: visible !important } .custom__btn { background-color: transparent; border-radius: 2px; display: inline-block; border: .5px solid #b1b1b1; position: relative; -webkit-touch-callout: none } .custom__btn.white { background-color: #fff; border-color: #fff; text-align: center; color: #000; min-width: 10.5rem } .custom__btn.white span { padding: .9375rem 1.875rem } .custom__btn:before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: #b1b1b1; background-color: var(--color-link); -webkit-transform-origin: center right; -ms-transform-origin: center right; transform-origin: center right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); opacity: .15 } .custom__btn > span { font-family: Graphik Regular, Arial, Roboto; color: #4c4c4c; font-size: 1.0625rem; padding: 10px 15px; letter-spacing: -.3px; display: block; position: relative; overflow: hidden } .category__list { margin: 0 -1.625rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .category__list:after { content: " "; display: table; clear: both } .category__list .category__list-item { width: 50%; padding: 0 1.625rem; margin-bottom: .375rem } .category__list .category__list-item a { display: block; padding: .5rem 0; position: relative } .category__list .category__list-item a span { font-size: 1.25rem; font-family: Graphik Regular, Arial, Roboto; color: #000; display: inline-block; padding: .875rem 0 1.375rem .125rem; line-height: 1.2; position: relative } .category__list .category__list-item a .hover-line { position: absolute; top: 0; right: 0; width: 100% } .category__list .category__list-item a .hover-line:before { content: ""; position: absolute; left: 0; width: 100%; background-color: #c2c2c2; height: 1px } .category__list .category__list-item a .hover-line:after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; will-change: transform } @media only screen and (min-width: 2800px) { html { font-size: 22px } } @media only screen and (min-width: 2300px) { html { font-size: 20px } } @media only screen and (min-width: 1680px) { .menu-trigger { width: 4.3% } } @media only screen and (max-width: 1500px) { .full-screen-container .content__side-name { padding-left: 12.3%; padding-right: 9% } .full-screen-container .content__side-name .link-color span { font-size: 1.125rem } } @media only screen and (max-width: 1450px) { .menu .menu-hover__container { left: -2%; right: -2%; width: auto; padding-left: 5% } } @media only screen and (max-width: 1400px) { .navigation-category { margin-top: 5.5% } } @media only screen and (max-width: 1366px) { html { font-size: 14px } .navigation-category .category-head a { font-size: 1.875rem } .navigation-category .category-body li a { font-size: 1rem } .navigation-category .category-body li a.marker:before { top: 14px; left: -20px } } @media only screen and (max-width: 1365px) { .menu .menu-content { right: 7%; left: 7% } .navigation-site .site__links:not(:last-child) { margin-right: 1.875rem } } @media only screen and (max-width: 1277px) { html { font-size: 12px } } @media only screen and (max-width: 1150px) { .menu .menu-container .menu-lower .lower-container .lang-container, .menu .menu-container .menu-lower .lower-container .social-container, .menu .menu-container .menu-topper .topper-container .navigation-main, .menu .menu-container .menu-topper .topper-container .navigation-request { padding-left: 55px } .navigation-category .navigation-category__item { padding-left: 55px; padding-right: 0 } } @media only screen and (max-width: 992px) { .cap { display: block } body, html { min-width: 100% !important; overflow: hidden !important } .barba-container { display: none } } @media only screen and (max-height: 610px) { .menu .menu-container { padding-top: 10.5% } } @media only screen and (max-height: 550px) { .menu .menu-container { padding-top: 5% } } @media (-ms-high-contrast: active),(-ms-high-contrast: none) { .content__side .swiper-container { margin: 0 !important } .side-body__projects .slider-container { position: static } .frame__container .frame__side:first-child { -ms-flex-pack: distribute; justify-content: space-around } } </style> <link rel="preload" media="all" href="/local/templates/main/css/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" media="all" href="/local/templates/main/css/app.css"></noscript> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="Flex Media — услуги бизнес-класса в сфере индивидуального дизайна, разработки и продвижения сайтов." /> <meta name="cmsmagazine" content="b4d68a10918ca63b83613c9455ee8757" /> <script data-skip-moving="true">!function(t){"use strict";t.loadCSS||(t.loadCSS=function(){});var e=loadCSS.relpreload={};if(e.support=function(){var e;try{e=t.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),e.bindMediaToggle=function(t){function e(){t.media=a}var a=t.media||"all";t.addEventListener?t.addEventListener("load",e):t.attachEvent&&t.attachEvent("onload",e),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(e,3e3)},e.poly=function(){if(!e.support())for(var a=t.document.getElementsByTagName("link"),n=0;n<a.length;n++){var o=a[n];"preload"!==o.rel||"style"!==o.getAttribute("as")||o.getAttribute("data-loadcss")||(o.setAttribute("data-loadcss",!0),e.bindMediaToggle(o))}},!e.support()){e.poly();var a=t.setInterval(e.poly,500);t.addEventListener?t.addEventListener("load",function(){e.poly(),t.clearInterval(a)}):t.attachEvent&&t.attachEvent("onload",function(){e.poly(),t.clearInterval(a)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:t.loadCSS=loadCSS}("undefined"!=typeof global?global:this);</script> <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.flex.media"/>  <meta name="twitter:card" content="summary"/> <meta name="twitter:title" content="Flex.Media"/> <meta name="twitter:image" content="https://Flex.Media/local/templates/main/img/bg.png"/>  <meta property="og:title" content="Flex.Media"/> <meta property="og:type" content="website"/> <meta property="og:url" content="https://Flex.Media/"/> <meta property="og:image" content="https://Flex.Media/local/templates/main/img/bg.png"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta property="og:description" content="Flex Media — услуги бизнес-класса в сфере индивидуального дизайна, разработки и продвижения сайтов."/> <meta property="og:site_name" content="Flex.Media"/> </head> <body>  <script data-skip-moving="true" type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter25794059 = new Ya.Metrika({ id:25794059, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/25794059" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  <div class="svg-defs-container" style="display: none;"></div>  <div class="site-loader" id="page-loader"> <div class="loader-logo"> <div class="loader-logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 55.4 54.7"> <path fill="currentcolor" d="M55.3 51.2V3.9c-.2-.8.3-6.4-4.8-2.7-5 3.3-18.6 12.4-18.6 12.4s-3.5 3.3-8.5 0C16.8 9.3 4.5 1.2 4.5 1.2S.2-2.3 0 3.6v48s0 4.1 3.7 2.8C5.4 53.3 7.3 52 8.9 51c2.6-2.2 2.6-5.5 2.6-5.5v-5.4c0-6 4-1.8 4-1.8s5.4 3.6 7.8 5.3c4.8 2.5 8 .2 8 .2s6.9-4.6 9.5-6.4c3.2-2.5 3 2.6 3 2.6v3.8s-.4 3.9 2.6 6.5c1.5 1.2 3.3 2.6 4.9 3.9 4.8 2.1 4-3 4-3zM41.2 26l-10.5 7s-3 1.9-6.5 0c-3.2-2.2-10.8-7.2-10.8-7.2s-2-.6-2-3.6v-2.6s-.2-3.9 2.8-1.5l9.9 6.6c3.1 2.4 6.7 0 6.7 0s6.8-4.6 11.1-7.5c1.9-1.4 1.6 1.1 1.6 1.1v3.2c0 .2.4 2.6-2.3 4.5z" /> </svg> </div> <div class="loader-logo-cont"> <div class="loader-logo-cont-inner"> <div class="logo-text is-active"> <span>Дизайн</span> </div> <div class="logo-text"> <span>Разработка</span> </div> <div class="logo-text"> <span>Развитие</span> </div> <div class="logo-text"> <span>Flex.Media</span> </div> </div> </div> </div> </div> <div class="page-transition"> <div class="page page__out" id="outer"> <div id="out"></div> </div> <div class="page page__in" id="inner"> <div id="in"></div> </div> </div> <div class="root-wrapper"> <div class="overlay"></div> <div class="root-frame"> <div class="menu-trigger"> <div class="burger" type="button"> <div> <span></span> <span></span> </div> </div> </div> <div id="barba-wrapper"> <div class="barba-container home-page full-screen-container" id='work-wrapper' data-namespace="home" data-bgcolor="#fc342a" data-textcolor="#fc342a" data-titlecolor="#fc342a" data-loader="#fc342a"> <header class="header "> <div class="logo touch-down not-move"> <div class="touch-down-elem"> <i> <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 55.4 54.7"> <path d="M55.3 51.2V3.9c-.2-.8.3-6.4-4.8-2.7-5 3.3-18.6 12.4-18.6 12.4s-3.5 3.3-8.5 0C16.8 9.3 4.5 1.2 4.5 1.2S.2-2.3 0 3.6v48s0 4.1 3.7 2.8C5.4 53.3 7.3 52 8.9 51c2.6-2.2 2.6-5.5 2.6-5.5v-5.4c0-6 4-1.8 4-1.8s5.4 3.6 7.8 5.3c4.8 2.5 8 .2 8 .2s6.9-4.6 9.5-6.4c3.2-2.5 3 2.6 3 2.6v3.8s-.4 3.9 2.6 6.5c1.5 1.2 3.3 2.6 4.9 3.9 4.8 2.1 4-3 4-3zM41.2 26l-10.5 7s-3 1.9-6.5 0c-3.2-2.2-10.8-7.2-10.8-7.2s-2-.6-2-3.6v-2.6s-.2-3.9 2.8-1.5l9.9 6.6c3.1 2.4 6.7 0 6.7 0s6.8-4.6 11.1-7.5c1.9-1.4 1.6 1.1 1.6 1.1v3.2c0 .2.4 2.6-2.3 4.5z" /> </svg> <span class="logo-text">Flex.Media</span> </i> </div> </div> </header> <div class="work-wrapper__overlay overlay__color" id="overlay"></div> <div class="wrapper-frame"> <div class="work-wrapper__navigation"> <ul class="navigation__container"> <li class="navigation__item"> <a class="no-barba touch-down" href="javascript:void(0);" data-index-screen="0"> <div class="touch-down-elem"> <span>FLEX.MEDIA</span> <div class="mask-nav"> <span>FLEX.MEDIA</span> </div> </div> </a> </li> <li class="navigation__item"> <a class="no-barba touch-down" href="javascript:void(0);" data-index-screen="1"> <div class="touch-down-elem"> <span>Разработка</span> <div class="mask-nav"> <span>Разработка</span> </div> </div> </a> </li> <li class="navigation__item"> <a class="no-barba touch-down" href="javascript:void(0);" data-index-screen="2"> <div class="touch-down-elem"> <span>Графдизайн</span> <div class="mask-nav"> <span>Графдизайн</span> </div> </div> </a> </li> <li class="navigation__item"> <a class="no-barba touch-down" href="javascript:void(0);" data-index-screen="3"> <div class="touch-down-elem"> <span>Развитие</span> <div class="mask-nav"> <span>Развитие</span> </div> </div> </a> </li> </ul> </div> <div class="work-wrapper__container" id="full-page"> <section class="screen screen__category" data-bgcolor="#fc342a" data-textcolor="#fc342a" data-dark="false" > <div class="content__side"> <canvas id="scene"></canvas><div class="icon-scroll"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewbox="0 0 24 36"> <path fill="currentcolor" fill-rule="evenodd" d="M14 15c0 .828-.672 1.5-1.5 1.5h-1c-.829 0-1.5-.672-1.5-1.5v-4.5c0-.829.671-1.5 1.5-1.5h1c.828 0 1.5.671 1.5 1.5V15zM0 10v17.5c0 8 8.848 8.5 12 8.5 3.152 0 12-.5 12-8.5V10c0-8-8.848-10-12-10C8.848 0 0 2 0 10z"/> </svg> </div> </div> </section> <section class="screen screen__category" data-bgcolor="#0e6bb6" data-textcolor="#0e6bb6" data-dark="false" > <div class="content__side"> <div class="swiper-container"> <div class="swiper-wrapper crsor-trgr" data-cursor-type="plus"> <div class="swiper-slide" data-bgcolor-item="#620804" data-textcolor="#620804"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/e8a/solcata.jpg" alt=""> </div> </div> <div class="swiper-slide" data-bgcolor-item="#0f6cb6" data-textcolor="#0f6cb6"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/a2a/atlant.jpg" alt=""> </div> </div> <div class="swiper-slide" data-bgcolor-item="#003e7d" data-textcolor="#003e7d"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/1a0/ih (1).jpg" alt=""> </div> </div> </div> </div> <div class="swiper-button-prev crsor-trgr" data-cursor-type="arrl"> <div class="swiper-button_text"> <span>Назад</span> <div class="icon"> <svg width="32" height="22" viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg"> <path stroke="null" fill-rule="evenodd" d="m30.96046,10.11951l-27.62951,0l8.26562,-8.23385c0.38821,-0.38821 0.38821,-1.0167 0,-1.40391c-0.38821,-0.38821 -1.0167,-0.38821 -1.40391,0l-9.82938,9.82839c-0.38225,0.38225 -0.38225,1.02166 0,1.40391l9.82938,9.82938c0.38821,0.38821 1.0167,0.38821 1.40391,0c0.38821,-0.38821 0.38821,-1.0167 0,-1.40391l-8.26562,-8.03428l27.62951,0c0.54806,0 0.99287,-0.4448 0.99287,-0.99287c0,-0.54806 -0.4448,-0.99287 -0.99287,-0.99287z" clip-rule="evenodd" /> </svg> </div> </div> </div> <div class="swiper-button-next crsor-trgr" data-cursor-type="arrr"> <div class="swiper-button_text"> <span>Вперед</span> <div class="icon"> <svg width="32" height="22.2" viewBox="0 0 32 22.2" xmlns="http://www.w3.org/2000/svg"> <path stroke="null" fill-rule="evenodd" d="m32,11.14789c0,-0.267 -0.11,-0.522 -0.293,-0.714l-9.899,-9.999c-0.391,-0.395 -1.024,-0.394 -1.414,0c-0.391,0.394 -0.391,1.034 0,1.428l8.193,8.275l-27.587,0c-0.552,0 -1,0.452 -1,1.01s0.448,1.01 1,1.01l27.586,0l-8.192,8.275c-0.391,0.394 -0.39,1.034 0,1.428c0.391,0.394 1.024,0.394 1.414,0l9.899,-9.999c0.187,-0.189 0.29,-0.449 0.293,-0.714z" clip-rule="evenodd" /> </svg> </div> </div> </div> </div> </section> <section class="screen screen__category" data-bgcolor="#000000" data-textcolor="#000000" data-dark="false" > <div class="content__side"> <div class="swiper-container"> <div class="swiper-wrapper crsor-trgr" data-cursor-type="plus"> <div class="swiper-slide" data-bgcolor-item="#000000" data-textcolor="#000000"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/08f/brothers.jpg" alt=""> </div> </div> <div class="swiper-slide" data-bgcolor-item="#ddc7af" data-textcolor="#ddc7af"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/a2a/Bkt.jpg" alt=""> </div> </div> <div class="swiper-slide" data-bgcolor-item="#b1b1b1" data-textcolor="#b1b1b1"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/9a9/atletica.jpg" alt=""> </div> </div> </div> </div> <div class="swiper-button-prev crsor-trgr" data-cursor-type="arrl"> <div class="swiper-button_text"> <span>Назад</span> <div class="icon"> <svg width="32" height="22" viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg"> <path stroke="null" fill-rule="evenodd" d="m30.96046,10.11951l-27.62951,0l8.26562,-8.23385c0.38821,-0.38821 0.38821,-1.0167 0,-1.40391c-0.38821,-0.38821 -1.0167,-0.38821 -1.40391,0l-9.82938,9.82839c-0.38225,0.38225 -0.38225,1.02166 0,1.40391l9.82938,9.82938c0.38821,0.38821 1.0167,0.38821 1.40391,0c0.38821,-0.38821 0.38821,-1.0167 0,-1.40391l-8.26562,-8.03428l27.62951,0c0.54806,0 0.99287,-0.4448 0.99287,-0.99287c0,-0.54806 -0.4448,-0.99287 -0.99287,-0.99287z" clip-rule="evenodd" /> </svg> </div> </div> </div> <div class="swiper-button-next crsor-trgr" data-cursor-type="arrr"> <div class="swiper-button_text"> <span>Вперед</span> <div class="icon"> <svg width="32" height="22.2" viewBox="0 0 32 22.2" xmlns="http://www.w3.org/2000/svg"> <path stroke="null" fill-rule="evenodd" d="m32,11.14789c0,-0.267 -0.11,-0.522 -0.293,-0.714l-9.899,-9.999c-0.391,-0.395 -1.024,-0.394 -1.414,0c-0.391,0.394 -0.391,1.034 0,1.428l8.193,8.275l-27.587,0c-0.552,0 -1,0.452 -1,1.01s0.448,1.01 1,1.01l27.586,0l-8.192,8.275c-0.391,0.394 -0.39,1.034 0,1.428c0.391,0.394 1.024,0.394 1.414,0l9.899,-9.999c0.187,-0.189 0.29,-0.449 0.293,-0.714z" clip-rule="evenodd" /> </svg> </div> </div> </div> </div> </section> <section class="screen screen__category" data-bgcolor="#007431" data-textcolor="#007431" data-dark="false" > <div class="content__side"> <div class="swiper-container"> <div class="swiper-wrapper crsor-trgr" data-cursor-type="plus"> <div class="swiper-slide" data-bgcolor-item="#007431" data-textcolor="#007431"> <div class="image-container" data-scale="true"> <img src="/upload/iblock/114/home.jpg" alt=""> </div> </div> </div> </div> </div> </section> </div> <div class="work-wrapper__sidecontainer" id="side-page"> <div class="content__side"> <div class="content__side-inner"> <div class="content__side-name"> <div class="side-upp__container reval order__1"> <span class="reval__span"> Производственное digital-агентство </span> </div> <div class="side-name__container reval order__2"> <div class="container-title reval__span"> Разрабатываем<br>веб-проекты, решаем<br>задачи бизнеса </div> </div> <div class="side-body__container reval order__3"> <div class="reval__span"> <ul class="category__list"> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Портфолио </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/company/"> <div class="hover-line"></div> <span class="touch-down-elem"> Компания </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/industries/"> <div class="hover-line"></div> <span class="touch-down-elem"> Индустрии </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/contacts/"> <div class="hover-line"></div> <span class="touch-down-elem"> Контакты </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/services/"> <div class="hover-line"></div> <span class="touch-down-elem"> Услуги </span> </a> </li> </ul> </div> </div> </div> </div> <div class="content__side-news reval order__4"> <div class="news-body reval__span"> <div class="news-app"> <span>Новости</span> </div> <div class="news-item"> <a href="http://2019.goldensite.ru/results/" target="_blank" rel="nofollow">Имиджевый сайт InModels занял III место на конкурсе «Золотой сайт».</a> </div> </div> </div> </div> <div class="content__side"> <div class="content__side-inner"> <div class="content__side-name"> <div class="side-upp__container reval order__1"> <span class="reval__span"> In-house команда разработчиков </span> </div> <div class="side-name__container reval order__2"> <div class="container-title reval__span"> Специализируемся на комплексной<br> веб-разработке </div> </div> <div class="side-body__container reval order__3"> <div class="reval__span"> <ul class="category__list"> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Портфолио </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#website"> <div class="hover-line"></div> <span class="touch-down-elem"> Имиджевые сайты </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#ecommerce"> <div class="hover-line"></div> <span class="touch-down-elem"> Интернет-магазины </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#webservice"> <div class="hover-line"></div> <span class="touch-down-elem"> Веб-сервисы </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Интеграция CRM </span> </a> </li> </ul> </div> </div> </div> </div> <div class="side-body__projects reval order__4"> <div class="name-projects_container swiper-projects reval__span"> <div class="slider-container"> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/#website"> <span>Имиджевый сайт</span> </a> </li> </ul> </div> <a class="link-color" href="http://solcata.com/" style="color: rgb(0, 0, 0);"> <span>Международный сырьевой брокер Solcata</span> </a> </div> </div> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/#website"> <span>Имиджевый сайт</span> </a> </li> </ul> </div> <a class="link-color" href="http://atlantconsult.com/" style="color: rgb(0, 0, 0);"> <span>IT-интегратор Атлант Консалт</span> </a> </div> </div> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/#website"> <span>Имиджевый сайт</span> </a> </li> </ul> </div> <a class="link-color" href="https://www.ih.by/" style="color: rgb(0, 0, 0);"> <span>Международная школа английского языка IH</span> </a> </div> </div> </div> </div> </div> </div> <div class="content__side"> <div class="content__side-inner"> <div class="content__side-name"> <div class="side-upp__container reval order__1"> <span class="reval__span"> Вдохновляющий дизайн </span> </div> <div class="side-name__container reval order__2"> <div class="container-title reval__span"> Создаём неповторимый визуальный образ </div> </div> <div class="side-body__container reval order__3"> <div class="reval__span"> <ul class="category__list"> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Портфолио </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Брендинг </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Лого </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Фирменный стиль </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Полиграфия </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> 3D </span> </a> </li> </ul> </div> </div> </div> </div> <div class="side-body__projects reval order__4"> <div class="name-projects_container swiper-projects reval__span"> <div class="slider-container"> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/"> <span>Лого</span> </a> </li> <li class="tag-item"> <a href="/portfolio/"> <span>Фирменный стиль</span> </a> </li> </ul> </div> <a class="link-color" href="/portfolio/" style="color: rgb(0, 0, 0);"> <span>Логотип и фирменный стиль для московского барбершопа Brothers</span> </a> </div> </div> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/"> <span>Графический дизайн</span> </a> </li> <li class="tag-item"> <a href="/portfolio/"> <span>3D</span> </a> </li> </ul> </div> <a class="link-color" href="/portfolio/" style="color: rgb(0, 0, 0);"> <span>3D-интерьеры для производителя дверей</span> </a> </div> </div> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/"> <span>Фирменный стиль</span> </a> </li> <li class="tag-item"> <a href="/portfolio/"> <span>Полиграфия</span> </a> </li> </ul> </div> <a class="link-color" href="/portfolio/" style="color: rgb(0, 0, 0);"> <span>Логотип, фирменный стиль и презентация для московского фитнес-клуба Атлетика</span> </a> </div> </div> </div> </div> </div> </div> <div class="content__side"> <div class="content__side-inner"> <div class="content__side-name"> <div class="side-upp__container reval order__1"> <span class="reval__span"> Прогнозируемый результат </span> </div> <div class="side-name__container reval order__2"> <div class="container-title reval__span"> Поддерживаем<br>и развиваем бизнес<br>в онлайн </div> </div> <div class="side-body__container reval order__3"> <div class="reval__span"> <ul class="category__list"> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Портфолио </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> SEO </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> SMM </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Контекстная реклама </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Копирайтинг </span> </a> </li> <li class="category__list-item"> <a class="link-color touch-down" href="/portfolio/#all"> <div class="hover-line"></div> <span class="touch-down-elem"> Техподдержка </span> </a> </li> </ul> </div> </div> </div> </div> <div class="side-body__projects reval order__4"> <div class="name-projects_container swiper-projects reval__span"> <div class="slider-container"> <div class="name-projects_item"> <div class="name-inner"> <div class="name-tags"> <ul> <li class="tag-item"> <a href="/portfolio/"> <span>Интернет-маркетинг</span> </a> </li> <li class="tag-item"> <a href="/portfolio/"> <span>SMM</span> </a> </li> </ul> </div> <a class="link-color" href="/portfolio/" style="color: rgb(0, 116, 49);"> <span>SMM для школы английского языка IH</span> </a> </div> </div> </div> </div> </div> </div> </div> </div> <nav class="menu"> <div class="menu-close"> <span> <svg width="36" height="36" viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"> <g> <polyline points="1.8182455301430025,35.96997432086293 0.10953094065189362,34.26124934257034 34.284007813983834,0.0867714062333107 35.99272121230612,1.7954971912035234 1.8182455301430025,35.96997432086293"/> <polyline points="34.284007813983834,35.96997432086293 0.10953094065189362,1.7954971912035234 1.8182455301430025,0.0867714062333107 35.99272121230612,34.26124934257034 34.284007813983834,35.96997432086293"/> </g> </svg> </span> </div> <div class="menu-content order-container"> <div class="menu-hover__container"> <div class="menu-hover__item" data-hover="1"> <div class="cover__color"></div> </div> <div class="menu-hover__item" data-hover="2"> <div class="cover__color"></div> </div> <div class="menu-hover__item" data-hover="3"> <div class="cover__color"></div> </div> </div> <div class="menu-container"> <div class="menu-topper"> <div class="topper-container"> <div class="navigation-main order_1"> <div class="navigation-site"> <a class="site__links touch-down not-move active" href="/"> <div class="touch-down-elem"> <span>Главная</span> </div> </a> <a class="site__links touch-down not-move " href="/company/"> <div class="touch-down-elem"> <span>Компания</span> </div> </a> <a class="site__links touch-down not-move " href="/contacts/"> <div class="touch-down-elem"> <span>Контакты</span> </div> </a> </div> </div> <div class="navigation-request order_2"> <a class="custom__btn touch-down not-move" href="/contacts/#order"> <span>Отправить запрос</span> </a> </div> </div> </div> <div class="menu-middle"> <div class="middle-container"> <div class="navigation-category"> <div class="navigation-category__item order_3" data-idx="1"> <div class="category-head"> <a class="touch-down not-move " href="/portfolio/#all"> <div class="touch-down-elem"> <span>Портфолио</span> </div> </a> </div> <div class="category-body"> <ul> <li> <a class="catagory__link touch-down " href="/portfolio/#website"> <div class="touch-down-elem"> <span>Имиджевые сайты</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/portfolio/#ecommerce"> <div class="touch-down-elem"> <span>Интернет-магазины</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/portfolio/#webservice"> <div class="touch-down-elem"> <span>Веб-сервисы</span> </div> </a> </li> </ul> </div> </div> <div class="navigation-category__item order_4" data-idx="2"> <div class="category-head"> <a class="touch-down not-move " href="/industries/"> <div class="touch-down-elem"> <span>Индустрии</span> </div> </a> </div> <div class="category-body"> <ul> <li> <a class="catagory__link touch-down " href="/industries/#it"> <div class="touch-down-elem"> <span>IT</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/industries/#fmcg"> <div class="touch-down-elem"> <span>FMCG</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/industries/#ecommerce"> <div class="touch-down-elem"> <span>eCommerce</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/industries/#auto"> <div class="touch-down-elem"> <span>Авто/мото</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/industries/#realty"> <div class="touch-down-elem"> <span>Недвижимость</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/industries/#education"> <div class="touch-down-elem"> <span>Образование</span> </div> </a> </li> </ul> </div> </div> <div class="navigation-category__item order_5" data-idx="3"> <div class="category-head"> <a class="touch-down not-move " href="/services/"> <div class="touch-down-elem"> <span>Услуги</span> </div> </a> </div> <div class="category-body"> <ul> <li> <a class="catagory__link touch-down " href="/services/#web-design"> <div class="touch-down-elem"> <span>Веб-дизайн</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/services/#graphic"> <div class="touch-down-elem"> <span>Графический дизайн</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/services/#web-dev"> <div class="touch-down-elem"> <span>Веб-разработка</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/services/#crm"> <div class="touch-down-elem"> <span>Интеграция CRM</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/services/#marketing"> <div class="touch-down-elem"> <span>Интернет-маркетинг</span> </div> </a> </li> <li> <a class="catagory__link touch-down " href="/services/#support"> <div class="touch-down-elem"> <span>Техподдержка</span> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="menu-lower"> <div class="lower-container"> <div class="social-container order_7"> <div class="social"> <a class="social__item no-barba touch-down not-move facebook" href="https://www.facebook.com/flxmd/" target="_blank" > <div class="touch-down-elem"> <span>facebook</span> </div> </a> <a class="social__item no-barba touch-down not-move instagram" href="http://instagram.com/flexmedia/" target="_blank" > <div class="touch-down-elem"> <span>instagram</span> </div> </a> <a class="social__item no-barba touch-down not-move dribbble" href="https://dribbble.com/eugeneselenkov" target="_blank" > <div class="touch-down-elem"> <span>dribbble</span> </div> </a> <a class="social__item no-barba touch-down not-move linkedin" href="https://linkedin.com/company/flxmd" target="_blank" > <div class="touch-down-elem"> <span>linkedin</span> </div> </a> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> </div> <div class="modals"></div> <div class="cap notfound link-color"> <div class="frame__container"> <div class="frame__side layout_fixed"> <div class="notfound-container white"> <div class="notfound-title">Упс...</div> <p class="primary">Похоже, вам стоит перейти на мобильную версию сайта</p> <a class="custom__btn white" href="https://m.flex.media"> <span> Открыть</span> </a> </div> </div> </div> </div> <script type="text/javascript" src="/bitrix/cache/js/s1/main/template_b21cef121ccc915b63c08fd3fb8320fb/template_b21cef121ccc915b63c08fd3fb8320fb.js?1581944108986740"></script> <script type="text/javascript">var _ba = _ba || []; _ba.push(["aid", "32b60204e64bd3bf03fb9309cd099213"]); _ba.push(["host", "flex.media"]); (function() {var ba = document.createElement("script"); ba.type = "text/javascript"; ba.async = true;ba.src = (document.location.protocol == "https:" ? "https://" : "http://") + "bitrix.info/ba.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ba, s);})();</script> </body> </html>

CINXE.COM

Flex.Media — разрабатываем веб-проекты, решаем задачи бизнеса