/* ======================================================================== Settings ======================================================================== */ /** * Variables */ /** * Fonts */ /** * Colors */ /** * Breakpoints */ /* ======================================================================== Tools ======================================================================== */ /** * Functions, mixins */ /* ======================================================================== Imports ======================================================================== */ /* ======================================================================== Imports ======================================================================== */ /* (TEXT) PARAMS ================= 1. Namespace 2. Intensity 3. Text color 4. Background color (flat) 5. Highlight #1 color 6. Highlight #2 color 7. Width (px) 8. Height (px) */ /* ======================================================================== Base ======================================================================== */ /** * Basic rules, unclassed HTML elements */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /** * Font @imports */ @font-face { font-family: 'Museo Sans Cyrillic'; src: url("../fonts/museosanscyrl_0-webfont.woff2") format("woff2"), url("../fonts/museosanscyrl_0-webfont.woff") format("woff"), url("../fonts/museosanscyrl_0-webfont.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Museo Sans Cyrillic'; src: url("../fonts/museosanscyrl_1-webfont.woff2") format("woff2"), url("../fonts/museosanscyrl_1-webfont.woff") format("woff"), url("../fonts/museosanscyrl_1-webfont.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Museo Sans Cyrillic'; src: url("../fonts/museosanscyrl_3-webfont.woff2") format("woff2"), url("../fonts/museosanscyrl_3-webfont.woff") format("woff"), url("../fonts/museosanscyrl_3-webfont.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Hairline'), local('TTHoves-Pro-Hairline'), local('TT_Hoves_Pro_Hairline'), url('../fonts/tt_hoves_pro_hairline.woff2') format('woff2'), url('../fonts/tt_hoves_pro_hairline.woff') format('woff'); font-weight: 50; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Hairline Italic'), local('TTHoves-Pro-Hairline-Italic'), local('TT_Hoves_Pro_Hairline_Italic'), url('../fonts/tt_hoves_pro_hairline_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_hairline_italic.woff') format('woff'); font-weight: 50; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Thin'), local('TTHoves-Pro-Thin'), local('TT_Hoves_Pro_Thin'), url('../fonts/tt_hoves_pro_thin.woff2') format('woff2'), url('../fonts/tt_hoves_pro_thin.woff') format('woff'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Thin Italic'), local('TTHoves-Pro-Thin-Italic'), local('TT_Hoves_Pro_Thin_Italic'), url('../fonts/tt_hoves_pro_thin_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_thin_italic.woff') format('woff'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro ExtraLight'), local('TTHoves-Pro-ExtraLight'), local('TT_Hoves_Pro_ExtraLight'), url('../fonts/tt_hoves_pro_extralight.woff2') format('woff2'), url('../fonts/tt_hoves_pro_extralight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro ExtraLight Italic'), local('TTHoves-Pro-ExtraLight-Italic'), local('TT_Hoves_Pro_ExtraLight Italic'), url('../fonts/tt_hoves_pro_extralight_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_extralight_italic.woff') format('woff'); font-weight: 200; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Light'), local('TTHoves-Pro-Light'), local('TT_Hoves_Pro_Light'), url('../fonts/tt_hoves_pro_light.woff2') format('woff2'), url('../fonts/tt_hoves_pro_light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Light Italic'), local('TTHoves-Pro-Light-Italic'), local('TT_Hoves_Pro_Light Italic'), url('../fonts/tt_hoves_pro_light_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_light_italic.woff') format('woff'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Regular'), local('TTHoves-Pro-Regular'), local('TT_Hoves_Pro_Regular'), url('../fonts/tt_hoves_pro_regular.woff2') format('woff2'), url('../fonts/tt_hoves_pro_regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Italic'), local('TTHoves-Pro-Italic'), local('TT_Hoves_Pro_Italic'), url('../fonts/tt_hoves_pro_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Medium'), local('TTHoves-Pro-Medium'), local('TT_Hoves_Pro_Medium'), url('../fonts/tt_hoves_pro_medium.woff2') format('woff2'), url('../fonts/tt_hoves_pro_medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Medium Italic'), local('TTHoves-Pro-Medium-Italic'), local('TT_Hoves_Pro_Medium_Italic'), url('../fonts/tt_hoves_pro_medium_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_medium_italic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro DemiBold'), local('TTHoves-Pro-DemiBold'), local('TT_Hoves_Pro_DemiBold'), url('../fonts/tt_hoves_pro_demibold.woff2') format('woff2'), url('../fonts/tt_hoves_pro_demibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro DemiBold Italic'), local('TTHoves-Pro-DemiBold-Italic'), local('TT_Hoves_Pro_DemiBold Italic'), url('../fonts/tt_hoves_pro_demibold_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_demibold_italic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Bold'), local('TTHoves-Pro-Bold'), local('TT_Hoves_Pro_Bold'), url('../fonts/tt_hoves_pro_bold.woff2') format('woff2'), url('../fonts/tt_hoves_pro_bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Bold Italic'), local('TTHoves-Pro-Bold-Italic'), local('TT_Hoves_Pro_Bold Italic'), url('../fonts/tt_hoves_pro_bold_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_bold_italic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro ExtraBold'), local('TTHoves-Pro-ExtraBold'), local('TT_Hoves_Pro_ExtraBold'), url('../fonts/tt_hoves_pro_extrabold.woff2') format('woff2'), url('../fonts/tt_hoves_pro_extrabold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro ExtraBold Italic'), local('TTHoves-Pro-ExtraBold-Italic'), local('TT_Hoves_Pro_ExtraBold Italic'), url('../fonts/tt_hoves_pro_extrabold_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_extrabold_italic.woff') format('woff'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Black'), local('TTHoves-Pro-Black'), local('TT_Hoves_Pro_Black'), url('../fonts/tt_hoves_pro_black.woff2') format('woff2'), url('../fonts/tt_hoves_pro_black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Hoves Pro'; src: local('TT Hoves Pro Black Italic'), local('TTHoves-Pro-Black-Italic'), local('TT_Hoves_Pro_Black Italic'), url('../fonts/tt_hoves_pro_black_italic.woff2') format('woff2'), url('../fonts/tt_hoves_pro_black_italic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; } /* ======================================================================== Vendor ======================================================================== */ /** * Third party components */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } @-webkit-keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } } @keyframes passing-through { 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } 30%, 70% { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } 100% { opacity: 0; -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } 30% { opacity: 1; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 20% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .dropzone, .dropzone * { box-sizing: border-box; } .dropzone { min-height: 150px; border: 2px solid rgba(0, 0, 0, 0.3); background: white; padding: 20px 20px; } .dropzone.dz-clickable { cursor: pointer; } .dropzone.dz-clickable * { cursor: default; } .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { cursor: pointer; } .dropzone.dz-started .dz-message { display: none; } .dropzone.dz-drag-hover { border-style: solid; } .dropzone.dz-drag-hover .dz-message { opacity: 0.5; } .dropzone .dz-message { text-align: center; margin: 2em 0; } .dropzone .dz-preview { position: relative; display: inline-block; vertical-align: top; margin: 16px; min-height: 100px; } .dropzone .dz-preview:hover { z-index: 1000; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 20px; background: #999; background: -webkit-linear-gradient(top, #eee, #ddd); background: linear-gradient(to bottom, #eee, #ddd); } .dropzone .dz-preview.dz-file-preview .dz-details { opacity: 1; } .dropzone .dz-preview.dz-image-preview { background: white; } .dropzone .dz-preview.dz-image-preview .dz-details { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .dropzone .dz-preview .dz-remove { font-size: 14px; text-align: center; display: block; cursor: pointer; border: none; } .dropzone .dz-preview .dz-remove:hover { text-decoration: underline; } .dropzone .dz-preview:hover .dz-details { opacity: 1; } .dropzone .dz-preview .dz-details { z-index: 20; position: absolute; top: 0; left: 0; opacity: 0; font-size: 13px; min-width: 100%; max-width: 100%; padding: 2em 1em; text-align: center; color: rgba(0, 0, 0, 0.9); line-height: 150%; } .dropzone .dz-preview .dz-details .dz-size { margin-bottom: 1em; font-size: 16px; } .dropzone .dz-preview .dz-details .dz-filename { white-space: nowrap; } .dropzone .dz-preview .dz-details .dz-filename:hover span { border: 1px solid rgba(200, 200, 200, 0.8); background-color: rgba(255, 255, 255, 0.8); } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) { overflow: hidden; text-overflow: ellipsis; } .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { border: 1px solid transparent; } .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span { background-color: rgba(255, 255, 255, 0.4); padding: 0 0.4em; border-radius: 3px; } .dropzone .dz-preview:hover .dz-image img { -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); -webkit-filter: blur(8px); filter: blur(8px); } .dropzone .dz-preview .dz-image { border-radius: 20px; overflow: hidden; width: 120px; height: 120px; position: relative; display: block; z-index: 10; } .dropzone .dz-preview .dz-image img { display: block; } .dropzone .dz-preview.dz-success .dz-success-mark { -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview.dz-error .dz-error-mark { opacity: 1; -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); } .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark { pointer-events: none; opacity: 0; z-index: 500; position: absolute; display: block; top: 50%; left: 50%; margin-left: -27px; margin-top: -27px; } .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg { display: block; width: 54px; height: 54px; } .dropzone .dz-preview.dz-processing .dz-progress { opacity: 1; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .dropzone .dz-preview.dz-complete .dz-progress { opacity: 0; -webkit-transition: opacity 0.4s ease-in; transition: opacity 0.4s ease-in; } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse 6s ease infinite; animation: pulse 6s ease infinite; } .dropzone .dz-preview .dz-progress { opacity: 1; z-index: 1000; pointer-events: none; position: absolute; height: 16px; left: 50%; top: 50%; margin-top: -8px; width: 80px; margin-left: -40px; background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(1); border-radius: 8px; overflow: hidden; } .dropzone .dz-preview .dz-progress .dz-upload { background: #333; background: -webkit-linear-gradient(top, #666, #444); background: linear-gradient(to bottom, #666, #444); position: absolute; top: 0; left: 0; bottom: 0; width: 0; -webkit-transition: width 300ms ease-in-out; transition: width 300ms ease-in-out; } .dropzone .dz-preview.dz-error .dz-error-message { display: block; } .dropzone .dz-preview.dz-error:hover .dz-error-message { opacity: 1; pointer-events: auto; } .dropzone .dz-preview .dz-error-message { pointer-events: none; z-index: 1000; position: absolute; display: block; display: none; opacity: 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border-radius: 8px; font-size: 13px; top: 130px; left: -10px; width: 140px; background: #be2626; background: -webkit-linear-gradient(top, #be2626, #a92222); background: linear-gradient(to bottom, #be2626, #a92222); padding: 0.5em 1.2em; color: white; } .dropzone .dz-preview .dz-error-message:after { content: ''; position: absolute; top: -6px; left: 64px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #be2626; } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox { /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container { /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools { right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger { /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container { min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger { height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical { right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical { box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { bottom: 1px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #fff; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255, 255, 255, 0.2); box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0, 0, 0, 0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } /* ---------------------------------------- */ /** * Vendor libraries overrides */ /* ======================================================================== Scrollbar ======================================================================== */ .mCSB_inside > .mCSB_container { margin-right: 9px; } .mCSB_scrollTools { width: 8px; } .mCSB_scrollTools .mCSB_draggerContainer { top: 3px; bottom: 3px; } /** * Dark thin */ .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: rgba(74, 64, 186, 0.5); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #4A40BA; } .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: rgba(57, 56, 116, 0.1); } .mCS-dark-thin.mCSB_scrollTools_horizontal { height: 20px; } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger { height: 20px; margin-top: -3px; } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 20px; border-radius: 0; padding: 0; margin: 0; background: #4A40BA; } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar:before, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar:after { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%3E%3Cpath%20d%3D%22M4%200h2v2H4zM2%202h2v2H2zM0%204h2v2H0zm2%202h2v2H2zm2%202h2v2H4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%; } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar:after { left: auto; right: 0; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /* ======================================================================== Components ======================================================================== */ /** * Common blocks */ /** * Page */ .page { min-width: 320px; font-size: 14px; font-family: "Museo Sans Cyrillic", Helvetica, Arial, sans-serif; font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 20px; color: #000; background: #F1F1EF; } .page__overlay { position: fixed; z-index: 800; top: 50px; left: 0; bottom: 0; width: 0; overflow: hidden; opacity: 0; background: #4A40BA; -webkit-transition: opacity .35s; transition: opacity .35s; } .page__main { padding-top: 50px; } .page.sidebar-visible .page__overlay { width: 100%; opacity: .8; } @media (max-width: 1280px) { .page.sidebar-visible { position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .page.sidebar-visible .page__overlay { width: 100%; opacity: .8; } } @media (min-width: 1280px) { .page__overlay { top: 0; } .page__main { padding: 0 310px 0 0; } .page.sidebar-visible .page__overlay { width: 0; opacity: 0; } .page.pane-visible .page__overlay { width: 100%; opacity: .8; } } /** * Link */ .link, .typography a { text-decoration: none; color: #4A40BA; cursor: pointer; -webkit-transition: color .25s; transition: color .25s; /** * Mods */ /** * Themes */ } .link:hover, .typography a:hover { color: #F6082E; } .link_pseudo { border-bottom: 1px dotted; } .link_theme_dark { color: #000; } .link_theme_dark:hover { color: #CB0928; } .link_theme_light { color: #999; } .link_theme_light:hover { color: #393874; } .link_theme_gray { color: #666; } .link_theme_gray:hover { color: #CB0928; } .link_theme_white { color: #FFF; } .link_theme_white:hover { color: #CB0928; } .icon_arrow { width: 11px; height: 21px; } .icon_attachment { width: 20px; height: 20px; } .icon_download { width: 24px; height: 24px; } .icon_facebook { width: 24px; height: 24px; } .icon_favicon { width: 50px; height: 50px; } .icon_grid { width: 18px; height: 18px; } .icon_instagram { width: 24px; height: 24px; } .icon_pin { width: 21px; height: 28px; } .icon_small-arrow { width: 6px; height: 10px; } .icon_tiny-arrow { width: 8px; height: 12px; } .icon_twitter { width: 24px; height: 24px; } .icon_vk { width: 24px; height: 24px; } .icon_youtube { width: 24px; height: 24px; } /** * Button */ .button { box-sizing: border-box; position: relative; display: inline-block; vertical-align: middle; padding: 0 30px; margin: 0; height: 50px; -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; font-size: 14px; font-family: "Museo Sans Cyrillic", Helvetica, Arial, sans-serif; font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 48px; text-decoration: none; text-align: center; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: inherit; background: transparent; border: 1px solid transparent; cursor: pointer; -webkit-transition: all .25s; transition: all .25s; outline: none; /** * Types */ /** * Themes */ /** * Misc. */ } .button::-moz-focus-inner { padding: 0; border: 0; } .button:hover, .button:active { background: transparent; } .button__text { position: relative; top: 0; left: 0; display: inline-block; vertical-align: top; } .button_type_ghost { background-color: transparent; } .button_type_ghost:hover, .button_type_ghost:active { background-color: transparent; } .button_type_ghost.button_theme_default { color: #4A40BA; border-color: #4A40BA; background-color: transparent; } .button_type_ghost.button_theme_default:hover, .button_type_ghost.button_theme_default:active { color: #FFF; border-color: #F6082E; background-color: #F6082E; } .button_type_ghost.button_theme_white, .button_type_ghost.button_theme_white:hover, .button_type_ghost.button_theme_white:active { color: #FFF; border-color: #FFF; background-color: transparent; } .button_theme_default { color: #FFF; border-color: #4A40BA; background-color: #4A40BA; } .button_theme_default:hover, .button_theme_default:active { color: #FFF; border-color: #F6082E; background-color: #F6082E; } .button_theme_default.button_more { -webkit-transition: all .25s; transition: all .25s; } .button_theme_default.button_more:hover, .button_theme_default.button_more:active { color: #4A40BA; border-color: #4A40BA; background-color: transparent; } .button_theme_white { color: #FFF; border-color: #FFF; background-color: #FFF; } .button_theme_dark { color: #000; border-color: #000; background-color: transparent; } @media (min-width: 1280px) { .button_more:before { content: ''; position: absolute; top: 50%; left: 19px; width: 30px; border-top: 1px solid currentColor; opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all .25s; transition: all .25s; } .button_more:hover, .button_more:active { padding-left: 69px; } .button_more:hover:before, .button_more:active:before { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .button_block { display: block; } /** * Block Link */ .block-link { display: block; height: 98px; font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; line-height: 98px; text-decoration: none; text-align: center; background: #4A40BA; color: #FFF; -webkit-transition: background-color .25s; transition: background-color .25s; } .block-link:hover { background: #F6082E; } .block-link__icon { vertical-align: middle; margin-right: 20px; } /** * Typography */ .typography { font-size: 18px; font-weight: 300; line-height: 30px; } .typography h1, .typography h2 { font-size: 28px; line-height: 30px; font-weight: 900; margin-bottom: 15px; } .typography h1, .typography h2, .typography h3, .typography p, .typography ul, .typography ol { margin-bottom: 20px; } .typography h1:last-child, .typography h2:last-child, .typography h3:last-child, .typography p:last-child, .typography ul:last-child, .typography ol:last-child { margin-bottom: 0; } .typography figure { margin: 50px 0; } .typography figure img { display: block; max-width: 100%; height: auto; } .typography figure figcaption { display: block; padding-top: 20px; font-size: 14px; line-height: 20px; font-weight: 300; color: #666; } .typography ul li, .typography ol li { margin-bottom: 20px; } .typography ul li { position: relative; padding-left: 40px; } .typography ul li:before { position: absolute; top: 11.5px; left: 14px; content: ''; display: block; width: 7px; height: 7px; background: #393874; } .typography ol { counter-reset: section; } .typography ol li { position: relative; padding-left: 40px; } .typography ol li:before { position: absolute; top: 0; left: 0; color: #393874; counter-increment: section; content: counter(section, decimal-leading-zero); } @media (min-width: 768px) { .typography h1, .typography h2 { font-size: 42px; line-height: 50px; } } .loud, .typography strong { color: #000; font-weight: 500; } .small { font-size: 14px; line-height: 20px; } /** * Basic */ /** * Menu button */ .menu-button { display: inline-block; position: relative; width: 50px; height: 50px; vertical-align: top; background: none; border: 0; color: #393874; outline: none; } .menu-button.is-active { background: #393874; color: #FFF; } .menu-button.is-active .menu-button__stroke { color: #393874; } .menu-button.is-active .menu-button__stroke:before { color: #FFF; -webkit-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } .menu-button.is-active .menu-button__stroke:after { color: #FFF; -webkit-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } .menu-button__stroke { display: block; position: absolute; top: 50%; left: 50%; width: 26px; height: 4px; margin: -2px 0 0 -13px; background: currentColor; -webkit-transition: all .25s; transition: all .25s; } .menu-button__stroke:before, .menu-button__stroke:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 26px; height: 4px; margin: -2px 0 0 -13px; background: currentColor; -webkit-transition: all .25s; transition: all .25s; } .menu-button__stroke:before { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .menu-button__stroke:after { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } /** * Header */ .header { position: fixed; z-index: 901; top: 0; left: 0; width: 100%; height: 50px; background: #FFF; -webkit-transition: -webkit-transform .35s; transition: -webkit-transform .35s; transition: transform .35s; transition: transform .35s, -webkit-transform .35s; } .header__menu-button { position: absolute; top: 0; right: 0; } @media (min-width: 1280px) { .header { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } } /** * Badge */ .badge { display: inline-block; padding: 5px 20px; font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-weight: 500; color: #000; background: #FFF; /** * Themes */ } .badge_theme_red { color: #FFF; background: #CB0928; } .badge_theme_blue { color: #FFF; background: #393874; } /** * Pagination */ .pagination { font-size: 0.1px; letter-spacing: -1px; font-weight: 500; padding: 60px 0; text-align: center; background: #FFF; } @-moz-document url-prefix() { .pagination { font-size: 0; letter-spacing: normal; } } .pagination__item { font-size: 14px; letter-spacing: normal; } .pagination__item { position: relative; display: inline-block; vertical-align: top; margin-right: -1px; } .pagination__item_extra { display: none; } .pagination__item_next .icon { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .pagination__link { position: relative; z-index: 2; display: block; text-decoration: none; line-height: 48px; min-width: 48px; text-align: center; color: #000; border: 1px solid #999; -webkit-transition: all .25s; transition: all .25s; } .pagination__link:hover { border-color: #000; z-index: 3; } .pagination__link.is-active { z-index: 3; color: #FFF; background: #393874; border-color: #393874; } .pagination__ellipsis { display: block; line-height: 48px; min-width: 48px; text-align: center; border: 1px solid #999; } .pagination .icon { vertical-align: middle; } @media (min-width: 768px) { .pagination { padding: 70px 0; } .pagination__item { margin: 0 5px; } .pagination__item_extra { display: inline-block; } } @media (min-width: 1280px) { .pagination { padding: 80px 0; background: transparent; } } /** * Arrow Button */ .arrow-button { position: relative; display: block; width: 70px; height: 70px; text-align: center; color: #666; cursor: pointer; -webkit-transition: color .25s; transition: color .25s; /** * Themes */ /** * Sizes */ } .arrow-button__icon { position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px; } .arrow-button:hover { color: #000; } .arrow-button_theme_white { background: rgba(255, 255, 255, 0.5); -webkit-transition: color .25s, background-color .25s; transition: color .25s, background-color .25s; } .arrow-button_theme_white:hover { background: #FFF; } .arrow-button_size_l { width: 80px; height: 80px; } .arrow-button_size_s { width: 28px; height: 80px; } .arrow-button_size_s .arrow-button__icon { margin: -6px 0 0 -4px; } /** * Table */ .table { width: 100%; overflow: auto; margin: 20px 0; } .table table { text-align: left; width: 800px; } .table table td, .table table th { font-size: 14px; line-height: 20px; padding: 20px; } .table table td:first-child, .table table th:first-child { padding-left: 0; } .table table td:last-child, .table table th:last-child { padding-right: 0; } .table table th { text-transform: uppercase; letter-spacing: .1em; font-weight: 500; } .table table tr { border-bottom: 1px solid #CCC; } .table table tr:last-child { border-bottom: 0; } .table table thead tr, .table table thead tr:last-child { border-bottom: 2px solid #393874; } @media (min-width: 1280px) { .container .table { width: 800px; margin-left: -60px; margin-right: -60px; } } /** * Sidebar */ /** * Sidebar */ .sidebar { font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; position: fixed; z-index: 900; top: 50px; right: 0; bottom: 0; width: 310px; background: #FFF; -webkit-transform: translateX(330px); -ms-transform: translateX(330px); transform: translateX(330px); -webkit-transition: all .35s; transition: all .35s; } .sidebar > * { font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; } .sidebar:before { display: none; content: ''; position: absolute; top: 0; left: -20px; bottom: 0; width: 20px; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%22340%22%20viewBox%3D%220%200%2020%20340%22%3E%3Cpath%20d%3D%22M10%200h10v10H10zM0%2010h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%2040h10v10H0zm10%2010h10v10H10zM0%2060h10v10H0zm0%2010h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%20100h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%20130h10v10H0zm10%2010h10v10H10zM0%20150h10v10H0zm0%2010h10v10H0zm0%2010h10v10H0zm10-10h10v10H10zm0%2010h10v10H10zM0%20190h10v10H0zm10%200h10v10H10zm0%2010h10v10H10zm0-20h10v10H10zM0%20210h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%20240h10v10H0zm0%2010h10v10H0zm10-10h10v10H10zm0%2010h10v10H10zM0%20270h10v10H0zm10%200h10v10H10zm0%2010h10v10H10zM0%20290h10v10H0zm10%2010h10v10H10zm0%2020h10v10H10zM0%20330h10v10H0z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } .sidebar:after { content: ''; position: absolute; z-index: 23; top: 0; left: 0; bottom: 0; width: 20px; background: #FFF; box-shadow: 0 0 20px rgba(57, 56, 116, 0.25); opacity: 0; } .sidebar-visible .sidebar { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .sidebar__item { position: absolute; z-index: 22; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; background: #FFF; -webkit-transform: translateX(330px); -ms-transform: translateX(330px); transform: translateX(330px); -webkit-transition: -webkit-transform .35s; transition: -webkit-transform .35s; transition: transform .35s; transition: transform .35s, -webkit-transform .35s; } .sidebar__item_main { z-index: 21; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); border-left: 1px solid #d8d8d7; } .sidebar__item_main .sidebar__wrapper { padding: 40px 40px 40px 30px; } .sidebar__item.is-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .sidebar__wrapper { padding: 10px; } .sidebar__section_branding { display: none; margin-bottom: 30px; } .sidebar__section_contacts { margin-bottom: 15px; } .sidebar__section_nav { margin-top: 40px; padding-bottom: 40px; } .sidebar__section_form { padding: 35px 20px; } .sidebar__section_footer { /*position: absolute;*/ bottom: 0; left: 0; width: 100%; /* padding: 38px 0; */ } .sidebar__title { padding: 24px 20px 12px; font-size: 18px; line-height: 24px; font-weight: 900; color: #393874; } .sidebar__back-link { display: block; padding: 15px 20px 15px 45px; border-bottom: 1px solid #393874; color: #393874; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%3E%3Cpath%20d%3D%22M4%200h2v2H4zM2%202h2v2H2zM0%204h2v2H0zm2%202h2v2H2zm2%202h2v2H4z%22%20fill%3D%22%23393874%22%2F%3E%3C%2Fsvg%3E") no-repeat 20px 50%; cursor: pointer; } @media (min-width: 768px) { .sidebar__item_main { z-index: 25; } .sidebar__header { display: none; } .sidebar__item.is-active { -webkit-transform: translateX(-310px); -ms-transform: translateX(-310px); transform: translateX(-310px); overflow: visible; } .sidebar__item.is-active:before { display: none; content: ''; position: absolute; top: 0; left: -20px; bottom: 0; width: 20px; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%22340%22%20viewBox%3D%220%200%2020%20340%22%3E%3Cpath%20d%3D%22M10%200h10v10H10zM0%2010h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%2040h10v10H0zm10%2010h10v10H10zM0%2060h10v10H0zm0%2010h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%20100h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%20130h10v10H0zm10%2010h10v10H10zM0%20150h10v10H0zm0%2010h10v10H0zm0%2010h10v10H0zm10-10h10v10H10zm0%2010h10v10H10zM0%20190h10v10H0zm10%200h10v10H10zm0%2010h10v10H10zm0-20h10v10H10zM0%20210h10v10H0zm10%2010h10v10H10zm0%2010h10v10H10zM0%20240h10v10H0zm0%2010h10v10H0zm10-10h10v10H10zm0%2010h10v10H10zM0%20270h10v10H0zm10%200h10v10H10zm0%2010h10v10H10zM0%20290h10v10H0zm10%2010h10v10H10zm0%2020h10v10H10zM0%20330h10v10H0z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); } .pane-visible .sidebar:after { opacity: 1; } .pane-visible .sidebar:before { background: #FFF; } } @media (min-width: 1280px) { .sidebar { top: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .sidebar__section_branding { display: block; } } /** * Branding */ .branding { display: block; width: 240px; height: 50px; width: 217px; } .branding:hover .branding__favicon { color: #CB0928; } .branding__favicon { float: left; } .branding__logo { float: right; margin: 15px 0 0; } /** * Logo */ .logo { display: block; width: 167px; height: 28px; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22167%22%20height%3D%2228%22%20viewBox%3D%220%200%20167%2028%22%3E%3Cpath%20d%3D%22M4.6%2015.6L0%200h3.4l3.3%2012.5h.1L9.7%200H14l3%2012.5h.1L20.3%200h3.4L19%2015.6h-4.3l-3-11.8h-.1L8.9%2015.6H4.6zM25.7%200H38v2.9h-9.2V6H37v2.8h-8.2v3.9h9.5v2.8H25.7V0zm15%2015.6V0h7.6c1.6%200%203.1.3%204.1%201.2.7.7%201.2%201.5%201.2%202.9%200%20.5-.1%201-.3%201.5-.2.5-.6.9-1.1%201.3V7c.7.3%201.3.8%201.7%201.4.4.7.6%201.5.6%202.3%200%201.4-.6%202.6-1.5%203.4-1%20.9-2.2%201.4-4.5%201.4h-7.8zm9.4-12.4c-.3-.3-.8-.4-1.6-.4h-4.6V6h5c.5%200%20.9-.2%201.3-.4.3-.3.4-.7.4-1.1-.1-.7-.2-1.1-.5-1.3zm.9%206.2c-.4-.4-.8-.7-2-.7h-5.1V13h4.9c.8%200%201.6-.2%202.1-.6.4-.3.7-.9.7-1.6-.2-.6-.3-1.1-.6-1.4zM56.9%200h12.3v2.9H60V6h8.2v2.8H60v3.9h9.5v2.8H56.9V0zm27.3%2015.6H71.9V0h3.2v12.8h9.1v2.8zm2-15.6h12.3v2.9h-9.2V6h8.2v2.8h-8.2v3.9h9.5v2.8H86.2V0zm18.3%200l5.3%207.4L115%200h3.3v15.6h-3.2V5h-.1l-4.6%206.6h-1.2L104.4%205h-.1v10.7h-3.1V0h3.3zm16.4%200h12.3v2.9H124V6h8.2v2.8H124v3.9h9.5v2.8h-12.7V0zm29.7%200v15.6h-2.8L139.1%205v10.6H136V0h2.8l8.7%2010.6V0h3.1zm2%200H167v2.8h-5.7v12.8h-3.1V2.8h-5.7V0zM5.6%2025.9c.4.4.9.6%201.4.6.7%200%201.1-.3%201.6-.6l.4.4c-.5.5-1.1.8-2%20.8-.8%200-1.4-.3-1.9-.8s-.8-1.1-.8-1.9c0-.7.3-1.4.7-1.8.5-.5%201.1-.8%201.9-.8.8%200%201.4.2%202%20.8l-.4.4c-.4-.4-.9-.6-1.5-.6s-1%20.2-1.4.6c-.4.4-.6.8-.6%201.4.1.7.3%201.1.6%201.5zm8.7-3.3c.5.5.7%201.1.7%201.9%200%20.7-.3%201.3-.7%201.8-.5.5-1.1.8-1.9.8-.8%200-1.5-.3-2-.8-.4-.5-.7-1.1-.7-1.8s.3-1.3.7-1.8c.5-.5%201.2-.8%202-.8s1.5.3%201.9.7zM11%2025.9c.4.4.9.6%201.5.6s1.1-.2%201.4-.6c.3-.4.5-.8.5-1.4%200-.6-.2-1.1-.5-1.4-.4-.4-.9-.6-1.4-.6-.6%200-1.1.2-1.5.6-.3.4-.5.8-.5%201.4%200%20.5.2%201%20.5%201.4zm8.1.2c.3-.2.4-.4.4-.8%200-.2-.1-.4-.2-.6-.2-.2-.4-.3-.7-.3h-1.8v-.6h1.7c.3%200%20.5-.1.6-.2.1-.1.2-.3.2-.4%200-.3-.1-.4-.3-.5-.3-.2-.8-.2-1.1-.2-.5%200-1%20.1-1.6.3l-.3-.5c.5-.3%201.1-.4%201.8-.4.5%200%201.1.1%201.6.4.3.2.5.5.5.9%200%20.2-.1.4-.2.5l-.4.4c.2.1.5.2.6.4.2.2.3.5.3.8%200%20.5-.2.9-.6%201.2-.4.3-.9.5-1.7.5-.9%200-1.5-.1-2.1-.5l.2-.5c.6.3%201.2.4%201.9.4.5.1.9%200%201.2-.3zm6.7-4.1v4.4h.5V28h-.6l-.1-1h-4.1l-.1%201h-.5v-1.6c.4%200%20.6-.1.7-.3.2-.2.3-.5.3-.8l.5-3.2h3.4zm-2.8.6l-.4%202.8c-.1.4-.2.8-.4%201h3v-3.8H23zm7.3-.6l2.2%205h-.7l-.4-1h-3l-.4%201h-.7l2.2-5h.8zm-1.7%203.4h2.5l-1.2-2.8h-.2l-1.1%202.8zM38%2022v5h-.7v-2.4h-3V27h-.7v-5h.7v2h3v-2h.7zm1.9%204l3.2-4.1h.7v5h-.6v-4.1L39.9%2027h-.7v-5h.7v4zm5.2-4h3.8v.6h-3.2V24h2.8v.6h-2.8v1.7H49v.7h-4v-5zm8.7%204l3.2-4h.7v5H57v-4.1L53.8%2027h-.7v-5h.7v4zm12.4-4v5h-.7v-4.4h-3V27h-.7v-5h4.4zm5%203c-.3.3-.8.5-1.4.5h-1.6V27h-.7v-5h2.3c.7%200%201.2.2%201.5.7.3.3.4.7.4%201.1.1.5-.1.9-.5%201.2zm-1.3%200c.4%200%20.7-.1.9-.4.2-.2.3-.5.3-.8%200-.3-.1-.6-.3-.8-.2-.2-.5-.4-1-.4h-1.6V25h1.7zm7.4-2.4c.5.5.7%201.1.7%201.9%200%20.7-.3%201.3-.7%201.8-.5.5-1.1.8-1.9.8-.8%200-1.5-.3-2-.8-.4-.5-.7-1.1-.7-1.8s.3-1.3.7-1.8c.5-.5%201.2-.8%202-.8.7%200%201.4.3%201.9.7zm-3.4%203.3c.4.4.9.6%201.5.6s1.1-.2%201.4-.6c.3-.4.5-.8.5-1.4%200-.6-.2-1.1-.5-1.4-.4-.4-.9-.6-1.4-.6-.6%200-1.1.2-1.5.6-.3.4-.5.8-.5%201.4%200%20.5.2%201%20.5%201.4zm9.6-3.9v4.4h.5V28h-.6l-.1-1h-4.1l-.1%201h-.5v-1.6c.4%200%20.6-.1.7-.3.2-.2.3-.5.3-.8l.5-3.2h3.4zm-2.8.6l-.4%202.8c-.1.4-.2.8-.4%201h3v-3.8h-2.2zm4.4%204.4v-5h2.6c.4%200%20.8.1%201.1.4.2.2.3.5.3.8%200%20.2%200%20.4-.1.6-.1.2-.2.3-.4.4.3.1.4.3.6.5.2.2.2.5.2.8%200%20.4-.2.8-.4%201.1-.3.3-.7.4-1.2.4h-2.7zm3.1-4.2c-.1-.1-.3-.2-.7-.2h-1.8V24h1.9c.3%200%20.5-.1.6-.2.1-.1.2-.3.2-.5s0-.4-.2-.5zm.3%202.1c-.2-.2-.4-.3-.8-.3h-2v1.8h2c.4%200%20.6-.1.8-.3.1-.2.2-.4.2-.6%200-.3%200-.5-.2-.6zm2.7%201.1l3.2-4.1h.7v5h-.6v-4.1L91.3%2027h-.7v-5h.7v4zm8.4-2v-2h.7v2h.6c.2%200%20.4%200%20.5-.1.1%200%20.2-.1.2-.2l.5-1.1c.1-.2.3-.4.5-.5.2-.1.4-.2.7-.2h.4l-.1.6h-.2c-.2%200-.4%200-.5.1-.1.1-.2.2-.2.3l-.5%201c-.1.1-.2.3-.3.4l1.7%202.7h-.8l-1.4-2.4h-1V27h-.7v-2.4h-1L97.1%2027h-.8l1.7-2.7c-.1-.1-.2-.2-.3-.4l-.5-1c-.1-.1-.1-.2-.2-.3-.1-.1-.3-.1-.5-.1h-.2l-.1-.5h.4c.3%200%20.5%200%20.7.2.2.1.3.3.5.5l.5%201.1c.1.1.1.2.2.2h1.1zm5-2h3.8v.6h-3.2V24h2.8v.6h-2.8v1.7h3.3v.7h-4v-5zm9.6%200v5h-.7v-2.4h-3V27h-.7v-5h.7v2h3v-2h.7zm1.9%204l3.2-4.1h.7v5h-.6v-4.1l-3.2%204.1h-.7v-5h.7V26zm5.2-4h3.8v.6H122V24h2.8v.6H122v1.7h3.3v.7h-4v-5zm9.1%203.9c.4.4.9.6%201.4.6.7%200%201.1-.3%201.6-.6l.4.5c-.5.5-1.1.8-2%20.8-.8%200-1.4-.3-1.9-.8s-.8-1.1-.8-1.9c0-.7.3-1.4.7-1.8.5-.5%201.1-.8%201.9-.8.8%200%201.4.2%202%20.8l-.4.4c-.4-.4-.9-.6-1.5-.6s-1%20.2-1.4.6c-.4.4-.6.8-.6%201.4.1.6.3%201%20.6%201.4zm7.4-3.9l2.2%205h-.7l-.4-1h-3l-.4%201h-.7l2.2-5h.8zm-1.7%203.4h2.5l-1.2-2.8h-.2l-1.1%202.8zm5.6.6l3.3-4h.7v5h-.7v-4.1l-3.2%204.1h-.7v-5h.7v4zm2.8-5.2c-.1.3-.2.5-.4.6-.2.2-.5.2-.8.2-.3%200-.6-.1-.8-.3-.2-.1-.3-.4-.4-.6l.5-.2c0%20.2.1.3.2.4.1.1.3.2.4.2.2%200%20.3%200%20.4-.1.1-.1.2-.2.2-.4l.7.2zm2.2%201.2h4.7v.6h-2V27h-.7v-4.4h-2V22zm9.7.6c.5.5.7%201.1.7%201.9%200%20.7-.3%201.3-.7%201.8-.5.5-1.1.8-1.9.8-.8%200-1.5-.3-2-.8-.4-.5-.7-1.1-.7-1.8s.3-1.3.7-1.8c.5-.5%201.2-.8%202-.8s1.5.3%201.9.7zm-3.3%203.3c.4.4.9.6%201.5.6s1.1-.2%201.4-.6c.3-.4.5-.8.5-1.4%200-.6-.2-1.1-.5-1.4-.4-.4-.9-.6-1.4-.6-.6%200-1.1.2-1.5.6-.3.4-.5.8-.5%201.4-.1.5.1%201%20.5%201.4zm5.2%201.1v-5h2.6c.4%200%20.8.1%201.1.4.2.2.3.5.3.8%200%20.2%200%20.4-.1.6-.1.2-.2.3-.4.4.3.1.4.3.6.5.2.2.2.5.2.8%200%20.4-.2.8-.4%201.1-.3.3-.7.4-1.2.4h-2.7zm3.1-4.2c-.1-.1-.3-.2-.7-.2H159V24h1.9c.3%200%20.5-.1.6-.2.1-.1.2-.3.2-.5-.1-.2-.1-.4-.3-.5zm.3%202.1c-.2-.2-.4-.3-.8-.3h-2v1.8h2c.4%200%20.6-.1.8-.3.1-.2.2-.4.2-.6%200-.3%200-.5-.2-.6z%22%20fill%3D%22%231D1D1B%22%2F%3E%3C%2Fsvg%3E"); } /** * Favicon */ .favicon { display: block; width: 50px; height: 50px; color: #4a40ba; -webkit-transition: color .25s; transition: color .25s; } .favicon:hover { color: #CB0928; } /** * Nav */ /*.nav { background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2288%22%20height%3D%22142%22%20viewBox%3D%220%200%2088%20142%22%3E%3Cstyle%3E.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23e5e5ff%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M20.3%20135.2h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-27.1-6.6h6.8v6.6h-6.8zm6.8%200h6.6v6.6h-6.6zm6.6%200h6.8v6.6h-6.8zm6.9%200h6.8v6.6h-6.8zm6.8%200H54v6.6h-6.6zm-33.9%200h6.8v6.6h-6.8zm40.5%200h6.8v6.6H54zm-33.7-6.9h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-33.9%200h6.8v6.8h-6.8zm40.5%200h6.8v6.8H54zm-47.2%200h6.6v6.8H6.8zm54.1%200h6.8v6.8h-6.8zm-40.6-6.8h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-33.9%200h6.8v6.8h-6.8zm40.5%200h6.8v6.8H54zm-47.2%200h6.6v6.8H6.8zm54.1%200h6.8v6.8h-6.8zm-47.4-6.6h6.8v6.6h-6.8zm40.5%200h6.8v6.6H54zm-47.2%200h6.6v6.6H6.8zm54.1%200h6.8v6.6h-6.8zm-40.6-6.9h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-33.9%200h6.8v6.8h-6.8zm40.5%200h6.8v6.8H54zm-47.2%200h6.6v6.8H6.8zm54.1%200h6.8v6.8h-6.8zm-60.9%200h6.8v6.8H0zm67.7%200h6.6v6.8h-6.6zm-47.4-6.8h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-33.9%200h6.8v6.8h-6.8zm40.5%200h6.8v6.8H54zm-47.2%200h6.6v6.8H6.8zm54.1%200h6.8v6.8h-6.8zM0%2094.6h6.8v6.8H0zm67.7%200h6.6v6.8h-6.6zM27.1%2088h6.6v6.6h-6.6zm6.6%200h6.8v6.6h-6.8zm6.9%200h6.8v6.6h-6.8zM6.8%2088h6.6v6.6H6.8zm54.1%200h6.8v6.6h-6.8zM0%2088h6.8v6.6H0zm67.7%200h6.6v6.6h-6.6zm-47.4-6.9h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-33.9%200h6.8v6.8h-6.8zm40.5%200h6.8v6.8H54zm-47.2%200h6.6v6.8H6.8zm54.1%200h6.8v6.8h-6.8zM0%2081.1h6.8v6.8H0zm67.7%200h6.6v6.8h-6.6zm-47.4-6.8h6.8v6.8h-6.8zm6.8%200h6.6v6.8h-6.6zm6.6%200h6.8v6.8h-6.8zm6.9%200h6.8v6.8h-6.8zm6.8%200H54v6.8h-6.6zm-33.9%200h6.8v6.8h-6.8zm40.5%200h6.8v6.8H54zm-47.2%200h6.6v6.8H6.8zm54.1%200h6.8v6.8h-6.8zm-40.6-6.6h6.8v6.6h-6.8zm6.8%200h6.6v6.6h-6.6zm6.6%200h6.8v6.6h-6.8zm6.9%200h6.8v6.6h-6.8zm6.8%200H54v6.6h-6.6zm-33.9%200h6.8v6.6h-6.8zm40.5%200h6.8v6.6H54zm-47.2%200h6.6v6.6H6.8zm54.1%200h6.8v6.6h-6.8zM6.8%2060.8h6.6v6.8H6.8zm6.7-6.8h6.8v6.8h-6.8zm0-6.6h6.8V54h-6.8zm6.8%200h6.8V54h-6.8zm6.8%200h6.6V54h-6.6zm6.6%206.6h6.8v6.8h-6.8zm0%206.8h6.8v6.8h-6.8zm34%200h6.6v6.8h-6.6zm0-6.8h6.6v6.8h-6.6zm0-6.6h6.6V54h-6.6zm0-20.3h6.6v6.6h-6.6zm0%206.6h6.6v6.8h-6.6zm0%206.9h6.6v6.8h-6.6zm0-20.3h6.6v6.8h-6.6zm0-6.9h6.6v6.8h-6.6zm0-6.6h6.6v6.6h-6.6zM74.3%2054h6.8v6.8h-6.8zm0-6.6h6.8V54h-6.8zm0-20.3h6.8v6.6h-6.8zm0%206.6h6.8v6.8h-6.8zm0%206.9h6.8v6.8h-6.8zm0-20.3h6.8v6.8h-6.8zm0-6.9h6.8v6.8h-6.8zm6.9%2034H88V54h-6.8zm0-20.3H88v6.6h-6.8zm0%206.6H88v6.8h-6.8zm0%206.9H88v6.8h-6.8zm0-20.3H88v6.8h-6.8zM40.6%2047.4h6.8V54h-6.8zm6.8%206.6H54v6.8h-6.6zm6.6%206.8h6.8v6.8H54zM33.7%2040.6h6.8v6.8h-6.8zm-6.6-6.9h6.6v6.8h-6.6zm-6.8-6.6h6.8v6.6h-6.8zM6.8%2040.6h6.6v6.8H6.8zm26.9-27.2h6.8v6.8h-6.8zm6.9%206.9h6.8v6.8h-6.8zm6.8-6.9H54v6.8h-6.6zm6.6%206.9h6.8v6.8H54zM20.3%200h6.8v6.8h-6.8z%22%2F%3E%3C%2Fsvg%3E") no-repeat 100% 100%; } */ .nav__item { margin-bottom: 10px; line-height: 30px; } .nav__item:last-child { margin-bottom: 0; } .nav__link { position: relative; display: block; text-decoration: none; color: #4A40BA; font-weight: 300; -webkit-transition: all .25s; transition: all .25s; } .nav--footer .nav__link { padding-top: 3px; padding-bottom: 3px; line-height: 1.2; } .nav__link:before { content: ''; position: absolute; display: block; width: 6px; height: 10px; top: 50%; left: 12px; margin: -5px 0 0; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%220%200%206%2010%22%3E%3Cpath%20d%3D%22M4%200h2v2H4zM2%202h2v2H2zM0%204h2v2H0zm2%202h2v2H2zm2%202h2v2H4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E"); opacity: 0; -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); -webkit-transition: opacity .25s, -webkit-transform .25s; transition: opacity .25s, -webkit-transform .25s; transition: transform .25s, opacity .25s; transition: transform .25s, opacity .25s, -webkit-transform .25s; } .nav__link:hover, .nav__link.is-active { padding-left: 30px; background: #4A40BA; color: #FFF; } .nav__link:hover:before, .nav__link.is-active:before { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /** * Contacts */ .contacts { position: relative; } .contacts__city { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; color: #393874; } .contacts__link { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; } .contacts__link:hover, .contacts__link:hover .contacts__icon { color: #393874; } .contacts__icon { position: absolute; top: 3px; right: 0; color: #E5E5FF; -webkit-transition: color .25s; transition: color .25s; } /** * Region List */ .region-list { margin: 0 auto; max-width: 280px; } .region-list__item { margin-bottom: 20px; } .region-list__item:last-child { margin-bottom: 0; } /** * Region Card */ .region-card { display: block; color: #000; text-decoration: none; } .region-card__image { position: relative; z-index: 1; display: block; -webkit-transition: all .35s; transition: all .35s; } .region-card__text { font-size: 0.1px; letter-spacing: -1px; display: block; text-align: center; height: 100px; } @-moz-document url-prefix() { .region-card__text { font-size: 0; letter-spacing: normal; } } .region-card__text .region-card__valign { font-size: 14px; letter-spacing: normal; } .region-card__text:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .region-card__text .region-card__valign { display: inline-block; vertical-align: middle; } .region-card__title { display: inline-block; font-size: 28px; line-height: 40px; font-weight: 900; border-bottom: 1px solid rgba(0, 0, 0, 0.5); } .region-card__subtitle { display: block; padding-top: 15px; text-transform: uppercase; letter-spacing: .1em; } @media (min-width: 1280px) { .region-card { position: relative; color: #FFF; } .region-card:hover .region-card__image { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .region-card:hover:before, .region-card:hover .region-card__text { opacity: 1; } .region-card:before { content: ''; position: absolute; display: block; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; background: rgba(57, 56, 116, 0.7); opacity: 0; -webkit-transition: opacity .35s; transition: opacity .35s; } @supports ((-webkit-filter: grayscale(100%)) or (filter: grayscale(100%))) { .region-card:before { background-color: rgba(57, 56, 116, 0.5); } } .region-card__title { border-bottom-color: rgba(255, 255, 255, 0.5); } .region-card__text { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 280px; opacity: 0; -webkit-transition: opacity .35s; transition: opacity .35s; } } /** * Portfolio Nav */ .portfolio-nav__link { display: block; position: relative; height: 50px; overflow: hidden; text-decoration: none; -webkit-transition: background-color .25s; transition: background-color .25s; } .portfolio-nav__link:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; opacity: .1; background: #4A40BA; -webkit-transition: background-color .25s; transition: background-color .25s; } .portfolio-nav__link:hover, .portfolio-nav__link.is-active { background-color: #4A40BA; } .portfolio-nav__link:hover .portfolio-nav__title, .portfolio-nav__link.is-active .portfolio-nav__title { color: #FFF; } .portfolio-nav__link:hover:after, .portfolio-nav__link.is-active:after { background-color: #FFF; } .portfolio-nav__title, .portfolio-nav__count { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; position: relative; z-index: 25; display: block; padding: 15px 20px; -webkit-transition: color .25s; transition: color .25s; } .portfolio-nav__title { float: left; color: #000; } .portfolio-nav__count { float: right; } /** * Portfolio List */ .portfolio-list__item { padding: 20px 10px; border-bottom: 1px solid rgba(57, 56, 116, 0.1); } .portfolio-list__item:last-child { border: 0; } .portfolio-list__item.is-active .portfolio-list__logo { background-color: #4A40BA; } .portfolio-list__card { display: table; width: 100%; } .portfolio-list__image, .portfolio-list__body { display: table-cell; } .portfolio-list__image { width: 80px; } .portfolio-list__body { padding-left: 20px; vertical-align: middle; } .portfolio-list__logo { display: block; width: 80px; height: 80px; border-radius: 50%; background-color: #4A4A49; -webkit-transition: background-color .25s; transition: background-color .25s; } /** * Social */ .social { font-size: 0.1px; letter-spacing: -1px; text-align: center; /** * Mods */ } @-moz-document url-prefix() { .social { font-size: 0; letter-spacing: normal; } } .social__item { font-size: 14px; letter-spacing: normal; } .social__item { display: inline-block; margin: 0 12px; } .social .icon { vertical-align: top; } .social_spacing_s .social__item { margin: 0 8px; } /** * Copyright */ .copyright { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; width: 30em; height: 2em; position: absolute; bottom: 34em; right: 2em; -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } /** * Forms */ /** * Input */ .input { position: relative; display: block; padding-top: 30px; font-size: 18px; line-height: 30px; font-weight: 300; } .input.is-focused .input__control { outline: none; border-color: rgba(57, 56, 116, 0.5); } .input.is-focused:after { opacity: .5; background: #393874; } .input.is-focused .input__label, .input.is-focused .input__error-message, .input.has-value .input__label, .input.has-value .input__error-message, .input.has-error .input__label, .input.has-error .input__error-message { font-size: 12px; -webkit-transform: translateY(-25px); -ms-transform: translateY(-25px); transform: translateY(-25px); } .input.has-error .input__error-message + .input__label { opacity: 0; } .input.has-error .input__label { color: #F6082E; } .input.has-error:after { opacity: .5; background: #F6082E; } .input:after { content: ''; position: absolute; display: block; height: 1px; left: 0; right: 0; bottom: 0; background: #000; opacity: .1; -webkit-transition: opacity .25s, background .25s; transition: opacity .25s, background .25s; } .input__label, .input__error-message { position: absolute; top: 30px; height: 30px; color: #999; -webkit-transition: all .25s; transition: all .25s; } .input__error-message { color: #F6082E; } .input__control { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; padding: 0; margin: 0; font-family: inherit; font-size: inherit; font-weight: inherit; border: 0; border-radius: 0; background: transparent; } .input__control:focus { outline: none; } .input_type_select .input__control { background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%227%22%20viewBox%3D%220%200%209%207%22%3E%3Cpath%20opacity%3D%22.5%22%20d%3D%22M8.5%200l-4%207-4-7z%22%2F%3E%3C%2Fsvg%3E") no-repeat 100% 50%; } /** * Textarea */ .textarea { display: block; padding-top: 20px; } .textarea__control { -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: auto; overflow: auto; margin: 0; padding: 10px 20px; resize: vertical; font-family: inherit; font-size: inherit; font-weight: 300; line-height: 20px; color: #666; background: #FFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; -webkit-transition: border-color .25s; transition: border-color .25s; } .textarea__control::-webkit-input-placeholder { color: #999; } .textarea__control::-moz-placeholder { color: #999; } .textarea__control:-ms-input-placeholder { color: #999; } .textarea__control:focus { outline: none; border-color: rgba(57, 56, 116, 0.5); } .textarea__label { display: block; padding-bottom: 5px; font-size: 18px; line-height: 30px; font-weight: 300; color: #666; } /** * Form */ .form { text-align: left; } .form__row { margin-bottom: 20px; } .form__row_submit { margin: 40px 0 0; } @media (min-width: 768px) { .form__group { font-size: 0.1px; letter-spacing: -1px; margin: 0 -20px; } @-moz-document url-prefix() { .form__group { font-size: 0; letter-spacing: normal; } } .form__group .form__row { font-size: 14px; letter-spacing: normal; } .form__group .form__row { display: inline-block; vertical-align: top; padding: 0 20px; width: 50%; box-sizing: border-box; } .form__group .form__row--wide { width: 100%; } } /** * Contact form */ .contact-form__title { margin-bottom: 5px; font-size: 28px; line-height: 30px; font-weight: 900; } .contact-form_large { margin: 30px 0; } /** * File Input */ .file-input { padding-top: 20px; } .file-input__dropzone { cursor: pointer; } .file-input__icon { position: absolute; top: 14px; left: 15px; } .file-input__label { position: relative; font-size: 18px; font-weight: 300; line-height: 30px; padding: 9px 20px 9px 50px; color: #666; border: 1px solid rgba(0, 0, 0, 0.1); } .file-input__label small { display: block; color: #999; } .file-input__preview .dz-details { position: relative; font-size: 18px; font-weight: 300; line-height: 30px; padding: 9px 20px 9px 50px; color: #666; border: 1px solid rgba(0, 0, 0, 0.1); } .file-input__preview .dz-details .icon { position: absolute; top: 14px; left: 15px; color: #000; } @media (min-width: 768px) { .file-input__label small { display: inline; } } /** * Categories */ .categories { display: inline-block; font-size: 12px; font-weight: 300; color: #999; /** * Mods */ } .categories:after { content: ""; display: table; clear: both; } .categories__item { float: left; white-space: nowrap; } .categories__item:after { content: ''; display: inline-block; vertical-align: top; width: 4px; height: 4px; margin: 8px 10px; background: currentColor; } .categories__item:last-child:after { display: none; } .categories_padded { vertical-align: top; padding: 5px 20px; font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-weight: 500; color: #393874; background: #FFF; } .categories_theme_gray { color: #666; } .portfolio-hero__categories { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .portfolio-hero__categories .categories_padded { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } /** * Frontpage */ /** * Hero Slider */ .hero-slider .slick-dots { display: none; } @media (min-width: 1280px) { .hero-slider .slick-dots { display: block; position: absolute; z-index: 25; top: 40px; left: 40px; } .hero-slider .slick-dots li { float: left; width: 13px; height: 13px; margin-right: 15px; border: 1px solid #FFF; -webkit-transition: background-color .25s; transition: background-color .25s; } .hero-slider .slick-dots li.slick-active { background: #FFF; } .hero-slider .slick-dots button { display: none; } } /** * Hero */ .hero { position: relative; background: #666; /** * Themes */ } .hero__backdrop { height: 320px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; } .hero__content { position: relative; color: #FFF; z-index: 3; text-align: center; padding: 40px 10px; } .hero__subtitle { display: block; width: 260px; margin: 0 auto; padding-bottom: 10px; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid #FFF; } .hero__title { margin-bottom: 20px; font-size: 28px; font-weight: 900; line-height: 40px; width: 300px; margin: 10px auto 25px; } .hero__badge { display: none; } .hero_theme_yellow { background: #F1BC37; } .hero_theme_blue { background: #393874; } .hero_theme_red { background: #F7826B; } @media (min-width: 768px) { .hero:before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; width: 100%; background: rgba(57, 56, 116, 0.8); opacity: 0; -webkit-transition: opacity .35s; transition: opacity .35s; } .hero.is-hover:before { opacity: 1; } .hero__backdrop { position: absolute; height: auto; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .hero__content { font-size: 0.1px; letter-spacing: -1px; margin: 0 auto; padding: 0; height: calc(100vh - 50px); max-width: 600px; } @-moz-document url-prefix() { .hero__content { font-size: 0; letter-spacing: normal; } } .hero__content .hero__valign { font-size: 14px; letter-spacing: normal; } .hero__content:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .hero__content .hero__valign { display: inline-block; vertical-align: middle; } .hero__badge { display: block; } .hero__more { position: absolute; bottom: 40px; left: 0; width: 100%; } .hero__title { position: relative; z-index: 4; display: block; font-size: 58px; line-height: 60px; width: 600px; margin: 25px auto; color: white; position: relative; } @-webkit-keyframes glitch-anim-1 { 0% { clip: rect(142px, 600px, 72px, 0); } 5% { clip: rect(114px, 600px, 142px, 0); } 10% { clip: rect(162px, 600px, 50px, 0); } 15% { clip: rect(10px, 600px, 176px, 0); } 20% { clip: rect(124px, 600px, 151px, 0); } 25% { clip: rect(56px, 600px, 112px, 0); } 30% { clip: rect(136px, 600px, 163px, 0); } 35% { clip: rect(110px, 600px, 14px, 0); } 40% { clip: rect(27px, 600px, 168px, 0); } 45% { clip: rect(76px, 600px, 97px, 0); } 50% { clip: rect(27px, 600px, 61px, 0); } 55% { clip: rect(175px, 600px, 179px, 0); } 60% { clip: rect(73px, 600px, 55px, 0); } 65% { clip: rect(72px, 600px, 69px, 0); } 70% { clip: rect(92px, 600px, 43px, 0); } 75% { clip: rect(29px, 600px, 113px, 0); } 80% { clip: rect(38px, 600px, 24px, 0); } 85% { clip: rect(78px, 600px, 38px, 0); } 90% { clip: rect(22px, 600px, 151px, 0); } 95% { clip: rect(43px, 600px, 2px, 0); } 100% { clip: rect(71px, 600px, 75px, 0); } } @keyframes glitch-anim-1 { 0% { clip: rect(142px, 600px, 72px, 0); } 5% { clip: rect(114px, 600px, 142px, 0); } 10% { clip: rect(162px, 600px, 50px, 0); } 15% { clip: rect(10px, 600px, 176px, 0); } 20% { clip: rect(124px, 600px, 151px, 0); } 25% { clip: rect(56px, 600px, 112px, 0); } 30% { clip: rect(136px, 600px, 163px, 0); } 35% { clip: rect(110px, 600px, 14px, 0); } 40% { clip: rect(27px, 600px, 168px, 0); } 45% { clip: rect(76px, 600px, 97px, 0); } 50% { clip: rect(27px, 600px, 61px, 0); } 55% { clip: rect(175px, 600px, 179px, 0); } 60% { clip: rect(73px, 600px, 55px, 0); } 65% { clip: rect(72px, 600px, 69px, 0); } 70% { clip: rect(92px, 600px, 43px, 0); } 75% { clip: rect(29px, 600px, 113px, 0); } 80% { clip: rect(38px, 600px, 24px, 0); } 85% { clip: rect(78px, 600px, 38px, 0); } 90% { clip: rect(22px, 600px, 151px, 0); } 95% { clip: rect(43px, 600px, 2px, 0); } 100% { clip: rect(71px, 600px, 75px, 0); } } @-webkit-keyframes glitch-anim-2 { 0% { clip: rect(27px, 600px, 165px, 0); } 5% { clip: rect(67px, 600px, 165px, 0); } 10% { clip: rect(137px, 600px, 97px, 0); } 15% { clip: rect(121px, 600px, 44px, 0); } 20% { clip: rect(8px, 600px, 144px, 0); } 25% { clip: rect(128px, 600px, 3px, 0); } 30% { clip: rect(155px, 600px, 154px, 0); } 35% { clip: rect(3px, 600px, 30px, 0); } 40% { clip: rect(30px, 600px, 110px, 0); } 45% { clip: rect(20px, 600px, 152px, 0); } 50% { clip: rect(136px, 600px, 1px, 0); } 55% { clip: rect(13px, 600px, 2px, 0); } 60% { clip: rect(71px, 600px, 99px, 0); } 65% { clip: rect(105px, 600px, 153px, 0); } 70% { clip: rect(32px, 600px, 107px, 0); } 75% { clip: rect(103px, 600px, 24px, 0); } 80% { clip: rect(142px, 600px, 83px, 0); } 85% { clip: rect(43px, 600px, 49px, 0); } 90% { clip: rect(110px, 600px, 145px, 0); } 95% { clip: rect(123px, 600px, 48px, 0); } 100% { clip: rect(57px, 600px, 160px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(27px, 600px, 165px, 0); } 5% { clip: rect(67px, 600px, 165px, 0); } 10% { clip: rect(137px, 600px, 97px, 0); } 15% { clip: rect(121px, 600px, 44px, 0); } 20% { clip: rect(8px, 600px, 144px, 0); } 25% { clip: rect(128px, 600px, 3px, 0); } 30% { clip: rect(155px, 600px, 154px, 0); } 35% { clip: rect(3px, 600px, 30px, 0); } 40% { clip: rect(30px, 600px, 110px, 0); } 45% { clip: rect(20px, 600px, 152px, 0); } 50% { clip: rect(136px, 600px, 1px, 0); } 55% { clip: rect(13px, 600px, 2px, 0); } 60% { clip: rect(71px, 600px, 99px, 0); } 65% { clip: rect(105px, 600px, 153px, 0); } 70% { clip: rect(32px, 600px, 107px, 0); } 75% { clip: rect(103px, 600px, 24px, 0); } 80% { clip: rect(142px, 600px, 83px, 0); } 85% { clip: rect(43px, 600px, 49px, 0); } 90% { clip: rect(110px, 600px, 145px, 0); } 95% { clip: rect(123px, 600px, 48px, 0); } 100% { clip: rect(57px, 600px, 160px, 0); } } .hero__title:before, .hero__title:after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; background: transparent; clip: rect(0, 0, 0, 0); } .hero__title:after { left: 2px; text-shadow: -1px 0 red; -webkit-animation: glitch-anim-1 2s infinite linear alternate-reverse; animation: glitch-anim-1 2s infinite linear alternate-reverse; } .hero__title:before { left: -2px; text-shadow: 2px 0 teal; -webkit-animation: glitch-anim-2 3s infinite linear alternate-reverse; animation: glitch-anim-2 3s infinite linear alternate-reverse; } .hero__title_width_s { width: 360px; } } @media (min-width: 1280px) { .hero__content { height: 100vh; } } /** * Cards etc. */ /** * Common List */ .common-list:after { content: ""; display: table; clear: both; } @media (min-width: 768px) { .common-list__item { float: left; width: 50%; } } /** * Common Card */ .common-card { text-decoration: none; color: #000; background: #FFF; } .common-card, .common-card__image, .common-card__title, .common-card__text { display: block; } .common-card__image { height: 320px; background-size: cover; background-position: 50% 50%; } .common-card__text { text-align: center; } .common-card__title { margin: 0 30px; padding: 10px 0 40px; font-size: 28px; line-height: 40px; font-weight: 900; border-top: 1px solid rgba(0, 0, 0, 0.5); } .common-card__categories { padding: 15px 0 14px; vertical-align: top; background: none; } .common-card_style_expanded .common-card__text { background: #E5E5E3; } @media (min-width: 768px) { .common-card__title { margin-left: 30px; margin-right: 30px; } .common-card__text { box-shadow: inset 1px 0 0 0 #F1F1EF; } .common-card_style_expanded { background: #F1F1EF; } .common-card_style_expanded .common-card__text { box-shadow: inset 1px 0 0 0 #F1F1EF; } } @media (min-width: 768px) { .common-card { position: relative; color: #FFF; height: 480px; overflow: hidden; /** * Mods */ } .common-card:before { content: ''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); -webkit-transition: opacity .35s; transition: opacity .35s; opacity: 0; } .common-card[href]:hover:before, .common-card[href]:hover .common-card__text { opacity: 1; } .common-card[href]:hover .common-card__image { -webkit-transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); } .common-card__image { position: relative; z-index: 1; height: 480px; -webkit-transition: -webkit-transform .35s; transition: -webkit-transform .35s; transition: transform .35s; transition: transform .35s, -webkit-transform .35s; } .common-card__text { position: absolute; z-index: 5; top: 50%; left: 0; width: 100%; margin-top: -50px; -webkit-transition: opacity .35s; transition: opacity .35s; opacity: 0; box-shadow: none; } .common-card__categories { color: #FFF; } .common-card__title { margin-left: auto; margin-right: auto; max-width: 90%; border-color: rgba(255, 255, 255, 0.5); } /*.common-card_type_team:hover .common-card__image { -webkit-filter: grayscale(100%); filter: grayscale(100%); }*/ .common-card_type_article:hover .common-card__image { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .common-card_type_team:before, .common-card_type_article:before { background-color: rgba(57, 56, 116, 0.7); } @supports ((-webkit-filter: grayscale(100%)) or (filter: grayscale(100%))) { .common-card_type_team:before, .common-card_type_article:before { background-color: rgba(57, 56, 116, 0.5); } } @media (min-width: 1280px) { .common-card__title { max-width: 450px; } } .common-card_type_team .common-card__image, .common-card_type_article .common-card__image { -webkit-transition: all .35s; transition: all .35s; } .common-card_style_expanded { color: #000; height: auto; } .common-card_style_expanded:before { height: 480px; } .common-card_style_expanded:hover { color: #FFF; } .common-card_style_expanded:hover .common-card__text { background-color: #393874; } .common-card_style_expanded:hover .common-card__title { border-color: rgba(255, 255, 255, 0.5); } .common-card_style_expanded:hover .common-card__categories { color: #FFF; } .common-card_style_expanded .common-card__text { height: 100%; position: relative; top: auto; left: auto; margin: 0; opacity: 1; box-shadow: none; -webkit-transition: background-color .35s; transition: background-color .35s; } .common-card_style_expanded .common-card__title { border-color: rgba(0, 0, 0, 0.5); -webkit-transition: border-color .35s; transition: border-color .35s; } .common-card_style_expanded .common-card__categories { color: #999; -webkit-transition: color .35s; transition: color .35s; } } /** * Text Card */ .text-card { box-sizing: border-box; padding: 40px 30px; background: #F1F1EF; /** * Themes */ } .text-card__title { font-size: 28px; line-height: 30px; font-weight: 900; margin: 0 0 15px; } .text-card__text { font-size: 18px; line-height: 30px; font-weight: 300; } .text-card__more { margin-top: 25px; } .container .text-card_download { margin: 30px -20px; } .container .text-card_download:last-child { margin-bottom: 0 !important; } .text-card_download .section-title { opacity: 1; } @media (min-width: 768px) { .container .text-card_download { margin: 30px 0; } } .text-card_theme_red { color: #FFF; background: #CB0928; } .text-card_theme_blue { color: #FFF; background: #160C25; } .text-card_theme_green { color: #FFF; background: #17AC84 -webkit-linear-gradient(45deg, #3D779D, #17AC84); background: #17AC84 linear-gradient(45deg, #3D779D, #17AC84); } @media (min-width: 768px) { .text-card { padding: 60px; } } @media (min-width: 1280px) { .text-card { padding: 60px 80px; } } /** * Quote Card */ .quote-card { color: #FFF; background: #CB0928 -webkit-linear-gradient(45deg, #F47920, #E24163); background: #CB0928 linear-gradient(45deg, #F47920, #E24163); } .quote-card__quote { padding: 40px 30px; } .quote-card__text { font-size: 28px; line-height: 40px; font-weight: 300; } .quote-card__text strong { font-weight: 900; } .quote-card__cite { display: block; margin-top: 40px; font-weight: 300; } .quote-card__name { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-size: 14px; font-weight: 500; color: #FFF; display: block; margin-bottom: 10px; } @media (min-width: 768px) { .quote-card__quote { padding: 60px; } .quote-card__cite { margin-top: 60px; } } @media (min-width: 1280px) { .quote-card__quote { /*padding: 60px 80px;*/ padding: 11.5% 15%; } } /** * Photo Slider */ .photo-slider { text-align: left; margin: 30px 0; } .photo-slider__nav { padding: 10px 25px; background: #FFF; } .photo-slider__nav:after { content: ""; display: table; clear: both; } .photo-slider__nav .slick-prev, .photo-slider__nav .slick-next { position: absolute; top: 0; } .photo-slider__nav .slick-prev { left: 0; } .photo-slider__nav .slick-next { right: 0; } .photo-slider__nav-item { position: relative; cursor: pointer; outline: none; } .photo-slider__nav-item img { width: 100%; } .photo-slider__nav-item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #FFF; opacity: 0; -webkit-transition: opacity .25s; transition: opacity .25s; } .photo-slider__nav-item:hover:before, .photo-slider__nav-item.slick-current:before { opacity: 0; } .photo-slider__thumbnail { display: block; margin: 0 auto; } .photo-slider__slider .slick-prev, .photo-slider__slider .slick-next { display: none; position: absolute; top: 185px; } .photo-slider__slider .slick-prev { left: -120px; } .photo-slider__slider .slick-next { right: -120px; } .photo-slider__image { display: block; max-width: 100%; height: auto; } .photo-slider__caption { position: relative; padding: 0 20px; font-size: 14px; font-weight: 300; line-height: 20px; color: #666; } .photo-slider__count { margin-top: 20px; } .photo-slider__item { outline: none; } .photo-slider__text { padding-top: 20px; } .photo-slider__text p { margin-bottom: 20px; } .photo-slider__text p:last-child { margin-bottom: 0; } .container .photo-slider { margin-left: -20px; margin-right: -20px; } @media (min-width: 768px) { .photo-slider__caption { padding: 0; } .photo-slider__text { padding-right: 160px; } .photo-slider__count { position: absolute; top: 0; right: 0; } .container .photo-slider { margin-left: auto; margin-right: auto; } } @media (min-width: 1280px) { .photo-slider__slider .slick-prev, .photo-slider__slider .slick-next { display: block; } } /** * Portfolio */ /** * Portfolio Hero */ .portfolio-hero { font-size: 0.1px; letter-spacing: -1px; position: relative; height: 320px; min-height: 480px; text-align: center; color: #FFF; background: #000; } @-moz-document url-prefix() { .portfolio-hero { font-size: 0; letter-spacing: normal; } } .portfolio-hero .portfolio-hero__content { font-size: 14px; letter-spacing: normal; } .portfolio-hero:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .portfolio-hero .portfolio-hero__content { display: inline-block; vertical-align: middle; } .portfolio-hero__image { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: 100%; background-size: cover; background-position: 50% 50%; opacity: .5; } .portfolio-hero__content { position: relative; z-index: 3; box-sizing: border-box; padding: 0 40px; max-width: 400px; margin: 0 auto; } .portfolio-hero__type { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-size: 14px; color: #FFF; } .portfolio-hero__title { font-size: 28px; line-height: 40px; font-weight: 900; margin: 10px 0 20px; } @media (max-width: 768px) { /* Добавил */ .portfolio-hero { display: flex; align-items: center; } .portfolio-hero:before { display: none; } } @media (min-width: 768px) { .portfolio-hero { height: calc(100vh - 50px); } /* .portfolio-hero:after { content: ''; position: absolute; z-index: 2; left: 50%; bottom: 40px; width: 21px; height: 33px; background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2221%22%20height%3D%2233%22%20viewBox%3D%22-41.2%2013.3%2021%2033%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23FFF%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M-20.7%2035.8c0%205.5-4.5%2010-10%2010s-10-4.5-10-10v-12c0-5.5%204.5-10%2010-10s10%204.5%2010%2010v12zm-10-16.7v6.1%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23FFF%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M-30.7%2038.2l-2.5-2.5%202.5%202.5%202.5-2.5%22%2F%3E%3C%2Fsvg%3E"); }*/ .portfolio-hero__content { max-width: 550px; padding: 40px 0 70px; } .portfolio-hero__title { font-size: 58px; line-height: 60px; margin: 20px 0 25px; } } @media (min-width: 1280px) { .portfolio-hero { height: 100vh; } } /** * Portfolio Header */ .portfolio-header { position: static; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #F1F1EF; } .portfolio-header__prev, .portfolio-header__next { display: none; } .portfolio-header__info { max-width: 540px; margin: 0 auto; } @media (min-width: 768px) { .portfolio-header { position: -webkit-sticky; position: sticky; top: 50px; z-index: 50; } .portfolio-header__prev, .portfolio-header__next { position: absolute; top: 0; display: block; padding: 0; } .portfolio-header__prev { left: 0; border-right: 1px solid rgba(0, 0, 0, 0.1); } .portfolio-header__next { right: 0; border-left: 1px solid rgba(0, 0, 0, 0.1); } } @media (min-width: 1280px) { .portfolio-header { top: 0; } .portfolio-header__info { max-width: 640px; } } /** * Portfolio Lead */ .portfolio-lead__main { padding: 60px 20px; } @media (max-width: 767px) { .portfolio-lead__main { padding: 30px 20px; } } .portfolio-lead__summary { padding-bottom: 40px; } .portfolio-lead__title { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; display: inline-block; vertical-align: top; font-size: 14px; font-weight: 500; margin-bottom: 15px; line-height: 20px; } .portfolio-lead__title:after { content: ''; display: inline-block; width: 40px; margin-left: 10px; vertical-align: middle; border-top: 1px solid rgba(0, 0, 0, 0.1); } @media (min-width: 768px) { .portfolio-lead__main { padding: 60px 0; } .portfolio-lead__main:after { content: ""; display: table; clear: both; } .portfolio-lead__summary { float: left; width: 200px; padding-bottom: 0; } .portfolio-lead__content { margin-left: 240px; } } /** * Portfolio Info */ .portfolio-info { position: relative; text-align: center; } .portfolio-info:after { content: ""; display: table; clear: both; } .portfolio-info__item_date, .portfolio-info__item_link { display: inline-block; white-space: nowrap; line-height: 69px; font-weight: 300; } .portfolio-info__item_date { color: #666; } .portfolio-info__item_link { margin-bottom: -1px; border-bottom: 1px solid #393874; } @media (min-width: 768px) { .portfolio-info__item_date { float: left; } .portfolio-info__item_link { float: right; } .portfolio-info__item_social { position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -120px; width: 240px; } } @media (min-width: 1280px) { .portfolio-info__container { max-width: 640px; } } /** * Portfolio Quote */ .portfolio-quote { text-align: center; } .portfolio-quote__cite { display: block; margin-bottom: 20px; } .portfolio-quote__image { display: block; margin: 0 auto 20px; border-radius: 50%; } .portfolio-quote__name { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; display: block; margin-bottom: 10px; font-size: 14px; color: #FFF; } .portfolio-quote__position { font-size: 300; } .portfolio-quote__name, .portfolio-quote__position { opacity: .5; } .portfolio-quote__text { font-size: 18px; line-height: 30px; } .portfolio-quote__text p { margin-bottom: 20px; } .portfolio-quote__text p:last-child { margin-bottom: 0; } /** * Portfolio Slider */ .portfolio-slider { margin-top: 30px; } .portfolio-slider__dots { text-align: center; margin: 0 0 30px; height: 10px; } .portfolio-slider__title { font-size: 28px; line-height: 40px; font-weight: 900; margin-bottom: 15px; } .portfolio-slider__text { font-weight: 300; } .portfolio-slider .graph { margin-bottom: 30px; } .portfolio-slider .slick-prev, .portfolio-slider .slick-next { display: none; position: absolute; top: 50%; margin-top: -40px; } @media (min-width: 1280px) { .portfolio-slider .slick-prev, .portfolio-slider .slick-next { display: block; } } .portfolio-slider .slick-prev { left: -120px; } .portfolio-slider .slick-next { right: -120px; } /** * Section Title */ .section-title { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; display: inline-block; vertical-align: top; min-width: 40px; font-size: 14px; line-height: 30px; font-weight: 500; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 15px; margin-top: 50px; } .section-title:first-child { margin-top: 0; } .section-title_inline { display: block; padding: 0; line-height: 20px; border: 0; min-width: auto; } .section-title_inline:after { content: ''; display: inline-block; width: 40px; margin-left: 10px; vertical-align: middle; border-top: 1px solid rgba(0, 0, 0, 0.1); } .section-title_theme_white { color: #FFF; border-color: #FFF; opacity: .5; } .section-title_theme_white:after { border-color: #FFF; } .section-title_theme_red { color: #F7826B; border-color: #F7826B; } .section-title_theme_red:after { border-color: #F7826B; } .section-title_theme_green { color: #17AC84; border-color: #17AC84; } .section-title_theme_green:after { border-color: #17AC84; } .section-title_theme_orange { color: #F47920; border-color: #F47920; } .section-title_theme_orange:after { border-color: #F47920; } /** * Cast */ .cast { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; text-align: center; font-size: 14px; color: inherit; } .cast__title { font-weight: 300; opacity: .5; } .cast__item { margin-bottom: 10px; } .cast__item:last-child { margin-bottom: 0; } @media (min-width: 768px) { .cast__title, .cast__desc { display: inline-block; margin: 0 15px; width: 40%; } .cast__title { text-align: right; } .cast__desc { text-align: left; } .cast__item { margin-bottom: 25px; } .cast__item:last-child { margin-bottom: 0; } } h1 + .cast, h2 + .cast { margin-top: 35px; } /** * Summary List */ .summary-list dt { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-weight: 500; } .summary-list dd { font-weight: 300; margin-bottom: 15px; } .summary-list dd:last-child { margin-bottom: 0; } /** * Feats */ .feats__item { text-align: center; display: inline-block; vertical-align: top; margin-bottom: 45px; padding: 0 20px; } .feats__icon { display: block; margin: 0 auto 20px; } .feats__title { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-size: 14px; font-weight: 500; color: #000; margin-bottom: 10px; } .feats__text { font-size: 14px; font-weight: 300; line-height: 20px; color: #666; } .feats__more { margin-top: 10px; line-height: 30px; } .feats__more-link { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; display: inline-block; border-bottom: 1px solid currentColor; } @media (min-width: 768px) { .feats { font-size: 0.1px; letter-spacing: -1px; } @-moz-document url-prefix() { .feats { font-size: 0; letter-spacing: normal; } } .feats__item { font-size: 14px; letter-spacing: normal; } .feats__item { box-sizing: border-box; width: 50%; padding: 0 50px; } } @media (min-width: 1280px) { .feats__item { width: 33%; padding: 0 35px; } } /** * Banner */ .banner { /** * Themes */ /** * Mods */ } .banner:after { content: ""; display: table; clear: both; } .banner__image { font-size: 0.1px; letter-spacing: -1px; position: relative; text-align: center; height: 320px; background: #000; } @-moz-document url-prefix() { .banner__image { font-size: 0; letter-spacing: normal; } } .banner__image .valign { font-size: 14px; letter-spacing: normal; } .banner__image:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .banner__image .valign { display: inline-block; vertical-align: middle; } .banner__icon { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } .banner__content { padding: 60px 40px; } .banner_theme_green .banner__image { background: #17AC84 -webkit-linear-gradient(45deg, #3D779D, #17AC84); background: #17AC84 linear-gradient(45deg, #3D779D, #17AC84); } .banner_theme_pink .banner__image { background: #E24163 -webkit-linear-gradient(45deg, #F47920, #E24163); background: #E24163 linear-gradient(45deg, #F47920, #E24163); } .banner_reversed .banner__image { left: 0; right: 50%; } .banner_reversed .banner__content { float: right; } @media (min-width: 768px) { .banner { position: relative; } .banner__content { width: 50%; min-height: 520px; } .banner__image { position: absolute; top: 0; left: 50%; right: 0; height: 100%; } .banner__icon { -webkit-transform: none; -ms-transform: none; transform: none; } } @media (min-width: 1280px) { .banner__content { padding: 60px 80px; } } /** * Banner Slider */ .banner-slider .slick-pager { position: absolute; bottom: 40px; left: 0; margin-left: 40px; } .banner-slider .banner__content { padding-bottom: 90px; } @media (min-width: 768px) { .banner-slider .slick-pager { left: 50%; } } @media (min-width: 1280px) { .banner-slider .slick-pager { margin-left: 80px; } } /** * Container */ .container { max-width: 640px; margin-left: auto; margin-right: auto; } /** * Graph */ .graph { text-align: left; padding: 20px; background: #FFF; } .graph__header { position: relative; } .graph__title { margin-bottom: 15px; font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-size: 14px; font-weight: 300; color: #343845; } .graph__summary { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; line-height: 20px; margin-top: 20px; } .graph__summary_increased { color: #17AC84; } .graph__summary_increased:before { content: ''; height: 0; width: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-bottom: 4px solid currentColor; display: inline-block; vertical-align: middle; margin-right: 10px; } .graph__summary_decreased { color: #CB0928; } .graph__summary_decreased:before { content: ''; height: 0; width: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; display: inline-block; vertical-align: middle; margin-right: 10px; } @media (min-width: 768px) { .graph { padding: 20px 40px; } .graph__summary { position: absolute; top: 0; right: 0; margin: 0; } } /** * Stats */ .stats { font-size: 0.1px; letter-spacing: -1px; margin-bottom: -20px; } @-moz-document url-prefix() { .stats { font-size: 0; letter-spacing: normal; } } .stats__item { font-size: 14px; letter-spacing: normal; } .stats__item { display: inline-block; vertical-align: top; line-height: 30px; padding-right: 20px; margin-right: 20px; margin-bottom: 20px; border-right: 1px solid #E5E5E3; } .stats__item:last-child { border: 0; } .stats__title { display: block; font-size: 12px; font-weight: 300; color: #54667A; } /** * Slick Pager */ .slick-pager { font-size: 0.1px; letter-spacing: -1px; display: inline-block; vertical-align: top; height: 10px; /** * Themes */ } @-moz-document url-prefix() { .slick-pager { font-size: 0; letter-spacing: normal; } } .slick-pager li { font-size: 14px; letter-spacing: normal; } .slick-pager li { display: inline-block; vertical-align: top; margin-left: 20px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #666; -webkit-transition: all .25s; transition: all .25s; overflow: hidden; } .slick-pager li:first-child { margin-left: 0; } .slick-pager li.slick-active { border-color: #000; background: #000; } .slick-pager button { opacity: 0; } .slick-pager_theme_white li.slick-active { border-color: #FFF; background-color: #FFF; } /** * Contacts */ /** * Contacts Detailed */ .contacts-detailed { position: relative; color: #FFF; background-color: #160C25; } .contacts-detailed:after { content: ""; display: table; clear: both; } .contacts-detailed__map-container { height: 320px; background: #393874; } .contacts-detailed__map { position: relative; width: 100%; height: 100%; } @media (min-width: 768px) { .contacts-detailed__content { float: left; width: 50%; } .contacts-detailed__map-container { position: absolute; top: 0; left: 50%; right: 0; bottom: 0; height: auto; } } /** * Contacts List */ .contacts-list { padding: 60px 40px 40px; background: #160C25; } .contacts-list__title { text-transform: uppercase; letter-spacing: .1em; } .contacts-list__title.is-active .contacts-list__toggle { color: #FFF; } .contacts-list__title.is-active .contacts-list__toggle:after { opacity: 1; } .contacts-list__title, .contacts-list__desc { margin-bottom: 20px; } .contacts-list__toggle { display: inline-block; cursor: pointer; color: #69F; -webkit-transition: color .25s; transition: color .25s; } .contacts-list__toggle:after { content: ''; display: inline-block; width: 40px; margin-left: 10px; vertical-align: middle; border-top: 1px solid currentColor; opacity: 0; -webkit-transition: opacity .25s; transition: opacity .25s; } .contacts-list__toggle:hover { color: #FFF; } .contacts-list__desc { font-weight: 300; } .contacts-list__schedule { margin-top: 20px; color: #7A8BA2; } @media (min-width: 1280px) { .contacts-list { padding: 60px 80px 40px; } } /** * Accordion */ .accordion { margin: 40px 0; padding-left: 50px; } .accordion__title { position: relative; margin-bottom: 20px; } .accordion__title:before { content: ''; display: block; position: absolute; top: 0; left: -50px; width: 30px; height: 30px; background: #393874 url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%2210%22%20viewBox%3D%22-11%2011%206%2010%22%3E%3Cpath%20d%3D%22M-11%2011h2v2h-2zm2%202h2v2h-2zm2%202h2v2h-2zm-2%202h2v2h-2zm-2%202h2v2h-2z%22%20fill%3D%22%23FFF%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%; -webkit-transition: background-color .25s, -webkit-transform .25s; transition: background-color .25s, -webkit-transform .25s; transition: background-color .25s, transform .25s; transition: background-color .25s, transform .25s, -webkit-transform .25s; } .accordion__title:hover:before { background-color: #CB0928; } .accordion__title.is-active:before { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .accordion__desc { font-size: 14px; line-height: 20px; color: #666; margin-bottom: 30px; } .accordion__desc:last-child { margin-bottom: 0; } /** * Downloads */ .downloads, .typography .downloads { margin: 30px 0; } .downloads__item, .typography .downloads__item { margin-bottom: 20px; padding: 0; } .downloads__item:before, .typography .downloads__item:before { display: none; } .downloads__item:last-child, .typography .downloads__item:last-child { margin-bottom: 0; } .downloads__link, .typography .downloads__link { display: block; padding: 10px 20px; color: #FFF; border: 1px solid #FFF; -webkit-transition: background-color .25s, color .25s; transition: background-color .25s, color .25s; } .downloads__link:hover, .typography .downloads__link:hover { background-color: #FFF; color: #000; } .downloads__icon, .typography .downloads__icon { display: block; margin-bottom: 5px; } @media (min-width: 768px) { .downloads__link, .typography .downloads__link { position: relative; padding: 9px 20px 9px 60px; } .downloads__icon, .typography .downloads__icon { position: absolute; top: 50%; left: 20px; margin-top: -12px; } .downloads__title, .typography .downloads__title { display: inline-block; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } .downloads__meta, .typography .downloads__meta { position: absolute; top: 9px; right: 20px; } } /** * Common page */ /** * Section */ .section__header { padding: 40px 20px; text-align: center; } .section__subtitle { font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; font-size: 14px; } .section__title { font-size: 28px; line-height: 40px; font-weight: 900; margin: 15px 0 0; } .section__text { margin-top: 25px; font-size: 18px; line-height: 30px; font-weight: 300; } @media (min-width: 768px) { .section__header { padding: 55px 0; max-width: 650px; margin: 0 auto; } .section__title { font-size: 58px; line-height: 60px; } } /** * Common Section */ .common-section { text-align: center; /** * Mods */ } .common-section__container { padding: 50px 20px; } @media (min-width: 768px) { .common-section__container { padding: 50px 0; } } .common-section__image { display: block; width: 100%; height: auto; } .common-section + .common-section .common-section__container { padding-top: 0; } .common-section_align_left { text-align: left; } .common-section_solution, .common-section_case, .common-section_theme_x-light { margin-bottom: 50px; } .common-section_solution { color: #FFF; background: #E24163; } .common-section_quote { color: #FFF; background: #180020; } .common-section_quote .common-section__container { padding: 50px 20px !important; } @media (min-width: 768px) { .common-section_quote .common-section__container { padding: 50px 0 75px !important; } } .common-section_cast { background: #000 url("../images/cast.jpg") no-repeat 50% 50%; background-size: cover; color: #FFF; } .common-section_cast .common-section__container { padding: 50px 20px !important; } @media (min-width: 768px) { .common-section_cast .common-section__container { padding: 50px 0 75px !important; } } .common-section_case { background-repeat: no-repeat; background-position: 50% 50%; background-image: url("../images/case.jpg"); background-image: -webkit-image-set("../images/case.webp" type("image/webp"), "../images/case.jpg" type("image/jpg")); background-image: image-set("../images/case.webp" type("image/webp"), "../images/case.jpg" type("image/jpg")); background-size: cover; } .common-section_case .common-section__container { padding-top: 50px !important; } @media (min-width: 768px) { .common-section_case { font-size: 0.1px; letter-spacing: -1px; height: 800px; } @-moz-document url-prefix() { .common-section_case { font-size: 0; letter-spacing: normal; } } .common-section_case .container { font-size: 14px; letter-spacing: normal; } .common-section_case:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .common-section_case .container { display: inline-block; vertical-align: middle; } } @media (min-width: 1280px) { .common-section_case { background-repeat: no-repeat; background-position: 50% 50%; background-attachment: fixed; background-image: url("../images/case.jpg"); background-image: -webkit-image-set("../images/case.webp" type("image/webp"), "../images/case.jpg" type("image/jpg")); background-image: image-set("../images/case.webp" type("image/webp"), "../images/case.jpg" type("image/jpg")); background-size: auto; } } .common-section_theme_x-light { background-color: #E5E5E3; } /** * Region Notice */ .region-notice { position: absolute; z-index: 1000; top: 0; left: 0; right: 0; font-size: 10px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: #999; padding: 5px 10px; text-align: center; color: #FFF; background: rgba(0, 0, 0, 0.8); -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .region-notice.is-dismissed { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .region-notice__text, .region-notice__actions, .region-notice__actions-item { display: inline-block; margin: 0 7px; } /* ======================================================================== Trumps ======================================================================== */ /** * Helper classes and overrides */ /** * Helper classes */ .visually-hidden { border: 0 !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; } .is-hidden { display: none; } .highlight { color: #CB0928; } /** * Bounce */ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30%); transform: translateY(-30%); } 60% { -webkit-transform: translateY(-15%); transform: translateY(-15%); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30%); transform: translateY(-30%); } 60% { -webkit-transform: translateY(-15%); transform: translateY(-15%); } } .icon { fill: currentColor; overflow: hidden; /** * Mods */ } .icon_direction_up { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .icon_direction_down { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .icon_direction_right { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media (min-width: 1700px){ .common-card { height: 680px; } } @media (min-width: 2200px){ .common-card { height: 880px; } .text-card__title { font-size: 28pt; line-height: 1.4; } .text-card__text { font-size: 18pt; line-height: 1.4; } .quote-card__name { font-size: 24pt; line-height: 1.4; } .quote-card__quote{ font-size: 16pt; } } img.blur { -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } img.blur.lazyload { -webkit-filter: blur(15px); filter: blur(15px); } img.blur.lazyloaded { -webkit-filter: blur(0px); filter: blur(0px); } .container--fluid { max-width: 1400px; padding: 0; } .container--big { max-width: 1030px; padding: 0 15px; } .container--middle { max-width: 860px; padding: 0 15px; } .container--small { max-width: 760px; padding: 0 15px; } .my-40 { margin-top: 40px; margin-bottom: 40px; } .mt-30 { margin-top: 30px; } .mt-50 { margin-top: 50px; } .mt-80 { margin-top: 80px; } .text-left { text-align: left; } .text-icon { display: inline-block; vertical-align: middle; max-width: 55px; max-height: 55px; width: 100%; height: auto; } .text-icon--small { max-width: 30px; max-height: 30px; } .bg-white { background-color: #ffffff; } .bg-pink-l { background-color: #fff7eb; } .bg-grey { background-color: #f4f7fc; } .portfolio-image-section { padding-top: 55px; padding-bottom: 30px; } @media (max-width: 767px) { .portfolio-image-section { position: relative; overflow: hidden; } } .portfolio-image-section .container { display: -webkit-box; display: -ms-flexbox; display: flex; } .portfolio-image-section__img { position: relative; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; width: 35%; } @media (max-width: 767px) { .portfolio-image-section__img { position: absolute; top: 55px; left: 0; width: 100%; height: calc(100% - 85px); opacity: 0.2; } } .portfolio-image-section__img img { position: absolute; left: -30px; bottom: 0; width: calc(100% + 30px); height: auto; } @media (max-width: 1199px) { .portfolio-image-section__img img { left: 0; top: 0; width: 100%; } } @media (max-width: 767px) { .portfolio-image-section__img img { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } } .portfolio-image-section__text { max-width: 860px; padding: 0 15px; } .section-bg { position: relative; padding-top: 70px; padding-bottom: 45vw; margin-bottom: -170px; } @media (max-width: 991px) { .section-bg { margin-bottom: 0; } } @media (max-width: 1279px) { .section-bg { padding-bottom: 60vw; } } .section-bg .fancybox-link { position: absolute; bottom: 0; width: 100%; } .section-bg img { width: 100%; height: auto; } .section-bg-2 { position: relative; padding-top: 260px; padding-bottom: 213px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(36, 68, 112, 0)), color-stop(72.4%, #1E3A61)); background-image: -o-linear-gradient(top, rgba(36, 68, 112, 0) 0%, #1E3A61 72.4%); background-image: linear-gradient(180deg, rgba(36, 68, 112, 0) 0%, #1E3A61 72.4%); background-repeat: no-repeat; color: #fff; } @media (max-width: 991px) { .section-bg-2 { padding-top: 90px; padding-bottom: 20vw; } } .section-bg-2 .fancybox-link { position: absolute; bottom: 0; width: 100%; } .section-bg-2 img { width: 100%; height: auto; } .letter-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 31px 15px 56px; background: #2E4465; } .section-image { padding-top: 55px; } .section-image__img { width: 100%; margin-top: 100px; height: auto; } @media (max-width: 991px) { .section-image__img { margin-top: 50px; } } @media (max-width: 575px) { .section-image__img { margin-top: 30px; } } .section-multy { position: relative; padding-top: 50px; } .section-multy::before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='1595' height='1212' viewBox='0 0 1595 1212' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1451' cy='227' r='226.5' stroke='%23FE6F56'/%3E%3Ccircle cx='1384' cy='786' r='44.5' stroke='%23FE6F56'/%3E%3Ccircle cx='1233' cy='1062' r='75.5' stroke='%23FE6F56'/%3E%3Ccircle cx='109' cy='985' r='226.5' stroke='%23FE6F56'/%3E%3Ccircle cx='176' cy='622' r='66.5' stroke='%23FE6F56'/%3E%3Ccircle cx='34.5' cy='441.5' r='130' stroke='%23FE6F56'/%3E%3C/svg%3E%0A"); background-size: 100% auto; background-repeat: no-repeat; background-position: center; pointer-events: none; content: ""; } .section-multy-left-img-link { position: absolute; z-index: 1; left: 0; bottom: -5%; width: 38.5%; } @media (max-width: 1700px) { .section-multy-left-img-link { top: 60%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 32%; } } @media (max-width: 575px) { .section-multy-left-img-link { top: 67%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 32%; } } @media (max-width: 360px) { .section-multy-left-img-link { top: 69%; } } .section-multy-right-img-link { position: absolute; z-index: 1; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 34%; } @media (max-width: 575px) { .section-multy-right-img-link { top: 54%; } } .vacancy-img { position: relative; } .vacancy-img::before { position: absolute; z-index: 2; width: 10%; height: 92%; top: -23%; right: 23%; background-image: url("data:image/svg+xml,%3Csvg width='184' height='332' viewBox='0 0 184 332' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M90.9993 178.499L88.0919 177.76L90.9993 178.499ZM182.858 308.856C183.882 307.554 183.658 305.668 182.356 304.643L161.141 287.941C159.84 286.917 157.953 287.141 156.928 288.443C155.904 289.745 156.128 291.631 157.43 292.656L176.287 307.502L161.442 326.359C160.417 327.661 160.641 329.547 161.943 330.572C163.245 331.597 165.131 331.372 166.156 330.07L182.858 308.856ZM1.49942 3.49697C0.771751 6.40738 0.770611 6.40709 0.769944 6.40693C0.770363 6.40703 0.770174 6.40698 0.770998 6.40719C0.772652 6.40761 0.7762 6.40851 0.78163 6.40989C0.792488 6.41266 0.810875 6.41737 0.836636 6.42406C0.888165 6.43744 0.96922 6.45874 1.0787 6.48826C1.29768 6.54731 1.63033 6.63924 2.06787 6.76647C2.94306 7.02097 4.23733 7.41655 5.88066 7.97261C9.16833 9.08507 13.8469 10.8377 19.3581 13.3847C30.3918 18.4839 44.6964 26.7364 57.8615 39.3519C84.0262 64.4245 106.073 107.068 88.0919 177.76L93.9067 179.239C112.426 106.431 89.7232 61.5736 62.0128 35.0198C48.2403 21.8222 33.3261 13.2302 21.8752 7.93825C16.1442 5.28966 11.2642 3.46007 7.80378 2.28916C6.07307 1.70354 4.69594 1.28216 3.74324 1.00512C3.26684 0.866588 2.89642 0.764101 2.64081 0.69518C2.51301 0.660716 2.4139 0.63464 2.34458 0.616641C2.30992 0.607641 2.28271 0.60066 2.26308 0.595661C2.25327 0.59316 2.24535 0.591153 2.23935 0.589639C2.23635 0.588881 2.23328 0.58811 2.23178 0.587732C2.22919 0.587085 2.22709 0.586557 1.49942 3.49697ZM88.0919 177.76C78.8757 213.992 79.8152 240.607 86.7587 260.122C93.7278 279.708 106.633 291.826 120.664 299.216C134.629 306.571 149.688 309.24 161.16 310.093C166.913 310.521 171.807 310.495 175.273 310.362C177.007 310.295 178.386 310.202 179.339 310.124C179.816 310.084 180.186 310.049 180.442 310.024C180.57 310.011 180.669 310 180.738 309.992C180.773 309.989 180.8 309.985 180.819 309.983C180.829 309.982 180.837 309.981 180.843 309.98C180.846 309.98 180.849 309.98 180.85 309.98C180.853 309.979 180.855 309.979 180.5 307C180.146 304.021 180.147 304.021 180.147 304.021C180.147 304.021 180.147 304.021 180.146 304.021C180.145 304.021 180.141 304.022 180.136 304.022C180.125 304.024 180.106 304.026 180.08 304.028C180.029 304.034 179.948 304.043 179.838 304.054C179.619 304.076 179.287 304.108 178.849 304.143C177.975 304.215 176.682 304.303 175.042 304.366C171.759 304.493 167.095 304.518 161.605 304.11C150.594 303.291 136.433 300.74 123.46 293.908C110.553 287.11 98.802 276.071 92.4116 258.111C85.9956 240.078 84.8726 214.756 93.9067 179.239L88.0919 177.76Z' fill='%23FE6F56'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; background-position: center bottom; content: ""; } .vacancy-img::after { position: absolute; z-index: 2; width: 24%; height: 65%; bottom: -29%; right: 5%; background-image: url("data:image/svg+xml,%3Csvg width='447' height='234' viewBox='0 0 447 234' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M327.501 198L326.466 195.184L327.501 198ZM2.11142 204.348C0.642746 205.115 0.0739221 206.928 0.84089 208.396L13.3392 232.329C14.1062 233.798 15.9185 234.367 17.3872 233.6C18.8558 232.833 19.4246 231.021 18.6577 229.552L7.54805 208.278L28.8219 197.168C30.2905 196.401 30.8594 194.589 30.0924 193.121C29.3255 191.652 27.5131 191.083 26.0445 191.85L2.11142 204.348ZM434.999 2.01058C432.217 3.1333 432.217 3.13221 432.216 3.13165C432.217 3.13215 432.217 3.1321 432.217 3.1331C432.218 3.13509 432.219 3.13914 432.222 3.14524C432.227 3.15744 432.235 3.17781 432.246 3.20626C432.268 3.26316 432.303 3.35235 432.349 3.47304C432.441 3.71442 432.579 4.0817 432.753 4.56839C433.102 5.54189 433.599 6.9925 434.179 8.86846C435.337 12.6215 436.822 18.0702 438.107 24.8015C440.68 38.2763 442.437 56.8163 439.225 77.1504C436.016 97.46 427.85 119.569 410.551 140.268C393.248 160.971 366.686 180.408 326.466 195.184L328.535 200.816C369.566 185.742 397.067 165.757 415.154 144.115C433.245 122.47 441.798 99.3123 445.151 78.0867C448.501 56.8857 446.663 37.6217 444.001 23.6763C442.669 16.6975 441.126 11.0321 439.912 7.09845C439.304 5.13109 438.778 3.59526 438.401 2.54315C438.212 2.01704 438.061 1.61172 437.955 1.33371C437.902 1.1947 437.86 1.0875 437.831 1.01292C437.816 0.975634 437.805 0.9465 437.796 0.925623C437.792 0.915185 437.789 0.90681 437.786 0.900512C437.785 0.897365 437.784 0.894198 437.783 0.892624C437.782 0.889983 437.781 0.88786 434.999 2.01058ZM326.466 195.184C245.761 224.833 165.236 227.088 104.819 221.901C74.6231 219.309 49.4848 214.86 31.907 211.063C23.1191 209.164 16.2238 207.429 11.534 206.171C9.18928 205.543 7.39612 205.033 6.19377 204.682C5.59259 204.507 5.13912 204.371 4.83827 204.28C4.68787 204.234 4.57558 204.2 4.50209 204.177C4.46535 204.166 4.43829 204.158 4.42101 204.152C4.41235 204.15 4.40613 204.148 4.40239 204.146C4.40051 204.146 4.39956 204.146 4.39862 204.145C4.39826 204.145 4.39851 204.145 3.50011 207.008C2.60171 209.87 2.60321 209.87 2.60531 209.871C2.60684 209.871 2.60954 209.872 2.61261 209.873C2.61869 209.875 2.62721 209.878 2.63821 209.881C2.66021 209.888 2.69198 209.898 2.73347 209.911C2.81648 209.936 2.93833 209.974 3.09844 210.022C3.41866 210.119 3.89188 210.261 4.51326 210.442C5.75594 210.805 7.59123 211.326 9.97982 211.967C14.7569 213.248 21.7482 215.007 30.64 216.927C48.4217 220.769 73.8147 225.262 104.306 227.879C165.265 233.113 246.74 230.865 328.535 200.816L326.466 195.184Z' fill='%23FE6F56'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; background-position: center top; content: ""; } .section-bg-3 { position: relative; padding-top: 60px; padding-bottom: 0; } .section-bg-3__content { background-color: #1d232d; padding-top: 70px; padding-bottom: 30px; color: #ffffff; } .section-bg-3__bg { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .section-bg-3 .container { position: relative; z-index: 1; } .section-bg-3__img { position: relative; } .section-bg-3__img::after { position: absolute; top: -10px; left: 0; width: 100%; height: 50px; background: -webkit-gradient(linear, left top, left bottom, color-stop(42.17%, #1d232d), to(rgba(36, 40, 48, 0))); background: -o-linear-gradient(top, #1d232d 42.17%, rgba(36, 40, 48, 0) 100%); background: linear-gradient(180deg, #1d232d 42.17%, rgba(36, 40, 48, 0) 100%); content: ""; } .section-bg-4 { padding-top: 80px; margin-bottom: -30px; background-image: url("data:image/svg+xml,%3Csvg width='1508' height='1331' viewBox='0 0 1508 1331' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='192' cy='418' r='191.5' stroke='%23FE6F56'/%3E%3Ccircle cx='112' cy='791' r='40.5' stroke='%23FE6F56'/%3E%3Ccircle cx='259' cy='41' r='40.5' stroke='%23FE6F56'/%3E%3Ccircle cx='1037' cy='1290' r='40.5' stroke='%231DA925'/%3E%3Ccircle cx='1405' cy='727' r='70.5' stroke='%231DA925'/%3E%3Ccircle cx='868.5' cy='370.5' r='54.5' fill='%231DA925'/%3E%3Ccircle cx='232' cy='1076' r='120' fill='%23FE6F56'/%3E%3Ccircle cx='612' cy='490' r='120' fill='%23FE6F56'/%3E%3Ccircle cx='1173' cy='911' r='120' fill='%231DA925'/%3E%3Ccircle cx='1293' cy='316' r='214.5' stroke='%231DA925'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 100% auto; background-position: center; } @media (max-width: 575px) { .section-bg-4 { margin-bottom: 0; } } .section-bg-4__img { display: block; max-width: 1400px; width: 100%; height: auto; margin: 0 auto; } .section-bg-5 { padding-top: 30px; padding-bottom: 110px; background-image: url("data:image/svg+xml,%3Csvg width='715' height='539' viewBox='0 0 715 539' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M270.398 403.277L0.5 538.5H248.5L353.785 456.399L592.156 422.005C642.507 305.51 657.011 235.22 658.238 100.899L715 83.9541L600.952 0L530.311 135.636L587.073 122.927C585.341 238.983 568.675 295.607 518.45 385.573L270.398 403.277Z' fill='url(%23paint0_linear_1604_135)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1604_135' x1='667.5' y1='-90' x2='289.739' y2='538.843' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FE6F56'/%3E%3Cstop offset='1' stop-color='%23FE6F56' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 70% 100%; background-position: right bottom; } @media (max-width: 575px) { .section-bg-5 { background-size: contain; } } .typography p i { font-style: italic; } .fancybox-link { display: block; } .page__main > .section:first-child { padding-top: 50px; } .scroll-up { position: fixed; bottom: 15px; right: 325px; z-index: 21; width: 50px; height: 50px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid #ffffff; background: #ffffff; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; opacity: 0; pointer-events: none; } @media (max-width: 1279px) { .scroll-up { right: 15px; } } @media (max-width: 767px) { .scroll-up { width: 35px; height: 35px; } } .scroll-up.active { opacity: 0.8; pointer-events: initial; } .scroll-up svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; fill: #393874; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; will-change: fill; } .scroll-up:hover { opacity: 1; } .scroll-up:hover svg { fill: #CB0928; } .fon1 { background-image: url(/content/images/fon/image_06.jpg); background-image: -webkit-image-set("/content/images/fon/image_06.webp" type("image/webp"), "/content/images/fon/image_06.jpg" type("image/jpg")); background-image: image-set("/content/images/fon/image_06.webp" type("image/webp"), "/content/images/fon/image_06.jpg" type("image/jpg")); } .fon2 { background-image: url(/content/images/fon/image_07.jpg); background-image: -webkit-image-set("/content/images/fon/image_07.webp" type("image/webp"), "/content/images/fon/image_07.jpg" type("image/jpg")); background-image: image-set("/content/images/fon/image_07.webp" type("image/webp"), "/content/images/fon/image_07.jpg" type("image/jpg")); } .fon3 { background-image: url(/content/images/fon/image_08.jpg); background-image: -webkit-image-set("/content/images/fon/image_08.webp" type("image/webp"), "/content/images/fon/image_08.jpg" type("image/jpg")); background-image: image-set("/content/images/fon/image_08.webp" type("image/webp"), "/content/images/fon/image_08.jpg" type("image/jpg")); } .fon4 { background-image: url(/content/images/fon/image_09.png); background-image: -webkit-image-set("/content/images/fon/image_09.webp" type("image/webp"), "/content/images/fon/image_09.png" type("image/jpg")); background-image: image-set("/content/images/fon/image_09.webp" type("image/webp"), "/content/images/fon/image_09.png" type("image/jpg")); } .fon5 { background-image: url(/content/images/cases/zoom/fon5.jpg); background-image: -webkit-image-set("/content/images/cases/zoom/fon5.webp" type("image/webp"), "/content/images/cases/zoom/fon5.jpg" type("image/jpg")); background-image: image-set("/content/images/cases/zoom/fon5.webp" type("image/webp"), "/content/images/cases/zoom/fon5.jpg" type("image/jpg")); } .fon6 { background-image: url(/content/images/ems.jpg); background-image: -webkit-image-set("/content/images/ems.webp" type("image/webp"), "/content/images/ems.jpg" type("image/jpg")); background-image: image-set("/content/images/ems.webp" type("image/webp"), "/content/images/ems.jpg" type("image/jpg")); } .fon6 .common-section__container.container:before { content: ''; display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } section.style-vk { background: #393874; padding-top: 50px; padding-bottom: 40px; } @media (max-width: 575px) { section.style-vk { padding-bottom: 50px; } } section.style-vk .block-mailing { margin: 0 auto; } section.style-vk .block-mailing-bg { padding: 0 75px; } @media (max-width: 575px) { section.style-vk .block-mailing-bg { padding: 0; } } section.style-vk .block-mailing .block-mailing-bg::before { content: ''; display: block; width: 186px; height: 186px; position: absolute; top: 85px; left: 70px; background-size: contain; background-repeat: no-repeat; background-position: top left; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg width='186' height='186' viewBox='0 0 186 186' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 89.28C0 47.1929 0 26.1495 13.0748 13.0748C26.1495 0 47.1929 0 89.28 0H96.72C138.807 0 159.85 0 172.925 13.0748C186 26.1495 186 47.1929 186 89.28V96.72C186 138.807 186 159.85 172.925 172.925C159.85 186 138.807 186 96.72 186H89.28C47.1929 186 26.1495 186 13.0748 172.925C0 159.85 0 138.807 0 96.72V89.28Z' fill='%230077FF'/%3E%3Cpath d='M98.9675 133.998C56.575 133.998 32.3954 104.935 31.3879 56.5754H52.6229C53.3204 92.0704 68.975 107.105 81.375 110.205V56.5754H101.371V87.1879C113.616 85.8704 126.479 71.9204 130.819 56.5754H150.815C147.482 75.4854 133.532 89.4354 123.612 95.1704C133.532 99.8204 149.42 111.988 155.465 133.998H133.455C128.727 119.273 116.948 107.88 101.371 106.33V133.998H98.9675Z' fill='white'/%3E%3C/svg%3E%0A"); } @media (max-width: 1500px) { section.style-vk .block-mailing .block-mailing-bg::before { left: 30px; } } @media (max-width: 1200px) { section.style-vk .block-mailing .block-mailing-bg::before { left: auto; top: auto; bottom: 20px; right: 0; opacity: 0.4; } } @media (max-width: 767px) { section.style-vk .block-mailing .block-mailing-bg::before { top: 30px; } } @media (max-width: 575px) { section.style-vk .block-mailing .block-mailing-bg::before { top: 70px; opacity: 0.2; } } @media (max-width: 375px) { section.style-vk .block-mailing .block-mailing-bg::before { display: none; } } section.style-vk .block-mailing .block-mailing-bg::after { content: ''; display: block; width: 186px; height: 186px; position: absolute; top: 85px; left: 72px; background-size: contain; z-index: 1; background-repeat: no-repeat; background-position: top left; animation: glitch-anim-3 2s infinite linear alternate-reverse; background-image: url("data:image/svg+xml,%3Csvg width='186' height='186' viewBox='0 0 186 186' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 89.28C0 47.1929 0 26.1495 13.0748 13.0748C26.1495 0 47.1929 0 89.28 0H96.72C138.807 0 159.85 0 172.925 13.0748C186 26.1495 186 47.1929 186 89.28V96.72C186 138.807 186 159.85 172.925 172.925C159.85 186 138.807 186 96.72 186H89.28C47.1929 186 26.1495 186 13.0748 172.925C0 159.85 0 138.807 0 96.72V89.28Z' fill='%230077FF'/%3E%3Cpath d='M98.9675 133.998C56.575 133.998 32.3954 104.935 31.3879 56.5754H52.6229C53.3204 92.0704 68.975 107.105 81.375 110.205V56.5754H101.371V87.1879C113.616 85.8704 126.479 71.9204 130.819 56.5754H150.815C147.482 75.4854 133.532 89.4354 123.612 95.1704C133.532 99.8204 149.42 111.988 155.465 133.998H133.455C128.727 119.273 116.948 107.88 101.371 106.33V133.998H98.9675Z' fill='white'/%3E%3C/svg%3E%0A"); } @media (max-width: 1500px) { section.style-vk .block-mailing .block-mailing-bg::after { left: 32px; } } @media (max-width: 1200px) { section.style-vk .block-mailing .block-mailing-bg::after { left: auto; top: auto; bottom: 20px; right: 0; opacity: 0.4; } } @media (max-width: 767px) { section.style-vk .block-mailing .block-mailing-bg::after { top: 30px; } } @media (max-width: 575px) { section.style-vk .block-mailing .block-mailing-bg::after { top: 70px; } } @media (max-width: 375px) { section.style-vk .block-mailing .block-mailing-bg::after { display: none; } } @media (max-width: 1200px) { section.style-vk .top-form__group .form__row { margin-top: -20px; opacity: 0.2; } } @media (max-width: 375px) { .common-card__title { font-size: 22px; } } .section__price { display: inline-block; vertical-align: baseline; margin: 16px auto 0; background: #393874; color: #FFFFFF; } .section__price p { font-family: 'Arial', sans-serif; display: inline-block; padding: 10px 20px; font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 1.4px; text-transform: uppercase; } .section__price p { margin: 0; position: relative; } .section__price p:not(first-child)::before { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 100px; height: 1px; background-color: rgba(241, 241, 239, 0.6); content: ""; } .portfolio-header--more { background-color: #4A40BA; color: #ffffff; font-weight: 300; text-align: center; } .portfolio-header--more .portfolio-info__item { font-size: 14px; line-height: 24px; text-align: left; margin-right: 20px; white-space: nowrap; } .portfolio-header--more .portfolio-info__item_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-right: 0; margin-left: 20px; } @media (max-width: 767px) { .portfolio-header--more .portfolio-info__item_link { margin-right: auto; margin-left: auto; } } .portfolio-header--more .portfolio-info__item_link a { display: inline-block; vertical-align: baseline; margin: 0; padding: 9px 30px; } .portfolio-header--more .portfolio-info__item_link a:hover, .portfolio-header--more .portfolio-info__item_link a:focus { background-color: #ffffff; color: #393874; } .portfolio-header--more .portfolio-info__item_date, .portfolio-header--more .portfolio-info__item_date .loud { vertical-align: baseline; color: #ffffff; font-weight: 300; text-align: left; } .portfolio-header--more .portfolio-info__item_date, .portfolio-header--more .portfolio-info__item_price, .portfolio-header--more .portfolio-info__item_period { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width: 767px) { .portfolio-header--more .portfolio-info__item_date, .portfolio-header--more .portfolio-info__item_price, .portfolio-header--more .portfolio-info__item_period { display: inline-block; text-align: center; } } .portfolio-header--more .portfolio-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 0; } @media (max-width: 767px) { .portfolio-header--more .portfolio-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 25px 15px; } } .portfolio-info__info { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (max-width: 767px) { .portfolio-info__info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 0; } } .portfolio-header--more .portfolio-info__item_social { position: static; margin: auto; width: auto; } @media (max-width: 767px) { .portfolio-header--more .portfolio-info__item_social { margin: 20px 15px; } } .portfolio-header--more .portfolio-info__item_social .social { padding-bottom: 0; padding-left: 0; } .portfolio-header--more .portfolio-info__item_social .link_theme_light { color: #ffffff; } .portfolio-header--more .portfolio-info__item_social .link_theme_light:hover, .portfolio-header--more .portfolio-info__item_social .link_theme_light:focus { color: #CB0928; } .portfolio-header--more .portfolio-info__item_social li.social__item:last-child:first-child { margin: 0; } .portfolio-header--more .icon { fill: #ffffff; } .portfolio-header--more a:hover .icon, .portfolio-header--more a:focus .icon { fill: #CB0928; } .portfolio-header--more .portfolio-header__prev, .portfolio-header--more .portfolio-header__next { border-color: rgba(255,255,255,0.1); } @media (max-width: 767px) { .mobile-hidden { display: none; } .preview-block__btn.custom-btn { max-width: calc(100% - 30px); } } @media (min-width: 768px) { .desktop-hidden { display: none; } } .quote-card-1 { color: #FFF; background: #CB0928 -webkit-linear-gradient(45deg, #F47920, #E24163); background: #CB0928 linear-gradient(45deg, #F47920, #E24163); } .quote-card-2 { color: #FFF; background: #156c61 -webkit-linear-gradient(45deg, #32c0af, #156c61); background: #156c61 linear-gradient(45deg, #32c0af, #156c61); } .quote-card-3 { color: #FFF; background: #ef7d25 -webkit-linear-gradient(45deg, #f8c744, #ef7d25); background: #ef7d25 linear-gradient(45deg, #f8c744, #ef7d25); } .quote-card-4 { color: #FFF; background: #1aafd7 -webkit-linear-gradient(45deg, #218bc5, #1aafd7); background: #1aafd7 linear-gradient(45deg, #218bc5, #1aafd7); } .quote-card-5 { color: #FFF; background: #263f90 -webkit-linear-gradient(45deg, #2e2252, #263f90); background: #263f90 linear-gradient(45deg, #2e2252, #263f90); } .quote-card-6 { color: #FFF; background: #263f90 -webkit-linear-gradient(45deg, #2e2252, #263f90); background: #263f90 linear-gradient(45deg, #2e2252, #263f90); } .team-block-new .common-list__item:nth-child(12n + 2) article, .team-block-new .common-list__item:nth-child(12n + 7) article { font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; background: #F6082E; background: linear-gradient(45deg, #393874, #4a40ba); color: #ffffff; } .team-block-new .common-list__item:nth-child(12n + 3) article, .team-block-new .common-list__item:nth-child(12n + 10) article { font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; background: #4A40BA; background: linear-gradient(45deg, #393874, #4a40ba); color: #ffffff; } .team-block-new .common-list__item:nth-child(12n + 6) article, .team-block-new .common-list__item:nth-child(12n + 11) article { font-family: "TT Hoves Pro", Helvetica, Arial, sans-serif; background: #1D1D1B; background: linear-gradient(45deg, #393874, #4a40ba); color: #ffffff; } .sidebar__section_price .button__text { font-size: 12px; } .sidebar__item_main .sidebar__wrapper { min-height: 100vh; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; } .nav--footer { margin-top: auto; } .nav--footer .nav__item { margin-bottom: 0; } .cookie-block-text { font-size: 13px; } .politics--offer .typography { font-size: 14px; } h1.section__title .offer-h1 { text-align: center; font-size: 24px; font-weight: 700; margin: 20px 0 30px 0; text-transform: uppercase; } .politics--offer .typography h2 { font-size: 16px; font-weight: 700; margin: 30px 0 15px 0; text-transform: uppercase; } .politics--offer .typography h3 { font-size: 15px; font-weight: 700; margin: 20px 0 10px 0; } .politics--offer .typography .header-info { text-align: center; margin-bottom: 20px; font-size: 12px; color: #666; } .politics--offer .typography .approval { text-align: right; margin-bottom: 30px; font-size: 12px; } .politics--offer .typography .intro { text-align: left; margin-bottom: 30px; } .politics--offer .typography .section { margin-bottom: 30px; } .politics--offer .typography .subsection { margin: 15px 0; padding-left: 20px; } .politics--offer .typography .sub-item { margin: 10px 0; padding-left: 40px; } .politics--offer .typography .definition { margin: 10px 0; padding-left: 20px; } .politics--offer .typography .term { font-weight: bold; } .politics--offer .typography .contacts { border-top: 2px solid #ccc; padding-top: 20px; margin-top: 30px; } .politics--offer .typography ul { padding-left: 20px; } .politics--offer .typography li { margin: 5px 0; } .politics--offer .typography .numbered-item { margin: 10px 0; } .politics--offer .typography .link { color: #4A40BA; text-decoration: underline; } .politics--offer .typography .important { background-color: #f9f9f9; padding: 10px; border-left: 4px solid #4A40BA; margin: 15px 0; }