/* Table of Contents 01. Settings ---------------------------------- 02. Sprite ------------------------------------ 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 -------- No Js ------------------------------------ Items box -------------------------------- 03. Generic ----------------------------------- 04. Base -------------------------------------- 05. Fonts ------------------------------------- 06. Helpers ----------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- 07. Reset ------------------------------------- 08. Regions ----------------------------------- 09. Container --------------------------------- 10. Content ----------------------------------- 11. Footer ------------------------------------ Footer Cols ------------------------------ Block positioning ------------------------ 12. Header ------------------------------------ Scrolled --------------------------------- HEADER MOBILE ---------------------------- No Scroll -------------------------------- 13. Main -------------------------------------- 14. Shell ------------------------------------- 15. Sidebar ----------------------------------- 16. Wrapper ----------------------------------- 17. Modules ----------------------------------- 18. Accordion --------------------------------- 19. Bar --------------------------------------- 20. Box --------------------------------------- 21. Box Info ---------------------------------- 22. Box Chat ---------------------------------- 23. Button ------------------------------------ Button Block ----------------------------- 24. Button Close ------------------------------ 25. Button Top -------------------------------- 26. Cards ------------------------------------- 27. Card -------------------------------------- Of The Week, Excluseive ------------------ 28. Card Alt ---------------------------------- 29. Chat -------------------------------------- 30. Contacts ---------------------------------- 31. Contacts Alt ----------------------------- 32. Copyrights -------------------------------- 33. Favourites -------------------------------- Favourite -------------------------------- Favourite Image -------------------------- Name ------------------------------------- Rating ----------------------------------- Icon ------------------------------------- 34. Form Elements ----------------------------- 35. Form Elements Dark ------------------------ Form Elements ---------------------------- 36. Error States ------------------------------ 37. Form -------------------------------------- 38. Form Mail --------------------------------- 39. Form Login -------------------------------- 40. Form Filter ------------------------------ 41. Form Search ------------------------------- Cols ------------------------------------- 42. Icons ------------------------------------- 43. Intro ------------------------------------- 44. Intro Elements ---------------------------- 45. Link Back --------------------------------- 46. List -------------------------------------- 47. List Stas --------------------------------- Alt -------------------------------------- Big -------------------------------------- Small ------------------------------------ 48. List Info --------------------------------- 49. List Info Alt ---------------------------- 50. List Badges ------------------------------- 51. List Buttons ------------------------------ 52. List Categories --------------------------- 53. list Method ------------------------------- 54. List Services ----------------------------- 55. List Cheannels ---------------------------- 56. Logo -------------------------------------- 57. Nav --------------------------------------- 58. Nav Utilites ------------------------------ 59. Nav Letters ------------------------------- 60. Nav Footer -------------------------------- 61. Offer ------------------------------------- 62. Rating ------------------------------------ 63. Review ------------------------------------ 64. Search ----------------------------------- 65. Section ----------------------------------- 66. Section ---------------------------------- 67. Section Categories ------------------------ 68. Section Featured ------------------------- 69. Section Contacts -------------------------- Cols ------------------------------------- 70. Section People ---------------------------- 71. Section Search ---------------------------- 72. Section Testimonials ---------------------- 73. Section Services ------------------------- 74. Section Channels -------------------------- 75. Section Profile --------------------------- Background ------------------------------- Container -------------------------------- Head ------------------------------------- Body ------------------------------------- Sidebar ---------------------------------- Content ---------------------------------- Other ------------------------------------ 76. Section Offers ---------------------------- 77. Section Reviews --------------------------- Head ------------------------------------- Body ------------------------------------- Sidebar ---------------------------------- Content ---------------------------------- 78. Section Related --------------------------- 79. Slider ------------------------------------ 80. Slider Intro ------------------------------ 81. Slider Cards ------------------------------ 82. Slider Testimonials ----------------------- 83. Tabs Box ---------------------------------- Tab -------------------------------------- Form Elements ---------------------------- Custom Scroll ---------------------------- 84. Table ------------------------------------- 85. Widget ------------------------------------ 86. Widget Notice ----------------------------- 87. Widget Rating ----------------------------- 88. Themes ------------------------------------ Items box -------------------------------- 89. Custom Selectric Theme -------------------- */ /* ------------------------------------------------------------ *\ Settings \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Sprite \* ------------------------------------------------------------ */ .badge-aktion{ background-image : url(../images/sprite.png); background-position : 0% 100%; background-size : 766.6666666666667% 600%; width : 45px; height : 46px; display : inline-block; vertical-align : middle; font-size : 0px; } .badge-gratis{ background-image : url(../images/sprite.png); background-position : 87.62541806020067% 37.826086956521735%; background-size : 750% 600%; width : 46px; height : 46px; display : inline-block; vertical-align : middle; font-size : 0px; } .badge-zoltop{ background-image : url(../images/sprite.png); background-position : 87.62541806020067% 59.56521739130435%; background-size : 750% 600%; width : 46px; height : 46px; display : inline-block; vertical-align : middle; font-size : 0px; } .flag-aus{ background-image : url(../images/sprite.png); background-position : 99.04761904761905% 34.25196850393701%; background-size : 1150% 1254.5454545454545%; width : 30px; height : 22px; display : inline-block; vertical-align : middle; font-size : 0px; } .flag-ger{ background-image : url(../images/sprite.png); background-position : 99.04761904761905% 53.937007874015755%; background-size : 1150% 1254.5454545454545%; width : 30px; height : 22px; display : inline-block; vertical-align : middle; font-size : 0px; } .flag-swi{ background-image : url(../images/sprite.png); background-position : 51.11111111111111% 78.34645669291339%; background-size : 1150% 1254.5454545454545%; width : 30px; height : 22px; display : inline-block; vertical-align : middle; font-size : 0px; } .logo-part{ background-image : url(../images/sprite.png); background-position : 100% 0%; background-size : 415.66265060240966% 332.5301204819277%; width : 83px; height : 83px; display : inline-block; vertical-align : middle; font-size : 0px; } .logo-small{ background-image : url(../images/sprite.png); background-position : 0% 79.91967871485943%; background-size : 219.74522292993632% 1022.2222222222222%; width : 157px; height : 27px; display : inline-block; vertical-align : middle; font-size : 0px; } .logo-white{ background-image : url(../images/sprite.png); background-position : 0% 56.451612903225815%; background-size : 151.3157894736842% 306.6666666666667%; width : 228px; height : 90px; display : inline-block; vertical-align : middle; font-size : 0px; } .logo{ background-image : url(../images/sprite.png); background-position : 0% 0%; background-size : 133.72093023255815% 273.26732673267327%; width : 258px; height : 101px; display : inline-block; vertical-align : middle; font-size : 0px; } /* == 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); } /* ---------------------------------------- */ /** * Owl Carousel v2.2.0 * Copyright 2013-2016 David Deutsch * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE) */ /* * Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: -webkit-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img.owl-lazy { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("../images/owl.carousel/dist/assets/owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: -webkit-transform 100ms ease; -webkit-transition: -webkit-transform 100ms ease; -o-transition: transform 100ms ease; transition: transform 100ms ease; transition: transform 100ms ease, -webkit-transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /*====================================== Selectric v1.13.0 ======================================*/ .selectric-wrapper { position: relative; cursor: pointer; } .selectric-responsive { width: 100%; } .selectric { border: 1px solid #DDD; border-radius: 0px; background: #F8F8F8; position: relative; overflow: hidden; } .selectric .label { display: block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; margin: 0 38px 0 10px; font-size: 12px; line-height: 38px; color: #444; height: 38px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric .button { display: block; position: absolute; right: 0; top: 0; width: 38px; height: 38px; line-height: 38px; background-color: #F8f8f8; color: #BBB; text-align: center; font: 0/0 a; *font: 20px/38px Lucida Sans Unicode, Arial Unicode MS, Arial; } .selectric .button:after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0; border: 4px solid transparent; border-top-color: #BBB; border-bottom: none; } .selectric-focus .selectric { border-color: #aaaaaa; } .selectric-hover .selectric { border-color: #c4c4c4; } .selectric-hover .selectric .button { color: #a2a2a2; } .selectric-hover .selectric .button:after { border-top-color: #a2a2a2; } .selectric-open { z-index: 9999; } .selectric-open .selectric { border-color: #c4c4c4; } .selectric-open .selectric-items { display: block; } .selectric-disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-hide-select { position: relative; overflow: hidden; width: 0; height: 0; } .selectric-hide-select select { position: absolute; left: -100%; } .selectric-hide-select.selectric-is-native { position: absolute; width: 100%; height: 100%; z-index: 10; } .selectric-hide-select.selectric-is-native select { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; border: none; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } .selectric-input { position: absolute !important; top: 0 !important; left: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; margin: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; outline: none !important; border: none !important; *font: 0/0 a !important; background: none !important; } .selectric-temp-show { position: absolute !important; visibility: hidden !important; display: block !important; } /* Items box */ .selectric-items { display: none; position: absolute; top: 100%; left: 0; background: #F8F8F8; border: 1px solid #c4c4c4; z-index: -1; -webkit-box-shadow: 0 0 10px -6px; box-shadow: 0 0 10px -6px; } .selectric-items .selectric-scroll { height: 100%; overflow: auto; } .selectric-above .selectric-items { top: auto; bottom: 100%; } .selectric-items ul, .selectric-items li { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 20px; min-height: 20px; } .selectric-items li { display: block; padding: 10px; color: #666; cursor: pointer; } .selectric-items li.selected { background: #E0E0E0; color: #444; } .selectric-items li.highlighted { background: #D0D0D0; color: #444; } .selectric-items li:hover { background: #D5D5D5; color: #444; } .selectric-items .disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default !important; background: none !important; color: #666 !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-items .selectric-group .selectric-group-label { font-weight: bold; padding-left: 10px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: none; color: #444; } .selectric-items .selectric-group.disabled li { filter: alpha(opacity=100); opacity: 1; } .selectric-items .selectric-group li { padding-left: 25px; } /* ------------------------------------------------------------ *\ Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { background: #fff; font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.59; color: #415067; } a { color: inherit; text-decoration: underline; } a:hover, a[href^="tel"] { text-decoration: none; } p a { color: #3e8200; font-weight: 700; text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } p a:hover { color: #1a4c00; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.795em; } h1 { font-family: 'Courgette', cursive; font-size: 54px; color: #fff; line-height: 1.11; font-weight: 400; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } h2 { font-size: 24px; font-weight: 700; line-height: 1.5; } h2.section__title { color: #3c810c; font-family: Courgette; font-size: 36px; font-weight: 400; line-height: 1.25; text-align: center; margin-bottom: 30px; } h3 { font-size: 18px; font-weight: 700; line-height: 0.94; } p, ul, ol, dl, hr, table, blockquote { margin-bottom: 1.59em; } blockquote { font-size: 20px; font-style: italic; line-height: 30px; text-align: center; } small { font-size: 12px; line-height: 20px; } 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; } @media (max-width: 1023px) { h1 { font-size: 38px; } } /* ------------------------------------------------------------ *\ 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; margin: 0 -8px; } .col { max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; padding: 0 8px; } .col--1of2 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col--1of3 { max-width: 33.3333%; -webkit-box-flex: 0; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; } /* 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; } } /* ------------------------------------------------------------ *\ 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 \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { position: relative; padding: 116px 0 40px; color: #fff; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .footer:before { content: ''; position: absolute; top: 37px; left: 0; width: 100%; min-height: 112px; background-color: #d2fca8; -webkit-transform: skewY(2.5deg); -ms-transform: skewY(2.5deg); transform: skewY(2.5deg); } .footer .footer__background { position: absolute; top: 51px; width: 100%; min-height: 103vh; background-image: -o-linear-gradient(272deg, #99d04e 0%, #4a900b 100%); background-image: linear-gradient(178deg, #99d04e 0%, #4a900b 100%); -webkit-transform: skewY(-2.2deg); -ms-transform: skewY(-2.2deg); transform: skewY(-2.2deg);} .footer .footer__container { position: relative; } .footer .shell { position: relative; } .footer h5 { font-family: Courgette; font-size: 36px; font-weight: 400; line-height: 1; } .footer .logo-white { display: inline-block; margin-top: -6px; margin-right: 2px; } /* Footer Cols */ .footer .cols { margin: 0 -35px; } .footer .col { padding: 0 35px; } .footer .col--size-1 { -webkit-box-flex: 0; -ms-flex: 0 0 31.8%; flex: 0 0 31.8%; max-width: 31.8%; } .footer .col--size-2 { -webkit-box-flex: 0; -ms-flex: 0 0 28.4%; flex: 0 0 28.4%; max-width: 28.4%; text-align: right; } .footer .col--size-3 { -webkit-box-flex: 0; -ms-flex: 0 0 23.8%; flex: 0 0 23.8%; max-width: 23.8%; } .footer .col--size-4 { -webkit-box-flex: 0; -ms-flex: 0 0 16%; flex: 0 0 16%; max-width: 16%; } /* Block positioning */ .footer .btn-top { position: absolute; bottom: -4px; right: 12px; } .footer .copyrights { margin-top: 21px; text-align: center; padding-left: 44px; } @media (max-width: 1200px) { .footer .logo-white { margin: 0; } .footer .cols { margin: 0 -10px; } .footer .col { padding: 0 10px; } .footer .btn-top { right: 10px; } .footer .copyrights { padding-left: 0; text-align: right; } } @media (max-width: 1023px) { .footer .logo-white { width: 160px; height: 62px; } } @media (max-width: 767px) { .footer .cols { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; row-gap: 35px; } .footer .cols .col { min-width: 220px; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; max-width: 100%; text-align: center; } .footer .cols .col--size-2 { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; width: 100%; MAX-WIDTH: 100%; text-align: center; margin-bottom: 25px; } .footer .copyrights { text-align: center; font-size: 16px; } .footer .footer__background { min-height: 100%; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: absolute; z-index: 41; width: 100%; background: transparent; } .header:before { content: ''; position: absolute; top: 0; right: 0; width: 1016px; height: 136px; background-image: url('../images/header-shape1.png'); background-size: 100% 100%; background-repeat: no-repeat; z-index: 0; opacity: .6; } .header .header__content { -webkit-box-flex: 1; -ms-flex: 1 1 60%; flex: 1 1 60%; max-width: 60%; padding-top: 34px; } .header .logo { margin-bottom: 28px; } .header .logo-small { display: none; } .header .nav { margin-bottom: 14px; } .header .header__aside { -webkit-box-flex: 1; -ms-flex: 1 1 40%; flex: 1 1 40%; max-width: 40%; padding-top: 16px; } .header .header__container { position: relative; z-index: 1; } .header .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .header .header__bar { display: none; } .header--logged .nav-utilities > ul > li > .btn { padding-left: 18px; } .header--logged .nav-utilities > ul > li > .btn .icon-logout { left: 9px; } /* Scrolled */ @media (min-width: 767px) { .header.scrolled { position: fixed; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; top: 0; left: 0; width: 100%; background-image: -o-linear-gradient(315deg, #3023ae 0%, #c86dd7 100%); background-image: linear-gradient(135deg, #3023ae 0%, #c86dd7 100%); } .header.scrolled .header__inner { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header.scrolled .header__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: none; padding-top: 0; } .header.scrolled .header__aside { padding-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: none; } .header.scrolled .header__bar { display: block; background-color: rgba(63, 39, 110, .32); } .header.scrolled .header__bar-inner { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 8px 0 7px; } .header.scrolled .nav { height: 100%; padding-top: 0; margin-bottom: 0; font-size: 17px; font-weight: 700; line-height: 21px; letter-spacing: 1px;} .header.scrolled .nav > ul { margin-left: 4px; height: 100%; } .header.scrolled .nav > ul > li { -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .header.scrolled .nav > ul > li:hover { border-radius: 5px 5px 0 0; background: #8346ab; } .header.scrolled .nav > ul > li:first-child { display: none; } .header.scrolled .nav > ul > li + li { margin-left: 0; } .header.scrolled .nav > ul > li > a { display: block; height: 100%; padding: 27px 13px 20px; } .header.scrolled .nav > ul > li > a:hover { color: inherit; text-shadow: none } .header.scrolled .contacts { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; margin-right: 40px; font-size: 13px; padding-top: 7px; } .header.scrolled .contacts strong { font-size: 21px; } .header.scrolled .contacts small { display: none; } .header.scrolled .nav-utilities { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .header.scrolled .nav-utilities ul { margin: 0; } .header.scrolled .nav-utilities li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 15px 13px; margin: 0; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .header.scrolled .nav-utilities li:hover { border-radius: 5px 5px 0 0; background-color: #8346ab; } .header.scrolled .nav-utilities li:not(:last-child) { display: none; } .header.scrolled .nav-utilities li:last-child { margin-right: -14px; } .header.scrolled .nav-letters label { margin-right: 20px; } .header.scrolled .search { max-width: 316px; width: 100%; } .header.scrolled .logo { display: none; } .header.scrolled .logo-small { display: block; } .header.scrolled:before { display: none; } .header.scrolled .header__bar.header__bar--mobile {display: none;} } @media (min-width: 1023px) and (max-width: 1200px) { .header.scrolled .nav > ul > li + li > a { font-size: 14px; } .header.scrolled .nav-utilities li:last-child { margin-right: -13px; } .header.scrolled .contacts { padding-top: 7px; margin-right: 3px; } .header.scrolled .contacts strong { font-size: 17px; } } @media (max-width: 1023px) { .header .logo { width: 180px; height: 72px; } .header--logged .nav-utilities > ul > li > .btn { padding-left: 20px; padding-right: 8px; } .header--logged .nav-utilities > ul > li > .btn .icon-logout { left: 4px; width: 14px; height: auto; } .header--logged.scrolled .nav-utilities > ul > li > .btn .icon-logout { width: 22px; height: 18px; } } @media (min-width: 768px) and (max-width: 1023px) { .header.scrolled { width: 100vw; } .header.scrolled .contacts { padding-left: 15px; } .header.scrolled .logo-small { width: 110px; height: 19px; } .header.scrolled .nav > ul > li + li > a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header.scrolled .nav-utilities > ul > li > .btn { font-size: 0; min-width: 50px; padding: 0; } .header.scrolled .nav-utilities > ul > li > .btn svg { margin: 0; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; } .header.scrolled .nav-utilities > ul > li > .btn .icon-logout { left: calc(50% - 2px); } .header.scrolled .nav-letters label { font-size: 14px; margin-right: 10px; } .header.scrolled .search { padding-left: 15px; } } /* HEADER MOBILE */ @media (max-width: 767px) { .header .logo, .header .logo-small { display: none; } .header { padding: 10px 0; z-index: 60; background-image: -o-linear-gradient(315deg, #3023ae 0%, #c86dd7 100%); background-image: linear-gradient(135deg, #3023ae 0%, #c86dd7 100%); } .header:before { display: none; } .header .header__container .header__inner { position: fixed; bottom: 0; left: 0; width: 100vw; height: calc(100vh - 71px); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); background-image: -o-linear-gradient(5deg, #3023ae 0%, #c86dd7 100%); background-image: linear-gradient(445deg, #3023ae 0%, #c86dd7 100%); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 60; padding-inline: 25px; padding-block: 40px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 50px; overflow-y: auto; } .header .header__content { max-width: 100%; width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; overflow: hidden; padding-top: 15px; } .header.menu-open .header__container .header__inner { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .header .header__mobile { 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 .header__aside { max-width: unset; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; width: 100%; margin-top: auto; } .header.scrolled { position: fixed; top: 0; left: 0; } .header.menu-open { position: fixed; top: 0; left: 0; } .header .header__inner .header__bar--mobile { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .header .header__inner .header__bar--mobile .header__bar-inner { max-width: 450px; } .header .header__inner .header__bar--mobile .search { margin-bottom: 15px; } .header .header__inner .header__bar--mobile .nav-letters { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .header .header__inner .header__bar--mobile .nav-letters ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 15px; column-gap: 15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 10px; } } /* No Scroll */ .no-scroll { overflow: hidden; } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1175px; padding-left: 10px; padding-right: 10px; margin: auto; } .shell--fluid { max-width: none; } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; overflow: hidden; } /* ------------------------------------------------------------ *\ Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion { max-width: 860px; } .accordion .accordion__head a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 8px; background: #604894; color: #fff; padding: 7px 22px 6px 21px; height: 100%; text-decoration: none; min-height: 60px; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; margin: -1px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-weight: 400; } .accordion .accordion__head a h3 { font-family: Courgette; font-size: 24px; font-weight: 400; line-height: 1.5; } .accordion .accordion__head a:hover, .accordion .accordion__head a.active { background: #8347ab; } .accordion .accordion__head h3 { margin-bottom: 0; } .accordion .btn-expand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 35px; height: 35px; border: 1px solid #fff; border-radius: 50%; } .accordion .accordion__head a.active svg { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .accordion .btn-expand svg { fill: #fff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: -webkit-transform .7s; transition: -webkit-transform .7s; -o-transition: transform .7s; transition: transform .7s; transition: transform .7s, -webkit-transform .7s; } .accordion .accordion__body { position: relative; display: none; padding: 27px 29px 28px 30px; } .accordion .accordion__body:before { content: ''; position: absolute; top: -5px; left: -1px; right: -1px; height: 7px; background: #8347ab; } .accordion .accordion__section { border: 1px solid #d8d8d8; border-radius: 8px; } .accordion .accordion__section + .accordion__section { margin-top: 24px; } /* ------------------------------------------------------------ *\ Bar \* ------------------------------------------------------------ */ .bar-sticky { position: fixed; z-index: 50; top: 150px; right: -397px; -webkit-transition: right ease .7s; -o-transition: right ease .7s; transition: right ease .7s; } .bar-sticky.visible { right: 0 } @media (max-width: 767px) { .bar-sticky { right: -369px; pointer-events: none; } .bar-sticky.visible { pointer-events: all; } } @media (max-width: 369px) { .bar-sticky { right: -100vw; } } /* ------------------------------------------------------------ *\ Box \* ------------------------------------------------------------ */ .box { color: #fff; padding: 42px 25px 26px; height: 100%; width: 100%; } .box .box__title { font-family: Courgette; font-size: 24px; font-weight: 400; line-height: 1.13; } .box .box__head { margin-bottom: 47px; } .box .box__body { overflow: auto; } /* ------------------------------------------------------------ *\ Box Info \* ------------------------------------------------------------ */ .box--info { padding-right: 15px; } .box--info .box__body { height: 334px; } .box--info .box__body h2, .box--info .box__body h3 { border-bottom: 1px solid rgba(151, 151, 151, .32); } .box--info .box__body h2 { padding-bottom: 10px; } .box--info .box__body h3 { padding-bottom: 20px; } /* ------------------------------------------------------------ *\ Box Chat \* ------------------------------------------------------------ */ .box--chat { padding-right: 13px; } @media (max-width: 767px) { .box--info .box__body { padding-bottom: 10px; } } .btn-burger { width: 3.2rem; height: 3.2rem; border: none; position: relative; background-color: transparent; cursor: pointer; display: none; z-index: 2; z-index: 65; } .btn-burger span { top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 1.8rem; height: 0.2rem; background-color: #ffffff; display: block; position: absolute; -webkit-transition: opacity 0.2s 0.2s, top 0.2s 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s 0.2s, top 0.2s 0.2s, -webkit-transform 0.2s; -o-transition: opacity 0.2s 0.2s, top 0.2s 0.2s, transform 0.2s; transition: opacity 0.2s 0.2s, top 0.2s 0.2s, transform 0.2s; transition: opacity 0.2s 0.2s, top 0.2s 0.2s, transform 0.2s, -webkit-transform 0.2s; border-radius: 1rem; } .btn-burger span:first-child { top: 1rem; } .btn-burger span:nth-child(2) { opacity: 1; top: 1.6rem; } .btn-burger span:last-child { top: 2.2rem; } .btn-burger.is-active span { width: 65%; } .btn-burger.is-active span:first-child { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); -webkit-transition: top 0.2s, -webkit-transform 0.2s 0.2s; transition: top 0.2s, -webkit-transform 0.2s 0.2s; -o-transition: top 0.2s, transform 0.2s 0.2s; transition: top 0.2s, transform 0.2s 0.2s; transition: top 0.2s, transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s; } .btn-burger.is-active span:nth-child(2) { opacity: 0; -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .btn-burger.is-active span:last-child { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); -webkit-transition: top 0.2s, -webkit-transform 0.2s 0.2s; transition: top 0.2s, -webkit-transform 0.2s 0.2s; -o-transition: top 0.2s, transform 0.2s 0.2s; transition: top 0.2s, transform 0.2s 0.2s; transition: top 0.2s, transform 0.2s 0.2s, -webkit-transform 0.2s 0.2s; } .btn-burger.is-active { aspect-ratio: 1 / 1; width: 3.2rem; height: 3.2rem; border-radius: 50%; padding-left: 0.5rem; } @media (max-width: 767px) { .btn-burger { display: block; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 202px; min-height: 50px; height: 1px; font-style: font-opensans; font-size: 20px; font-weight: 600; color: #405166; border-radius: 22px; padding: 11px 18px; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e2e2e2)); background-image: -o-linear-gradient(top, #f4f4f4 0%, #e2e2e2 100%); background-image: linear-gradient(180deg, #f4f4f4 0%, #e2e2e2 100%); line-height: 1; border: 0; } .btn:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#fafffc), to(#cae0d5)); background-image: -o-linear-gradient(top, #fafffc 0%, #cae0d5 100%); background-image: linear-gradient(180deg, #fafffc 0%, #cae0d5 100%); } .btn .btn__char { font-size: 25px; } /* Button Block */ .btn--block { display: block; padding-left: 0; padding-right: 0; } .btn--primary { background-image: -webkit-gradient(linear, left top, left bottom, from(#99d04e), to(#4a900b)); background-image: -o-linear-gradient(top, #99d04e 0%, #4a900b 100%); background-image: linear-gradient(180deg, #99d04e 0%, #4a900b 100%); color: #fff; } .btn--primary svg { stroke: #fff; fill: #fff; } .btn--primary:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#bef672), to(#5da719)); background-image: -o-linear-gradient(top, #bef672 0%, #5da719 100%); background-image: linear-gradient(180deg, #bef672 0%, #5da719 100%); } .btn--alt-text { color: #4a900b; } .btn--alt-text svg { stroke: #4a900b; fill: #4a900b; } .btn--warning { background-image: -webkit-gradient(linear, left bottom, left top, from(#de6223), to(#fc9630)); background-image: -o-linear-gradient(bottom, #de6223 0%, #fc9630 100%); background-image: linear-gradient(to top, #de6223 0%, #fc9630 100%); color: #fff; } .btn--warning:hover { background-image: -webkit-gradient(linear, left bottom, left top, from(#ed893e), to(#ffb653)); background-image: -o-linear-gradient(bottom, #ed893e 0%, #ffb653 100%); background-image: linear-gradient(to top, #ed893e 0%, #ffb653 100%); } .btn--danger { background-image: -webkit-gradient(linear, left bottom, left top, from(#de2e43), to(#f45c43)); background-image: -o-linear-gradient(bottom, #de2e43 0%, #f45c43 100%); background-image: linear-gradient(to top, #de2e43 0%, #f45c43 100%); color: #fff; } .btn--danger:hover { background-image: -webkit-gradient(linear, left bottom, left top, from(#e83535), to(#f7955a)); background-image: -o-linear-gradient(bottom, #e83535 0%, #f7955a 100%); background-image: linear-gradient(to top, #e83535 0%, #f7955a 100%); } .btn--caret { padding: 11px 8px; } .btn--caret .icon-arrow { margin-left: 31px; } .btn--icon { position: relative; padding-left: 48px; } .btn--icon svg { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 21px; } .btn--missing { border: 0; border-radius: 0; background: url(../images/button-missing.png); background-repeat: repeat; background-size: 100% 100%; pointer-events: none; } .btn--border { background: transparent; border: 1px solid #1d5c00; color: #184b01; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .btn--border:hover { background: rgba(29, 92, 0, 0.25); } .btn--small { min-height: 40px; padding: 11px 15px; font-size: 18px; } .btn--dropdown { position: relative; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .btn--dropdown:before { content: ''; position: absolute; top: 0; right: 37px; bottom: 0; background: #c2c2c2; width: 2px; } .btn--dropdown:after { content: ''; position: absolute; top: 14px; right: 15px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); width: 10px; height: 10px; border-style: solid; border-width: 1px 1px 0 0; border-color: #4a900b; vertical-align: top; pointer-events: none; } .btn--dropdown select { border: 0; background: transparent; font-weight: 600; color: #4a900b; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; cursor: pointer; } .btn--full { width: 100%; } /* ------------------------------------------------------------ *\ Button Close \* ------------------------------------------------------------ */ .btn-close { color: #fff; text-decoration: none; font-size: 16px; font-style: italic; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .btn-close:hover { color: #89ca3e; } /* ------------------------------------------------------------ *\ Button Top \* ------------------------------------------------------------ */ .btn-top { width: 64px; height: 64px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-image: -o-linear-gradient(273deg, #ebfed3 0%, #d2fca8 100%); background-image: linear-gradient(177deg, #ebfed3 0%, #d2fca8 100%); border-radius: 8px; -webkit-transition: background-image .4s; -o-transition: background-image .4s; transition: background-image .4s; } .btn-top svg { fill: #614895; width: 15px; height: 26px; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .btn-top:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#ebfed3), to(#cae0d5)); background-image: -o-linear-gradient(top, #ebfed3 0%, #cae0d5 100%); background-image: linear-gradient(180deg, #ebfed3 0%, #cae0d5 100%); } @media (max-width: 767px) { .btn-top { width: 44px; height: 44px; } .btn-top svg { width: 13px; } } /* ------------------------------------------------------------ *\ Cards \* ------------------------------------------------------------ */ .cards { 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; list-style-type: none; margin: 0 -20px; } .cards .card { -webkit-box-flex: 0; -ms-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; } /* ------------------------------------------------------------ *\ Card \* ------------------------------------------------------------ */ .card { width: 100%; max-width: 100%; padding: 17px 18px 14px; } .card .card__inner { height: 100%; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); border-radius: 5px; background-color: #ffffff; padding-bottom: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .card .card__head { position: relative; z-index: 0; min-height: 228px; padding-top: 20px; padding-bottom: 5px; border-radius: 5px; color: #1d5c00; } .card .card__head-background { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; overflow: hidden; border-radius: 5px; opacity: .1; } .card .card__head-background img { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); min-width: 228px; width: 100%; height: 100%; max-width: none; } .card .card__head:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(107, 214, 10, 0.4)), to(rgba(60, 211, 173, 0.4))); background-image: -o-linear-gradient(top, rgba(107, 214, 10, 0.4) 0%, rgba(60, 211, 173, 0.4) 100%); background-image: linear-gradient(180deg, rgba(107, 214, 10, 0.4) 0%, rgba(60, 211, 173, 0.4) 100%); } .card .card__head:hover .card__head-overlay { visibility: visible; opacity: 1; } .card .card__head-inner { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .card .card__title { position: relative; z-index: 1; font-family: 'Courgette', cursive; font-size: 30px; font-weight: 400; text-align: center; margin-bottom: 11px; } .card .card__title a {text-decoration:none } .card .card__title a:hover {text-decoration:underline; } .card .card__subtitle { position: relative; z-index: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); font-size: 30px; font-weight: 700; line-height: 1; text-transform: uppercase; margin-bottom: 15px; text-align: center; } .card .card__image { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; border-radius: 50%; width: 145px; height: 145px; } .card .card__image img { border: 2px solid #fff; border-radius: 50%; } .card .list-badges { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; max-width: 29%; padding-left: 20px; padding-top: 5px; } .card .list-stars { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); z-index: 2; } .card .list-info { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; max-width: 31%; padding-right: 9px; padding-left: 16px; } .card .list-info .discount {color: #ff9595; font-weight: bold;} .card .card__head-overlay { position: absolute; top: 10px; bottom: 12px; left: 10px; right: 10px; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 5px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(235, 254, 211, 0.9)), to(rgba(210, 252, 168, 0.9))); background-image: -o-linear-gradient(top, rgba(235, 254, 211, 0.9) 0%, rgba(210, 252, 168, 0.9) 100%); background-image: linear-gradient(180deg, rgba(235, 254, 211, 0.9) 0%, rgba(210, 252, 168, 0.9) 100%); visibility: hidden; opacity: 0; -webkit-transition: visibility .4s, opacity .4s; -o-transition: visibility .4s, opacity .4s; transition: visibility .4s, opacity .4s; } .card .card__head-overlay .btn { font-size: 18px; font-weight: 600; line-height: 1; } .card .card__head-overlay .btn svg { fill: #4a900b; stroke: #4a900b; width: 11px; height: 19px; margin-left: 16px; } .card .card__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; height: 100%; padding: 44px 12px 0; font-size: 17px; line-height: 1.59; text-align: center; } .card .card__body p { margin-bottom: 10px; } .card .card__body-inner { margin-top: auto; } .card .card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 13px; margin: 0 -1px; } .card .card__actions .btn { min-width: 60px; min-height: 40px; height: 40px; padding: 10px 15px; line-height: 1; font-size: 18px; vertical-align: middle; } .card .card__actions .btn:nth-child(2) { position: relative; padding-left: 48px; padding-right: 32px; } .card .card__actions .btn:nth-child(2) svg { position: absolute; top: 50%; left: 21px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .card .card__actions .btn--icon svg { margin-right: 6px; } .card .card__actions .btn--missing { width: 192px; } .card .card__notice { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 16px 9px 11px 14px; border-radius: 10px; background: #f3f3f3; margin-top: 22px; font-size: 15px; line-height: 20px; text-align: left; } .card .card__notice .icon-exclamation { -webkit-box-flex: 0; -ms-flex: 0 0 36px; flex: 0 0 36px; max-width: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 17px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; font-size: 25px; width: 36px; height: 36px; color: #4e3383; font-size: 24px; font-weight: 700; background: #fff; } /* Of The Week, Excluseive */ .card--of-the-week .card__head, .card--exclusive .card__head { color: #fff; min-height: 275px; padding-top: 14px; } .card--of-the-week .card__title, .card--exclusive .card__title { margin-bottom: 17px; } .card--of-the-week .card__actions, .card--exclusive .card__actions { padding-top: 0; } .card--of-the-week .card__notice, .card--exclusive .card__notice { padding: 5px 9px 4px 14px; } .card--of-the-week .card__body, .card--exclusive .card__body { padding-top: 27px; } .card--of-the-week .card__head:after { background-image: -o-linear-gradient(51deg, #3cd3ad 0%, #0b8bad 100%); background-image: linear-gradient(39deg, #3cd3ad 0%, #0b8bad 100%); } .card--exclusive .card__head:after { background-image: -o-linear-gradient(50deg, #c44ff9 0%, #595ad3 100%); background-image: linear-gradient(40deg, #c44ff9 0%, #595ad3 100%); } @media (max-width: 1200px) { .card .card__head { padding-bottom: 20px; } .card .card__actions .btn { font-size: 14px; } .card .card__actions .btn + .btn { margin-left: 4px; } .card .card__actions .btn:nth-child(2) { padding-left: 36px; padding-right: 9px; } .card .card__actions .btn:nth-child(2) svg { position: absolute; top: 50%; left: 11px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 1023px) { .card .card__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 13px; margin: 0 -1px; } .card .card__actions .btn { min-width: 60px; min-height: 40px; height: 40px; padding: 10px 15px; line-height: 1; font-size: 18px; vertical-align: middle; } .card .card__actions .btn:nth-child(2) { position: relative; padding-left: 48px; padding-right: 19px; } .card .card__actions .btn:nth-child(2) svg { position: absolute; top: 50%; left: 21px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .card .card__actions .btn--icon svg { margin-right: 6px; } .card .card__body { font-size: 15px; } } @media (max-width: 767px) { .card .card__actions .btn:nth-child(2) { font-size: 14px; } .card .card__notice { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } /* ------------------------------------------------------------ *\ Card Alt \* ------------------------------------------------------------ */ .card--alt .card__head { min-height: 250px; padding-top: 28px; } .card--alt .card__title { margin-bottom: 6px; } .card--alt .card__image { position: absolute; top: 10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); max-width: 145px; } .card--alt .card__body { min-height: 197px; padding-bottom: 36px; } .card--alt .card__body p { color: #405166; font-size: 17px; line-height: 1.60; } /* ------------------------------------------------------------ *\ Chat \* ------------------------------------------------------------ */ .chat ul { padding-top: 3px; height: 285px; overflow-y: auto; margin-bottom: 14px; list-style-type: none; } .chat .chat__message { width: 301px; } .chat .chat__message--alt { margin-left: auto; } .chat .chat__message + .chat__message { margin-top: 30px; } .chat .chat__message-inner { -webkit-box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.05); box-shadow: 5px 7px 5px rgba(0, 0, 0, 0.05); border-radius: 9px; background: #e6d8f7; color: #405166;font-size: 17px; line-height: 1.59; padding: 4px 8px 8px; } .chat .chat__message--alt .chat__message-inner { background-color: #eaf9db; } .chat .chat__message-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin-top: 5px; color: #ffffff; font-family: "Open Sans"; font-size: 15px; line-height: 18px; } .chat .form__row { width: 100%; padding-right: 28px; } .chat .form__controls { display: -webkit-box; display: -ms-flexbox; display: flex; } .chat .form__controls .field { width: 100%; } .chat .form__controls .btn { min-width: 72px; margin-left: 11px; } @media (max-width: 767px) { .chat .chat__message { max-width: 100%; } .chat .chat__message-meta { -webkit-column-gap: 20px; column-gap: 20px; row-gap: 6px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } } /* ------------------------------------------------------------ *\ Contacts \* ------------------------------------------------------------ */ .contacts { font-size: 18px; font-weight: 700; line-height: 2.22; color: #fff; text-align: right; } .contacts strong { display: block; font-size: 36px; line-height: 0.9; margin-bottom: 8px; } .contacts small { display: block; font-size: 13px; font-weight: 400; line-height: 1.23; color: #fff; } @media (max-width: 1023px) { .contacts { font-size: 15px; } .contacts strong { font-size: 26px; } .contacts small { font-size: 11px; padding-left: 20px; } } /* ------------------------------------------------------------ *\ Contacts Alt \* ------------------------------------------------------------ */ .contacts-alt { border-radius: 5px; background-image: -o-linear-gradient(226deg, #81c31a 0%, #4a900b 100%); background-image: linear-gradient(224deg, #81c31a 0%, #4a900b 100%); text-align: center; color: #fff; padding: 40px 55px; } .contacts-alt--secondary { background-image: -o-linear-gradient(304deg, #4adbb5 0%, #24b47e 100%); background-image: linear-gradient(146deg, #4adbb5 0%, #24b47e 100%); } .contacts-alt .contacts__title { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 27px; } .contacts-alt > ul { list-style-type: none; } .contacts-alt > ul > li { font-size: 14px; line-height: 1; max-width: 360px; margin: 0 auto; } .contacts-alt > ul > li i { position: relative; left: -8px; vertical-align: top; } .contacts-alt > ul > li + li { margin-top: 31px; } .contacts-alt strong { display: block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 11px; } .contacts-alt--secondary > ul > li { max-width: 450px } .contacts-alt--secondary > ul > li i { left: -4px; } .contacts-alt--secondary > ul > li + li { margin-top: 35px; } .contacts-alt--secondary .contacts__images { position: relative; top: 2px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 10px; } .contacts-alt--secondary .contacts__images i + i { margin-left: 9px; } @media (max-width: 1023px) { .contacts-alt { padding-bottom: 75px; } .contacts-alt--secondary { padding-top: 67px; } } @media (max-width: 767px) { .contacts { text-align: center; } .contacts-alt--secondary .contacts__images { margin-right: 0; } .contacts-alt strong { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 11px; } } /* ------------------------------------------------------------ *\ Copyrights \* ------------------------------------------------------------ */ .copyrights { font-size: 17px; line-height: 1.59; text-align: center; } /* ------------------------------------------------------------ *\ Favourites \* ------------------------------------------------------------ */ .favourites { list-style-type: none; } /* Favourite */ .favourite { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 10px; border-bottom: 1px solid rgba(151, 151, 151, 0.32); } .favourite + .favourite { padding-top: 10px; } /* Favourite Image */ .favourite .favourite__image { border-radius: 50%; border: 2px solid #fff; overflow: hidden; margin-right: 21px; } /* Name */ .favourite .favourite__name { color: #89ca3e; font-family: Courgette; font-size: 24px; font-weight: 400; line-height: 1; } .favourite .favourite__name a { text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .favourite .favourite__name a:hover { color: #fff; } /* Rating */ .favourite .favourite__rating { margin-left: auto; } /* Icon */ .favourite .icon-bin { fill: #fff; vertical-align: middle; margin-left: 18px; -webkit-transition: fill .4s; -o-transition: fill .4s; transition: fill .4s; } .favourite .icon-bin:hover { fill: #89ca3e; } /* ------------------------------------------------------------ *\ 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; } .field { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 0; } .textarea { width: 100%; resize: none; border: 0; border-radius: 0; } /* ------------------------------------------------------------ *\ Form Elements Dark \* ------------------------------------------------------------ */ /* Form Elements */ .field--dark, .textarea--dark { padding: 8px 9px; border-radius: 7px; background: #462e79; border: 0; color: #89ca3e; -webkit-transition: -webkit-box-shadow .4s; transition: -webkit-box-shadow .4s; -o-transition: box-shadow .4s; transition: box-shadow .4s; transition: box-shadow .4s, -webkit-box-shadow .4s; } .field--dark:focus, .textarea--dark:focus { -webkit-box-shadow: inset 0 0 2px 1px #99d04f; box-shadow: inset 0 0 2px 1px #99d04f; } /* ------------------------------------------------------------ *\ Error States \* ------------------------------------------------------------ */ .has--error .field, .has--error .textarea { color: red; -webkit-box-shadow: inset 0 0 0 2px #e62565; box-shadow: inset 0 0 0 2px #e62565; } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Form Mail \* ------------------------------------------------------------ */ .form-mail { width: 100%; } .form-mail .form__row + .form__row { margin-top: 20px; } .form-mail .textarea { height: 168px; } .form-mail .form__actions { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 5px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .form-mail .form__actions .btn { min-width: 165px; font-size: 18px; font-weight: 600; padding: 10px 15px 10px 43px; } .form-mail .form__actions .btn svg { margin-right: 13px; } .form-mail .form__hint { position: relative; top: 7px; font-size: 13px; line-height: 1.15;} /* ------------------------------------------------------------ *\ Form Login \* ------------------------------------------------------------ */ .form-login .form__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .form-login .form__actions .btn { min-width: 110px; } .form-login .form__row + .form__row { margin-top: 20px; } .form-login .link-passwd { display: inline-block; margin: 5px 0 33px; font-size: 13px; font-weight: 700; line-height: 1.15; text-decoration: underline; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .form-login .link-passwd:hover { color: #89ca3e; } /* ------------------------------------------------------------ *\ Form Filter \* ------------------------------------------------------------ */ .form-filters { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 27px; } .form-filters label { display: block; margin-bottom: 22px; font-size: 17px; line-height: 1; letter-spacing: .03em; color: #405166; } .form-filters .nav-letters { display: block; margin-right: 37px; } .form-filters .nav-letters li + li { margin-left: 10px; } .form-filters .nav-letters a { color: #3c810c; } .form-filters .nav-letters a:hover { color: #99d04f; } .form-filters .nav-letters label { display: block; color: #405166; line-height: 1; } .form-filters .form__view { margin-right: 17px; } .form-filters .form__view ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style-type: none; } .form-filters .form__view li + li { margin-left: 21px; } .form-filters .form__view a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #405166; font-size: 17px; line-height: 1; text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .form-filters .form__view li.current a { font-weight: 700; } .form-filters .form__view li.current a, .form-filters .form__view a:hover { color: #3c810c; } .form-filters .form__view li.current svg, .form-filters .form__view a:hover svg { fill: #3c810c;; } .form-filters .form__view svg { fill: #818181; margin-right: 5px; -webkit-transition: fill .4s; -o-transition: fill .4s; transition: fill .4s; } .form-filters .form__sort { margin-right: 0; } .form-filters .form__filter { margin-right: 8px; } .form-filters .form__filter label, .form-filters .form__sort label { margin-bottom: 8px; margin-left: 15px; } .form-filters .form__view .icon-list { margin-right: 8px; } .form-filters .btn { min-width: 195px; } @media (max-width: 1200px) { .form-filters .nav-letters li + li { margin-left: 3px; } .form-filters .btn { min-width: 165px; } } @media (max-width: 1023px) { .form-filters { -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-filters .nav-letters { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 15px; text-align: center; margin-bottom: 30px; } .form-filters .nav-letters ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .form-filters .form__view { -webkit-box-flex: 0; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; margin: 0; text-align: center; } .form-filters .form__view ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .form-filters .form__sort { -webkit-box-flex: 0; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; margin: 0; text-align: center; } .form-filters .form__filter label, .form-filters .form__sort label { margin-left: 0; } .form-filters .form__filter { -webkit-box-flex: 0; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; margin: 0; text-align: center; } .form-filters .btn { min-width: 200px; } } @media (max-width: 767px) { .form-filters { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } .form-filters .form__view { max-width: 100%; min-width: 220px; } .form-filters .form__filter { max-width: 100%; min-width: 220px; } .form-filters .form__sort { max-width: 100%; min-width: 220px; } .form-filters .nav-letters { margin-right: 0; } .form-filters .nav-letters ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } } /* ------------------------------------------------------------ *\ Form Search \* ------------------------------------------------------------ */ .form-search .form__head { text-align: center; margin-bottom: 46px; } .form-search .form__title { font-family: Courgette; font-size: 40px; font-weight: 400; line-height: 1; margin-bottom: 19px; } .form-search .form__subtitle { max-width: 494px; margin: 0 auto; font-size: 18px; line-height: 1.5; font-weight: 400; } .form-search .form__body { margin-right: 21px; } .form-search .form__row label { display: block; margin-left: 8px; margin-bottom: 11px; } .form-search .form__actions { text-align: center; padding-top: 61px; } .form-search .form__actions .btn { padding: 10px 17px 10px 31px; min-width: 0; border-radius: 22px; } .form-search .form__actions .btn svg { margin-left: 16px; width: 10px; height: 17px; } /* Cols */ .form-search .cols { margin: 0 -18px; } .form-search .col { padding: 0 18px; } @media (max-width: 1200px) { .form-search .form__row label { font-size: 15px; } } @media (max-width: 1023px) { .form-search .col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; } .form-search .form__row { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .form-search .form__controls { margin-top: auto; } } @media (max-width: 767px) { .form-search .cols { margin: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; gap: 20px; } .form-search .col { max-width: 100%; width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .form-search .form__body { margin-right: 0; } } /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ [class^="icon-"] svg { fill: #fff; stroke: #fff; } .icon-home { width: 25px; height: 23px; } .icon-logout { width: 22px; height: 18px; } .icon-arrow { width: 8px; height: 14px; } .icon-star { width: 23px; height: 22px; } .icon-paperclip { width: 20px; height: 26px; } .icon-mail { width: 30px; height: 20px; } .icon-phone { width: 18px; height: 18px; } .icon-chat { width: 32px; height: 30px; } .icon-info { width: 19px; height: 33px; } .icon-arrow-send { width: 19px; height: 19px; } .icon-bin { width: 18px; height: 20px; } .icon-lock { width: 14px; height: 20px; } .icon-search { width: 18px; height: 18px; } .icon-grid { width: 20px; height: 20px; } .icon-list { width: 20px; height: 19px; } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { position: relative; min-height: 900px; background: -webkit-gradient(linear, left top, right top, from(rgba(48,34,153,1)),to(rgba(167,93,185,1))); background: -o-linear-gradient(left, rgba(48,34,153,1) 0%,rgba(167,93,185,1) 100%); background: linear-gradient(to right, rgba(48,34,153,1) 0%,rgba(167,93,185,1) 100%); overflow: hidden; } .intro:after { content: ''; position: absolute; bottom: -20px; left: 0; width: 812px; height: 165px; background: url(../images/intro-shape1.png); background-repeat: no-repeat; background-size: cover; opacity: .6; } .intro:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), color-stop(13%, rgba(26, 26, 26, 0.5)), color-stop(24%, rgba(25, 25, 25, 0)), color-stop(78%, rgba(1, 1, 1, 0)), color-stop(89%, rgba(0, 0, 0, 0.5)), to(#000000)); background-image: -o-linear-gradient(top, #000000 0%, rgba(26, 26, 26, 0.5) 13%, rgba(25, 25, 25, 0) 24%, rgba(1, 1, 1, 0) 78%, rgba(0, 0, 0, 0.5) 89%, #000000 100%); background-image: linear-gradient(180deg, #000000 0%, rgba(26, 26, 26, 0.5) 13%, rgba(25, 25, 25, 0) 24%, rgba(1, 1, 1, 0) 78%, rgba(0, 0, 0, 0.5) 89%, #000000 100%); opacity: .41; } .intro .intro__inner { position: absolute; bottom: 92px; left: 0; width: 100%; z-index: 3; } .intro .intro__inner .shell { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .intro .intro__utilities { width: 48%; } .intro .search { margin-bottom: 21px; } .intro .search .btn { width: 63px; height: 40px; } .intro .search .btn svg { width: 22px; height: 22px; } .intro .search input { height: 50px; } .intro .search .search__field { padding-left: 31px; } .intro .nav-letters { display: block; text-align: center; } .intro .nav-letters ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 17px; font-weight: 700; letter-spacing: 2.51px; } .intro .nav-letters li + li { margin-left: 7px; } .intro .nav-letters label { display: block; text-align: center; margin-bottom: 8px; } .intro .search__field { color: #313131; font-size: 17px; } @media (max-width: 1200px) { .intro .intro__inner { bottom: 105px; } } @media (max-width: 767px) { .intro { min-height: 750px; } .intro .intro__utilities { width: 100%; max-width: 280px; } .intro .search .search__field { font-size: 14px; padding-left: 20px; height: 40px; } .intro .search .btn svg { width: 16px; height: 16px; } .intro .search .btn { width: 50px; height: 30px; } .intro .nav-letters ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap } .intro .intro__inner { bottom: 45px; } } /* ------------------------------------------------------------ *\ Intro Elements \* ------------------------------------------------------------ */ .intro-elements { padding: 270px 0 50px; background: -webkit-gradient(linear, left top, right top, from(rgba(48,34,153,1)),to(rgba(167,93,185,1))); background: -o-linear-gradient(left, rgba(48,34,153,1) 0%,rgba(167,93,185,1) 100%); background: linear-gradient(to right, rgba(48,34,153,1) 0%,rgba(167,93,185,1) 100%); } /* Mobile Styles (Screens 768px and smaller) */ @media (max-width: 768px) { .intro-elements { padding: 120px 0 50px; /* Changes 270px to 120px */ } } .intro-elements .intro__inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .intro-elements .intro__inner .link-back { position: absolute; top: -71px; left: 1px; } /* ------------------------------------------------------------ *\ Link Back \* ------------------------------------------------------------ */ .link-back { letter-spacing: .015em; color: #89ca3e; font-size: 16px; font-weight: 600; line-height: 1.5; text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .link-back:hover { color: #fff; } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Stas \* ------------------------------------------------------------ */ .list-stars { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; max-width: 178px; width: 100%; height: 35px; margin: 0; padding: 0; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); border-radius: 4px; background-color: #ffffff; margin-bottom: 0; } .list-stars li { position: relative; font-size: 0; } .list-stars li + li { margin-left: 4px; } .list-stars .icon-star { fill: #fdbf2c; } .list-stars .icon-star--empty { fill: #cecdd2; } /* Alt */ .list-stars--alt { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: transparent; -webkit-box-shadow: none; box-shadow: none; height: auto; width: auto; } .list-stars--alt .icon-star { width: 13px; height: 12px; } .list-stars--alt .icon-star--empty { fill: #46317c; } /* Big */ .list-stars--big { max-width: 230px; width: 100%; height: 45px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); } .list-stars--big svg { width: 30px; height: 29px; } .list-stars--big li + li { margin-left: 5px; } /* Small */ .list-stars--small { height: auto; padding: 3px 4px; } .list-stars--small li + li { margin-left: 2px; } .list-stars--small svg { width: 18px; height: 17px; } /* ------------------------------------------------------------ *\ List Info \* ------------------------------------------------------------ */ .list-info { width: 113px; font-size: 26px; line-height: 1; vertical-align: middle; margin-bottom: 0; margin-top: -1px; } .list-info li { display: inline-block; } .list-info li + li { margin-top: 3px; } .list-info small { font-size: 15px; } .list-info li:nth-child(1) small { font-size: 18px; } .list-info li:nth-child(2) { font-size: 24px; margin-top: 6px; } .list-info li:nth-child(3) { margin-top: 7px; } @media (max-width: 1200px) { .list-info { font-size: 18px; } .list-info small { font-size: 12px; } .list-info li:nth-child(2) { font-size: 18px; margin-top: 6px; } .list-info li:nth-child(3) { margin-top: 7px; } .card .card__subtitle { font-size: 23px; } } /* ------------------------------------------------------------ *\ List Info Alt \* ------------------------------------------------------------ */ .list-info-alt 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; color: #184b01; font-size: 18px; line-height: 1; } .list-info-alt li + li { margin-top: 22px; } .list-info-alt li:last-child { margin-top: 26px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .list-info-alt .strike { position: relative; top: -4px; display: block; text-decoration: line-through; font-weight: 400; /*margin-bottom: 3px;*/ } .list-info-alt span { font-size: 27px; vertical-align: middle; } .list-info-alt .discountprice {color: #c13131; } @media (max-width: 1023px) { .list-info-alt li { font-size: 15px; line-height: 1; } .list-info-alt span { font-size: 18px; } } /* ------------------------------------------------------------ *\ List Badges \* ------------------------------------------------------------ */ .list-badges { margin-bottom: 0; } .list-badges li + li { margin-top: 4px; } .list-badges--alt { letter-spacing: .04em; } .list-badges--alt li + li { margin-top: 15px; } .list-badges--alt i { margin-right: 14px; } @media (max-width: 1200px) { .list-badges [class^="badge-"] { width: 40px; height: 40px; } } /* ------------------------------------------------------------ *\ List Buttons \* ------------------------------------------------------------ */ .list-buttons li + li { margin-top: 20px; } /* ------------------------------------------------------------ *\ List Categories \* ------------------------------------------------------------ */ .list-categories { overflow: hidden; margin: 0 -7px 0 -8px; } .list-categories li { width: 25%; float: left; padding: 0 7px 15px 8px; } .list-categories li:last-child { margin-top: -222px; } .list-categories li.wide { width: 50%; } .list-categories a { height: 100%; position: relative; display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .list-categories a:hover { opacity: .9; } .list-categories img { width: 100%; display: block; opacity: 0; } .list-categories p { position: absolute; bottom: 0; right: 0; left: 0; min-height: 67px; height: 1px; 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; background-color: rgba(0, 0, 0, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); color: #fff; font-family: Courgette; font-size: 22px; font-weight: 400; text-align: center; } @media ( max-width: 1170px ) and (-ms-high-contrast: none), (-ms-high-contrast: active) { .list-categories a { height: 19vw; } .list-categories .high a { height: calc(38vw + 15px); } .list-categories li:last-child { margin-top: calc(-19vw - 15px); } } @supports (display: grid) { .list-categories { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 15px; overflow: visible; margin: 0; } .list-categories li { width: auto; float: none; padding: 0; } .list-categories li:last-child { margin-top: 0; } .list-categories li.high { grid-row: 1 / span 2; grid-column: 2; } .list-categories li.wide { width: auto; grid-column: 3 / span 2; } } @media (max-width: 1023px) { .list-categories p { font-size: 16px; } } @media (max-width: 767px) { .list-categories { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } .list-categories li.high { grid-row: auto; grid-column: auto; } .list-categories li.wide { width: auto; grid-column: auto; } } /* ------------------------------------------------------------ *\ list Method \* ------------------------------------------------------------ */ .list-method { 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; } .list-method li + li { margin-left: 43px; } /* ------------------------------------------------------------ *\ List Services \* ------------------------------------------------------------ */ .list-services { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -7px; } .list-services li { padding: 0 7px; } .list-services a { height: 100%; position: relative; display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .list-services a:hover { opacity: .9; } .list-services img { width: 100%; display: block; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .list-services p { position: absolute; bottom: 0; right: 0; left: 0; min-height: 67px; height: 1px; 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; background-color: rgba(0, 0, 0, 0.6); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); color: #fff; font-family: Courgette; font-size: 22px; font-weight: 400; text-align: center; } @media (max-width: 1023px) { .list-services p { font-size: 16px; } } @media (max-width: 767px) { .list-services { margin: 0; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .list-services li { padding: 0; width: 100%; max-width: 400px; } } /* ------------------------------------------------------------ *\ List Cheannels \* ------------------------------------------------------------ */ .list-channels { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list-channels li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 92px; } @media (max-width: 1023px) { .list-channels li { padding: 0 20px; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { width: 258px; height: 100px; } .logo-mobile { display: none; z-index: 65; width: 157px; height: 27px; } @media (max-width: 767px) { .logo-mobile { display: block; background-image : url(../images/sprite.png); background-position : 0% 79.91967871485943%; background-size : 219.74522292993632% 1022.2222222222222%;} } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ @media (min-width: 767px) { [class^="nav"] > ul > li > .dropdown { position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; border-radius: 0 0 5px 5px; background-color: #8346ab; z-index: 0; } [class^="nav"] > ul > li > .dropdown:before { content: ''; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 40px; background-image: -webkit-gradient(linear, left top, left bottom, from(#612e83), to(rgba(113, 56, 151, 0))); background-image: -o-linear-gradient(top, #612e83 0%, rgba(113, 56, 151, 0) 100%); background-image: linear-gradient(180deg, #612e83 0%, rgba(113, 56, 151, 0) 100%); } [class^="nav"] > ul > li.has-dd:hover > .dropdown { visibility: visible; opacity: 1; -webkit-transition: visibility .4s, opacity .4s; -o-transition: visibility .4s, opacity .4s; transition: visibility .4s, opacity .4s; } } [class^="nav"] > ul > li.has-dd { position: relative; } .nav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 18px; line-height: 1.17; letter-spacing: 0.06em; color: #fff; font-weight: 700; } .nav > ul > li:nth-child(2) { margin-left: 28px; } .nav > ul > li + li { margin-left: 37px; } .nav > ul > li > a { text-decoration: none; -webkit-transition: color .4s, text-shadow .4s; -o-transition: color .4s, text-shadow .4s; transition: color .4s, text-shadow .4s; } .nav > ul > li > a:hover { color: #99d04f; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .nav > ul > li > a svg { stroke: #fff; -webkit-transition: stroke .4s; -o-transition: stroke .4s; transition: stroke .4s } .nav > ul > li > a:hover svg { stroke: #99d04f; } .nav > ul > li > .dropdown { left: 0; width: 278px; } .nav > ul > li > .dropdown ul { position: relative; z-index: 2; padding-top: 14px; } .nav > ul > li > .dropdown ul > li:not(:last-child) { border-bottom: 1px solid #979797; } .nav > ul > li > .dropdown ul > li > a { display: block; width: 100%; text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; padding: 12px 0 12px 20px; } .nav > ul > li > .dropdown ul > li > a:hover { color: #8acc2d; } @media (max-width: 1200px) { .nav > ul { font-size: 16px; } .nav > ul > li + li { margin-left: 20px; } } @media (max-width: 1023px) { .nav > ul { font-size: 14px; } .nav > ul > li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav > ul > li + li { margin-left: 10px; } .nav > ul > li:nth-child(2) { margin-left: 10px; } } /* ------------------------------------------------------------ *\ Nav Utilites \* ------------------------------------------------------------ */ .nav-utilities > ul { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; color: #fff; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 21px; } .nav-utilities > ul > li + li { margin-left: 12px; } .nav-utilities > ul > li + .has-dd { margin-left: 20px; } .nav-utilities > ul > li > a { text-decoration: none; -webkit-transition: color .4s, text-shadow .4s; -o-transition: color .4s, text-shadow .4s; transition: color .4s, text-shadow .4s; } .nav-utilities > ul > > li > a:not(.btn):hover { color: #99d04f; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .nav-utilities > ul > li .dropdown { right: 0; left: auto; width: 320px; padding: 59px 20px 26px; visibility: visible; opacity: 1; display: none; } .nav-utilities > ul > li .btn-close { position: absolute; top: 20px; right: 24px; } .nav-utilities > ul > li > .btn { min-width: 148px; min-height: 35px; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #4e3383; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#e2e2e2)); background-image: -o-linear-gradient(top, #f4f4f4 0%, #e2e2e2 100%); background-image: linear-gradient(180deg, #f4f4f4 0%, #e2e2e2 100%); padding: 9px 3px 8px 6px; line-height: 1; } .nav-utilities > ul > li > .btn:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(#fafffc), to(#cae0d5)); background-image: -o-linear-gradient(top, #fafffc 0%, #cae0d5 100%); background-image: linear-gradient(180deg, #fafffc 0%, #cae0d5 100%); } .nav-utilities > ul > li > .btn svg { fill: #614895; margin-right: 0; left: 17px; } .nav-utilities > ul > li > .btn .icon-logout { left: 15px; } @media (max-width: 1200px) { .nav-utilities > ul { font-size: 12px; } .nav-utilities > ul > li + li { margin-left: 8px; } .nav-utilities > ul > li > .btn--icon svg { left: 12px; } .nav-utilities > ul > li > .btn { min-width: 120px; padding: 0; } } @media (max-width: 1023px) { .nav-utilities > ul { font-size: 12px; } .nav-utilities > ul > li + li { margin-left: 6px; } .nav-utilities > ul > li > .btn { min-width: 55px; padding: 5px; padding-left: 30px; padding-right: 10px; font-size: 12px; } .nav-utilities > ul > li + .has-dd { margin-left: 9px; } } /* ------------------------------------------------------------ *\ Nav Letters \* ------------------------------------------------------------ */ .nav-letters { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav-letters label { color: #fff; font-size: 16px; line-height: 15px; } .nav-letters ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style-type: none; color: #89ca3e; font-size: 15px; font-weight: 700; } .nav-letters a { text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; text-transform: uppercase; } .nav-letters a:hover { color: #fff; } .nav-letters li + li { margin-left: 2px; } /* ------------------------------------------------------------ *\ Nav Footer \* ------------------------------------------------------------ */ .nav-footer li + li { margin-top: 3px; } .nav-footer a { font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .nav-footer a:hover { color: #4e3383; } @media (max-width: 767px) { .nav ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } .nav > ul > li > a { font-size: 18px; } .nav-utilities > ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .nav > ul > li + li { margin: 0; } .nav > ul > li:nth-child(2) { margin-left: 0; } .nav .dropdown { position: relative; display: grid; grid-template-rows: 0fr; overflow: hidden; -webkit-transition: grid-template-rows .3s, margin .3s; -o-transition: grid-template-rows .3s, margin .3s; transition: grid-template-rows .3s, margin .3s; transition: grid-template-rows .3s, margin .3s, -ms-grid-rows .3s; border-radius: 0 0 5px 5px; background-color: #8346ab; } .nav .dropdown:before { content: ''; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 40px; background-image: -webkit-gradient(linear, left top, left bottom, from(#612e83), to(rgba(113, 56, 151, 0))); background-image: -o-linear-gradient(top, #612e83 0%, rgba(113, 56, 151, 0) 100%); background-image: linear-gradient(180deg, #612e83 0%, rgba(113, 56, 151, 0) 100%); } .nav .dropdown .dropdown__wrapper { min-height: 0; -webkit-transition: visibility 1s; -o-transition: visibility 1s; transition: visibility 1s; visibility: hidden; } .nav .dropdown.is-open { grid-template-rows: 1fr; margin: 20px 0 0 0; } .nav .dropdown.is-open .dropdown__wrapper { visibility: visible; } .nav .has-dd { display: block; text-align: center; } .nav > ul > li > .dropdown ul > li > a { padding-inline: 0; } } /* ------------------------------------------------------------ *\ Offer \* ------------------------------------------------------------ */ .offers { max-width: 958px; margin: 0 auto; } .offer { display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: #184b01; padding: 22px 20px 18px; } .offer .btn { min-width: 169px; border-radius: 19px; } .offer > span { position: relative; display: inline-block; font-family: Courgette; font-size: 24px; font-weight: 400; line-height: 1.5; } .offer:nth-child(2n) { background: #614895;; color: #fff; } .offer .offer__inner span { font-size: 28px; line-height: 1.3; vertical-align: middle; margin-right: 45px; vertical-align: top; } .offer .offer__inner .discount {color: #c13131;} @media (max-width: 1023px) { .offer { padding: 10px 20px 9px; } .offer span { font-size: 18px; } .offer .offer__inner span { font-size: 20px; vertical-align: middle; } } @media (max-width: 767px) { .offer { display: block; text-align: center; padding: 15px 20px; } .offer .offer__inner { text-align: center; margin-top: 16px; } .offer .offer__inner span { margin-right: 10px; font-size: 18px; } .offer .btn { font-size: 16px; padding-inline: 12px; } } /* ------------------------------------------------------------ *\ Rating \* ------------------------------------------------------------ */ .ratings { list-style-type: none; } .ratings .rating + .rating { margin-top: 6px; } .rating { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .rating .list-stars { width: 100%; max-width: none; height: auto; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 5px 6px;} .rating .rating__count { position: absolute; top: 50%; right: 12px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 19px; } .rating .rating__count a { text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .rating .rating__count a:hover { color: #4a900b; } @media (max-width: 1200px) { .rating .list-stars .icon-star { width: 21px; height: 21px; } } /* ------------------------------------------------------------ *\ Review \* ------------------------------------------------------------ */ .reviews { color: #405166; font-size: 16px; margin-bottom: 40px; } .reviews .review + .review { padding-top: 35px; } .review { padding-bottom: 21px; border-bottom: 1px solid #ccc; display: -webkit-box; display: -ms-flexbox; display: flex; } .review .review__aside { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; max-width: 150px; padding-right: 17px; padding-top: 1px; } .review .reveiw__content { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .review .list-stars {width: 100%; margin-bottom: 16px; } .review .list-stars--small { height: auto; padding: 5px 4px; } @media (max-width: 1023px) { .review .review__content { font-size: 14px; } } @media (max-width: 767px) { .review { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 30px; column-gap: 30px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .review .review__aside { max-width: unset; width: 100%; padding-right: 0; margin-bottom: 25px; text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 36%; flex: 0 0 36%; min-width: 208px; } .review .list-stars--small { margin: 0 auto; margin-bottom: 10px; } .review .review__meta span:first-child { margin-right: 40px; } .review .review__content { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; min-width: 300px; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { position: relative; font-size: 17px; } .search .search__field { width: 100%; border: 0; border-radius: 99px; height: 35px; padding: 6px 56px 6px 19px; } .search .btn { position: absolute; top: 50%; right: 5px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); min-width: 39px; min-height: 26px; padding: 4px 10px; } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section-elements { padding-bottom: 50px; } .section-elements .section__head { padding: 85px 0 82px; } .section-elements .section__title { margin-bottom: 25px; padding-top: 30px; } .section-elements .cols + .cols { margin-top: 45px; } .section-elements .accordion { margin-top: 44px; } @media (max-width: 1200px) { .section-elements .cards { margin: 0 -10px; } .section-elements .card { padding: 14px 10px; } } @media (max-width: 1023px) { .section-elements { margin-bottom: 26px; } .section-elements .cards { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -10px; } .section-elements .card { -webkit-box-flex: 0; -ms-flex: 0 0 363px; flex: 0 0 363px; max-width: 363px; margin: 0 auto; } .section-elements .section__foot { text-align: center; padding-top: 30px; } } /* ------------------------------------------------------------ *\ Section Categories \* ------------------------------------------------------------ */ .section-categories { position: relative; padding-top: 110px; margin-bottom: 117px; } .section-categories .section__background { position: absolute; top: -3.5vw; bottom: -21vw; width: 100%; background-image: -o-linear-gradient(146deg, #afe9c0 0%, #e7fcd1 100%); background-image: linear-gradient(-56deg, #afe9c0 0%, #e7fcd1 100%); -webkit-transform: skewY(-2deg); -ms-transform: skewY(-2deg); transform: skewY(-2deg); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; background-repeat: no-repeat; z-index: 4; overflow: hidden; } .section-categories .section__background img { position: absolute; right: -220px; bottom: 92px; max-width: 50%; height: auto; opacity: .1; -webkit-transform: skewY(2deg); -ms-transform: skewY(2deg); transform: skewY(2deg); } .section-categories .section__container { position: relative; z-index: 5; } .section-categories .section__head { margin-bottom: 49px; } /* ------------------------------------------------------------ *\ Section Featured \* ------------------------------------------------------------ */ .section-featured { position: relative; z-index: 5; margin-bottom: 101px; } .section-featured .section__title { min-height: 71px; line-height: 1; } .section-featured .card { padding: 14px 15px; } .section-featured .cols { margin: 0; } .section-featured .col { padding: 0; } @media (max-width: 1023px) { .section-featured { margin-bottom: 90px; } .section-featured .cols { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .section-featured .col { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .section-featured .col:not(:last-child) { margin-bottom: 40px; } .section-featured .slider__slide { max-width: 368px; margin: 0 auto; } } @media (max-width: 767px) { .section-featured .cols { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .section-featured .col { max-width: 100%; width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } /* ------------------------------------------------------------ *\ Section Contacts \* ------------------------------------------------------------ */ .section-contacts { margin-bottom: 112px; } .section-contacts .section__background img { width: 100%; } .section-contacts .section__head { margin-bottom: 47px; } .section-contacts .section__body { position: relative; } .section-contacts .section__decoration { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 126px; height: 126px; border-radius: 50%; background: #fff; } .section-contacts .logo-part { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* Cols */ .section-contacts .cols { margin: 0 -12px; } .section-contacts .col { padding: 0 12px; } .section-contacts .contacts-alt { display: block; height: 100%; } @media (max-width: 1200px) { .section-contacts .cols { margin: 0 -10px; } .section-contacts .col { padding: 0 10px; } } @media (max-width: 1023px) { .section-contacts .cols { display: block; } .section-contacts .col { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; max-width: 100%; } .section-contacts .col + .col { margin-top: 20px; } .section-contacts .section__decoration { top: 49%; } } @media (max-width: 767px) { .section-contacts .contacts-alt { position: relative; padding-inline: 25px; } .section-contacts .section__decoration { display: none; } .section-contacts .section__decoration.section__decoration--mobile { display: block; top: 100%; z-index: 10; } } /* ------------------------------------------------------------ *\ Section People \* ------------------------------------------------------------ */ .section-people { position: relative; z-index: 1; } .section-people .section__head { margin-bottom: 38px; } .section-people .section__body { padding: 0 9px; } .section-people .section__form { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 7px 0 4px; } .section-people .section__actions { padding-top: 100px; text-align: center; } .section-people .section__actions .btn { padding: 10px 17px 10px 30px; min-width: 0; } .section-people .section__actions .btn svg { margin-left: 35px; width: 10px; height: 17px; } .section-people .section__container { position: relative; z-index: 2; } .section-people .section__background { position: absolute; top: 21.5vw; right: 0; bottom: -19vw; left: 0; z-index: 1; background-image: -o-linear-gradient(273deg, #afe9da 0%, #e7fcd1 100%); background-image: linear-gradient(177deg, #afe9da 0%, #e7fcd1 100%); -webkit-transform: skewY(4deg); -ms-transform: skewY(4deg); transform: skewY(4deg); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; overflow: hidden; } .section-people .section__background--bottom { top: -12vw; bottom: 20vw; -webkit-transform: skewY(-3.5deg); -ms-transform: skewY(-3.5deg); transform: skewY(-3.5deg); } @media (max-width: 1200px) { .section-people .cards { margin: 0 -10px; } .section-people .card { padding: 10px 10px; } } @media (max-width: 1023px) { .section-people .cards { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .section-people .card { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 356px; } .section-people .section__background { top: 46vw; bottom: -21vw; } .section-people .section__background--bottom { top: -14vw; bottom: -1vw; } } @media (max-width: 767px) { .section-people .section__actions .btn { font-size: 16px; } } /* ------------------------------------------------------------ *\ Section Search \* ------------------------------------------------------------ */ .section-search { position: relative; z-index: 7; min-height: 581px; height: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 96px; margin-bottom: 37px; } .section-search .section__background { position: absolute; top: 0; -webkit-transform: skewY(-1.45deg); -ms-transform: skewY(-1.45deg); transform: skewY(-1.45deg); overflow: hidden; width: 100%; height: 555px; } .section-search .section__background:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-image: -o-linear-gradient(315deg, rgba(48, 35, 174, 1) 0%, rgba(200, 109, 215, 1) 100%); background-image: linear-gradient(135deg, rgba(48, 35, 174, 1) 0%, rgba(200, 109, 215, 1) 100%); } .section-search .section__background img { position: relative; top: /*-348px*/ -35%; left: 0; z-index: 1; width: 100%; height: auto; opacity: .3; -webkit-transform: skewY(1.4deg); -ms-transform: skewY(1.4deg); transform: skewY(1.4deg); } .section-search .section__container { position: relative; z-index: 1; width: 100%; color: #fff; } @media (max-width: 1023px) { .section-search .section__background img { top: -10%; } } @media (max-width: 767px) { .section-search { min-height: 720px; } .section-search .section__background { height: 615px; } } /* ------------------------------------------------------------ *\ Section Testimonials \* ------------------------------------------------------------ */ .section-testimonials { margin-bottom: 104px; } .section-testimonials .section__head { padding-top: 162px; margin-bottom: 30px; } .section-testimonials .section__body { max-width: 1093px; margin: 0 auto; } @media (max-width: 1023px) { .section-testimonials { margin-bottom: 90px; } .section-testimonials .section__head { padding-top: 90px; } } /* ------------------------------------------------------------ *\ Section Services \* ------------------------------------------------------------ */ .section-services { margin-bottom: 128px; } .section-services .section__head { margin-bottom: 41px; } @media (max-width: 1023px) { .section-services { margin-bottom: 90px; } } /* ------------------------------------------------------------ *\ Section Channels \* ------------------------------------------------------------ */ .section-channels { margin-bottom: 21px; } .section-channels .section__head { margin-bottom: 37px; } .section-channels .section__body { padding: 0 27px; } /* ------------------------------------------------------------ *\ Section Profile \* ------------------------------------------------------------ */ .section-profile { margin-bottom: 211px; } /* Background */ .section-profile .section__background { position: absolute; z-index: 0; padding-top: 323px; min-height: 520px; width: 100%; background-image: -o-linear-gradient(315deg, rgba(48, 35, 174, 0.86) 0%, rgba(200, 109, 215, 0.86) 100%); background-image: linear-gradient(135deg, rgba(48, 35, 174, 0.86) 0%, rgba(200, 109, 215, 0.86) 100%); background-color: #141414; } /* Container */ .section-profile .section__container { padding-top: 199px; position: relative; z-index: 1; } /* Head */ .section-profile .section__head { color: #fff; margin-bottom: 95px; } .section-profile .section__head .shell { position: relative; } .section-profile .section__head-inner { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 111px; margin-left: 28.8%; } .section-profile .section__head-content { -webkit-box-flex: 0; -ms-flex: 0 0 68.8%; flex: 0 0 68.8%; max-width: 68.8%; padding-right: 110px; } .section-profile .section__head-aside { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .section-profile .section__title { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); color: #fff; font-family: Courgette; font-size: 44px; font-weight: 400; line-height: 1.36; text-align: left; margin-bottom: 7px; } .section-profile .section__subtitle { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); color: #ffffff; font-family: "Open Sans"; font-size: 18px; font-weight: 600; line-height: 1.33; text-align: left; } .section-profile .section__head .list-wrapper {display: none;} .section-profile .section__head .section__head-avatar {display: none;} /* Body */ .section-profile .section__body-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } /* Sidebar */ .section-profile .section__sidebar { -webkit-box-flex: 0; -ms-flex: 0 0 28.8%; flex: 0 0 28.8%; max-width: 28.8%; margin-top: -252px; padding-right: 54px; } .section-profile .section__sidebar .list-info-alt { margin-bottom: 43px; } .section-profile .section__sidebar .list-info-alt + small { line-height: 1.5; } .section-profile .section__sidebar .list-info-alt + small p { margin-bottom: 1.46em; } .section-profile .section__sidebar-image { text-align: center; margin-bottom: 24px; } .section-profile .section__sidebar-image img { border-radius: 50%; border: 2px solid #fff; } .section-profile .section__actions { margin-bottom: 15px; } .section-profile .section__actions .btn { margin-bottom: 20px; } .section-profile .section__actions .btn--icon { position: relative; padding-left: 15px; } .section-profile .section__actions .btn--icon svg { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 22px; } .section-profile .section__actions .btn--icon:nth-child(1) svg { left: 35px; } .section-profile .section__actions .btn--icon:nth-child(3) svg { left: 18px; } .section-profile .section__actions .btn--icon .btn__char { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 39px; } .section-profile .section__actions .btn--small { margin-bottom: 10px; } .section-profile .list-stars--big { margin: 0 auto; margin-bottom: 32px; } /* Content */ .section-profile .section__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .section-profile .section__content-entry { padding-top: 4px; padding-right: 25px; margin-bottom: 43px; line-height: 1.59; } .section-profile .section__content-entry p { margin-bottom: 0.83em; } .section-profile .section__content-inner { -webkit-box-flex: 0; -ms-flex: 0 0 68.8%; flex: 0 0 68.8%; max-width: 68.8%; padding-right: 34px; } .section-profile .section__content-aside { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; padding-top: 7px; } /* Other */ .section-profile .link-back { position: absolute; top: 0; left: 9px; } .section-profile .section__head .list-badges { position: relative; top: 10px; } .section-profile .section__head .list-badges li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 1200px) { .section-profile .section__head .list-badges i { margin-right: 5px; } .section-profile .section__head .list-badges { font-size: 15px; } .section-profile .section__sidebar { margin-top: -235px; } .section-profile .section__actions .btn { padding-left: 52px; } } @media (max-width: 1023px) { .section-profile { margin-bottom: 90px; } .section-profile .section__title { font-size: 35px; } .section-profile .section__subtitle { font-size: 16px; } .section-profile .section__head-inner { padding-top: 60px;} .section-profile .section__background { min-height: 403px; } .section-profile .section__head-content { padding-right: 20px; } .section-profile .section__sidebar { margin-top: -214px; padding-right: 25px; } .section-profile .section__sidebar .list-stars { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 7px 10px; } .section-profile .section__sidebar .list-stars .icon-star { max-width: 21px; width: 100%; max-height: 21px; height: 100%; } .section-profile .section__actions .btn { margin-bottom: 20px; min-width: 0; width: 100%; font-size: 15px; } .section-profile .section__actions .btn--icon { position: relative; padding-left: 48px; padding-right: 15px; } .section-profile .section__actions .btn--icon svg { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 15px; width: 16px; height: auto; } .section-profile .section__actions .btn--icon:nth-child(1) svg { left: 16px; } .section-profile .section__actions .btn--icon:nth-child(3) svg { left: 15px; width: 16px; height: auto; } .section-profile .section__actions .btn--icon .btn__char { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 30px; font-size: 21px; } .section-profile .section__content-inner { padding-right: 25px; } .section-profile .section__content-entry { padding-right: 0; } .section-profile .section__head .list-badges { font-size: 14px; } .section-profile .section__head .list-badges i { width: 32px; height: 32px; } .section-profile .section__head .list-badges li + li { margin-top: 5px; } .section-profile .section__head-avatar {display: none;} } @media (max-width: 767px) { .section-profile .section__head { background-image: -o-linear-gradient(315deg, rgba(48, 35, 174, 0.86) 0%, rgba(200, 109, 215, 0.86) 100%); background-image: linear-gradient(135deg, rgba(48, 35, 174, 0.86) 0%, rgba(200, 109, 215, 0.86) 100%); padding-top: 120px; padding-bottom: 0; margin-bottom: 50px; background-color: #141414; } .section-profile .section__background { display: none; } .section-profile .section__container { padding-top: 0; } .section-profile .section__head .list-badges { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 5px; -webkit-column-gap: 25px; column-gap: 25px; } .section-profile .section__head-inner { margin-left: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; column-gap: 30px; } .section-profile .section__head-content { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; max-width: 100%; padding-right: 0; min-width: 300px; } .section-profile .section__head-aside { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .section-profile .section__head .section__head-avatar { display: block; margin-bottom: 25px; } .section-profile .section__head-avatar img { border-radius: 50%; } .section-profile .section__background { min-height: 710px; } .section-profile .section__sidebar-image { display: none; } .section-profile .section__sidebar .list-stars { display: none; } .section-profile .section__sidebar { margin-top: 0; margin-bottom: 30px; max-width: 100%; padding-right: 0; } .section-profile .section__body-inner { display: block; } .section-profile .section__head .list-wrapper { display: block; margin-top: 32px; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .section-profile .section__head .list-stars--big { margin-bottom: -20px; } .section-profile .section__title { text-align: center; } .section-profile .section__subtitle { text-align: center; } .section-profile .section__head .list-badges li { gap: 5px; } .section-profile .section__content { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 30px; } .section-profile .section__content-inner { padding-right: 0; max-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .section-profile .section__sidebar > p:not(:last-child) { margin-bottom: 5px; } .section-profile .section__sidebar .list-info-alt { margin-bottom: 25px; } .section-profile .section__actions { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; } .section-profile .section__actions .btn--icon { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; min-width: 220px; margin-bottom: 0; } .section-profile .section__actions .btn--icon:first-child { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } } /* ------------------------------------------------------------ *\ Section Offers \* ------------------------------------------------------------ */ .section-offers { position: relative; margin-bottom: 195px; } .section-offers .section__background { position: absolute; top: -111px; left: 0; min-height: 780px; width: 100%; z-index: 0; -webkit-transform: skewY(-1.7deg); -ms-transform: skewY(-1.7deg); transform: skewY(-1.7deg); background-image: -o-linear-gradient(146deg, #afe9c0 0%, #e7fcd1 100%); background-image: linear-gradient(-56deg, #afe9c0 0%, #e7fcd1 100%); } .section-offers .section__container { position: relative; z-index: 1; } .section-offers .section__head { margin-bottom: 54px; } @media (max-width: 1023px) { .section-offers { margin-bottom: 120px; } .section-offers .section__background { top: -37px; bottom: -74px; min-height: 0; } } /* ------------------------------------------------------------ *\ Section Reviews \* ------------------------------------------------------------ */ .section-reviews { margin-bottom: 111px; } /* Head */ .section-reviews .section__head { margin-bottom: 26px; } /* Body */ .section-reviews .section__body-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } /* Sidebar */ .section-reviews .section__sidebar { padding-top: 105px; -webkit-box-flex: 0; -ms-flex: 0 0 29.25%; flex: 0 0 29.25%; max-width: 29.25%; padding-right: 61px; } /* Content */ .section-reviews .section__content { -webkit-box-flex: 0; -ms-flex: 0 0 71%; flex: 0 0 71%; max-width: 71%; } .section-reviews .form-sort { margin-bottom: 29px; text-align: right; } .section-reviews .form-sort .btn { min-width: 213px; } .section-reviews .form-sort .btn--dropdown:after { top: 12px; right: 19px; } .section-reviews .form-sort .btn--dropdown:before { right: 43px; } .section-reviews .form-sort label { display: inline-block; margin-left: 18px; margin-bottom: 4px; font-size: 18px; letter-spacing: -.025em; } .section-reviews .form__row { display: inline-block; text-align: left; } .section-reviews .section__actions { text-align: center; } .section-reviews .section__actions .btn { padding: 11px 27px; } .section-reviews .reviews { margin-bottom: 40px; } @media (max-width: 1023px) { .section-reviews { margin-bottom: 70px; } .section-reviews .section__sidebar { padding-right: 25px; } .section-reviews .ratings .icon-star { width: 18px; height: 19px; } .section-reviews .ratings .rating__count { right: 5px; font-size: 14px; } } @media (max-width: 767px) { .section-reviews .section__body-inner { display: block; } .section-reviews .section__sidebar { width: 100%; max-width: 100%; padding-right: 0; padding-top: 20px; } .section-reviews .section__content { max-width: 100%; width: 100%; margin-top: 35px; } .section-reviews .form__row { width: 100%; text-align: center; } .section-reviews .form-sort label { margin-inline: 0; margin-bottom: 15px; } .section-reviews .form-sort { margin-bottom: 50px; } } /* ------------------------------------------------------------ *\ Section Related \* ------------------------------------------------------------ */ .section-related { margin-bottom: 50px; } .section-related .section__head { margin-bottom: 26px; } .section-related .cards { margin: 0 -17px; } .section-related .card { padding: 14px 17px; } .section-related .section__foot { padding-top: 56px; } .section-related .section__foot .btn { padding: 11px 22px 11px 19px; letter-spacing: .02em; } @media (max-width: 1200px) { .section-related .cards { margin: 0 -10px; } .section-related .card { padding: 14px 10px; } } @media (max-width: 1023px) { .section-related { margin-bottom: 26px; } .section-related .cards { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -10px; } .section-related .card { -webkit-box-flex: 0; -ms-flex: 0 0 363px; flex: 0 0 363px; max-width: 363px; margin: 0 auto; } .section-related .section__foot { text-align: center; padding-top: 30px; } } @media (max-width: 767px) { .section-related .card { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1 } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Slider Intro \* ------------------------------------------------------------ */ .slider--intro { position: relative; } .slider--intro .slider__slide { position: relative; min-height: 900px; height: 1px; } .slider--intro .slider__slide-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; opacity: .32; background-size: cover; background-repeat: no-repeat; background-position: center center; } .slider--intro .slider__slide-container { position: relative; min-height: 900px; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 1px; } .slider--intro .slider__slide-container .shell { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } .slider--intro .slider__slide-content { color: #fff; position: relative; top: 21px; left: -3px; font-size: 18px; } .slider--intro .slider__slide h1 { margin-bottom: 15px; } .slider--intro .slider__slide-entry { max-width: 738px; } .slider--intro .slider__slide-entry p { font-size: 18px; font-weight: 600; line-height: 1.4; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .slider--intro .slider__slide-actions { margin-top: 30px; } .slider--intro .slider__slide-actions .btn { padding: 11px 20px 11px 27px; } .slider--intro .slider__slide-actions .btn svg { margin-left: 23px; } .slider--intro .owl-dots { position: absolute; bottom: 51px; left: 50%; margin-left: -577px; display: -webkit-box; display: -ms-flexbox; display: flex; } .slider--intro .owl-dot { width: 36px; height: 9px; } .slider--intro .owl-dot span { display: inline-block; width: 24px; height: 9px; border-radius: 5px; background: transparent; border: 2px solid #99d04e; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .slider--intro .owl-dot.active span { background: #4a900b; border-color: #4a900b; } @media (max-width: 1023px) { .slider--intro .slider__slide-content { padding: 0 50px; } .slider--intro .slider__slide-entry p { font-size: 15px; } } @media (max-width: 767px) { .slider--intro .slider__slide-content { padding-inline: 10px; } .slider--intro .slider__slide-container { min-height: 650px; } .slider--intro .slider__slide { min-height: 800px; } .slider--intro .slider__slide-entry p { font-size: 13px; } .slider--intro .slider__slide-actions .btn { font-size: 17px; } .slider--intro .owl-dots { bottom: 220px; margin: 0; left: 25px; } } /* ------------------------------------------------------------ *\ Slider Cards \* ------------------------------------------------------------ */ .slider--cards .card__head-background, .slider--cards .card__head { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slider--cards .owl-dots { position: absolute; bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; } .slider--cards .owl-dot span { display: block; width: 24px; height: 9px; border-radius: 5px; background: transparent; border: 2px solid #99d04e; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .slider--cards .owl-dot + .owl-dot { margin-left: 12px; } .slider--cards .owl-dot.active span { background: #4a900b; border-color: #4a900b; } @media (max-width: 1200px) { .slider--cards .card__body { min-height: 250px; } } /* ------------------------------------------------------------ *\ Slider Testimonials \* ------------------------------------------------------------ */ .slider--testimonials .slider__slide h4 {text-align: center;} .slider--testimonials .slider__slide blockquote { margin-bottom: 51px; } .slider--testimonials .slider__slide small { display: block; text-align: center; margin-bottom: 42px; font-size: 17px; } .slider--testimonials .owl-dots { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; } .slider--testimonials .owl-dot + .owl-dot { margin-left: 12px; } .slider--testimonials .owl-dot span { display: inline-block; width: 24px; height: 9px; border-radius: 5px; background: transparent; border: 2px solid #99d04e; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .slider--testimonials .owl-dot.active span { background: #4a900b; border-color: #4a900b; } /* ------------------------------------------------------------ *\ Tabs Box \* ------------------------------------------------------------ */ .tabs-box { display: -webkit-box; display: -ms-flexbox; display: flex; width: 470px; } .tabs-box .tabs__nav-btn { display: none; } .tabs-box .tabs__head ul { position: relative; top: 8px; width: 74px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); border-radius: 8px 0 0 8px; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebfed3), to(#d2fca8)); background-image: -o-linear-gradient(top, #ebfed3 0%, #d2fca8 100%); background-image: linear-gradient(180deg, #ebfed3 0%, #d2fca8 100%); overflow: hidden; list-style-type: none; } .tabs-box .tabs__head li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 65px; } .tabs-box .tabs__head li + li { border-top: 1px solid #979797; } .tabs-box .tabs__head li:nth-child(3) { position: relative; } .tabs-box .tabs__head li:nth-child(3):after { content: 'Neu'; position: absolute; bottom: calc(50% - 10px); right: 15px; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; color: #fff; width: 22px; height: 22px; border-radius: 50%; background: #614895; pointer-events: none; -webkit-transition: background .4s, color .4s; -o-transition: background .4s, color .4s; transition: background .4s, color .4s; } .tabs-box .tabs__head li:nth-child(3):hover:after, .tabs-box .tabs__head li:nth-child(3).current:after { background: #fff; color: #614895; } .tabs-box .tabs__head li a { -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: background .4s, color .4s; -o-transition: background .4s, color .4s; transition: background .4s, color .4s; } .tabs-box .tabs__head li.current a, .tabs-box .tabs__head li a:hover { -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); background: #8346ab; } .tabs-box .tabs__head li.current a svg, .tabs-box .tabs__head li a:hover svg { fill: #fff; stroke: #fff; } .tabs-box .tabs__head svg { fill: #614895; stroke: #614895; -webkit-transition: fill .4s, stroke .4s; -o-transition: fill .4s, stroke .4s; transition: fill .4s, stroke .4s; } .tabs-box .tabs__head .icon-paperclip { position: relative; left: -9px; width: 26px; height: 33px; } .tabs-box .tabs__body { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; height: 480px; background: #8346ab; border-radius: 8px 0 0 8px; } .tabs-box .btn-close { position: absolute; top: 7px; right: 10px; } /* Tab */ .tabs-box .tab { display: none; height: 100%; overflow: hidden; } .tabs-box .tab.current { display: -webkit-box; display: -ms-flexbox; display: flex; } /* Form Elements */ .tabs-box .field { height: 40px; } .tabs-box .field, .tabs-box .textarea { font-size: 17px; } /* Custom Scroll */ .tabs-box .mCSB_draggerRail { width: 5px; border-radius: 9px; background-color: #371c70; opacity: 0.27; } .tabs-box .mCSB_dragger .mCSB_dragger_bar { width: 9px; border-radius: 9px; background-color: #462e79; } @media (max-width: 1023px) { /*.tabs-box .tabs__head ul { width: 50px; } .tabs-box .tabs__head li { height: 55px; }*/ } @media (max-width: 767px) { .tabs-box .tabs__nav-btn { display: block; margin-top: 14px; padding: 5px; padding-inline: 14px 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: #614895; border-top-left-radius: 10px; border-bottom-left-radius: 10px; pointer-events: all; } .tabs-box .tabs__nav { pointer-events: all; } .tabs-box .tabs__nav-btn .icon { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform: rotate(175deg); -ms-transform: rotate(175deg); transform: rotate(175deg); fill: #fff; stroke: #fff; } .tabs-box .is-open .tabs__nav-btn .icon { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .tabs-box .tabs__head { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; -o-transition: transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: translateX(74px); -ms-transform: translateX(74px); transform: translateX(74px); } .tabs-box .tabs__head.is-open { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .tabs-box { width: 481px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .tabs-box .tabs__body { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; max-width: 100vw; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget Notice \* ------------------------------------------------------------ */ .widget-notice { background-image: -o-linear-gradient(146deg, #afe9c0 0%, #e7fcd1 100%); background-image: linear-gradient(-56deg, #afe9c0 0%, #e7fcd1 100%); border-radius: 5px; font-size: 17px; line-height: 1.41; text-align: center; padding: 29px 15px 43px; letter-spacing: -.02em; } .widget-notice .widget__title { font-weight: 700; margin-bottom: 23px } .widget-notice .widget__entry { letter-spacing: .005em; line-height: 1.45; } /* ------------------------------------------------------------ *\ Widget Rating \* ------------------------------------------------------------ */ .widget-rating .widget__title { color: #405166; font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 29px; } .widget-rating .ratings { margin-bottom: 33px; } .widget-rating .widget__actions { margin-bottom: 26px; } .widget-rating .widget__actions .btn { width: 100%; } .widget-rating .widget__hint { color: #808080; font-size: 16px; line-height: 1.5; } @media (max-width: 1200px) { .widget-rating .widget__actions .btn { font-size: 18px; } } @media (max-width: 1023px) { .widget-rating .widget__actions .btn { font-size: 15px; min-height: 40px; } .widget-rating .widget__hint { font-size: 13px; } } /* ------------------------------------------------------------ *\ Themes \* ------------------------------------------------------------ */ /*====================================== Selectric ======================================*/ .selectric-wrapper { position: relative; cursor: pointer; } .selectric-responsive { width: 100%; } .selectric { border: 1px solid #DDDDDD; background: #FFFFFF; position: relative; border-radius: 31px; } .selectric .label { display: block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; margin: 0 48px 0 17px; font-size: 12px; line-height: 48px; color: #6D6D6D; height: 48px; } .selectric .button { background: #FFFFFF; border-radius: 32px; display: block; position: absolute; right: 11px; top: 0; bottom: 0; margin: auto; width: 22px; height: 22px; color: #6D6D6D; text-align: center; font: 0/0 a; *font: 22px/22px Lucida Sans Unicode, Arial Unicode MS, Arial; } .selectric .button:after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0; border: 4px solid transparent; border-top-color: #6D6D6D; border-bottom: none; } .selectric-focus .selectric { border-color: #AAA; } .selectric-hover .selectric { border-color: #c4c4c4; } .selectric-hover .selectric .button { color: #c4c4c4; } .selectric-hover .selectric .button:after { border-top-color: #c4c4c4; } .selectric-open { z-index: 9999; } .selectric-open .selectric { border-color: #c4c4c4; background: #e6e6e6; } .selectric-open .selectric-items { display: block; } .selectric-disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-hide-select { position: relative; overflow: hidden; width: 0; height: 0; } .selectric-hide-select select { position: absolute; left: -100%; } .selectric-hide-select.selectric-is-native { position: absolute; width: 100%; height: 100%; z-index: 10; } .selectric-hide-select.selectric-is-native select { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; border: none; z-index: 1; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } .selectric-input { position: absolute !important; top: 0 !important; left: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; margin: 0 !important; padding: 0 !important; width: 1px !important; height: 1px !important; outline: none !important; border: none !important; *font: 0/0 a !important; background: none !important; } .selectric-temp-show { position: absolute !important; visibility: hidden !important; display: block !important; } /* Items box */ .selectric-items { display: none; position: absolute; top: 100%; left: 0; background: #F8F8F8; border: 1px solid #C4C4C4; z-index: -1; -webkit-box-shadow: 0 0 10px -6px; box-shadow: 0 0 10px -6px; } .selectric-items .selectric-scroll { height: 100%; overflow: auto; } .selectric-above .selectric-items { top: auto; bottom: 100%; } .selectric-items ul, .selectric-items li { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 20px; min-height: 20px; } .selectric-items li { display: block; padding: 8px; border-top: 1px solid #FFF; border-bottom: 1px solid #EEE; color: #666; cursor: pointer; } .selectric-items li.selected { background: #EFEFEF; color: #444; } .selectric-items li.highlighted { background: #D0D0D0; color: #444; } .selectric-items li:hover { background: #F0F0F0; color: #444; } .selectric-items .disabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default !important; background: none !important; color: #666 !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selectric-items .selectric-group .selectric-group-label { font-weight: bold; padding-left: 10px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: none; color: #444; } .selectric-items .selectric-group.disabled li { filter: alpha(opacity=100); opacity: 1; } .selectric-items .selectric-group li { padding-left: 25px; } /* ------------------------------------------------------------ *\ Custom Selectric Theme \* ------------------------------------------------------------ */ .selectric { border-radius: 22px; } .selectric .label { font-size: 17px; line-height: 20px; color: #6d6d6d; padding: 15px 0; margin: 0 45px 0 17px; } .selectric .button:after { width: 16px; height: 16px; bottom: 4px; border-width: 0 0 2px 2px; border-style: solid; border-color: #4a900b; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .selectric-open .selectric { background-color: #fff; } .selectric-open .selectric .button:after { bottom: -10px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .selectric-items { background-color: #fff; border-radius: 22px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .selectric-items ul { padding: 0 17px; } .selectric-items li { font-size: 17px; line-height: 25px; color: #6d6d6d; padding: 10px 2px; border-bottom-color: #efeff4;} .selectric-items li, .selectric-items li:hover, .selectric-items li.highlighted { color: #6d6d6d; background: transparent; } .selectric-items li:last-child { border-bottom: 0; } .btn--dropdown .selectric { border: 0; background-color: transparent; } .btn--dropdown .selectric .label { font-weight: 600; color: #3c810c; height: 40px; padding: 10px 0; } .btn--dropdown .selectric .button { opacity: 0; } .btn--dropdown .selectric-wrapper { margin: -11px -15px; min-width: calc(100% + 30px); } .links0900 a { text-decoration:none } .links0900 a:hover { text-decoration:underline; } .boxseo { background-color: #614895; color: white !important; font-size: 12px; padding: 10px 10px 10px 10px; } .boxseo h1 { font-size: 16px !important; } .boxseo a { color: white !important; }