@font-face { font-family: 'Jura'; src: local('Jura Regular'), local('Jura-Regular'), url('/static/jura-regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Jura'; src: local('Jura Bold'), local('Jura-Bold'), url('/static/jura-bold.woff') format('woff'); font-weight: bold; font-style: normal; } /* -------------------------------------------------------------------------- */ html { height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, ul, li, code, blockquote, .section { display: block; } body, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, ul, li, code, blockquote, img, h1, h2, h3, h4, h5, p { margin: 0; padding: 0; } body { font-family: sans-serif; font-size: 100%; height: 100%; color: #192734; } a { color: #0084ff; transition: color .3s ease-in-out; } a:hover { color: #192734; text-decoration: none; } a.invert-decoration, a.no-decoration { text-decoration: none; } a.invert-decoration:hover { text-decoration: underline; } input, textarea, button { font-family: sans-serif; font-size: 1em; box-sizing: border-box; border: 2px solid #192734; background-color: #ffffff; color: #192734; transition: color .3s ease-in-out, background-color .3s ease-in-out; } textarea { padding: 1em; line-height: 1.2em; } input[type=text] { line-height: 28px; } button { background-color: #192734; color: #fafaff; height: 32px; font-size: 1em; cursor: pointer; font-family: 'Jura'; } button:hover { background-color: #fafaff; color: #192734; } label { display: block; } .box-label { display: inline; } h1, .h1-like { font-family: 'Jura', sans-serif; font-weight: bold; font-size: 2.4em; } h2, .h2-like { font-family: 'Jura', sans-serif; font-weight: bold; font-size: 2.0em; } h3, .h3-like { font-family: 'Jura', sans-serif; font-weight: bold; font-size: 1.6em; } h4, .h4-like { font-family: 'Jura', sans-serif; font-weight: normal; font-size: 1.6em; } h5, .h5-like { font-family: 'Jura', sans-serif; font-weight: normal; font-size: 1em; } code { background-color: #f8f8fc; border-radius: 5px; padding: 20px; font-size: 1em; font-family: monospace; white-space: pre; margin: 0 0 1em; tab-size: 4; -moz-tab-size: 4; } code.inline { padding: 0; margin: 0; display: inline; color: #9f353d; } code a { text-decoration: none; } code .keyword { font-weight: bold; color: #8c0915; } code .string { color: #33692b; } hr { border: 0; border-top: 1px solid #d9dfe3; } /* -------------------------------------------------------------------------- */ .icon { display: block; width: 24px; height: 24px; fill: #192734; transition: fill .3s ease-in-out; } a:hover .icon { fill: #0084ff; } .button { display: block; display: inline-block; border-radius: 24px; height: 48px; line-height: 48px; border: 2px solid #001121; color: #001121; text-decoration: none; padding: 0 24px; cursor: pointer; transition: color .3s ease-in-out, background-color .3s ease-in-out; } .button:hover { color: #fafaff; background-color: #001121; } .dark-bg { color: #fafaff; } .dark-bg a { color: #5bd6ff; } .dark-bg a:hover { color: #ffffff; } .dark-bg .button { border: 2px solid #fafaff; color: #fafaff; } .dark-bg .button:hover { color: #001121; background-color: #fafaff; } .slide-picture { width: 100%; height: auto; } .double-picture { float: left; width: 50%; height: auto; } .shrink-picture { max-width: 100%; } /* -------------------------------------------------------------------------- */ .svg-menu-icon .svg-menu-lines , .svg-menu-icon .svg-menu-cross { transform: rotate(0) translateY(0) translateX(0); transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; transform-origin: center center; } .svg-menu-icon .svg-menu-lines { opacity: 1; } .svg-menu-icon .svg-menu-cross { opacity: 0; } .menu__switch--opened .svg-menu-lines { transform: rotate(180deg) translateY(0) translateX(0); opacity: 0; } .menu__switch--opened .svg-menu-cross { transform: rotate(180deg) translateY(0) translateX(0); opacity: 1; } /* -------------------------------------------------------------------------- */ .overlay { min-width: 320px; } .logo { fill: #192734; display: block; float: left; width: 64px; height: 64px; margin: 12px; } .logo__text { font-size: 1.2em; font-weight: normal; color: #47525d; line-height: 24px; text-align: center; margin: 0 88px; min-width: 144px; height: 88px; font-family: 'Jura', sans-serif; } .logo__text::before { display: block; width: 1px; height: 28px; margin: 0 auto 4px; background-color: #87929a; content: ''; } .menu { position: absolute; width: 100%; transition: margin-top .5s ease-in-out, top .5s ease-in-out, width .5s ease-in-out, left .5s ease-in-out; z-index: 1000; left: -100%; top: 88px; font-family: 'Jura', sans-serif; width: 144px; background-color: #ffffff; } .menu__switch { display: block; float: right; padding: 13px; margin: 19px; } .menu__list a { color: #192734; text-transform: uppercase; text-decoration: none; display: block; line-height: 30px; transition: color .3s ease-in-out; padding: 18px 0; } .menu__list a:hover { color: #0084ff; } .menu__list a.active { font-weight: bold; color: #192734; } .menu__list a::before { transition: width .3s ease-in-out, margin .3s ease-in-out; width: 0; margin: 15px 32px 0 0; content: ''; height: 1px; background-color: #87929a; display: block; float: left; } .menu__list a:hover::before, .menu__list a.active::before { width: 24px; margin: 15px 8px 0 0; } .menu__list a.active:before { background-color: #0084ff; } .menu--visible { left: 0; top: 88px; width: 100%; } .no-js .menu { display: block; border-top: 1px solid #b1c3d4; text-align: center; padding: 20px 0; } .no-js .menu__switch { display: none; } .no-js .menu__list a::before { width: 0; padding: 0; margin: 0; display: block; } /* -------------------------------------------------------------------------- */ .main-wrapper { min-height: 100%; height: auto !important; height: 100%; } .content { padding: 0 20px 20px; } .text-wrapper { max-width: 840px; margin: 0 auto; } .text-content h1 { padding: 0 0 1.5em; } .text-content h2 { padding: 1em 0; } .text-content h3 { padding: .7em 0; } .text-content h4 { padding: .5em 0; } .text-content p { padding: 0 0 1em; text-align: justify; } .text-content ul { padding: 0 0 1em; margin-left: 2em; list-style-type: disc; } .text-content ul ul{ padding: 1em 0; list-style-type: circle; } .text-content li { padding: 0 0 0.5em; display: list-item; } .last-updated { font-style: italic; } .table-of-contents a { text-decoration: none; } .code-doc { padding: 0 0 3em; } .code-doc p { padding: 0 3em; } .code-doc .h5-like { font-weight: normal; padding: .5em 20px .5em; text-transform: uppercase; } .code-doc ul { padding: 0 40px; list-style-type: square; } .tool-content { background-color: #efefef; } /* -------------------------------------------------------------------------- */ .main-content { min-width: 320px; } .anouncem ent { max-width: 1366px; margin: 0 auto; } .anouncement__bg { background-color: #192634; background-image: url(/static/aisl-slide.jpg); background-size: 100% auto; } .anouncement__content{ text-align: center; padding: 24px 0; } .anouncement__content h1 { color: #ffffff; line-height: 1.2em; margin-bottom: 24px; } .anouncement__content a { line-height: 20px; } .anouncement__overlay { background-color: #ffffff; max-width: 600px; margin: 0 auto; text-align: center; padding: 20px; border-bottom: 1px solid #b1c3d4; } .anouncement__overlay h1 { font-size: 1.2em; line-height: 1.4em; margin-bottom: 20px; } .open-solutions { } .open-solutions__cell { text-align: center; padding: 20px 0; } .open-solutions__content { text-align: center; padding: 20px 0; } .open-solutions__content h2 { line-height: 40px; padding-bottom: 30px; } .open-solutions__content p { margin: 0 32px; } .open-solutions__project { display: block; height: 280px; position: relative; background-color: #f8f8fc; } .aisl-project { background-size: contain; } .open-solutions__project h1 { position: absolute; width: 100%; text-align: center; top: 140px; line-height: 30px; margin-top: -15px; font-size: 1.8em; } .open-solutions__project p { position: absolute; text-align: center; width: 100%; top: 200px; transition: opacity .3s ease-in-out, top .3s ease-in-out; opacity: 0; } .open-solutions__project:hover p { opacity: 1; top: 175px; } .proprietary__info { background-color: #192734; } .proprietary__cell { padding: 20px 0; text-align: center; } .proprietary__title { color: #fafaff; } .proprietary__text { color: #fafaff; } .proprietary__arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #192734; margin: 0 auto; } .proprietary__customers { padding: 50px 0 0; border-bottom: 1px solid #b1c3d4; } .proprietary__customers li { display: block; text-align: center; max-width: 320px; height: 45px; margin: 0 auto 50px; } .proprietary__customers img { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opacity: .8; width: auto; height: 100%; transition: filter .3s ease-in-out, opacity .3s ease-in-out; } .proprietary__customers img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); opacity: 1; } .footer { background-color: #001121; z-index: 0; clear: left; /* margin-top: -288px; */ position:relative; } .footer__above { background-color: #fff; position: relative; } .footer__logo { display: none; position: absolute; bottom: 70px; left: 0px; z-index: 3000; transform: rotate(-90deg); transform-origin: center center; font-size: 1.6em; text-align: left; line-height: 144px; text-align: left; font-family: 'Jura', sans-serif; } .newsletter { padding: 10px 0; width: 300px; margin: 0 auto; height: 80px; } .newsletter__field { height: 32px; } .newsletter label { font-family: 'Jura', sans-serif; display: block; font-size: 1.2em; font-weight: bold; line-height: 32px; text-align: center; } .newsletter__field input { height: 28px; padding: 0; line-height: 28px; width:190px; margin: 0; display: block; float: left; font-size: 0.9em; padding: 0 6px; } .newsletter__field button { height: 28px; border-left: 0; font-size: 0.9em; color: #fafaff; width: 90px; background-color: #192734; margin: 0; float: left; display: block; transition: color .3s ease-in-out, background-color .3s ease-in-out; cursor: pointer; } .newsletter__field button:hover { background-color: #fafaff; color: #192734; } .footer__social { width: 300px; margin: 0 auto; height: 70px; } .footer__social a { display: block; float: left; width: 50px; height: 50px; } .footer__social .icon { padding: 13px; } .footer__below { position: relative; text-align: center; } .footer__credentials { padding: 10px 0; line-height: 18px; font-size: 0.8em; } .copyright { } .legal { margin: 0 auto; width: 100%; max-width: 220px; } .legal__node { float: left; border-left: 1px solid #fafaff; text-align: left; padding: 0 0 0 8px; } .legal__first { border-left: none; padding: 0 8px 0 0; } /* -------------------------------------------------------------------------- */ .contacts__column { position: relative; background-color: #192734; color: #fafaff; } .contacts__content { padding: 50px 50px 290px; } .contacts__content p { padding: 0 0 1em; } .contacts__office p { padding: 0 0 0.5em; } .contacts__content h1 { padding-bottom: 50px; } .contacts__content .h3-like { font-size: 1.2em; text-transform: uppercase; font-weight: normal; } .contacts__arrow { width: 0; height: 0; border-top: 20px solid #192734; border-left: 20px solid transparent; border-right: 20px solid transparent; } .contacts__map { position: absolute; bottom: 0; left: 0px; right: 0px; height: 240px; z-index: 1000; } .contacts__phone { color: #fafaff; text-decoration: none; } .contacts__phone:hover { color: #0084ff; } .contacts__phone::after { border-top: 1px dotted #fafaff; display: block; } .contacts__office h2 { padding: 1em 0 0.5em; } .contacts__arrow { position: absolute; left: 50%; bottom: 220px; margin-left: -20px; z-index: 1001; } .contacts__feedback { padding: 50px 0; } .contacts__feedback label { font-size: 1.2em; line-height: 1.8em; font-family: 'Jura'; text-transform: uppercase; } .contacts__feedback .box-label { font-size: 1em; text-transform: none; } .contacts__email, .contacts__terms, .contacts__msg { width: 80%; margin: 0 auto; } .contacts__terms { padding: 1em 0; } .contacts__feedback textarea { width: 100%; height: 200px; } .contacts__feedback input[type=email] { width: 100%; height: 28px; padding: 0 6px; } .contacts__feedback button { width: 90px; margin: 32px auto; display: block; } /* -------------------------------------------------------------------------- */ @media screen and (min-width: 500px) { .anouncement { padding: 10vh 0; } } @media screen and (min-width: 600px) { .proprietary__customers { height: 64px; width: 600px; margin: 0 auto; } .proprietary__customers li { float: left; height: 32px; margin: 0; width: 200px; } } @media screen and (min-width: 640px) { .anouncement__overlay { border-bottom:0; } .open-solutions__cell { float: left; width: 50%; padding: 0; } .aisl-project .open-solutions__project { margin: 0 20px 20px 0; } .dotrix-project .open-solutions__project { margin: 0 0 20px 20px; } .proprietary { clear: left; } } @media screen and (min-width: 700px) { .proprietary__info { height: 200px; } .proprietary__cell { float: left; height: 200px; width: 33.333%; padding: 0; } .proprietary__title { max-width: 320px; margin: 50px auto; line-height: 50px; } .proprietary__text { display:table-cell; vertical-align:middle; height: 200px; } .proprietary__button { margin-top: 76px; } .contacts__column { float: left; width: 50%; } .contacts__feedback { float: left; width: 50%; padding: 100px 0; } } @media screen and (min-width: 980px) { .content { padding: 0 0 288px 0; } .footer { margin-top: -288px; } .menu { display: block; position: absolute; top: 144px; left: 0; } .menu__switch { display: none; } .menu__list a { padding: 0; } .main-content { margin: 0 144px; } .logo { width: 80px; height: 80px; margin: 32px; } .logo__text { font-size: 1.6em; line-height: 32px; text-align: center; height: 144px; margin: 0 144px; } .logo__text::before { height: 52px; } .anouncement { position: relative; height: 500px; } .anouncement__content{ position: absolute; padding: 0; top: 50%; margin-top: -50px; height: 100px; width: 100%; font-size: 1.2em; } .anouncement__content h1 { line-height: 80px; } .anouncement__overlay { height: 120px; border-bottom: 0; } .anouncement__overlay h1 { line-height: 80px; font-size: 1.4em; } .open-solutions { height: 320px; padding: 50px 0; } .open-solutions__content h2 { padding: 20px 0 20px; } .footer { height: 288px; position: relative; z-index: 0; } .footer__above { margin-left: 144px; height: 144px; position: relative; } .footer__logo { display: block; } .newsletter { margin: 0px 0 0 32px; padding: 32px 0 0; } .footer__social { position: absolute; top: 55px; right: 140px; } .footer__credentials { margin: 58px auto 0; width: 450px; } .copyright { float: left; margin: 0 32px 0 0; } .legal { float: left; } } @media screen and (min-width: 1280px) { .open-solutions__cell { width: 33.333%; float: left; } .open-solutions__content { width: 33.333%; float: left; } } @media screen and (min-width: 1600px) { .proprietary__title { line-height: 200px; margin: 0 auto; max-width: none; } } @media screen and (min-height: 640px) { } @media screen and (min-width: 980px) and (min-height: 640px){ .logo { position: fixed; top: 0; left: 0; } .menu { position: fixed; top: 50%; left: 0px; z-index: 1000; margin-top: -184px; } } @media screen and (min-width: 980px) and (min-height: 800px){ .menu { position: fixed; top: 50%; left: 0px; z-index: 1000; margin-top: -90px; } } .text-content { max-width: 840px; margin: 0 auto; } /* -------------------------------------------------------------------------- */