@charset "UTF-8"; /* @author Oleg Krasnov (krasnov@artlebedev.ru) @created 2019.09.26 @copyright Art. Lebedev Studio (http://www.artlebedev.ru/) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ /* @author Oleg Krasnov (krasnov@artlebedev.ru) @created 2019.09.26 @copyright Art. Lebedev Studio (http://www.artlebedev.ru/) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ /** @author Oleg Krasnov (krasnov@artlebedev.ru) @created 2019.01.28 @copyright Art. Lebedev Studio (http://www.artlebedev.ru/) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ @font-face { font-family: 'Stem'; src: url("Stem-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: 'Stem'; src: url("Stem-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: 'Stem'; src: url("Stem-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } /* @author Alexander Samilyak (aleksam241@gmail.com) @created 2013.03.25 @copyright Art. Lebedev Studio (www.artlebedev.ru) This source code follows Formatting section of Google CSS Style Guide https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules */ /** @param {string} value @param {boolean=} important @return {string} */ /** Clearfix in float based layouts */ /** @param {color} hexOrName @param {boolean=} important */ /** Pure css triangle */ #layout { -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); margin: 0 auto; overflow: hidden; padding: 0; } div, p { font-size: 18px; } *, h1, h2, h3, h4 { font-family: 'Stem', Arial, sans-serif; } h2 { font-size: 26px; } h3 { font-size: 21px; } h4 { font-size: 18px; } @font-face { font-family: 'icomoon'; src: url("fonts/icomoon.ttf?e6iida") format("truetype"), url("fonts/icomoon.woff?e6iida") format("woff"), url("fonts/icomoon.svg?e6iida#icomoon") format("svg"); font-weight: normal; font-style: normal; } [class^="ico-"], [class*=" ico-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ico-logo-without-title:before { content: ""; } .ico-logo-eagles:before { content: ""; } .ico-footer-logo:before { content: ""; } .ico-logo:before { content: ""; } .ico-logo-short:before { content: ""; } .ico-logo-short-10mm:before { content: ""; } .ico-logo-short-6mm:before { content: ""; } .ico-logo-short-vertical:before { content: ""; } .ico-logo-short-vertical-10mm:before { content: ""; } .ico-logo-eng:before { content: ""; } .ico-logo-eng-short:before { content: ""; } .ico-logo-eng-short-10mm:before { content: ""; } .ico-logo-eng-short-6mm:before { content: ""; } .ico-logo-eng-short-vertical:before { content: ""; } .ico-logo-eng-short-vertical-10mm:before { content: ""; } .ico-logo-eng-short-vertical-6mm:before { content: ""; } .ico-logo-short-vertical-6mm:before { content: ""; } .ico-logo-chn-short:before { content: ""; } .ico-logo-chn:before { content: ""; } .ico-social-yt:before { content: ""; } .ico-social-fb:before { content: ""; } .ico-social-tw:before { content: ""; } .ico-social-vk:before { content: ""; } .ico-social-ok:before { content: ""; } .ico-arr-prev:before { content: ""; } .ico-arr-next:before { content: ""; } .ico-arrow-fat:before { content: ""; } .ico-arrow-thin:before { content: ""; } .ico-arrow-triangle:before { content: ""; } .ico-arrow-in-circle:before { content: ""; } .ico-dropdown:before { content: ""; } .ico-plus:before { content: ""; } .ico-warning:before { content: ""; } .ico-play:before { content: ""; } .ico-question:before { content: ""; } .ico-close:before { content: ""; } .ico-close2:before { content: ""; } .ico-handset:before { content: ""; } .ico-flag:before { content: ""; } .ico-info:before { content: ""; } .ico-list-view:before { content: ""; } .ico-grid-view:before { content: ""; } .ico-edit:before { content: ""; } .ico-burger:before { content: ""; } .ico-search:before { content: ""; } .ico-rss:before { content: ""; } .ico-dragger:before { content: ""; } .ico-download:before { content: ""; } .ico-new-window:before { content: ""; } .ico-info-in-square:before { content: ""; } .ico-spectacles:before { content: ""; } .ico-print:before { content: ""; } .ico-letter:before { content: ""; } .ico-star:before { content: ""; } .ico-document:before { content: ""; } .ico-ecia:before { content: ""; } .ico-rouble:before { content: ""; } .ico-like:before { content: ""; } .ico-dislike:before { content: ""; } .ico-reload:before { content: ""; } .ico-download2:before { content: ""; } .ico-play2:before { content: ""; } .ico-lock:before { content: ""; } .ico-checkmark:before { content: ""; } .ico-flag-finish:before { content: ""; } .ico-0plus:before { content: ""; } .ico-6plus:before { content: ""; } .ico-10plus:before { content: ""; } .ico-12plus:before { content: ""; } .ico-14plus:before { content: ""; } .ico-16plus:before { content: ""; } .ico-18plus:before { content: ""; } .ico-arr-next2:before { content: ""; } p { font-size: 18px; } @media (max-width: 768px) { p { font-size: 18px; } } section.main { background-color: #0281bb; color: #fff; padding: 40px; padding-bottom: 80px; position: relative; } @media (max-width: 425px) { section.main { padding: 20px; padding-bottom: 80px; } } section.main button { background: #77787b; bottom: -23px; padding: 8px 35px 11px; position: absolute; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; z-index: 1; } section.main button:hover { background: #FFBB44; color: black; } section.main .logo { position: relative; min-height: 220px; z-index: 1; } section.main .logo a { color: #fff; } section.main .logo span { font-size: 56px; } section.main .titles { position: relative; width: 65%; z-index: 1; } section.main .titles h1 { font-size: 56px; font-weight: 500; margin: 0 0 15px 0; } @media (max-width: 470px) { section.main .titles h1 { font-size: 42px; } } section.main .titles h2 { font-size: 36px; } section.main .yellow-line { background-color: #faa619; height: 100%; position: absolute; right: 0; top: 0; width: 125px; } .left-padding { padding-left: 16.6666%; } @media (max-width: 1000px) { .left-padding { padding-left: 160px; } } @media (max-width: 425px) { .left-padding { padding-left: 120px; } } .left-padding .table-absolute { margin-left: -16.6666%; position: absolute; width: -webkit-calc(16.6666% - 10px); width: -moz-calc(16.6666% - 10px); width: calc(16.6666% - 10px); } .left-padding .table-absolute td { background: none; padding: 10px 10px 10px 0; } @media (max-width: 1000px) { .left-padding .table-absolute { margin-left: -160px; width: 160px; } } @media (max-width: 425px) { .left-padding .table-absolute { margin-left: -120px; width: 120px; } } .left-padding .scroll-pane { margin-top: 5px; } .column { max-width: 70%; padding-left: 36%; } .column + .image { margin-bottom: 30px; overflow-x: auto; text-align: center; } @media (max-width: 700px) { .column + .image img { min-width: 1000px; } } .column .column-container { min-height: 150px; padding: 85px 0 0; } @media (max-width: 700px) { .column .column-container { padding: 25px 0 0; } } @media (max-width: 1200px) { .column { padding-left: 170px; } } @media (max-width: 700px) { .column { max-width: 100%; padding-left: 0; } } .table { margin: 0 auto; padding: 50px 50px 0; } @media (max-width: 1200px) { .table { padding: 50px 0 0; } } .table table { border-collapse: inherit; } .table table.right-data { min-width: 520px; } .table table.right-data td { text-align: center; } .table table th, .table table td { background: rgba(248, 248, 248, 0.1); font-size: 28px; padding: 10px; position: relative; width: 20%; vertical-align: bottom; } @media (max-width: 1000px) { .table table th, .table table td { font-size: 21px; } } @media (max-width: 800px) { .table table th, .table table td { font-size: 18px; } } .table table td span { display: block; font-size: 16px; line-height: 1.2; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1000px) { .table table td span { font-size: 16px; } } @media (max-width: 800px) { .table table td span { font-size: 14px; } } @media (max-width: 425px) { .table table td span { font-size: 12px; } } .table table th { background: none; font-weight: 500; } .table table th span { font-size: 21px; font-weight: 400; } @media (max-width: 1050px) { .table table th span { font-size: 14px; } } @media (max-width: 850px) { .table table th span { font-size: 12px; } } .title-and-description { padding: 40px 40px 0; position: relative; } .title-and-description.bg { background-color: #0281bb; color: #fff; margin-top: 60px; padding: 40px 40px 100px; } .title-and-description h4 { font-size: 28px; font-weight: 500; } .title-and-description .number { line-height: 0.8; font-size: 180px; position: absolute; -webkit-transform: translateX(-160px); -moz-transform: translateX(-160px); -ms-transform: translateX(-160px); -o-transform: translateX(-160px); transform: translateX(-160px); } @media (max-width: 700px) { .title-and-description .number { margin-bottom: 30px; position: relative; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .title-and-description .title { font-size: 64px; font-weight: 500; line-height: 1; margin-bottom: 30px; } @media (max-width: 470px) { .title-and-description .title { font-size: 46px; } } .principles { padding: 40px 40px 0; position: relative; } @media (max-width: 1000px) { .principles { text-align: center; } } .principles h3 { font-size: 28px; font-weight: 500; margin-bottom: 50px; text-align: left; } .principles strong { display: block; margin-bottom: 15px; } .principles .item { display: inline-block; padding: 0 1%; position: relative; text-align: left; vertical-align: top; width: 40%; } @media (max-width: 768px) { .principles .item { padding: 0 3% 50px; } } @media (max-width: 1000px) { .principles .item { width: 43%; } } @media (max-width: 768px) { .principles .item { padding-right: 0; padding-left: 0; text-align: center; width: 100%; } } .principles .item .image { display: table-cell; height: 170px; text-align: center; width: 170px; vertical-align: middle;} @media (max-width: 768px) { .principles .item .image { display: block; height: auto; margin-bottom: 20px; width: 100%; } } .principles .item .image img { margin-bottom: 10px; max-width: 140px; } .button, button { background: #0281bb; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; color: #fff; font-size: 24px; font-weight: 500; margin-top: 35px; padding: 20px 35px; } .button:hover, button:hover { background: #00a0e8; } .button.disabled, button.disabled { background: #ccc; cursor: auto; } a { color: #0281bb; } @media (max-width: 1000px) { .title-and-description, .title-and-description.bg, .principles { padding-right: 20px; padding-left: 20px; } } .goto { font-size: 18px; text-align: center; } .goto a { color: #fff; border-color: rgba(255, 255, 255, 0.3); font-size: 14px; } .list { margin-bottom: 50px; margin-top: 100px; } @media (max-width: 700px) { .list { margin-top: 60px; padding: 0; width: 100%; } } .list .link { background: #2894c5; color: #fff !important; cursor: pointer; display: block; font-size: 120%; margin: 5px auto; max-width: 55%; padding: 20px; padding-right: 60px; position: relative; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } @media (max-width: 1000px) { .list .link { max-width: 90%; } } @media (max-width: 700px) { .list .link { max-width: 100%; } } .list .link:hover { background: #4ea7d0; color: #fff; } .list .link:after { content: ""; font-family: 'icomoon'; position: absolute; right: 20px; top: 22px; } .footer { margin-top: 90px; text-align: center; }