/* Table of Contents 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. RTL direction/left-side scrollbar -------- RTL direction/left-side scrollbar -------- RTL direction/left-side scrollbar -------- RTL direction/left-side scrollbar (scrollbar position: outside) RTL direction/left-side scrollbar -------- RTL direction/left-side scrollbar -------- RTL direction/left-side scrollbar -------- Magnific Popup CSS ----------------------- Main image in popup ---------------------- The shadow behind the image -------------- 01. Settings ---------------------------------- 02. Sprite ------------------------------------ 03. Generic ----------------------------------- 04. Base -------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 05. Fonts ------------------------------------- 06. Helpers ----------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Header and footer from life site --------- Responsive Helpers ----------------------- Mobile ----------------------------------- 07. Reset ------------------------------------- 08. Regions ----------------------------------- 09. Container --------------------------------- 10. Content ----------------------------------- Tablet Portrait -------------------------- 11. Footer ------------------------------------ 12. Header ------------------------------------ 13. Header Small ------------------------------ Tablet Portrait -------------------------- 14. Main -------------------------------------- Mobile ----------------------------------- 15. Shell ------------------------------------- Tablet Portrait -------------------------- 16. Sidebar ----------------------------------- 17. Sidebar Top ------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- 18. Wrapper ----------------------------------- 19. Wrapper Alt ------------------------------- Small Desktop ---------------------------- 20. Modules ----------------------------------- 21. Accordion --------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 22. Accordion Alt ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 23. Articles ---------------------------------- 24. Article ----------------------------------- 25. Article Reverse --------------------------- 26. Article White ----------------------------- 27. Article Accordion ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 28. Article Small ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 29. Bar Holder -------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 30. Block ------------------------------------- Large Desktop ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 31. Block Pink -------------------------------- 32. Block Blue -------------------------------- 33. Block Light blue -------------------------- 34. Block ------------------------------------- 35. Block Warning ----------------------------- Mobile ----------------------------------- 36. Breadcrumbs ------------------------------- Mobile ----------------------------------- 37. Button ------------------------------------ Button green ----------------------------- Button price ----------------------------- Button red ------------------------------- Button Rounded --------------------------- Button Small ----------------------------- Mobile ----------------------------------- Button Medium ---------------------------- Button icon ------------------------------ Button blue ------------------------------ Button Gray ------------------------------ Button Widget ---------------------------- Button Card ------------------------------ Button Block ----------------------------- Button filter ---------------------------- Button User ------------------------------ Button Linkedin -------------------------- Mobile ----------------------------------- Button Content --------------------------- Mobile ----------------------------------- Button Question -------------------------- Button Reply ----------------------------- 38. Card Info --------------------------------- Mobile ----------------------------------- 39. Comment ---------------------------------- 40. Comment Large ----------------------------- Mobile ----------------------------------- 41. Contact ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 42. Dropdown Default -------------------------- 43. Filters ----------------------------------- Large Desktop ---------------------------- 44. Filter ------------------------------------ Large Desktop ---------------------------- 45. Form Elements ----------------------------- 46. Checkbox ---------------------------------- 47. Radio ------------------------------------- Mobile ----------------------------------- 48. Radio Lang -------------------------------- 49. Field ------------------------------------- Mobile ----------------------------------- 50. Select ------------------------------------ Small Desktop ---------------------------- Mobile ----------------------------------- 51. Select Alt -------------------------------- Mobile ----------------------------------- 52. Select Sort ------------------------------ Mobile ----------------------------------- 53. Select Lang ------------------------------- 54. Form -------------------------------------- Mobile ----------------------------------- 55. Form Quote ------------------------------- Small Desktop ---------------------------- 56. Form Question ----------------------------- Mobile ----------------------------------- 57. Fallery ----------------------------------- Mobile ----------------------------------- 58. Intro ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 59. Intro Alt --------------------------------- Mobile ----------------------------------- 60. Intro Product ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 61. List -------------------------------------- List Select ------------------------------ Mobile ----------------------------------- List Checks ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- List Radios ------------------------------ Mobile ----------------------------------- List logos ------------------------------- List Buttons ----------------------------- Mobile ----------------------------------- List Ratings ----------------------------- Mobile ----------------------------------- List Ratings Small ----------------------- List Contact ----------------------------- Mobile ----------------------------------- List overview ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- List info -------------------------------- Mobile ----------------------------------- List Review ------------------------------ Mobile ----------------------------------- List Sort -------------------------------- List Checkboxes -------------------------- 62. Logo -------------------------------------- 63. Magnific popup ---------------------------- Mobile ----------------------------------- 64. Nav --------------------------------------- Small Desktop ---------------------------- 65. Plans ------------------------------------- Tablet Portrait -------------------------- 66. Plan -------------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 67. Popup ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 68. Popup Large ------------------------------- 69. Popup Small ------------------------------- 70. Price Number ------------------------------ Tablet Portrait -------------------------- 71. Product ----------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 72. Progress Alt ------------------------------ Large Desktop ---------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 73. Question ---------------------------------- 74. Rating ------------------------------------ 75. Reviews ----------------------------------- 76. Review ------------------------------------ Mobile ----------------------------------- 77. Review Large ------------------------------ 78. Review history ---------------------------- Mobile ----------------------------------- 79. Review Block ------------------------------ 80. Section ----------------------------------- 81. Section Gray ------------------------------ 82. Section Ligh Blue ------------------------- 83. Section Yellow ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 84. Section Prices ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 85. Section Dark ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 86. Section image ----------------------------- Mobile ----------------------------------- 87. Services ---------------------------------- 88. Service Reverse --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 89. Slider ------------------------------------ 90. Socials ----------------------------------- Mobile ----------------------------------- 91. Tab --------------------------------------- Mobile ----------------------------------- 92. Table ------------------------------------- Mobile ----------------------------------- 93. Table Test -------------------------------- Mobile ----------------------------------- 94. Thumbs ------------------------------------ Mobile ----------------------------------- 95. Tooltip ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 96. User ------------------------------------- Tablet Portrait -------------------------- 97. User Alt ---------------------------------- Mobile ----------------------------------- 98. User Widget ------------------------------- 99. User product ------------------------------ Mobile ----------------------------------- 100. User Small ------------------------------- 101. Video ------------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 102. Video Large ------------------------------ 103. Video Gallery ---------------------------- Mobile ----------------------------------- 104. Vote ------------------------------------- 105. Widget ----------------------------------- 106. Widget About ----------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 107. Widget user ------------------------------ Mobile ----------------------------------- 108. Widget User Alt -------------------------- 109. Themes ----------------------------------- */ /* == 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; -webkit-box-sizing: border-box; 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; -o-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, /* auto-expanded scrollbar */ .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; -o-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(/images/malihu-custom-scrollbar-plugin/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: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0.5)),to(rgba(255,255,255,0))); 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: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)),to(rgba(255,255,255,0))); 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); -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,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; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2); 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); -webkit-box-shadow: inset 1px 0 1px 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{ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); 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{ -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); 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; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); 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{ -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4); 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{ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); 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); -webkit-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); 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{ -webkit-box-shadow: inset 0 0 14px rgba(0,0,0,0.2); box-shadow: inset 0 0 14px rgba(0,0,0,0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); 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{ -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); 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{ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); 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); -webkit-box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1); 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); -webkit-box-sizing: border-box; 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); } /* ---------------------------------------- */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; -ms-touch-action: manipulation; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; -ms-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .select2-container { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; } .select2-container .select2-selection--single { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; padding-left: 8px; padding-right: 20px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { position: relative; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline-block; overflow: hidden; padding-left: 8px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .select2-container .select2-search--inline { float: left; } .select2-container .select2-search--inline .select2-search__field { -webkit-box-sizing: border-box; box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; padding: 0; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: white; border: 1px solid #aaa; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-results__option[aria-selected] { cursor: pointer; } .select2-container--open .select2-dropdown { left: 0; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { background-color: #fff; border: 1px solid #aaa; border-radius: 4px; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; } .select2-container--default .select2-selection--multiple .select2-selection__rendered { -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 0 5px; width: 100%; } .select2-container--default .select2-selection--multiple .select2-selection__rendered li { list-style: none; } .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #999; margin-top: 5px; float: left; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-top: 5px; margin-right: 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #999; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #333; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline { float: right; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 325px; overflow-y: auto; } /* Mobile */ @media (max-width: 767px) { .select2-container--default .select2-results > .select2-results__options { background-color: #fff; } } .select2-container--default .select2-results__option[role=group] { padding: 0; } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5897fb; color: white; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, white), to(#eeeeee)); background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; margin-right: 10px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eeeeee), to(#cccccc)); background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%); background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, #eeeeee)); background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eeeeee), to(white)); background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__rendered { list-style: none; margin: 0; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; cursor: default; float: left; margin-right: 5px; margin-top: 5px; padding: 0 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { color: #888; cursor: pointer; display: inline-block; font-weight: bold; margin-right: 2px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { float: right; margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { margin-left: 2px; margin-right: auto; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: white; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option[role=group] { padding: 0; } .select2-container--classic .select2-results__option[aria-disabled=true] { color: grey; } .select2-container--classic .select2-results__option--highlighted[aria-selected] { background-color: #3875d7; color: white; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } /* ------------------------------------------------------------ *\ Settings \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Sprite \* ------------------------------------------------------------ */ .ico-arrow-left{ background-image: url(/images/sprite.png); background-position: 78.97196261682244% 29.333333333333332%; background-size: 1072.7272727272727% 433.3333333333333%; width: 22px; height: 45px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-best{ background-image: url(/images/sprite.png); background-position: 0% 0%; background-size: 143.03030303030303% 150%; width: 165px; height: 130px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-check-blue{ background-image: url(/images/sprite.png); background-position: 98.23008849557522% 47.340425531914896%; background-size: 2360% 2785.714285714286%; width: 10px; height: 7px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-check{ background-image: url(/images/sprite.png); background-position: 95.94594594594594% 40.54054054054054%; background-size: 1685.7142857142858% 1950%; width: 14px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-eye{ background-image: url(/images/sprite.png); background-position: 86.22448979591837% 0%; background-size: 590% 487.5%; width: 40px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-facebook{ background-image: url(/images/sprite.png); background-position: 81.64251207729468% 75.90361445783132%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-google{ background-image: url(/images/sprite.png); background-position: 0% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-info-circle{ background-image: url(/images/sprite.png); background-position: 96.81818181818181% 30.726256983240223%; background-size: 1475% 1218.75%; width: 16px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-info{ background-image: url(/images/sprite.png); background-position: 92.20779220779221% 49.171270718232044%; background-size: 4720% 1392.857142857143%; width: 5px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-kk{ background-image: url(/images/sprite.png); background-position: 47.82608695652174% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-linkedin-large{ background-image: url(/images/sprite.png); background-position: 0% 80.23952095808383%; background-size: 256.52173913043475% 696.4285714285714%; width: 92px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-linkedin-small{ background-image: url(/images/sprite.png); background-position: 97.26027397260275% 19.553072625698324%; background-size: 1388.235294117647% 1218.75%; width: 17px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-linkedin{ background-image: url(/images/sprite.png); background-position: 15.942028985507244% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-pinterest{ background-image: url(/images/sprite.png); background-position: 63.76811594202898% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-twitter{ background-image: url(/images/sprite.png); background-position: 31.88405797101449% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-user{ background-image: url(/images/sprite.png); background-position: 100% 0%; background-size: 1026.086956521739% 629.0322580645161%; width: 23px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-youtube{ background-image: url(/images/sprite.png); background-position: 81.64251207729468% 56.024096385542165%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 192dpi){ .ico-arrow-left{ background-image: url(/images/sprite.@2x.png); background-position: 78.97196261682244% 29.333333333333332%; background-size: 1072.7272727272727% 433.3333333333333%; width: 22px; height: 45px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-best{ background-image: url(/images/sprite.@2x.png); background-position: 0% 0%; background-size: 143.03030303030303% 150%; width: 165px; height: 130px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-check-blue{ background-image: url(/images/sprite.@2x.png); background-position: 98.23008849557522% 47.340425531914896%; background-size: 2360% 2785.714285714286%; width: 10px; height: 7px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-check{ background-image: url(/images/sprite.@2x.png); background-position: 95.94594594594594% 40.54054054054054%; background-size: 1685.7142857142858% 1950%; width: 14px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-eye{ background-image: url(/images/sprite.@2x.png); background-position: 86.22448979591837% 0%; background-size: 590% 487.5%; width: 40px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-facebook{ background-image: url(/images/sprite.@2x.png); background-position: 81.64251207729468% 75.90361445783132%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-google{ background-image: url(/images/sprite.@2x.png); background-position: 0% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-info-circle{ background-image: url(/images/sprite.@2x.png); background-position: 96.81818181818181% 30.726256983240223%; background-size: 1475% 1218.75%; width: 16px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-info{ background-image: url(/images/sprite.@2x.png); background-position: 92.20779220779221% 49.171270718232044%; background-size: 4720% 1392.857142857143%; width: 5px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-kk{ background-image: url(/images/sprite.@2x.png); background-position: 47.82608695652174% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-linkedin-large{ background-image: url(/images/sprite.@2x.png); background-position: 0% 80.23952095808383%; background-size: 256.52173913043475% 696.4285714285714%; width: 92px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-linkedin-small{ background-image: url(/images/sprite.@2x.png); background-position: 97.26027397260275% 19.553072625698324%; background-size: 1388.235294117647% 1218.75%; width: 17px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-linkedin{ background-image: url(/images/sprite.@2x.png); background-position: 15.942028985507244% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-pinterest{ background-image: url(/images/sprite.@2x.png); background-position: 63.76811594202898% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-twitter{ background-image: url(/images/sprite.@2x.png); background-position: 31.88405797101449% 100%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-user{ background-image: url(/images/sprite.@2x.png); background-position: 100% 0%; background-size: 1026.086956521739% 629.0322580645161%; width: 23px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0px; } .ico-youtube{ background-image: url(/images/sprite.@2x.png); background-position: 81.64251207729468% 56.024096385542165%; background-size: 813.7931034482758% 672.4137931034483%; width: 29px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0px; } } /* ------------------------------------------------------------ *\ Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { counter-reset: faq-counter; } .body-content { min-width: 320px; background: #fff; font-family: Montserrat, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.3; color: #000; } @media (min-width: 768px) { .body-content { font-size: 18px; } } a { color: inherit; text-decoration: underline; } a:hover, a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.65em; } h1 { font-size: 60px; } h2 { font-size: 48px; } h3 { font-size: 38px; } h4 { font-size: 30px; } h5 { font-size: 26px; } h6 { font-size: 20px; } p, ul, ol, dl, hr, table, blockquote { margin-bottom: 1.3em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { h1 { font-size: 30px; } h2 { font-size: 30px; } h3 { font-size: 28px; } h4 { font-size: 25px; } } /* Mobile */ @media (max-width: 767px) { body { font-size: 12px; line-height: 1.33; } h2 { font-size: 26px; } h4 { font-size: 15px; } h5 { font-size: 15px; } h6 { font-size: 15px; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; display: block; clear: both; } /* Notext */ .notext { overflow: hidden; text-indent: 101%; white-space: nowrap; } /* Hidden */ [hidden], .hidden { display: none !important; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .col { max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .col--1of2 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } /* Header and footer from life site */ .edition_box p { margin-bottom: 0; } .section.accent_3_mod { font-size: 10px; } .main_list li a, .link_box_menu ul li a { font-family: Lato; text-decoration: none; line-height: 1; } .link_content address, .link_content p, .btm_marketing .learn-more { line-height: 1.2; font-family: 'Lato'; } /* ico rating star half */ .ico-star-half { position: relative; overflow: hidden; } .ico-star-half:after { content: ''; position: absolute; bottom: 5px; right: 5px; background-image: url(/images/svg/star-half-1.svg); background-size: 100% 100%; width: 26px; height: 21px; } .ico-star-half--large:after { width: 26px; height: 24px; bottom: 4px; } .ico-star-large { width: 38px; height: 38px; } .ico-star-large svg { display: block; width: 100%; height: 100%; } .ico-star { width: 26px; height: 26px; } .ico-star svg { display: block; } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1200px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1201px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* Mobile */ @media (max-width: 767px) { .outside { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; padding: 0 15px; } } /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ * { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } template { display: none; } html { -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content { width: 70%; } /* Tablet Portrait */ @media (max-width: 1023px) { .content { width: 100%; } } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Header Small \* ------------------------------------------------------------ */ .header-small { background-color: #fff; border: 1px solid #e6e6e6; padding: 26px 0 31px; } .header-small .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-small.header-reg { padding: 14px 0 6px; } /* Tablet Portrait */ @media (max-width: 1023px) { .header-small { padding: 11px 0; background-color: #e4f1ff; border: none; } .header-small .header__head .logo svg { width: 88px; height: 25px; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main { padding: 30px 0 112px; } .main.main_review { padding-bottom: 22px; } .main.main_competitors { padding-bottom: 55px; } .main .main__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* Mobile */ @media (max-width: 767px) { .main { padding: 0 0 10px; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1420px; padding-left: 10px; padding-right: 10px; margin: auto; } .section-image .shell { background-color: #000; padding: 60px 30px; max-width: 1400px; } .no-shell .shell { padding-left: 0; padding-right: 0; } .shell-large { max-width: 1465px; padding-right: 10px; margin: auto; } @media (max-width: 767px) { .shell-large { padding-left: 10px; } } .shell--fluid { max-width: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .shell { padding-left: 15px; padding-right: 15px; } } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar { width: 27%; } /* ------------------------------------------------------------ *\ Sidebar Top \* ------------------------------------------------------------ */ .sidebar--top { margin-top: -307px; } /* Small Desktop */ @media (max-width: 1200px) { .sidebar--top { margin-top: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .sidebar { display: none; } } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; position: relative; } /* ------------------------------------------------------------ *\ Wrapper Alt \* ------------------------------------------------------------ */ .wrapper--alt { padding-top: 142px; } /* Small Desktop */ @media (max-width: 1200px) { .wrapper--alt { padding-top: 0; } } /* ------------------------------------------------------------ *\ Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion { max-width: 1135px; margin: auto; } .accordion .accordion__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 39px 0 0; } .accordion .accordion__head_first { background-color: #f4f7f9; padding: 9px 14px; } .accordion .accordion__head h4 { font-weight: 500; margin-bottom: 0; width: 79%; } .accordion .accordion__head.accordion__head_first h4 { font-size: 27px; color: #D60000; } .accordion .accordion__head h4:before { font-weight: 600; padding-right: 8px; } .accordion .accordion__head .ico-plus { width: 31px; height: 31px; border: 2px solid #000; border-radius: 50%; display: block; position: relative; } .accordion .accordion__head .ico-plus span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 15px; height: 3px; background-color: #000; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .accordion .accordion__head .ico-plus span:last-child { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .accordion .accordion__section, .accordion__section__header { padding-bottom: 35px; } .accordion .accordion__section--current .accordion__head .ico-plus span:last-child { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .accordion .accordion__section__header + .accordion__section__header { border-top: 1px dashed #000; } .accordion .accordion__body { padding-top: 17px; padding-left: 36px; } .accordion .accordion__body p, .accordion .accordion__body ul li { font-size: 24px; font-weight: 300; } /* Tablet Portrait */ @media (max-width: 1023px) { .accordion .accordion__body { padding-left: 30px; } } /* Mobile */ @media (max-width: 767px) { .accordion .accordion__head { padding-top: 0; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .accordion .accordion__head h4 { position: relative; padding-left: 35px; } .accordion .accordion__head h4:before { position: absolute; left: 0; top: 0; } .accordion .accordion__head .ico-plus { width: 15px; height: 15px; border-width: 1px; } .accordion .accordion__head .ico-plus span { width: 7px; height: 1px; } .accordion .accordion__section { padding-bottom: 15px; } .accordion .accordion__section + .accordion__section { padding-top: 15px; } .accordion .accordion__body { padding-left: 0; } .accordion .accordion__body p { font-size: 12px; } } /* ------------------------------------------------------------ *\ Accordion Alt \* ------------------------------------------------------------ */ .accordion-alt { max-width: 1042px; } .accordion-alt .accordion__head { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1px 15px 13px; } .accordion-alt .accordion__head .ico-arrow { margin-right: 10px; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .accordion-alt .accordion__head h5 { font-weight: 500; font-size: 22px; } .accordion-alt .accordion__body { padding: 0 29px 21px 39px; } .accordion-alt .accordion__section { padding-bottom: 0; -webkit-transition: background-color .3s; -o-transition: background-color .3s; transition: background-color .3s; } .accordion-alt .accordion__section + .accordion__section { border: none; margin-top: 7px; } .accordion-alt .accordion__section--current { background-color: #fafcfd; } .accordion-alt .accordion__section--current .accordion__head .ico-arrow { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /* Tablet Portrait */ @media (max-width: 1023px) { .accordion-alt .accordion__head h5 { font-size: 20px; } } /* Mobile */ @media (max-width: 767px) { .accordion-alt .accordion__head { padding: 7px 8px; } .accordion-alt .accordion__head .ico-arrow { width: 4px; height: 6px; display: inline-block; vertical-align: middle; margin-right: 7px; } .accordion-alt .accordion__head .ico-arrow svg { width: 100%; height: 100%; display: block; } .accordion-alt .accordion__head h5 { font-size: 13px; } .accordion-alt .accordion__section + .accordion__section { padding-top: 0; margin-top: 5px; } .accordion-alt .accordion__body { padding: 0 20px; } } /* ------------------------------------------------------------ *\ Articles \* ------------------------------------------------------------ */ .articles { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .articles .article-small { -webkit-box-flex: 0; -ms-flex: 0 3 31%; flex: 0 3 31%; padding: 0 0; margin-bottom: 40px; } .articles .article + .article { margin-top: 85px; } /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article .article__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .article .article__inner { padding-left: 30px; padding-right: 30px; } .section.faqs .article .article__inner { padding-left: 0; } .article.right-edge .article__inner { padding-right: 0; } .article.left-edge .article__inner { padding-left: 0; } .article .article__head { margin-bottom: 27px; } .article .article__title { font-size: 36px; font-weight: 500; } .article .article__subtitle { font-size: 24px; font-weight: 300; margin-top: 6px; } .article .article__entry p { font-weight: 300; line-height: 1.67; } .article .article__body { width: 48%; } .article .article__body.no_aside { width: 100%; } .article .article__aside { width: 48%; } .article .article__video { margin-bottom: 10px; margin-top: 39px; margin-left: 37px; } .article .article__video .video { height: 322px; } .article .article__image { width: 48%; } .section-image.about-us .article .article__image img { width: 391px; } .section-image.about-us .article .article__image { width: 34% } .section-image.about-us .article .article__body { width: 64% } .section-image.about-us .article .article__title { margin-top: 20px; } .section-image.about-us .shell { padding: 26px 30px; } .section-image.methodology .article .article__image img { width: 421px; } .section-image.methodology .article .article__image { width: 34% } .section-image.methodology .article .article__body { width: 64% } .section-image.methodology .article .article__title { margin-top: 26px; } .article.right-edge .article__image { text-align: right; } .article.left-edge .article__image { text-align: left; } .section.no-shell.methodology .shell { max-width: 1400px; } .section.no-shell.methodology .article .article__image img { width: 433px; } .section.no-shell.methodology .article .article__image { width: 34% } .section.no-shell.methodology .article .article__body { width: 64% } /* ------------------------------------------------------------ *\ Article Reverse \* ------------------------------------------------------------ */ .article--reverse .article__inner { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /* ------------------------------------------------------------ *\ Article White \* ------------------------------------------------------------ */ .article--white { color: #fff; } /* ------------------------------------------------------------ *\ Article Accordion \* ------------------------------------------------------------ */ .article--accordion .article__entry p { font-size: 18px; line-height: 1.39; font-weight: 400; } /* Tablet Portrait */ @media (max-width: 1023px) { .article .article__inner { -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; } .article .article__body { margin-bottom: 20px; } .article .article__image { margin-bottom: 23px; } .article .article__image, .article .article__image img, .article .article__body, .article .article__aside { width: 100%; } .article--accordion .article__inner { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } /* Mobile */ @media (max-width: 767px) { .articles .article + .article { margin-top: 10px; } .article .article__head { margin-bottom: 12px; } .article .article__title { font-size: 24px; } .article .article__subtitle { font-size: 15px; margin-top: 7px; } .article .article__entry p { font-size: 12px; line-height: 1.33; } .article .article__video .video { height: 190px; } .article .article__image--full-width { width: 100vw; margin-left: -50vw; margin-right: -50vw; position: relative; left: 50%; right: 50%; } .article--accordion .article__video .video { height: 143px; } } /* ------------------------------------------------------------ *\ Article Small \* ------------------------------------------------------------ */ .article-small .article__image { padding-top: 57%; background-size: cover; background-repeat: no-repeat; background-position: center; margin-bottom: 27px; } .article-small .article__head { margin-bottom: 12px; } .article-small .article__head h5 { font-size: 24px; font-weight: 600; } .article-small .article__head h5 a { text-decoration: none; } .article-small .article__entry p { font-size: 16px; font-weight: 300; line-height: 1.5; } /* Tablet Portrait */ @media (max-width: 1023px) { .articles .article-small { -webkit-box-flex: 0; -ms-flex: 0 2 49%; flex: 0 2 49%; } .article-small .article__image { margin-bottom: 15px; } } /* Mobile */ @media (max-width: 767px) { .articles .article-small { -webkit-box-flex: 0; -ms-flex: 0 2 100%; flex: 0 2 100%; margin-bottom: 29px; } .article-small .article__head { margin-bottom: 5px; } .article-small .article__head h5 { font-size: 18px; } .article-small .article__entry p { font-size: 12px; line-height: 1.33; } } /* ------------------------------------------------------------ *\ Bar Holder \* ------------------------------------------------------------ */ .bar-holder { position: relative; width: 613px; height: 100%; } .bar-holder .bar { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 16px; margin: auto 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .bar-holder .bar--yellow { background-color: #fec826; } .bar-holder .bar--blue { background-color: #5d8ebd; } .bar-holder .separate { position: absolute; top: 0; width: 1px; height: 100%; background-color: #0c7183; } .bar-holder .separate:first-child { left: 0; } .bar-holder .separate:nth-child(2) { left: 15%; } .bar-holder .separate:nth-child(3) { left: 30%; } .bar-holder .separate:nth-child(4) { left: 45%; } .bar-holder .separate:nth-child(5) { left: 60%; } .bar-holder .separate:nth-child(6) { left: 75%; } .bar-holder .separate:nth-child(7) { left: 90%; } /* Small Desktop */ @media (max-width: 1200px) { .bar-holder { height: 32px; border-top: 1px solid #5d8ebd; border-bottom: 1px solid #5d8ebd; border-right: 1px solid #5d8ebd; } } /* Mobile */ @media (max-width: 767px) { .bar-holder { width: 100%; height: 19px; } .bar-holder .bar { height: 8px; } } /* ------------------------------------------------------------ *\ Block \* ------------------------------------------------------------ */ .block { padding: 34px 23px 18px; position: relative; } .block + .block { margin-top: 30px; } .block .block__head { margin-bottom: 12px; } .block .block__aside { position: absolute; top: 9px; right: 33px; } .block .block__head h3 { font-size: 36px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 13px; } .block .block__head h4 { font-size: 25px; font-weight: 300; letter-spacing: -.025em; } .block .block__head p { margin-bottom: 0; text-align: right; margin-bottom: 4px; } .block .block__head h6 { font-weight: 600; margin-bottom: 0; } .block.block__quadrant .block__head h6 { font-size: 18px; } .block.block__quadrant .block__entry--small p { font-size: 14px; } .block .block__content h5 { font-size: 24px; font-weight: 500; letter-spacing: -.025em; margin-bottom: 18px; margin-top: 7px; } .block .block__content { margin-bottom: 45px; } .block .block__entry p { font-size: 20px; font-weight: 300; line-height: 1.4; } .block .block__entry--small p { font-size: 18px; line-height: 1.44; } .block .block__image { margin-top: 30px; } .block .block__cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 23px; } .block .block__col--1of2 { -webkit-box-flex: 0; -ms-flex: 0 2 43%; flex: 0 2 43%; } .competitors .block .block__head { margin-bottom: 20px; } .competitors .block .block__head h6 { font-size: 18px; } .competitors .block .block__entry--small p { font-size: 14px; } @media (max-width: 767px) { .competitors .block .block__head h6 { font-size: 19px; font-weight: bold; } .competitors .block .block__entry--small p { font-size: 15px; font-weight: 400; } #competitor_inner .block--blue { background-color: #e2edef; } } /* Large Desktop */ @media (max-width: 1400px) { .block .block__aside { position: static; margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .block .block__aside p { margin-bottom: 0; width: 100%; } } /* Small Desktop */ @media (max-width: 1200px) { .block .block__aside { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } /* Tablet Portrait */ @media (max-width: 1023px) { .block .block__head { margin-bottom: 15px; } .block .block__head h4 { font-size: 18px; } .block .block__entry p { font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .block { padding: 20px 15px 18px; } .block + .block { margin-top: 10px; } .block .block__head h3 { font-size: 18px; margin-bottom: 5px; } .block .block__head h4 { font-size: 16px; } .block .block__head h6 { font-size: 15px; } .block .block__image { margin-top: 19px; } .block .block__content h5 { font-size: 16px; margin-bottom: 5px; } .block .block__entry p { font-size: 12px; } .block .block__aside { margin-top: 15px; } .block .block__aside p { margin-bottom: 5px; } .block .block__cols { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; } .block .block__col + .block__col { margin-top: 40px; } .main_competitors .block .block__head h4 { font-size: 19px; font-weight: 400; } .main_competitors .block .block__entry p { font-size: 16px; } } /* ------------------------------------------------------------ *\ Block Pink \* ------------------------------------------------------------ */ .block--pink { background: #f4e4e4; padding-top: 12px; } /* ------------------------------------------------------------ *\ Block Blue \* ------------------------------------------------------------ */ .block--blue { background: #e2edef; } /* ------------------------------------------------------------ *\ Block Light blue \* ------------------------------------------------------------ */ .block--light-blue { background-color: #f7fbfd; } .block--light-blue { padding-top: 15px; } /* ------------------------------------------------------------ *\ Block \* ------------------------------------------------------------ */ .block--small { padding: 14px 15px; } /* ------------------------------------------------------------ *\ Block Warning \* ------------------------------------------------------------ */ .block-warning { background-color: #ffca10; padding: 29px 28px; } .block-warning h5 { font-weight: 700; margin-bottom: 10px; } .block-warning p { font-size: 21px; margin-bottom: 12px; } .block-warning a { font-size: 22px; text-decoration: underline; font-weight: 500; } /* Mobile */ @media (max-width: 767px) { .block-warning { padding: 17px 15px; } .block-warning p { font-size: 14px; } .block-warning a { font-size: 12px; } } /* ------------------------------------------------------------ *\ Breadcrumbs \* ------------------------------------------------------------ */ .breadcrumbs { padding: 10px 15px; background-color: #f7f7f7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .breadcrumbs .breadcrumbs__aside { font-size: 13px; font-family: 'Arial'; } .breadcrumbs ul { margin-bottom: 0; } .breadcrumbs li { display: inline-block; position: relative; } .breadcrumbs li a { font: 400 14px/1 'Lato'; text-decoration: none; } .breadcrumbs li + li:before { content: '»'; font: 400 14px/1 'Lato'; } .breadcrumbs .current a, .breadcrumbs a:hover { color: #ff3225; } /* Mobile */ @media (max-width: 767px) { .breadcrumbs { display: none; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 24px; font-weight: 500; padding: 14px 15px 9px; line-height: 1; -webkit-transition: background .3s, color .3s; -o-transition: background .3s, color .3s; transition: background .3s, color .3s; border-radius: 0; } .span-btn { display: inline-block; vertical-align: middle; text-align: center; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 24px; font-weight: 500; padding: 12px 15px 11px; line-height: 1; -webkit-transition: background .3s, color .3s; -o-transition: background .3s, color .3s; transition: background .3s, color .3s; border-radius: 0; } /* Button green */ .btn--green { background-color: #78b315; border: 1px solid #fff; color: #fff; } .btn--green:hover { background-color: #1c823b; color: #fff; } /* Button price */ .btn--price { min-width: 230px; padding: 12px 15px 13px; } /* Button red */ .btn--red { background-color: #f40109; color: #fff; text-transform: uppercase; } .btn--red:hover { background-color: #a5261e; color: #fff; } /* Button Rounded */ .btn--rounded { border-radius: 3px; } /* Button Small */ .btn--small { font-size: 18px; padding: 18px 30px; } /* Mobile */ @media (max-width: 767px) { .btn--small { font-size: 12px; padding: 15px; } } /* Button Medium */ .btn--medium { font-size: 20px; font-weight: 700; } .btn--medium span { letter-spacing: 0.08em; } /* Button icon */ .btn--icon svg { display: inline-block; vertical-align: middle; margin-left: 10px; } /* Button blue */ .btn--blue { background-color: #647b9c; color: #fff; } /* Button Gray */ .btn--gray { background-color: #647b9c; color: #fff; } /* Button Widget */ .btn--widget { border-radius: 3px; text-transform: uppercase; font-size: 18px; } /* Button Card */ .btn--card { font-size: 16px; font-weight: 400; background-color: #d70000; border-radius: 5px; text-transform: uppercase; padding: 11px 14px 9px; } /* Button Block */ .btn--block { display: block; padding-left: 0; padding-right: 0; } /* Button filter */ .btn--filter { font-size: 18px; font-weight: 500; padding: 19px 18px 18px; color: #fff; min-width: 219px; } .btn--filter-green { background-color: #2a816b; } .btn--filter-red { background-color: #812a2a; } .btn--filter:hover { color: #fff; opacity: .8; } /* Button User */ .btn--user { font-size: 12px; min-width: 130px; padding: 8px; text-transform: uppercase; background-color: #1686b0; color: #fff; } /* Button Linkedin */ .btn-linkedin { -webkit-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .btn-linkedin:hover { opacity: .8; color: #fff; } .btn-linkedin--large { background-color: #069; min-width: 211px; color: #fff; font-size: 14px; padding: 13px 17px 15px; text-align: center; text-transform: uppercase; text-decoration: none; } .btn-linkedin--large i, .btn-linkedin--large span { display: inline-block; vertical-align: middle; } /* Mobile */ @media (max-width: 767px) { .btn-linkedin img { width: 129px; height: 30px; } } /* Button Content */ .btn-content { margin: 0 55px; max-width: 295px; position: relative; z-index: 1; } .btn-content:after, .btn-content:before { content: ''; position: absolute; top: 12px; bottom: 0; height: 71px; width: 1px; background-color: #3d4043; } .btn-content:before { left: -17%; } .btn-content:after { right: -17%; } .btn-content > span { display: block; text-transform: uppercase; margin-bottom: 37px; position: relative; } .btn-content > span:before, .btn-content > span:after { content: ''; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 84px; height: 1px; background-color: #3d4043; } .btn-content > span:before { right: 80%; } .btn-content > span:after { left: 80%; } .btn-content .btn:after { content: ''; position: absolute; top: 50px; bottom: 0; left: -39px; right: 0; width: 302px; height: 1px; background-color: #3d4043; margin: auto; z-index: -1; } /* Mobile */ @media (max-width: 767px) { .btn-content { max-width: 193px; margin: auto; } .btn-content span { font-size: 15px; } .btn-content > span { margin-bottom: 11px; } .btn-content > span:before, .btn-content > span:after { width: 41px; } .btn-content:after { right: -1%; } .btn-content:before { left: -1%; } .btn-content:after, .btn-content:before { height: 36px; } .btn-content .btn:after { width: 193px; left: 0; top: 37px; } .btn-content .btn--medium { padding: 5px; min-width: 132px; font-size: 11px; } .btn-content .btn--medium span { font-size: 11px; } .btn-content .btn--medium svg { width: 16px; height: 16px; } } /* Button Question */ .btn-question { min-width: 52px; font-size: 16px; font-family: Roboto , Arial, Helvetica, sans-serif; text-transform: uppercase; background-color: #282828; color: #fff; border-radius: 10px; padding: 2px 16px; text-decoration: none; } /* Button Reply */ .btn-reply { color: #c00; font-size: 14px; background-color: #fff4f0; text-transform: uppercase; text-decoration: none; padding: 7px 14px; } /* ------------------------------------------------------------ *\ Card Info \* ------------------------------------------------------------ */ .card-info { margin-top: 60px; } .main-rankings-page .card-info { margin-top: 20px; } .main-rankings-page .card-info.card-info-extra { margin-top: 60px; } .main_review .card-info-first { margin-top: -6px; } .card-info .card__head { margin-bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .card-info .card__head h4 { font-weight: 600; margin-bottom: 0; font-size: 26px; } .card-info .filters { margin-top: 21px; } /* Mobile */ @media (max-width: 767px) { .main_review .card-info-first { margin-top: 26px; } .card-info { margin-top: 25px; } .card-info .card__head { margin-bottom: 10px; -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; } .card-info .card__head .btn { margin-top: 5px; font-size: 9px; padding: 7px 10px; } .card-info .card__head h4 { font-size: 18px; font-weight: bold; } } /* ------------------------------------------------------------ *\ Comment \* ------------------------------------------------------------ */ .comments { padding: 36px 0; } .comments .comments__foot { text-align: center; padding: 15px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; } .comments .comments__foot a { text-transform: uppercase; text-decoration: none; color: #0c6db8; font-weight: 500; line-height: 1; } .comments .comments__foot a:hover { opacity: .8; } .comments .comments__foot a i { line-height: 0; } .comments .comments__foot a span { display: inline-block; vertical-align: middle; margin-right: 12px; margin-top: -6px; } .comments .comment + .comment { border-top: 1px solid #cbcbcb; padding-top: 38px; } .comment { position: relative; } .comment .comment__aside { position: absolute; top: 38px; left: 0; } .comment .comment__body { padding-left: 123px; } .comment .comment__head { background-color: #5b7cac; color: #fff; border-radius: 5px; padding: 17px 21px; position: relative; z-index: 2; } .comment .comment__title { font-weight: 300; margin-top: 16px; font-size: 21px; } .comment .comment__bar { -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09); border: 1px solid #dadada; border-radius: 5px; margin: -60px 20px 0; padding: 70px 17px 15px; position: relative; z-index: 1; } .comment .comment__bar li { display: inline-block; vertical-align: middle; } .comment .comment__bar li + li { padding-left: 14px; margin-left: 14px; border-left: 1px solid #8b8b8b; } .comment .comment__bar p { font-size: 16px; font-weight: 400; } .comment .comment__btn { border-radius: 5px; text-transform: uppercase; font-size: 16px; font-weight: 300; padding: 11px 20px 9px; } .comment .comment__content { padding: 35px 40px; } .comment .comment__meta { margin-bottom: 10px; } .comment .comment__meta li { display: inline-block; vertical-align: middle; font-size: 20px; } .comment .comment__meta .blue { color: #0c6db8; } .comment .comment__meta li + li { padding-left: 7px; margin-left: 7px; border-left: 1px solid #8b8b8b; } .comment .comment__entry p { font-weight: 300; line-height: 1.44; } .comment .comment__entry p a { color: #0c6db8; } /* ------------------------------------------------------------ *\ Comment Large \* ------------------------------------------------------------ */ .comment--large .comment__body { padding-left: 0; } /* Mobile */ @media (max-width: 767px) { .comments { padding: 10px 0; } .comments .comment + .comment { border: none; padding-top: 10px; } .comments .comments__foot { padding: 9px 15px; } .comments .comments__foot .ico-arrow { width: 4px; height: 7px; display: inline-block; } .comments .comments__foot .ico-arrow svg { width: 100%; height: 100%; display: block; } .comments .comments__foot a span { margin-top: 0; } .comment .comment__head { padding: 9px 15px; border-radius: 0; } .comment .comment__title { font-size: 13px; margin-top: 10px; } .comment .comment__body { padding-left: 0; } .comment .comment__bar { padding: 62px 6px 6px; } .comment .comment__bar p { font-size: 8px; } .comment .comment__btn { font-size: 8px; padding: 5px 12px; } .comment .comment__aside { display: none; } .comment .comment__content { padding: 12px 15px; } .comment .comment__meta li { font-size: 14px; } } /* ------------------------------------------------------------ *\ Contact \* ------------------------------------------------------------ */ .contact { text-align: center; max-width: 810px; margin: auto; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; font-size: 23px; font-weight: 300; padding: 14px 0; } .contact a { color: #0c6db8; font-weight: 400; } .contact .contact__circle { background-color: #000; color: #fff; text-transform: uppercase; font-size: 14px; width: 34px; height: 34px; display: inline-block; vertical-align: middle; border-radius: 50%; line-height: 34px; } /* Tablet Portrait */ @media (max-width: 1023px) { .contact { max-width: 100%; font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .contact { font-size: 13px; } .contact .contact__circle { width: 22px; height: 22px; line-height: 22px; font-size: 9px; display: block; margin: 8px auto; } } /* ------------------------------------------------------------ *\ Dropdown Default \* ------------------------------------------------------------ */ .dropdown-default .dropdown-toggle { padding: 12px; background-color: #fff; border: 1px solid transparent; font-size: 18px; text-decoration: none; line-height: 1; display: block; z-index: 1; position: relative; } .dropdown-default .dropdown-toggle span, .dropdown-default .dropdown-toggle i { display: inline-block; vertical-align: middle; } .dropdown-default .dropdown-toggle i svg { display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .dropdown-default .dropdown-toggle.active { border: 1px solid #c9c9c9; -webkit-box-shadow: 2.5px 0px 0px 0px rgba(0, 0, 0, 0.05); box-shadow: 2.5px 0px 0px 0px rgba(0, 0, 0, 0.05); border-bottom: none; z-index: 3; } .dropdown-default .dropdown-toggle.active i svg { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .dropdown-default .dropdown__menu { position: absolute; top: 45px; right: 0; border: 1px solid #c9c9c9; -webkit-box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); background-color: #fff; z-index: 1; margin-top: -2px; width: 210px; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; padding: 22px 13px; } .dropdown-default .dropdown__menu--large { width: 100%; height: auto; } .dropdown-default .dropdown__menu--first { z-index: 2; } .dropdown-default .dropdown__menu.active { opacity: 1; visibility: visible; } /* ------------------------------------------------------------ *\ Filters \* ------------------------------------------------------------ */ .filters .filters__actions a + a { margin-left: 10px; } .filters .filters__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; min-height: auto; position: relative; } .filters .filters__content.active { min-height: 300px; margin-top: -18px; } .filters .filters__content.active.sort-active { min-height: 210px; } .filters .filters__content .dropdown-default + .dropdown-default { margin-left: 15px; } /* Large Desktop */ @media (max-width: 1400px) { .filters .filters__content.active { min-height: 500px; } } /* ------------------------------------------------------------ *\ Filter \* ------------------------------------------------------------ */ .filter .filter__cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .filter .filter__col--size1 { width: 37%; } .filter .filter__col--size2 { width: 18%; } .filter .filter__head { margin-bottom: 8px; } .filter .filter__head h6 { font-size: 16px; font-weight: 600; } /* Large Desktop */ @media (max-width: 1400px) { .filter .filter__cols { -ms-flex-wrap: wrap; flex-wrap: wrap; } .filter .filter__col--size1 { width: 48%; margin-bottom: 20px; } .filter .filter__col--size2 { width: 48%; margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } /* ------------------------------------------------------------ *\ Checkbox \* ------------------------------------------------------------ */ .checkbox { margin: 0; } .checkbox input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 1px; height: 1px; line-height: 1; } .checkbox label { font-size: 15px; padding-left: 33px; position: relative; } .checkbox label:after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 21px; height: 21px; border: 1px solid #dadada; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0.5px 0.866px 3px 0px rgba(0, 0, 0, 0.09); box-shadow: inset 0.5px 0.866px 3px 0px rgba(0, 0, 0, 0.09); } .checkbox label:before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; margin: auto; width: 11px; height: 11px; background: #00a64e; z-index: 2; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .checkbox input:checked ~ label:before { opacity: 1; visibility: visible; } /* ------------------------------------------------------------ *\ Radio \* ------------------------------------------------------------ */ .radio { margin: 0; } .radio input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 1px; height: 1px; } .radio h5 { font-size: 24px; font-weight: 400; margin-bottom: 10px; } .radio label { display: block; border: 1px solid #c1c1c1; padding: 18px 18px 38px 65px; position: relative; -webkit-transition: border .3s; -o-transition: border .3s; transition: border .3s; } .radio label:after { content: ''; position: absolute; left: 16px; top: 16px; width: 29px; height: 29px; border: 1px solid #dbdbdb; border-radius: 50%; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.1); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.1); background-color: #fff; -webkit-transition: border .3s; -o-transition: border .3s; transition: border .3s; } .radio label:before { content: ''; position: absolute; top: 23px; left: 23px; width: 14px; height: 14px; background-color: #4fa5c1; border-radius: 50%; z-index: 5; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .radio input:checked ~ label { border: 3px solid #4fa5c1; background-color: #f9fcff; } .radio input:checked ~ label:after { border: 2px solid #4fa5c1; } .radio input:checked ~ label:before { opacity: 1; visibility: visible; } /* Mobile */ @media (max-width: 767px) { .radio h5 { font-size: 12px; margin-bottom: 5px; } .radio p { font-size: 9px; } .radio label { border-width: 2px; padding: 10px 18px 14px 32px; } .radio label:after { width: 14px; height: 14px; left: 8px; top: 10px; } .radio label:before { width: 6px; height: 6px; top: 14px; left: 12px; } .radio input:checked ~ label { border-width: 2px; } } /* ------------------------------------------------------------ *\ Radio Lang \* ------------------------------------------------------------ */ .radio-lang input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 1px; height: 1px; } .radio-lang label { font-size: 16px; padding-left: 31px; position: relative; font-weight: 400; } .radio-lang label:after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 21px; height: 21px; border-radius: 50%; border: 1px solid #dadada; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0.5px 0.866px 3px 0px rgba(0, 0, 0, 0.09); box-shadow: inset 0.5px 0.866px 3px 0px rgba(0, 0, 0, 0.09); } .radio-lang label:before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 11px; height: 11px; background-color: #00a64e; z-index: 2; opacity: 1; visibility: hidden; border-radius: 50%; margin: auto; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .radio-lang input:checked ~ label:before { opacity: 1; visibility: visible; } /* ------------------------------------------------------------ *\ Field \* ------------------------------------------------------------ */ .field { font-size: 18px; padding: 11px; width: 100%; border: 1px solid #d3d3d3; background-color: #fff; } .field--alt { border: none; font-size: 16px; letter-spacing: -.025em; padding: 15px; } /* Mobile */ @media (max-width: 767px) { .field { padding: 8px; font-size: 12px; } } /* ------------------------------------------------------------ *\ Select \* ------------------------------------------------------------ */ .select { min-width: 301px; max-width: 301px; -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.12); } .select select { width: 100%; } .select--large { min-width: 401px; max-width: 100%; } .select .select2-container { width: 100% !important; text-align: left; } .select .select2-container--default .select2-selection--single { border-radius: 0; height: 52px; } .select .select2-container--default .select2-selection--single .select2-selection__rendered { background-color: #666; color: #fff; line-height: 52px; padding-left: 21px; letter-spacing: -0.01em; } .select .select2-container--default .select2-selection--single .select2-selection__arrow { background-image: url(/images/svg/arrow.svg); background-size: 100% 100%; width: 18px; height: 11px; top: 0; bottom: 0; margin: auto 0; right: 16px; } .select .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; } .select2-container .select2-dropdown { border-radius: 0; background-color: #fff; color: #000; } .select2-container--default .select2-results > .select2-results__options { padding: 12px 0; } .select2-results__option { padding: 4px 22px; font-weight: 300; } /* Small Desktop */ @media (max-width: 1200px) { .select { min-width: 275px; max-width: 275px; } } /* Mobile */ @media (max-width: 767px) { .select { min-width: 100%; max-width: 100%; } .select .select2-container--default .select2-selection--single { height: 36px; } .select .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; font-size: 17px; padding-left: 11px; padding-right: 11px; background-color: #000; } .select .select2-container--default .select2-selection--single .select2-selection__arrow { width: 9px; height: 5px; } .select2-container .select2-dropdown { background-color: #000; } .select2-results__option { font-size: 17px; } } /* ------------------------------------------------------------ *\ Select Alt \* ------------------------------------------------------------ */ .select-alt { min-width: 282px; width: 100%; } .select-alt select { width: 100%; } .select-alt .select2-container--default .select2-selection--single { border: none; border-radius: 0; } .select-alt .select2-container--default .select2-selection--single .select2-selection__rendered { background-color: #fff; font-size: 18px; color: #000; padding-left: 16px; padding-right: 55px; line-height: 37px; } .select-alt .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 7px 7px 0 7px; border-color: #000 transparent transparent transparent; margin-left: -16px; margin-top: 0; } /* Mobile */ @media (max-width: 767px) { .select-alt { min-width: 100%; } .select-alt .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 15px; line-height: 23px; padding-top: 3px; padding-left: 6px; } .select-alt .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 4px 4px 0 4px; } } /* ------------------------------------------------------------ *\ Select Sort \* ------------------------------------------------------------ */ .select-sort { max-width: 200px; width: 100%; } .select-sort select { width: 100%; } .select-sort .select2-container--default .select2-selection--single { border-color: #dadada; border-radius: 0; height: 40px; } .select-sort .select2-container--default .select2-selection--single .select2-selection__rendered { background-color: #fff; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.09); box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.09); font-size: 17px; line-height: 37px; } .select-sort .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 7px 7px 0 7px; border-color: #000 transparent transparent transparent; margin-left: -19px; margin-top: 3px; } /* Mobile */ @media (max-width: 767px) { .select-sort { max-width: 108px; } .select-sort .select2-container--default .select2-selection--single { height: 20px; } .select-sort .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 11px; line-height: 20px; } .select-sort .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 4px 4px 0 4px; margin-top: -6px; margin-left: -2px; } } /* ------------------------------------------------------------ *\ Select Lang \* ------------------------------------------------------------ */ .select-lang { min-width: 142px; } .select-lang .select2-container--default .select2-selection--single { border: none; } .select-lang .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 16px; color: #0c6db8; padding-right: 30px; padding-left: 0; } .select-lang .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width: 7px 7px 0 7px; border-color: #000 transparent transparent transparent; margin-left: -20px; } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form { max-width: 1045px; margin: auto; } .form .form__cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form .form__col--1of3 { -webkit-box-flex: 0; -ms-flex: 0 3 31%; flex: 0 3 31%; } .form .form__label { font-weight: 400; margin-bottom: 3px; display: block; } .form .form__asterisk { color: #f10; } .form .form__row + .form__row { margin-top: 19px; } .form .form__actions { text-align: center; margin-top: 32px; } .form .form__btn { border-radius: 3px; border: none; text-transform: uppercase; padding: 14px 15px 13px; min-width: 212px; } /* Mobile */ @media (max-width: 767px) { .form .form__col--1of3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 5px; } .form .form__label { font-size: 12px; font-weight: 500; } .form .form__btn { font-size: 15px; display: block; min-width: 100%; padding: 9px 15px 9px; } .form .form__actions { margin-top: 10px; } .form .form__row + .form__row { margin-top: 0; } } /* ------------------------------------------------------------ *\ Form Quote \* ------------------------------------------------------------ */ .form-quote { background-color: #e7e6ce; padding: 36px 34px; } .form-quote .form__head { margin-bottom: 20px; } .form-quote .form__head h6 { font-size: 21px; font-weight: 700; letter-spacing: -.021em; } .form-quote .form__actions { margin-top: 22px; } .form-quote .form__btn { display: block; width: 100%; background-color: #d70000; color: #fff; border-radius: 3px; text-transform: uppercase; font-size: 18px; font-weight: 700; padding: 15px; } .form-quote .form__row + .form__row { margin-top: 10px; } /* Small Desktop */ @media (max-width: 1200px) { .form-quote { padding: 20px; } } /* ------------------------------------------------------------ *\ Form Question \* ------------------------------------------------------------ */ .form-question { background-color: #192537; padding: 20px 27px 25px; color: #fff; } .form-question .form__head { margin-bottom: 10px; } .form-question .form__head h5 { font-size: 24px; } .form-question .form__controls { width: 83%; } .form-question .form__field { padding: 15px; border: none; background-color: #fff; width: 100%; color: #000; } .form-question .form__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form-question .form__btn { min-width: 147px; background-color: #d70000; font-size: 20px; text-transform: uppercase; border-radius: 4px; } /* Mobile */ @media (max-width: 767px) { .form-question { padding: 15px 15px 19px; } .form-question .form__head { margin-bottom: 14px; } .form-question .form__head h5 { font-size: 12px; } .form-question .form__field { padding: 5px; height: 31px; } .form-question .form__btn { font-size: 15px; min-width: 73px; padding: 5px; border-radius: 0; border: 1px solid #d70000; } } /* ------------------------------------------------------------ *\ Fallery \* ------------------------------------------------------------ */ .gallery .gallery__cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .gallery .gallery__col--size1 { width: 62%; } .gallery .gallery__col--size2 { width: 37%; } /* Mobile */ @media (max-width: 767px) { .gallery .gallery__cols { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .gallery .gallery__col--size1, .gallery .gallery__col--size2 { width: 100%; margin-bottom: 10px; } } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { padding: 87px 0 78px; } .intro .intro__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .intro .intro__body { width: 35%; } .intro .intro__video { width: 740px; } .intro .intro__video .video { -webkit-box-shadow: 0px 0px 70px 0px rgba(0,0,0,0.4); box-shadow: 0px 0px 70px 0px rgba(0,0,0,0.4); } .intro .intro__head { margin-bottom: 30px; } .intro .intro__entry p { font-size: 20px; font-weight: 300; letter-spacing: -0.01em; line-height: 1.5; } .intro .intro__head h1 { letter-spacing: -0.01em; font-weight: 400; line-height: 1.3; font-size: 36px; } /* Mobile */ @media (max-width: 767px) { .intro .intro__head h1 { font-size: 22px; font-weight: bold; } .intro .intro__entry { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .intro .intro__inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .intro .intro__head { margin-bottom: 10px; } .intro .intro__entry p { font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .intro { padding: 11px 0 17px; } .intro .intro__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .intro .intro__head { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 20px; } .intro .intro__video { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; margin-bottom: 20px; } .intro .intro__body { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 100%; } .intro .intro__entry p { font-size: 12px; } } /* ------------------------------------------------------------ *\ Intro Alt \* ------------------------------------------------------------ */ .intro-alt { background-color: #000; background-size: cover; background-repeat: no-repeat; background-position: center center; min-height: 418px; } .intro-alt.methodology { min-height: 0; } .intro-alt .intro__content { padding: 240px 0 65px 40px; } .intro-alt.methodology .intro__content { padding-top: 56px; } .intro-alt .intro__title { font-size: 67px; background-color: #fff; color: #000; display: inline-block; font-weight: 600; margin-bottom: 5px; padding: 11px; } .intro-alt .intro__subtitle { background-color: #000; color: #fff; display: inline-block; font-size: 24px; font-weight: 500; padding: 14px 18px 18px; line-height: 1; } .intro-alt--left { background-position: left center; } /* Mobile */ @media (max-width: 767px) { .intro-alt { min-height: 315px; } .intro-alt .intro__content { padding: 220px 0 26px; } .intro-alt .intro__title { font-size: 24px; } .intro-alt .intro__subtitle { font-size: 12px; padding: 8px 6px; } .intro-alt--left { min-height: 135px; } } /* ------------------------------------------------------------ *\ Intro Product \* ------------------------------------------------------------ */ .intro-product { min-height: 360px; background-size: cover; background-repeat: no-repeat; background-position: center center; padding: 45px 0 0; } .intro-product .intro__content { padding-bottom: 35px; } .intro-product .intro__foot { background-color: rgba(0, 0, 0, 0.56); color: #fff; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); } .intro-product .intro__foot .shell { padding-left: 0; margin-left: 0; } /* Small Desktop */ @media (max-width: 1200px) { .intro-product { min-height: auto; } } /* Tablet Portrait */ @media (max-width: 1023px) { .intro-product .intro__foot { overflow-x: auto; } } /* Mobile */ @media (max-width: 767px) { .intro-product { min-height: auto; padding: 112px 0 0; } .intro-product .intro__inner { background-color: #fff; } .intro-product .intro__foot { overflow-x: auto; background-color: #fff; color: #000; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* List Select */ .list-select li { display: inline-block; } .list-select li + li { margin-left: 19px; } /* Mobile */ @media (max-width: 767px) { .list-select li { display: block; } .list-select li + li { margin-left: 0; } } /* List Checks */ .list-check li + li { margin-top: 7px; } .list-check i { display: inline-block; vertical-align: middle; } .list-check span { display: inline-block; vertical-align: middle; font-size: 24px; letter-spacing: -.025em; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-check span { font-size: 16px; } } /* Mobile */ @media (max-width: 767px) { .list-check i svg { width: 10px; height: 10px; } .list-check span { font-size: 13px; } .list-check li + li { margin-top: 0; } } /* List Radios */ .list-radios li + li { margin-top: 27px; } /* Mobile */ @media (max-width: 767px) { .list-radios { margin-bottom: 17px; } .list-radios li + li { margin-top: 11px; } } /* List logos */ .list-logos { text-align: center; } /* List Buttons */ .list-buttons { text-align: center; position: relative; padding-top: 81px; } .list-buttons li:first-child { position: absolute; top: -5px; left: 0; right: 0; margin: auto; z-index: 2; } .list-buttons li { display: inline-block; } /* Mobile */ @media (max-width: 767px) { .list-buttons { padding-top: 0; } .list-buttons li { display: block; } .list-buttons li:first-child { position: static; } .list-buttons li + li { margin-top: 30px; } } /* List Ratings */ .list-ratings li { display: inline-block; } .list-ratings li + li { margin-left: -2px; } .list-ratings span { font-size: 20px; color: #fff; padding-left: 10px; vertical-align: super; } .list-ratings .black { color: #000; } /* Mobile */ @media (max-width: 767px) { .list-ratings span { font-size: 11px; font-weight: 500; display: inline-block; vertical-align: middle; } } /* List Ratings Small */ .list-rating-small li { display: inline-block; } .list-rating-small li + li { margin-left: -5px; } /* List Contact */ .list-contact li { display: inline-block; } .list-contact li a { font-size: 20px; letter-spacing: -.025em; font-weight: 300; color: #fff; text-decoration: none; } .list-contact li + li { padding-left: 11px; margin-left: 5px; border-left: 2px solid #fff; } /* Mobile */ @media (max-width: 767px) { .list-contact li a { font-size: 16px; color: #555; } .list-contact li:last-child { display: none; } } /* List overview */ .list-overview { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-overview li { padding: 14px 42px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .2); border-bottom: 2px solid rgba(255, 255, 255, .2); min-height: 84px; position: relative; } .list-overview li:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ee364c; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .list-overview a { text-decoration: none; } .list-overview a:hover { color: #fff; } .list-overview p { font-size: 14px; font-weight: 400; text-transform: uppercase; } .list-overview span { font-size: 23px; font-weight: 700; } .list-overview .current { border-bottom: 2px solid #ee364c; } .list-overview .current:after { opacity: 1; visibility: visible; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-overview li { padding: 14px 30px; } } /* Mobile */ @media (max-width: 767px) { .list-overview { border-top: 1px solid #dfdfdf; width: 424px; margin-left: -50vw; margin-right: -50vw; position: relative; left: 50%; right: 50%; overflow-x: auto; } .list-overview li { border-color: #dfdfdf; padding: 16px 15px 17px; min-height: 58px; border-bottom: 1px solid #dfdfdf; } .list-overview li:after { border-left-width: 4px; border-right-width: 4px; border-bottom-width: 4px; } .list-overview p { font-size: 12px; font-weight: 500; } .list-overview span { font-size: 16px; } .list-overview .ico-eye-white { width: 26px; height: 10px; display: inline-block; margin-bottom: 6px; } .list-overview .ico-eye-white svg { width: 100%; height: 100%x; display: block; } .list-overview .ico-eye-white svg path { fill: #000; } .list-overview a:hover { color: #000; } } /* List info */ .list-info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: -10px; } .list-info > li { -webkit-box-flex: 0; -ms-flex: 0 2 48%; flex: 0 2 48%; padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px solid #ededed; } .list-info > li.last { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .list-info strong { font-weight: 600; font-size: 16px; } .list-info p { font-size: 14px; font-weight: 400; } /* Mobile */ @media (max-width: 767px) { .list-info > li { -webkit-box-flex: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; padding-bottom: 14px; margin-bottom: 13px; } .list-info strong { font-size: 16px; } .list-info p { font-size: 15px; margin-top: 4px; } .list-info > li { border-bottom: 1px solid #cecece; } } /* List Review */ .list-review > li { display: inline-block; } .list-review > li + li { padding-left: 13px; margin-left: 13px; border-left: 1px solid #a9a9a9; } .list-review a { text-decoration: none; } .list-review span { font-size: 18px; font-weight: 700; text-transform: uppercase; display: inline-block; vertical-align: middle; } .list-review i { display: inline-block; vertical-align: middle; } .list-review .ico-star-half { height: 26px; width: 26px; } .list-review .ico-star-half:after { bottom: -2px; } .list-review .green { color: #6e912a; } .list-review .blue { text-decoration: underline; color: #0c6db8; } /* Mobile */ @media (max-width: 767px) { .list-review span { font-size: 13px; font-weight: 600; } .list-review span.unv { color: #b51011; } .list-review > li + li { padding-left: 5px; margin-left: 4px; } .list-review .ico-check-circle { width: 18px; height: 18px; display: inline-block; } .list-review .ico-check-circle svg { height: 100%; width: 100%; display: block; } .list-review .ico-info-circle { width: 12px; height: 12px; } .list-review li p { font-size: 14px; font-weight: 600; } .list-review.review-page > li { border-right: 1px solid #a9a9a9; padding-right: 12px; } .list-review.review-page > li + li { position: relative; } .list-review.review-page li p { position: absolute; top: -12px; width: 150px; } } /* List Sort */ .list-sort li { padding-left: 15px; position: relative; } .list-sort li + li { margin-top: 7px; } .list-sort li a { font-size: 16px; text-decoration: none; } .list-sort li a i { position: absolute; left: 0; top: 0; bottom: 0; margin: auto; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .list-sort .current a i, .list-sort li a:hover i { opacity: 1; visibility: visible; } /* List Checkboxes */ .list-checkboxes li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .list-checkboxes li + li { margin-top: 6px; } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo-wrap img { width: 125px; } /* ------------------------------------------------------------ *\ Magnific popup \* ------------------------------------------------------------ */ /* Mobile */ @media (max-width: 767px) { .mfp-container { padding-left: 15px; padding-right: 15px; } } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .navbar { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 25px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #e4f1ff; display: none; } .navbar .lang-selector { width: 88px; height: 50px; cursor: pointer; background: url(/home_assets/images/US-icon.png) no-repeat center / contain; color: #000; font-family: Lato,sans-serif; font-size: 24px; font-weight: 700; line-height: 44.21px; text-transform: uppercase; text-align: center; } .hambarg_menu { top: 0; -webkit-transition: left .3s; -o-transition: left .3s; transition: left .3s; /*display: none;*/ } .hambarg_menu a { text-decoration: none; } .hambarg_menu.active { left: 0; } /* Small Desktop */ @media (max-width: 1200px) { .navbar { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; } } /* ------------------------------------------------------------ *\ Plans \* ------------------------------------------------------------ */ .plans table { width: 100%; } .plans .plans__description { display: block; color: #fff; font-size: 24px; font-weight: 600; text-transform: uppercase; padding: 12px 12px 8px; position: relative; margin-bottom: 0; text-align: center; } .plans .plans__description:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; margin: auto; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 13px solid red; } .plans .plans__description--blue { background-color: #17739b; } .plans .plans__description--blue:after { border-top-color: #17739b; } .plans .plans__description--dark-blue { background-color: #144d9b; } .plans .plans__description--dark-blue:after { border-top-color: #144d9b; } .plans .plans__prices { color: #fff; padding: 33px 0; text-align: center; display: block; } .plans .plans__prices--blue { background-color: #238bb6; } .plans .plans__prices--dark-blue { background-color: #2065b6; } .plans .plans__prices .btn--price { margin-bottom: -85px; } .plans .blue { background-color: #ebf7fc; border-bottom-color: #49b7e4; border-left: 2px solid #49b7e4; border-right: 2px solid #49b7e4; } .plans .orange { background-color: #fefaf4; border-bottom-color: #f4d2be; border-left: 2px solid #f4d2be; border-right: 2px solid #f4d2be; } .plans tr th:nth-child(4), .plans tr th:nth-child(2) { width: 320px; } .plans tr th:nth-child(2) + th:nth-child(4), .plans tr td:nth-child(2) + td:nth-child(4) { margin-left: 30px; display: block; } .plans tr td:nth-child(3), .plans tr th:nth-child(3) { border: none; } .plans tr:last-child th:first-child { text-align: left; padding-bottom: 0; padding-top: 0; border-bottom: 2px solid #dbdbdb; } @media (max-width: 767px) { .plans tr th { position: relative; } } .plans tr:last-child th:first-child h3 { margin-bottom: -10px; } .plans tr th:first-child, .plans tr td:first-child { width: 730px; } .plans th h3 { font-weight: 300; letter-spacing: -0.01em;} .plans tr td { padding: 15px; text-align: center; border-bottom: 1px solid #dbdbdb; } .plans tr td p { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; } .plans tr td:first-child { text-align: left; padding: 15px 0 14px; } .plans tr:first-child td { padding-top: 38px; } .plans tfoot td:first-child { border: none; } .plans tfoot tr:first-child td { padding-top: 15px; } .plans tfoot .btn--price { margin-bottom: -50px; } /* Mobile */ @media (max-width: 767px) { .plans .plans__prices { padding: 36px 0 0px 0; } .plans .plans__prices .btn--price { position: absolute; left: 0; right: 0; margin: auto; bottom: -25px; min-width: 170px; max-width: 170px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .plans tr:last-child th:first-child h3 { font-size: 19px; } .plans tr td p { font-size: 16px; } .plans .plans__description { font-size: 26px; } .plans tr th:nth-child(4), .plans tr th:nth-child(2) { width: auto; } .plans tr th:first-child, .plans tr td:first-child { width: auto; } } /* ------------------------------------------------------------ *\ Plan \* ------------------------------------------------------------ */ .plans .plan + .plan { margin-top: 81px; } .plan .plan__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .plan .plan__head { width: 25%; } .plan .plan__content { width: 75%; border: 2px solid; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .plan .plan__content > p { font-size: 22px; font-weight: 300; padding: 0 125px 0 93px; } .plan .plan__content--list { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 40px 10px 20px 45px; } .plan .plan__content ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; } .plan .plan__content li { width: 29%; position: relative; cursor: pointer; padding-left: 32px; padding-bottom: 12px; margin-bottom: 12px; margin-right: 33px; } .plan .plan__content li:after { content: ''; position: absolute; bottom: 0; right: 0; width: 265px; border-bottom: 1px solid #c8c8c8; } @media (min-width: 767px) { .plan .plan__content li.last:after { border-bottom: none; } } @media (max-width: 767px) { .plan .plan__content li:last-child:after { border-bottom: none; } } .plan .plan__content .ico-check-red { position: absolute; top: 0; left: 0; } .plan .plan__content li > p { font-size: 16px; letter-spacing: -0.01em; margin-bottom: 0; } .plan .plan__content li:hover .tooltip { opacity: 1; visibility: visible; z-index: 5; } .plan .plan__content--gray { border-color: #dbdbdb; background-color: #f8f8f8; } .plan .plan__content--blue { border-color: #49b7e4; background-color: #ebf7fc; } .plan .plan__content--blue li { width: 29%; } .plan .plan__content--orange { border-color: #f4d2be; background-color: #fefaf4; } .plan .plan__content--error { border-color: #f4d2be; background-color: #ffec72; padding: 20px 45px; } .plan .plan__description { display: block; color: #fff; font-size: 24px; font-weight: 600; text-transform: uppercase; padding: 12px 12px 8px; position: relative; text-align: center; margin-bottom: 0; z-index: 2; } .plan .plan__description:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; margin: auto; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 13px solid red; } .plan .plan__description--light-blue { background-color: #5ba6c4; } .plan .plan__description--light-blue:after { border-top-color: #5ba6c4; } .plan .plan__description--blue { background-color: #17739b; } .plan .plan__description--blue:after { border-top-color: #17739b; } .plan .plan__description--dark-blue { background-color: #144d9b; } .plan .plan__description--dark-blue:after { border-top-color: #144d9b; } .plan .plan__price { color: #fff; padding: 0px 0 21px 0; line-height: 1; text-align: center; display: block; min-height: 150px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .plan .plan__price .btn--price { position: absolute; bottom: -18px; left: 0; right: 0; margin: auto; max-width: 230px; } .plan .plan__price--light-blue { background-color: #8bc0d5; } .plan .plan__price--blue { background-color: #238bb6; } .plan .plan__price--dark-blue { background-color: #2065b6; } /* Small Desktop */ @media (max-width: 1200px) { .plan .plan__content li { width: 45%; margin-right: 20px; } .plan .plan__content > p { font-size: 16px; padding: 0 20px; } .plan .plan__content li:after { width: 100%; } .plan .plan__content li > p { font-size: 16px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .plan { position: relative; } .plans .plan + .plan { margin-top: 43px; } .plan .plan__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .plan .plan__head { width: 100%; } .plan .plan__content { width: 100%; text-align: center; padding-bottom: 45px; border: none; color: #fff; } .plan .plan__content--gray { background-color: #74bbd7; } .plan .plan__content--blue { background-color: #2579a9; } .plan .plan__content--blue_light { background-color: #238bb6; } .plan .plan__content--orange { background-color: #2065b6; } .plan .plan__content > p { font-size: 16px; } .plan .plan__content ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 240px; margin: auto; } .plan .plan__content li { width: 100%; margin-right: 0; padding-left: 15px; text-align: left; padding-bottom: 5px; } .plan .plan__content .ico-check-red { display: none; } .plan .plan__content li:before { content: ''; position: absolute; left: 0; top: -15px; bottom: 0; margin: auto; background-image: url(/images/ico-check-blue@2x.png); background-size: 100% 100%; width: 10px; height: 7px; } .plan .plan__content li:after { width: 230px; } .plan .plan__description { font-size: 26px; padding: 9px 12px 6px; } .plan .plan__description:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top-width: 6px; } .plan .plan__price { min-height: auto; position: static; } .plan .plan__price--light-blue { background-color: #74bbd7; } .plan .plan__price--blue { background-color: #2579a9; } .plan .plan__price--dark-blue { background-color: #2065b6; } } /* Mobile */ @media (max-width: 767px) { .plans .plans__head { margin-bottom: 8px; } .plans .plans__head h2 { font-size: 19px; } .plan .plan__content { padding: 20px 0 23px; } .plan .plan__content > p { font-size: 16px; } .plan .plan__content li { margin-bottom: 14px; padding-bottom: 15px; } .plan .plan__content li > p { font-size: 16px; } .plan .plan__price { padding-bottom: 0; padding-top: 14px; } .plan .plan__price .btn--price { font-size: 27px; padding: 9px 11px 9px; min-width: 170px; max-width: 170px; } } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup-link { display: block; } .popup { position: relative; margin: auto; } .popup .popup__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .popup .popup__close { position: absolute; top: 17px; right: 15px; } .popup .popup__body { background-color: #e4f1ff; padding: 66px 17px 36px 53px; width: 47%; } .popup .popup__aside { background-color: #fff; width: 53%; padding: 60px 50px; } .popup .popup__actions { margin-top: 30px; } .popup .popup__actions--center { text-align: center; } .popup .popup__head { padding-bottom: 22px; margin-bottom: 43px; position: relative; } .popup .popup__head:after { content: ''; position: absolute; left: 0; bottom: 0; width: 91px; height: 2px; background-color: #ed205b; } .popup .popup__head h1 { font-weight: 400; line-height: 1; margin-bottom: 0; } .popup .popup__head h4 { font-size: 29px; font-weight: 500; text-transform: uppercase; margin-bottom: 0; } .popup .popup__head h5 { font-size: 24px; font-weight: 500; text-transform: uppercase; } .popup .popup__entry p { font-size: 24px; } .popup .popup__entry ul { margin-top: 43px; margin-bottom: 10px; } /* Tablet Portrait */ @media (max-width: 1023px) { .popup .popup__body { padding: 15px; } .popup .popup__close { top: 5px; right: 5px; } .popup .popup__aside { padding: 50px 15px; } } /* Mobile */ @media (max-width: 767px) { .popup .popup__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .popup .popup__head { padding-bottom: 12px; margin-bottom: 12px; } .popup .popup__head h5, .popup .popup__head h4 { font-size: 14px; } .popup .popup__head h1 { margin-bottom: 5px; } .popup .popup__head:after { width: 46px; height: 2px; } .popup .popup__body { padding: 21px 21px 19px; } .popup .popup__entry p { font-size: 15px; margin-bottom: 6px; } .popup .popup__entry ul { margin-top: 0; margin-bottom: 0; } .popup .popup__aside { padding: 19px 21px 36px; } .popup .popup__actions { margin-top: 19px; } .popup .popup__body, .popup .popup__aside { width: 100%; } } /* ------------------------------------------------------------ *\ Popup Large \* ------------------------------------------------------------ */ .popup--large { max-width: 1080px; margin: auto; } /* ------------------------------------------------------------ *\ Popup Small \* ------------------------------------------------------------ */ .popup--small { max-width: 512px; } .popup--small .popup__body { width: 100%; } /* ------------------------------------------------------------ *\ Price Number \* ------------------------------------------------------------ */ .price-num { font-size: 54px; font-weight: 600; line-height: 1; margin-bottom: 0; } .price-num span { font-size: 22px; font-weight: 300; } .price-num sup { font-size: 29px; font-weight: 400; vertical-align: initial; } /* Tablet Portrait */ @media (max-width: 1023px) { .price-num { font-size: 53px; } .price-num sup { font-size: 21px; } .price-num span { font-size: 32px; } } /* ------------------------------------------------------------ *\ Product \* ------------------------------------------------------------ */ .product { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 61%; } .product .product__body { margin-left: 31px; } .product .product__content h3 { font-size: 36px; font-weight: 600; color: #fff; letter-spacing: -.025em; margin-bottom: 10px; } .product .product__foot { margin-top: 10px; } .product .product__foot a { font-size: 20px; color: #fff; display: inline-block; vertical-align: middle; padding-left: 9px; margin-left: 9px; border-left: 1px solid #fff; letter-spacing: -.025em; } .product .product__foot ul { display: inline-block; vertical-align: top; margin-bottom: 0; } /* Small Desktop */ @media (max-width: 1200px) { .product { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .product { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product .product__image { margin-top: -60px; } .product .product__image img { width: 93px; } .product .product__body { margin-left: 0; margin-top: 18px; text-align: center; } .product .product__body .btn { font-size: 15px; font-weight: bold; padding: 8px; min-width: 220px; } .product .product__content h3 { color: #000; font-size: 22px; margin-bottom: 4px; } .product .product__foot { margin-bottom: 20px; } .product .product__foot a { color: #000; font-size: 14px; border-color: #000; font-weight: 500; } .product .product__foot .list-ratings li { vertical-align: middle; } .product .product__foot .list-ratings span { color: #000; } .product .product__foot .list-ratings .ico-star { width: 15px; height: 15px; display: block; } .product .product__foot .list-ratings .ico-star-half { width: 15px; height: 15px; display: block; } .product .product__foot .list-ratings .ico-star-half svg, .product .product__foot .list-ratings .ico-star svg { width: 100%; height: 100%; display: block; } .product .product__foot .list-ratings .ico-star svg path { fill: #000; } .product .product__foot .list-ratings .ico-star-half:after { background-image: url(/images/svg/star-half-2.svg); width: 15px; height: 15px; bottom: -2px; } .product .product__foot .list-ratings .ico-star-half--green svg path, .product .product__foot .list-ratings .ico-star--green svg path { fill: #6e912a; } } /* ------------------------------------------------------------ *\ Progress Alt \* ------------------------------------------------------------ */ .progress--alt { height: 55px; background-color: #003640; color: #fff; border-radius: 0; padding: 0 11px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .progress--alt .progress__head { width: 31%; overflow: hidden; } .progress--alt .progress__head p { white-space: nowrap; } .progress--alt .progress__content { height: 100%; } .progress--alt .progress__aside { padding-left: 14px; font-size: 15px; } .progress--current { background-color: #fec826; color: #000; } .progress--current .bar-holder .bar--blue, .progress--current .bar-holder .bar--yellow, .progress--current .bar-holder .separate { background-color: #000; } /* Large Desktop */ @media (max-width: 1400px) { .progress--alt { padding: 0 11px 0 5px; } .progress--alt .progress__head p { font-size: 16px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } } /* Small Desktop */ @media (max-width: 1200px) { .progress--alt { -ms-flex-wrap: wrap; flex-wrap: wrap; height: 60px; padding: 5px 5px 0; } .progress--alt .progress__content { height: 44%; width: 90%; } } /* Mobile */ @media (max-width: 767px) { .progress--alt { margin-bottom: 13px; height: 61px; } .progress--alt .progress__head { width: 100%; } .progress--alt .progress__head p { font-size: 15px; white-space: unset; } .progress--alt .progress__aside { -ms-flex-item-align: center; align-self: center; padding-left: 7px; } .progress--alt .progress__aside span { font-size: 12px; display: inline-block; vertical-align: middle; } .progress--alt .progress__content ul { width: 100%; } } /* ------------------------------------------------------------ *\ Question \* ------------------------------------------------------------ */ .question { display: -webkit-box; display: -ms-flexbox; display: flex; } .question p { font-size: 18px; font-family: 'Lato'; text-transform: uppercase; margin-bottom: 0; } .question a { margin-left: 7px; } /* ------------------------------------------------------------ *\ Rating \* ------------------------------------------------------------ */ .rating { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .rating span { font-size: 16px; width: 40px; text-align: left; padding-left: 10px; } .rating .rating__bar { background-color: #e3e3e3; width: 185px; height: 12px; position: relative; left: 0; top: 5px; } .rating .rating__overall { width: 95px; height: 12px; position: absolute; top: 5px; left: 0;background-color: #00a64e; z-index: 1; } /* ------------------------------------------------------------ *\ Reviews \* ------------------------------------------------------------ */ .reviews { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 12px; } @media (max-width: 767px) { .reviews { margin-top: 22px; } } /* ------------------------------------------------------------ *\ Review \* ------------------------------------------------------------ */ .review { width: 76%; margin-left: 17px; } .review .review__meta { font-size: 14px; color: #6e912a; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 0; } .review .list-ratings { margin-bottom: 0; } .review .review__head { margin-bottom: 22px; } .review .review__head a { text-decoration: none; } .review .review__head a:hover { color: #000; text-decoration: underline; } .review .review__head h5 { font-weight: 600; font-size: 24px; margin-bottom: 0; } .review .review__date { font-size: 16px; color: #717171; margin-bottom: 10px; } .review .review__info { border-top: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; display: inline-block; padding: 5px 10px; text-transform: uppercase; font-weight: 700; font-size: 16px; } .review .review__info span { color: #de5125; } .review .review__content h5 { font-size: 22px; font-weight: 500; margin-bottom: 10px; } .review .review__content p { font-size: 18px; } .review .review__inner { padding: 28px 37px; border: 1px solid #e5e5e5; -webkit-box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); position: relative; margin-left: 0; } .review .review__inner:before { content: ''; position: absolute; right: 100%; top: 20px; background-image: url(/images/sprite.@2x.png); background-position: 78.97196261682244% 29.333333333333332%; background-size: 1072.7272727272727% 433.3333333333333%; width: 30px; height: 45px; } .review .review__foot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 35px; } .review .review__foot .popup.popup--large { margin: 0; padding: 0; } .review .review__foot .popup.popup--large .btn-linkedin-custom { width: 230px; height: 56px; padding-top: 15px; } .review .review__foot .popup.popup--large .rounded-square { top: 15px; } /* Mobile */ .show__mobile { display: none; } @media (max-width: 767px) { .hide__mobile { display: none; } .show__mobile { display: block; } } @media (max-width: 767px) { .review { margin-left: 0; width: 100%; } .review .review__meta { font-size: 11px; color: #000; text-transform: none; margin-bottom: 3px; } .review .review__head { margin-bottom: 10px; } .review .review__head h5 { font-size: 21px; font-weight: 800; margin-top: 3px; } .review .review__date { font-size: 9px; margin-bottom: 0; } .review .review__info { font-size: 12px; padding: 2px 0; margin-bottom: 7px; } .review .review__content h5 { font-size: 19px; font-weight: 600; } .review .review__content p { font-size: 16px; } .review .list-review { margin: .5em 0; } .review .ico-star-half, .review .ico-star { width: 23px; height: 23px; display: inline-block; } .review .ico-star-half svg { width: 100%; height: 100%; display: block; } .review .ico-star-half:after { width: 16px; height: 16px; bottom: -2px; } } /* ------------------------------------------------------------ *\ Review Large \* ------------------------------------------------------------ */ .review--large { width: 83%; } /* ------------------------------------------------------------ *\ Review history \* ------------------------------------------------------------ */ .reviews-history .review__content .review__title { font-size: 20px; font-weight: 500; margin-bottom: 8px; } .reviews-history .review__content + .review__content { padding-top: 26px; margin-top: 23px; border-top: 1px solid #cdcdcd; } .reviews-history .review__content p { font-size: 18px; font-weight: 400; margin-bottom: 8px; } .reviews-history .review__content span { font-size: 16px; color: #999; } /* Mobile */ @media (max-width: 767px) { .reviews-history .review__content p { font-size: 12px; } .reviews-history .review__content span { font-size: 10px; } .reviews-history .review__content + .review__content { padding-top: 21px; margin-top: 21px; } } /* ------------------------------------------------------------ *\ Review Block \* ------------------------------------------------------------ */ .review-block { width: 48%; background-color: #faf9f4; -webkit-box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); border: 1px solid #c9c9c9; padding: 26px 23px; } .review-block .review__head { margin-bottom: 5px; } .review-block .review__head h5 { font-weight: 500; font-size: 24px; margin-bottom: 5px; } .review-block .review__head .green { color: #6e912a; } .review-block .review__head .red { color: #c00; } .review-block .review__head p { font-size: 13px; margin-bottom: 6px; } .review-block .review__content p { font-size: 16px; margin-bottom: 0; } .review-block .review__content p a { color: #1b5494; } .most-helpful .review-block .review__content p a.review__title { color: #000; text-decoration: none; } .most-helpful .review-block .review__content p a.review__title:hover { text-decoration: underline; } .review-block .review__content p.review__meta { font-size: 14px; } .review-block .review__meta { font-weight: 300; margin-bottom: 10px !important; } @media (max-width: 767px) { .review-block .review__head h5 { font-size: 20px; } .review-block .review__content p { font-size: 14px; } .review-block .review__content p.review__meta { font-size: 12px; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section { padding: 80px 0 90px; max-width: 100%; font-size: 18px; } .section.faqs { padding: 40px 0 50px; } .section.about-us { padding: 31px 0 43px; } .section.methodology { padding: 45px 0 49px; } .section .section__head { text-align: center; margin-bottom: 20px; } .section .section__head h2 { font-weight: 300; } .section .section__head h3 { font-size: 36px; font-weight: 300; margin-bottom: 10px; } .section .section__head p { font-weight: 300; } .section .section__body .contact { margin-top: 20px; margin-bottom: 50px; } .section .section__logo { width: 172px; height: 47px; display: block; margin: 0 auto 20px; } .section .section__logo svg { width: 100%; height: 100%; } /* ------------------------------------------------------------ *\ Section Gray \* ------------------------------------------------------------ */ .section--gray { background-color: #f5edf6; } /* ------------------------------------------------------------ *\ Section Ligh Blue \* ------------------------------------------------------------ */ .section--light-blue { background-color: #e9eef3; } .section-reg { padding-top: 40px; padding-bottom: 40px; } .section-reg .section__head img { margin-bottom: 20px; } .section-reg .section__head p { text-decoration: none; } /* ------------------------------------------------------------ *\ Section Yellow \* ------------------------------------------------------------ */ .section--yellow { background-color: #f3f1ca; padding: 62px 0 50px; } /* Small Desktop */ @media (max-width: 1200px) { .section { padding: 50px 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section .section__head h3 { font-size: 28px; } .section .section__body .contact { margin: 20px 0; } } /* Mobile */ @media (max-width: 767px) { .section { padding: 20px 0; } .section .section__logo { width: 114px; height: 32px; } .section .section__head h3 { font-size: 24px; } .section .section__head p { font-size: 12px; } } /* ------------------------------------------------------------ *\ Section Prices \* ------------------------------------------------------------ */ .section-prices { padding: 51px 0 77px; -webkit-box-shadow: inset 0px 165px 202px 0px rgba(235,235,235,1); box-shadow: inset 0px 165px 202px 0px rgba(235,235,235,1); } .section-prices .section__head { text-align: center; margin-bottom: 54px; } .section-prices .section__head h2 { font-size: 44px; font-weight: 500; } .section-prices .list-select { margin-top: 20px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-prices { padding: 20px 0 40px; } .section-prices .section__head h2 { font-size: 30px; } .section-prices .list-select { margin-top: 0; } .section-prices .list-select li { margin-top: 10px; } } /* Mobile */ @media (max-width: 767px) { .section-prices .section__head { margin-bottom: 24px; } .section-prices .section__head h2 { font-size: 19px; } } /* ------------------------------------------------------------ *\ Section Dark \* ------------------------------------------------------------ */ .section-dark { padding: 68px 0 50px; background-color: #191e2e; position: relative; z-index: 1; color: #fff; } .section-dark:before { content: ''; position: absolute; top: 14px; right: 0; background-image: url(/images/temp/section-bg-1.png); background-size: 100% 100%; width: 813px; height: 883px; z-index: -1; } .section-dark:after{ content: ''; position: absolute; left: 0; bottom: 0; background-image: url(/images/temp/section-bg-2.png); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background-size: 100% 100%; width: 813px; height: 883px; z-index: -1; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-dark { padding: 20px 0; } } /* Mobile */ @media (max-width: 767px) { .section-dark { padding: 10px 0; color: #000; background-color: #fff; } .section-dark:after, .section-dark:before { display: none; } } /* ------------------------------------------------------------ *\ Section image \* ------------------------------------------------------------ */ .section-image { background-repeat: no-repeat; background-size: 100% 100%; background-position: right center; color: #fff; } .section-image .section__head { text-align: center; margin-bottom: 37px; } .section-image .section__head p { font-weight: 300; } .section-image .section__title { font-size: 36px; font-weight: 300; margin-bottom: 16px; } /* Mobile */ @media (max-width: 767px) { .section-image { padding: 20px 0; } .section-image .section__title { font-size: 24px; margin-bottom: 13px; } .section-image .section__head { margin-bottom: 30px; } } /* ------------------------------------------------------------ *\ Services \* ------------------------------------------------------------ */ .services .service + .service { margin-top: 70px; } .service .service__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .service .service__body { width: 51%; padding-left: 95px; } .service .service__head { width: 51%; padding-left: 95px; } .service .service__image { width: 47%; } .service .service__head { margin-bottom: 54px; } .service .service__head h2 { font-weight: 500; } .service .service__content ul { list-style-type: none; } .service .service__content li { padding-left: 75px; position: relative; } .service .service__content i { position: absolute; top: 0; left: 0; } .service .service__content li h5 { font-size: 24px; font-weight: 500; margin-bottom: 6px; } .service .service__content li p { font-size: 18px; font-weight: 300; } .service .service__content li + li { margin-top: 46px; } /* ------------------------------------------------------------ *\ Service Reverse \* ------------------------------------------------------------ */ .service--reverse {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .service--reverse .service__head { -ms-flex-item-align: end; align-self: flex-end; padding-left: 37px; } .service--reverse .service__inner { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .service--reverse .service__body { padding-left: 40px; } /* Small Desktop */ @media (max-width: 1200px) { .service .service__head, .service .service__body { padding-left: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .services .service + .service { margin-top: 40px; } .service .service__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .service .service__head { text-align: center; margin-bottom: 20px; } .service .service__content li { padding-left: 55px; } .service .service__content li + li { margin-top: 20px; } .service .service__content li h5 { font-size: 20px; } .service .service__content li p { font-size: 16px; } .service .service__body { margin-bottom: 20px; } .service .service__body, .service .service__image, .service .service__image img, .service .service__head { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .service .service__head { text-align: left; } .service .service__body { margin-bottom: 30px; } .service .service__content li { padding-left: 37px; } .service .service__content li h5 { font-size: 20px; } .service .service__content li p { font-size: 15px; } .service .service__content .ico-magnet svg { width: 28px; height: 28px; display: block; } .service .service__content .ico-globe svg { width: 26px; height: 26px; } .service .service__content .ico-eye { width: 26px; height: 27px; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { margin-top: 10px; } .socials ul { list-style-type: none; } .socials li { display: inline-block; vertical-align: middle; } /* Mobile */ @media (max-width: 767px) { .socials li i { width: 23px; height: 23px; } } /* ------------------------------------------------------------ *\ Tab \* ------------------------------------------------------------ */ .tabs .tabs__nav { border-bottom: 2px solid #ededed; } .tabs .tabs__nav li { display: inline-block; margin-bottom: -2px; margin-left: 11px; } .tabs .tabs__nav a { display: block; padding: 12px 17px; background-color: #647b9c; border: 2px solid #647b9c; color: #fff; text-decoration: none; font-size: 20px; font-weight: bold; text-transform: uppercase; } .tabs .tabs__nav .current a { background-color: #fff; border-color: #ededed; color: #000; border-bottom: none; } .tab { display: none; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; -o-transition: transform .5s, opacity .5s; transition: transform .5s, opacity .5s; transition: transform .5s, opacity .5s, -webkit-transform .5s; -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); opacity: 0; padding: 17px 0 0 20px; } .tab.current { display: block; } .tab.translating-in { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .tab.translating { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); opacity: 0; } .tab .tab__head { margin-bottom: 20px; } .tab .tab__head h6 { font-size: 19px; font-weight: 500; } /* Mobile */ @media (max-width: 767px) { .tabs .tabs__nav { width: 100vw; margin-left: -12px; } .tabs .tabs__nav ul { margin-left: 12px; } .tabs .tabs__nav li { margin-left: 0; } .tabs .tabs__nav li + li { margin-left: 15px; } .tabs .tabs__nav a { font-size: 16px; padding: 6px 15px; } .tab { padding: 21px 0 0; } .tab .tab__head h6 { font-size: 17px; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .tables { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .table { width: 48%; max-height: 420px; } .table .mCSB_container { margin-right: 0; } .table thead { background-color: #f4f4f4; } .table thead th { padding: 15px 12px 8px; font-size: 16px; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid #000; border-top: 1px solid #000; } .table tr th:last-child { text-align: center; } .table .rang { background-color: #b51011; font-size: 16px; font-weight: 600; color: #fff; padding: 8px 8px; margin-right: 10px; } .table tr td { padding: 16px 0; border-bottom: 1px solid #c8c8c8; } .table tr td p { display: inline-block; vertical-align: middle; margin-bottom: 0; } .table .scorecard tr td p { font-size: 14px; } .table .ico-arrow { padding-left: 28px; display: inline-block; vertical-align: middle; } .table tr td:last-child { padding-left: 12px; text-align: center; } .table tr td:last-child p { color: #6a6a6a; } .table tr td:last-child p strong { color: #000; } /* Mobile */ @media (max-width: 767px) { .tables { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .table { width: 100%; max-height: 290px; } .table thead th { font-size: 13px; padding: 9px 12px 8px; font-weight: bold; } .table tr td { padding: 8px 0; } .table tr td:last-child p { padding-right: 15px; } .table .rang { font-size: 14px; padding: 8px; } .table .ico-arrow { width: 4px; height: 7px; display: inline-block; padding-left: 0; } .table .ico-arrow svg { width: 100%; height: 100%; display: block; } } /* ------------------------------------------------------------ *\ Table Test \* ------------------------------------------------------------ */ .table-test thead { background-color: #f4f4f4; } .table-test thead th { padding: 15px 12px 8px; font-size: 16px; font-weight: 600; text-transform: uppercase; border-bottom: 2px solid #000; border-top: 1px solid #000; } .table-test td { padding: 15px; } .table-test td { border-bottom: 1px solid #c8c8c8; } .table-test tr:last-child td { border-bottom: none; } .table-test td p { margin-bottom: 0; display: inline-block; vertical-align: middle; font-size: 20px; } .table-test .info { font-size: 14px; color: #fff; padding: 5px 8px; background-color: #ffa200; border-radius: 3px; } .table-webinar td p { font-weight: 600; } .table-webinar td span { display: block; font-weight: 300; } /* Mobile */ @media (max-width: 767px) { .table-test thead th { font-size: 10px; padding: 8px 0; } .table-test td { padding: 8px 5px; } .table-test td p { font-size: 12px; } .table-test .info { font-size: 7px; } } /* ------------------------------------------------------------ *\ Thumbs \* ------------------------------------------------------------ */ .thumbs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: -13px; } .thumbs .thumb { width: 49%; padding-bottom: 13px; } .thumbs .thumb img { height: 100%; } /* Mobile */ @media (max-width: 767px) { .thumbs { -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow-x: auto; padding: 0; width: 600px; } .thumbs .thumb { width: 90px; height: 61px; padding-bottom: 0; } .thumbs .thumb + .thumb { margin-left: 5px; } } /* ------------------------------------------------------------ *\ Tooltip \* ------------------------------------------------------------ */ .tooltip { position: absolute; top: 100%; left: 0; width: 355px; background-color: #fff; padding: 16px 19px 9px; -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.12); border: 1px solid #dbdbdb; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; font-family: Montserrat , Arial, Helvetica, sans-serif; } .tooltip p { font-weight: 300; font-size: 18px; letter-spacing: 0; } .tooltip:after { content: ''; position: absolute; bottom: 100%; left: 34px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #dbdbdb; } .tooltip:before { content: ''; position: absolute; bottom: 100%; left: 35px; width: 0; height: 0; border-left: 19px solid transparent; border-right: 19px solid transparent; border-bottom: 19px solid #fff; z-index: 2; } /* Tablet Portrait */ @media (max-width: 1023px) { .tooltip { color: #000; } } /* Mobile */ @media (max-width: 767px) { .tooltip { width: 250px; padding: 5px; } .tooltip p { font-size: 11px; } .tooltip:after { border-left-width: 10px; border-right-width: 10px; border-bottom-width: 10px; } .tooltip:before { border-left-width: 9px; border-right-width: 9px; border-bottom-width: 9px; } } /* ------------------------------------------------------------ *\ User \* ------------------------------------------------------------ */ .user { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .user .user__content { margin-left: 10px; letter-spacing: -0.01em; } .user .user__content span { font-size: 13px; } .user .user__content p { font-size: 15px; font-weight: 400; } /* Tablet Portrait */ @media (max-width: 1023px) { .user .user__content { display: none; } .user .user__image { width: 25px; height: 25px; } } /* ------------------------------------------------------------ *\ User Alt \* ------------------------------------------------------------ */ .user-alt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .user-alt .user__image { background-color: #fff; border-radius: 4px; padding: 6px 6px 0; } .user-alt .user__content { padding-left: 17px; } .user-alt .user__content li { display: inline-block; font-size: 16px; } .user-alt .user__content li + li { padding-left: 7px; margin-left: 7px; border-left: 1px solid #fff; } /* Mobile */ @media (max-width: 767px) { .user-alt .user__image { padding: 2px 2px 0; } .user-alt .user__image .ico-user { width: 16px; height: 21px; } .user-alt .user__content { padding-left: 5px; } .user-alt .user__content li { font-size: 12px; } } /* ------------------------------------------------------------ *\ User Widget \* ------------------------------------------------------------ */ .user-widget { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .user-widget .user__image { width: 90px; } .user-widget .user__image img { border-radius: 50%; border: 2px solid #b0b0b0; width: 100%; } .user-widget .user__content { font-size: 16px; margin-left: 0; } .user-widget .user__content li { padding-left: 20px; position: relative; } .user-widget .user__content li i { position: absolute; top: 0; left: 0; } /* ------------------------------------------------------------ *\ User product \* ------------------------------------------------------------ */ .user-product { width: 15%; } .user-product .user__image { margin-bottom: 13px; position: relative; } .user-product .user__image .ico-info-circle { position: absolute; top: -7px; left: 61px; background-color: #fff; border-radius: 50%; } .user-product .user__image img { border: 1px solid #ddd; } .user-product .user__head { padding-bottom: 8px; border-bottom: 1px solid #ddd; } .user-product .user__head h6 { font-size: 14px; margin-bottom: 0; } .user-product .user__head p { font-size: 12px; font-weight: 300; } .user-product .user__content p { font-size: 12px; font-weight: 300; } .user-product .user__content li { position: relative; } .user-product .user__content li + li { border-top: 1px solid #ddd; padding-top: 5px; margin-top: 5px; } .user-product .user__content span { font-size: 12px; display: inline-block; font-weight: 300; } .user-product .user__content .left { padding-left: 22px; } .user-product .user__content i { position: absolute; top: 12px; left: 0; } .user-product .user__foot { margin-top: 10px; } /* Mobile */ @media (max-width: 767px) { .user-product { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .user-product .user__head { border-bottom: none; margin-left: 11px; } .user-product .user__image { width: 56px; } .user-product .user__content { display: none; } } /* ------------------------------------------------------------ *\ User Small \* ------------------------------------------------------------ */ .user-small { text-align: center; width: 10%; } .user-small p { font-size: 14px; font-weight: 500; margin-top: 10px; } @media (max-width: 767px) { .user-small { width: 15%; } } /* ------------------------------------------------------------ *\ Video \* ------------------------------------------------------------ */ .video { overflow: hidden; -webkit-box-shadow: none; box-shadow: none; height: 416px; padding-bottom: 0; } /* .video .video__inner { padding-top: 59%; overflow: hidden; position: relative; } */ .video .video__inner iframe { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; } /* Tablet Portrait */ @media (max-width: 1023px) { .video { height: 330px; } } /* Mobile */ @media (max-width: 767px) { .video { height: 230px; } } /* ------------------------------------------------------------ *\ Video Large \* ------------------------------------------------------------ */ .video--large { height: 123px; } /* ------------------------------------------------------------ *\ Video Gallery \* ------------------------------------------------------------ */ .video--gallery { height: 395px; } /* Mobile */ @media (max-width: 767px) { .video--gallery { height: 184px; } .video--large { height: 61px; } } /* ------------------------------------------------------------ *\ Vote \* ------------------------------------------------------------ */ .vote { min-width: 105px; position: relative; } .vote .vote__field { width: 78px; height: 78px; border-style: solid; border-width: 1px; border-color: rgb(218, 218, 218); border-radius: 50%; background-color: rgb(255, 255, 255); -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09); text-align: center; font-size: 24px; font-weight: 600; } .vote .vote__label { display: block; width: 78px; text-align: center; font-size: 12px; color: #0c6db8; font-weight: 700; text-transform: uppercase; margin-top: 4px; } .vote .vote__btn { text-decoration: none; position: absolute; top: 0; right: 0; } .vote .vote__btn--minus { top: 39px; } .vote .vote__btn--plus { top: 21px; } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget About \* ------------------------------------------------------------ */ .widget-about .widget__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .widget-about .widget__body { width: 40%; } .widget-about .widget__aside { width: 57%; } .widget-about .widget__head { margin-bottom: 15px; } .widget-about .widget__head h4 { font-weight: 600; } .widget-about .widget__head h6 { font-size: 18px; margin-bottom: 6px; } .widget-about .widget__head address { font-size: 14px; font-weight: 300; } .widget-about .widget__head .orange { color: #ff5302; } /* Small Desktop */ @media (max-width: 1200px) { .widget-about .widget__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .widget-about .widget__body { margin-bottom: 20px; } .widget-about .widget__aside, .widget-about .widget__body { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .widget-about { padding: 25px 0 0; } .widget-about .widget__head h4 { font-size: 15px; font-weight: bold; } .widget-about .widget__head h6 { font-size: 15px; font-weight: bold; } .widget-about .widget__head address { font-size: 13px; font-weight: 400; } } /* ------------------------------------------------------------ *\ Widget user \* ------------------------------------------------------------ */ .widget-user .widget__head { background-color: #f5f4f7; border: 2px solid #dadada; padding: 38px 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-user .widget__aside { text-align: center; margin-left: 60px; } .widget-user .widget__aside p { margin-top: 0px; } .widget-user .widget__aside ul { margin-bottom: 0; } .widget-user .widget__aside p a { font-weight: 300; text-decoration: underline; } .widget-user .widget__aside p a span { font-weight: 500; } .widget-user .widget__aside p a strong { font-weight: 400; } .widget-user .widget__bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .widget-user .widget__content { display: -webkit-box; display: -ms-flexbox; display: flex; } .widget-user .widget__bar p { text-transform: uppercase; } .widget-user .widget__body { padding: 20px 23px 40px; border: 2px solid #dadada; border-top: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .widget-user .user-widget { width: 260px; } .widget-user .widget__foot { background-color: #f9f9f9; text-align: center; padding: 15px; border: 1px solid #dadada; border-top: none; } .widget-user .widget__foot a { text-transform: uppercase; text-decoration: none; color: #0c6db8; font-weight: 500; line-height: 1; } .widget-user .widget__foot a:hover { opacity: .8; } .widget-user .widget__foot a i { line-height: 0; } .widget-user .widget__foot a span { display: inline-block; vertical-align: middle; margin-right: 12px; margin-top: -6px; } .widget-user .widget__form { background-color: #fafafa; padding: 24px 30px 28px; width: 79%; -ms-flex-item-align: end; align-self: flex-end; } .widget-user .widget__form form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .widget-user .widget__field { width: 100%; border: 1px solid #e0e0e0; font-size: 14px; color: #4e596b; padding: 17px 18px; resize: none; } .widget-user .widget__btn { text-align: right; background-color: #c00; color: #fff; border: none; font-size: 14px; padding: 8px 10px; text-transform: uppercase; -ms-flex-item-align: end; align-self: flex-end; margin-top: 14px; } .widget-user .widget__outer { width: 66%; -webkit-box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); box-shadow: 2.5px 4.33px 0px 0px rgba(0, 0, 0, 0.05); -ms-flex-item-align: end; align-self: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: unset; padding: 23px 25px; border: 1px solid #e5e5e5; } .widget-user .widget__outer-content { margin-left: 30px; } /* Mobile */ @media (max-width: 767px) { .widget-user .widget__field { height: 74px; } .widget-user .widget__btn { font-size: 12px; font-weight: 600; padding: 5px 13px; } .widget-user .widget__bar, .widget-user .widget__head { display: none; } .widget-user .widget__body { border: none; padding: 0; } .widget-user .widget__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .widget-user .widget__foot { margin-top: 20px; border-top: 1px solid #dadada; padding: 9px; } .widget-user .widget__foot a span { margin-top: 0; } .widget-user .widget__foot .ico-arrow { width: 4px; height: 7px; line-height: 7px; display: inline-block; } .widget-user .widget__foot .ico-arrow svg { width: 100%; height: 100%; display: block; } .widget-user .widget__outer { padding: 15px 12px; } .widget-user .widget__outer-content { margin-left: 14px; } .widget-user .widget__outer-content p { font-size: 13px; } } /* ------------------------------------------------------------ *\ Widget User Alt \* ------------------------------------------------------------ */ .widget-user--alt .widget__body { border: none; } /* ------------------------------------------------------------ *\ Themes \* ------------------------------------------------------------ */ .main_overview h1, .main_review h1 { font-size: 30px; font-weight: bold; } .main_competitors h1 { font-size: 27px; font-weight: bold; margin-top: 4px; margin-bottom: 9px; } .form-question h1 { font-size: 24px; } @media (max-width: 767px) { .main_overview h1, .main_review h1 { font-size: 24px; } .form-question h1 { font-size: 16px; } } .section--gray.section .section__head h2 { font-weight: 500; } .section--gray.section .accordion .accordion__head h4 { font-size: 24px; width: 90%; } .section--gray.section .accordion .accordion__section { padding-bottom: 17px; } .section--gray.section .accordion .accordion__head { padding-top: 13px; } .section--gray.section .accordion .accordion__body p, .section--gray.section .accordion .accordion__body ul li { font-size: 22px; } .section--gray.section .accordion .accordion__body ul { padding-left: 40px; } .section--gray.section .accordion .accordion__body ul li { margin-bottom: 1.3em } .sign-inTxt p { font-size: .9em; } .widget__aside .rate_item.gray_mod { background-color: #000; } .widget__aside .rate_item { width: 2em; height: 2em; } .widget__aside .icon_w.v3_mod { width: 1.1em; height: 1.1em; } .plan-box__label { display: inline-block; min-width: 68px; padding: 2px 10px; border-radius: 50px; margin-top: 4px; background: #49aa23; font-size: 11px; font-weight: 500; color: #fff !important; text-align: center; text-transform: uppercase; } .plan-box__label.inactive { background: #e2e2e2; } .plan-box__label.pending { background: #ff0000; } .plan-box__label.warning { background: #ffc107; } @media only screen and (min-width: 768px) { .widget-about .widget__inner.widget__inner--sub { display: block; } .widget-about .widget__inner.widget__inner--sub .widget__aside { float: right; margin: 0 0 20px 20px; } .widget-about .widget__inner.widget__inner--sub .widget__body { width: auto; } .widget-about .widget__body .widget__entry { min-height: 305px; } }