/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- Default Title ---------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 03. Fonts ------------------------------------ Font: WindleshamPro ---------------------- Font: Segoe UI --------------------------- 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Row Flex --------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Responsive Helpers ----------------------- II. Regions -------------------------------------- 01. Container -------------------------------- 02. Content ---------------------------------- 03. Footer ----------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 04. Header ----------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 05. Main ------------------------------------- 06. Shell ------------------------------------ Small Desktop ---------------------------- Mobile ----------------------------------- 07. Sidebar ---------------------------------- 08. Wrapper ---------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- III. Modules -------------------------------------- 01. Accordion -------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 02. Article Promo ---------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 03. Article Actu ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 04. Banner Product --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 05. Breadcrumb ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 06. Button ----------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 07. Btn Nav ---------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 08. Card Press ------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 09. Card Product ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 10. Category --------------------------------- Category Small --------------------------- Category Large Icon ---------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 11. Characteristics -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 12. Compare ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 13. Download --------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- 14. Feed ------------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 15. Feed Item -------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 16. Floating Share --------------------------- 17. Form Elements ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 18. Form ------------------------------------- 19. Form Newsletter -------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 20. Form Send Comparison --------------------- Mobile ----------------------------------- 21. Form Indications ------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 22. Gamme ------------------------------------ Gamme Alt -------------------------------- Mobile ----------------------------------- 23. Grid Item -------------------------------- Grid Item Modifiers ---------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 24. Grid Banners ----------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 25. Grid Mag --------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 26. Ico -------------------------------------- 27. Lang ------------------------------------- Lang White ------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 28. List ------------------------------------- 29. List Lang -------------------------------- 30. List Utilities --------------------------- Small Desktop ---------------------------- 31. List Cards Press ------------------------- Tablet Portrait -------------------------- 32. List Contact ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 33. List Numbers ----------------------------- List Numbers Alt ------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 34. List Disc -------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 35. List Letters ----------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 36. List Promos ------------------------------ Mobile ----------------------------------- 37. List Features ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 38. List Logos ------------------------------- Mobile ----------------------------------- 39. List Gammes ------------------------------ List Gammes Flex ------------------------- List Gammes Left Aligned ----------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 40. List Categories -------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 41. Logo ------------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 42. Media ------------------------------------ Mobile ----------------------------------- 43. Mega Menu -------------------------------- Mega Menu with Title --------------------- Mega Menu Black -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 44. Modal ------------------------------------ 45. Modal Lang ------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 46. Modal Sample Video ----------------------- Tablet Portrait -------------------------- 47. Modal Timeline --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 48. Modal Compare ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 49. Modal Send Comparison -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 50. Nav -------------------------------------- Nav Left --------------------------------- Nav Right -------------------------------- Small Desktop ---------------------------- 51. Nav Mega --------------------------------- Medium Desktop --------------------------- 52. Nav Tablet ------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 53. Nav Categories --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 54. Nav Footer ------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 55. Nav Left --------------------------------- Small Desktop ---------------------------- Nav Sublist ------------------------------ Mobile ----------------------------------- 56. Nav Subhead ------------------------------ 57. Nav Dropdown ----------------------------- 58. No Touch --------------------------------- Icon Hovers ------------------------------ 59. Product ---------------------------------- Product Intro ---------------------------- Product Rating --------------------------- Product Carousel ------------------------- Product Text ----------------------------- Porduct Share ---------------------------- Product Features ------------------------- Product Nav ------------------------------ Product Details -------------------------- Product Characteristics ------------------ Product Support -------------------------- Product Related -------------------------- Product Partners ------------------------- Product Assistance ----------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 60. Product List ----------------------------- Small Desktop ---------------------------- 61. Product Grid ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 62. Promo ------------------------------------ Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 63. Rating ----------------------------------- Rating Red ------------------------------- Mobile ----------------------------------- 64. Related ---------------------------------- Mobile ----------------------------------- 65. Search ----------------------------------- Autocomplete ----------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 66. Search Results --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 67. Section ---------------------------------- Mobile ----------------------------------- 68. Section Latest --------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 69. Section History -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 70. Section Newsletter ----------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 71. Section Grid ----------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 72. Section Feeds ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 73. Section Register Product ----------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 74. Section Help ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 75. Section Comm Detail ---------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 76. Section Press release -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 77. Section Condition ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 78. Section Contact Press -------------------- Section Contact Press Alt ---------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 79. Section Support Press -------------------- Section Support Press Alt ---------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 80. Section Registration --------------------- Section Registration Alt ----------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 81. Section FAQ ------------------------------ Section FAQ Alt -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 82. Section Promo Detail --------------------- Mobile ----------------------------------- 83. Section Related -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 84. Section Promo ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 85. Section Product -------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 86. Section Pubs ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 87. Section Mag ------------------------------ Section Mag Actus ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 88. Section Articles ------------------------- Section Articles Thomson ----------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 89. Section Actu Detail ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 90. Section Timeline ------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 91. Section Values --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 92. Section Compare -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 93. Section Products ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 94. Section Download ------------------------- Mobile ----------------------------------- 95. Section Gammes --------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 96. Section Category Grid -------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 97. Section Selection ------------------------ Section Selection Alt -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 98. Section Subscribe ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 99. Section Products View -------------------- List View -------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 100. Selection ------------------------------- Selection Alt ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 101. Slider ---------------------------------- Mobile ----------------------------------- 102. Slider Main ----------------------------- Medium Desktop --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 103. Slider Latest --------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 104. Slider Related -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 105. Slider Product -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 106. Slider Product Thumns ------------------- Small Desktop ---------------------------- 107. Slider Home Categorie ------------------- Slider Home Category White --------------- Small Desktop ---------------------------- Mobile ----------------------------------- 108. Slider Selection ------------------------ Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 109. Social ---------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 110. Tabs ------------------------------------ Small Desktop ---------------------------- Mobile ----------------------------------- 111. Table ----------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 112. Table Compare --------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 113. Timeline -------------------------------- Mobile ----------------------------------- 114. Timeline History ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 115. Tooltips -------------------------------- Mobile ----------------------------------- 116. Touch ----------------------------------- 117. Widget ---------------------------------- 118. Widget Buttons -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 119. Widget Nav ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 120. Widget Filters -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- IV. Themes --------------------------------------- 02. Theme Magnific --------------------------- Mobile ----------------------------------- */ .ico-accesoires-black { background-image: url(../../images/default/sprite.png); background-position: 26.132930513595166% 79.0625%; background-size: 1755% 2385.714285714286%; width: 40px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-audio-large { background-image: url(../../images/default/sprite.png); background-position: 26.298157453936348% 47.39583333333333%; background-size: 668.5714285714286% 726.0869565217391%; width: 105px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-audio-white { background-image: url(../../images/default/sprite.png); background-position: 99.54476479514416% 54.04120443740095%; background-size: 1632.5581395348838% 1805.4054054054052%; width: 43px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-audio-white-hover, a:hover .ico-audio-white, button:hover .ico-audio-white, a.hover .ico-audio-white, button.hover .ico-audio-white, .ico-audio-white.hover { background-image: url(../../images/default/sprite.png); background-position: 99.54476479514416% 60.538827258320126%; background-size: 1632.5581395348838% 1805.4054054054052%; width: 43px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-barre-de-son { background-image: url(../../images/default/sprite.png); background-position: 44.97991967871486% 61.0223642172524%; background-size: 344.11764705882354% 1590.4761904761906%; width: 204px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-boombox { background-image: url(../../images/default/sprite.png); background-position: 71.66666666666667% 0%; background-size: 433.3333333333333% 585.9649122807017%; width: 162px; height: 114px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-check { background-image: url(../../images/default/sprite.png); background-position: 56.086956521739125% 38.90577507598784%; background-size: 5850% 6680%; width: 12px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-connectes-large { background-image: url(../../images/default/sprite.png); background-position: 28.155339805825243% 98.46153846153847%; background-size: 835.7142857142858% 804.8192771084338%; width: 84px; height: 83px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-connectes-white { background-image: url(../../images/default/sprite.png); background-position: 33.68421052631579% 67.82884310618067%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-connectes-white-hover, a:hover .ico-connectes-white, button:hover .ico-connectes-white, a.hover .ico-connectes-white, button.hover .ico-connectes-white, .ico-connectes-white.hover { background-image: url(../../images/default/sprite.png); background-position: 64.9624060150376% 60.538827258320126%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-domotique-black { background-image: url(../../images/default/sprite.png); background-position: 90.50736497545007% 64.02753872633392%; background-size: 771.4285714285714% 767.816091954023%; width: 91px; height: 87px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-domotique { background-image: url(../../images/default/sprite.png); background-position: 20.462046204620464% 66.31944444444444%; background-size: 731.25% 726.0869565217391%; width: 96px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-download { background-image: url(../../images/default/sprite.png); background-position: 76.79882525697504% 26.31578947368421%; background-size: 3342.857142857143% 3036.3636363636365%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-download-hover, a:hover .ico-download, button:hover .ico-download, a.hover .ico-download, button.hover .ico-download, .ico-download.hover { background-image: url(../../images/default/sprite.png); background-position: 76.79882525697504% 30.340557275541798%; background-size: 3342.857142857143% 3036.3636363636365%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-eclairage-black { background-image: url(../../images/default/sprite.png); background-position: 90.359477124183% 48.09688581314879%; background-size: 780% 742.2222222222223%; width: 90px; height: 90px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-eclairage { background-image: url(../../images/default/sprite.png); background-position: 90.359477124183% 31.833910034602077%; background-size: 780% 742.2222222222223%; width: 90px; height: 90px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electricite-black { background-image: url(../../images/default/sprite.png); background-position: 0% 100%; background-size: 845.7831325301205% 726.0869565217391%; width: 83px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electricite { background-image: url(../../images/default/sprite.png); background-position: 14.054927302100161% 100%; background-size: 845.7831325301205% 726.0869565217391%; width: 83px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electromenager-white { background-image: url(../../images/default/sprite.png); background-position: 75.74404761904762% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; width: 30px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electromenager-white-hover, a:hover .ico-electromenager-white, button:hover .ico-electromenager-white, a.hover .ico-electromenager-white, button.hover .ico-electromenager-white, .ico-electromenager-white.hover { background-image: url(../../images/default/sprite.png); background-position: 80.80357142857143% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; width: 30px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-enceintes-bluetooth { background-image: url(../../images/default/sprite.png); background-position: 0% 48.49023090586146%; background-size: 458.8235294117647% 636.1904761904761%; width: 153px; height: 105px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-espace-black { background-image: url(../../images/default/sprite.png); background-position: 87.85607196401799% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; width: 35px; height: 32px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-espace-large { background-image: url(../../images/default/sprite.png); background-position: 68.27697262479872% 96.80672268907563%; background-size: 866.6666666666666% 915.0684931506848%; width: 81px; height: 73px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-espace-white { background-image: url(../../images/default/sprite.png); background-position: 82.00899550224887% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; width: 35px; height: 32px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-external { background-image: url(../../images/default/sprite.png); background-position: 96.89807976366322% 84.78260869565217%; background-size: 2808% 2783.333333333333%; width: 25px; height: 24px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-globe-black { background-image: url(../../images/default/sprite.png); background-position: 76.91176470588236% 18.26625386996904%; background-size: 3190.909090909091% 3036.3636363636365%; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-globe-white-large { background-image: url(../../images/default/sprite.png); background-position: 39.849624060150376% 67.82884310618067%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-globe-white { background-image: url(../../images/default/sprite.png); background-position: 76.91176470588236% 22.291021671826623%; background-size: 3190.909090909091% 3036.3636363636365%; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-grid-view { background-image: url(../../images/default/sprite.png); background-position: 76.19760479041916% 90.85173501577287%; background-size: 2064.7058823529414% 1964.7058823529412%; width: 34px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-home { background-image: url(../../images/default/sprite.png); background-position: 77.23935389133626% 42%; background-size: 3342.857142857143% 3711.1111111111113%; width: 21px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-alt-black { background-image: url(../../images/default/sprite.png); background-position: 62.520729684908794% 47.06896551724138%; background-size: 709.0909090909091% 759.0909090909091%; width: 99px; height: 88px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-alt { background-image: url(../../images/default/sprite.png); background-position: 91.70812603648424% 15.862068965517242%; background-size: 709.0909090909091% 759.0909090909091%; width: 99px; height: 88px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-large { background-image: url(../../images/default/sprite.png); background-position: 91.70812603648424% 0%; background-size: 709.0909090909091% 759.0909090909091%; width: 99px; height: 88px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-white { background-image: url(../../images/default/sprite.png); background-position: 99.54476479514416% 40.79365079365079%; background-size: 1632.5581395348838% 1757.8947368421052%; width: 43px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-white-hover, a:hover .ico-informatique-white, button:hover .ico-informatique-white, a.hover .ico-informatique-white, button.hover .ico-informatique-white, .ico-informatique-white.hover { background-image: url(../../images/default/sprite.png); background-position: 99.54476479514416% 47.460317460317455%; background-size: 1632.5581395348838% 1757.8947368421052%; width: 43px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-invisible-black { background-image: url(../../images/default/sprite.png); background-position: 77.02503681885126% 34.25925925925926%; background-size: 3052.173913043478% 3340%; width: 23px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-lecteur-dvd { background-image: url(../../images/default/sprite.png); background-position: 30.198915009041592% 24.723247232472325%; background-size: 471.1409395973154% 530.1587301587301%; width: 149px; height: 126px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-list-view { background-image: url(../../images/default/sprite.png); background-position: 18.939393939393938% 84.19405320813772%; background-size: 1671.4285714285716% 2303.448275862069%; width: 42px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-maison-white { background-image: url(../../images/default/sprite.png); background-position: 71.12781954887218% 60.538827258320126%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-maison-white-hover, a:hover .ico-maison-white, button:hover .ico-maison-white, a.hover .ico-maison-white, button.hover .ico-maison-white, .ico-maison-white.hover { background-image: url(../../images/default/sprite.png); background-position: 72.18045112781954% 49.44532488114105%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-micro-chaine { background-image: url(../../images/default/sprite.png); background-position: 35.9437751004016% 0%; background-size: 344.11764705882354% 607.2727272727273%; width: 204px; height: 110px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-pic { background-image: url(../../images/default/sprite.png); background-position: 50% 31.832797427652732%; background-size: 1132.258064516129% 1452.1739130434783%; width: 62px; height: 46px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-small { background-image: url(../../images/default/sprite.png); background-position: 49.84423676012461% 22.039473684210524%; background-size: 1170% 1113.3333333333333%; width: 60px; height: 60px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play { background-image: url(../../images/default/sprite.png); background-position: 0% 69.7080291970803%; background-size: 585% 556.6666666666666%; width: 120px; height: 120px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-print { background-image: url(../../images/default/sprite.png); background-position: 77.06146926536732% 60.252365930599375%; background-size: 2005.7142857142858% 1964.7058823529412%; width: 35px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-radio-reveil { background-image: url(../../images/default/sprite.png); background-position: 0% 84.0531561461794%; background-size: 580.1652892561983% 1012.1212121212121%; width: 121px; height: 66px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-radio { background-image: url(../../images/default/sprite.png); background-position: 67.89473684210526% 22.09737827715356%; background-size: 531.8181818181819% 498.5074626865671%; width: 132px; height: 134px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-resize-white { background-image: url(../../images/default/sprite.png); background-position: 99.85422740524781% 83.87096774193549%; background-size: 4387.5% 3929.4117647058824%; width: 16px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-resize { background-image: url(../../images/default/sprite.png); background-position: 75.94752186588921% 47.926267281105986%; background-size: 4387.5% 3929.4117647058824%; width: 16px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-sante-white { background-image: url(../../images/default/sprite.png); background-position: 99.39393939393939% 73.53407290015848%; background-size: 1671.4285714285716% 1805.4054054054052%; width: 42px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-sante-white-hover, a:hover .ico-sante-white, button:hover .ico-sante-white, a.hover .ico-sante-white, button.hover .ico-sante-white, .ico-sante-white.hover { background-image: url(../../images/default/sprite.png); background-position: 99.39393939393939% 67.0364500792393%; background-size: 1671.4285714285716% 1805.4054054054052%; width: 42px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-securite-black { background-image: url(../../images/default/sprite.png); background-position: 54.879999999999995% 98.12606473594549%; background-size: 911.6883116883116% 824.6913580246913%; width: 77px; height: 81px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-securite { background-image: url(../../images/default/sprite.png); background-position: 41.92% 98.12606473594549%; background-size: 911.6883116883116% 824.6913580246913%; width: 77px; height: 81px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-telephonie-white { background-image: url(../../images/default/sprite.png); background-position: 99.24357034795764% 80.03169572107765%; background-size: 1712.1951219512193% 1805.4054054054052%; width: 41px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-telephonie-white-hover, a:hover .ico-telephonie-white, button:hover .ico-telephonie-white, a.hover .ico-telephonie-white, button.hover .ico-telephonie-white, .ico-telephonie-white.hover { background-image: url(../../images/default/sprite.png); background-position: 83.66111951588502% 73.37559429477021%; background-size: 1712.1951219512193% 1805.4054054054052%; width: 41px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-televiseurs-black { background-image: url(../../images/default/sprite.png); background-position: 18.99696048632219% 79.0625%; background-size: 1595.4545454545455% 2385.714285714286%; width: 44px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-television-large { background-image: url(../../images/default/sprite.png); background-position: 44.70588235294118% 47.2318339100346%; background-size: 656.0747663551401% 742.2222222222223%; width: 107px; height: 90px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-television-white { background-image: url(../../images/default/sprite.png); background-position: 90.6060606060606% 73.1437598736177%; background-size: 1671.4285714285716% 1908.5714285714284%; width: 42px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-television-white-hover, a:hover .ico-television-white, button:hover .ico-television-white, a.hover .ico-television-white, button.hover .ico-television-white, .ico-television-white.hover { background-image: url(../../images/default/sprite.png); background-position: 72.72727272727273% 43.127962085308056%; background-size: 1671.4285714285716% 1908.5714285714284%; width: 42px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tour-de-son { background-image: url(../../images/default/sprite.png); background-position: 100% 0%; background-size: 1526.086956521739% 395.26627218934914%; width: 46px; height: 169px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tourne-disque { background-image: url(../../images/default/sprite.png); background-position: 0% 25.14071294559099%; background-size: 430.67484662576686% 494.8148148148148%; width: 163px; height: 135px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tv-dark { background-image: url(../../images/default/sprite.png); background-position: 100% 27.460317460317462%; background-size: 1526.086956521739% 1757.8947368421052%; width: 46px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tv-white { background-image: url(../../images/default/sprite.png); background-position: 100% 34.12698412698413%; background-size: 1526.086956521739% 1757.8947368421052%; width: 46px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tv { background-image: url(../../images/default/sprite.png); background-position: 0% 0%; background-size: 401.14285714285717% 513.8461538461539%; width: 175px; height: 130px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-view-dark { background-image: url(../../images/default/sprite.png); background-position: 54.268292682926834% 66.77067082683308%; background-size: 1526.086956521739% 2474.074074074074%; width: 46px; height: 27px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-view-white { background-image: url(../../images/default/sprite.png); background-position: 46.646341463414636% 66.77067082683308%; background-size: 1526.086956521739% 2474.074074074074%; width: 46px; height: 27px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-visible-white { background-image: url(../../images/default/sprite.png); background-position: 26.362297496318117% 17.431192660550458%; background-size: 3052.173913043478% 4771.428571428572%; width: 23px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-accesoires-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 63.141993957703924% 66.875%; background-size: 1755% 2385.714285714286%; width: 40px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-audio-large { background-image: url(../../images/default/sprite.@2x.png); background-position: 26.298157453936348% 47.39583333333333%; background-size: 668.5714285714286% 726.0869565217391%; width: 105px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-audio-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 54.04120443740095%; background-size: 1632.5581395348838% 1805.4054054054052%; width: 43px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-audio-white-hover, a:hover .ico-audio-white, button:hover .ico-audio-white, a.hover .ico-audio-white, button.hover .ico-audio-white, .ico-audio-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 60.538827258320126%; background-size: 1632.5581395348838% 1805.4054054054052%; width: 43px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-barre-de-son { background-image: url(../../images/default/sprite.@2x.png); background-position: 65.06024096385542% 61.0223642172524%; background-size: 344.11764705882354% 1590.4761904761906%; width: 204px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-boombox { background-image: url(../../images/default/sprite.@2x.png); background-position: 71.66666666666667% 0%; background-size: 433.3333333333333% 585.9649122807017%; width: 162px; height: 114px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-check { background-image: url(../../images/default/sprite.@2x.png); background-position: 92.7536231884058% 56.53495440729483%; background-size: 5850% 6680%; width: 12px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-connectes-large { background-image: url(../../images/default/sprite.@2x.png); background-position: 14.077669902912621% 98.46153846153847%; background-size: 835.7142857142858% 804.8192771084338%; width: 84px; height: 83px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-connectes-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 37.29323308270677% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-connectes-white-hover, a:hover .ico-connectes-white, button:hover .ico-connectes-white, a.hover .ico-connectes-white, button.hover .ico-connectes-white, .ico-connectes-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 24.962406015037594% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-domotique-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 20.462046204620464% 66.31944444444444%; background-size: 731.25% 726.0869565217391%; width: 96px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-domotique { background-image: url(../../images/default/sprite.@2x.png); background-position: 36.96369636963696% 66.31944444444444%; background-size: 731.25% 726.0869565217391%; width: 96px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-download { background-image: url(../../images/default/sprite.@2x.png); background-position: 76.79882525697504% 26.31578947368421%; background-size: 3342.857142857143% 3036.3636363636365%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-download-hover, a:hover .ico-download, button:hover .ico-download, a.hover .ico-download, button.hover .ico-download, .ico-download.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 76.79882525697504% 30.340557275541798%; background-size: 3342.857142857143% 3036.3636363636365%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-eclairage-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 90.359477124183% 48.09688581314879%; background-size: 780% 742.2222222222223%; width: 90px; height: 90px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-eclairage { background-image: url(../../images/default/sprite.@2x.png); background-position: 90.359477124183% 31.833910034602077%; background-size: 780% 742.2222222222223%; width: 90px; height: 90px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electricite-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 89.33764135702747% 64.58333333333334%; background-size: 845.7831325301205% 726.0869565217391%; width: 83px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electricite { background-image: url(../../images/default/sprite.@2x.png); background-position: 0% 100%; background-size: 845.7831325301205% 726.0869565217391%; width: 83px; height: 92px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electromenager-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 62.797619047619044% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; width: 30px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-electromenager-white-hover, a:hover .ico-electromenager-white, button:hover .ico-electromenager-white, a.hover .ico-electromenager-white, button.hover .ico-electromenager-white, .ico-electromenager-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 67.85714285714286% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; width: 30px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-enceintes-bluetooth { background-image: url(../../images/default/sprite.@2x.png); background-position: 0% 48.49023090586146%; background-size: 458.8235294117647% 636.1904761904761%; width: 153px; height: 105px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-espace-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 80.65967016491754% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; width: 35px; height: 32px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-espace-large { background-image: url(../../images/default/sprite.@2x.png); background-position: 54.267310789049915% 96.80672268907563%; background-size: 866.6666666666666% 915.0684931506848%; width: 81px; height: 73px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-espace-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 74.81259370314842% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; width: 35px; height: 32px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-external { background-image: url(../../images/default/sprite.@2x.png); background-position: 96.89807976366322% 84.78260869565217%; background-size: 2808% 2783.333333333333%; width: 25px; height: 24px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-globe-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 76.91176470588236% 18.26625386996904%; background-size: 3190.909090909091% 3036.3636363636365%; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-globe-white-large { background-image: url(../../images/default/sprite.@2x.png); background-position: 43.45864661654135% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-globe-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 76.91176470588236% 22.291021671826623%; background-size: 3190.909090909091% 3036.3636363636365%; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-grid-view { background-image: url(../../images/default/sprite.@2x.png); background-position: 69.01197604790418% 90.85173501577287%; background-size: 2064.7058823529414% 1964.7058823529412%; width: 34px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-home { background-image: url(../../images/default/sprite.@2x.png); background-position: 77.09251101321586% 42%; background-size: 3342.857142857143% 3711.1111111111113%; width: 21px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-alt-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 91.70812603648424% 15.862068965517242%; background-size: 709.0909090909091% 759.0909090909091%; width: 99px; height: 88px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-alt { background-image: url(../../images/default/sprite.@2x.png); background-position: 91.70812603648424% 0%; background-size: 709.0909090909091% 759.0909090909091%; width: 99px; height: 88px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-large { background-image: url(../../images/default/sprite.@2x.png); background-position: 62.520729684908794% 47.06896551724138%; background-size: 709.0909090909091% 759.0909090909091%; width: 99px; height: 88px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 40.79365079365079%; background-size: 1632.5581395348838% 1757.8947368421052%; width: 43px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-informatique-white-hover, a:hover .ico-informatique-white, button:hover .ico-informatique-white, a.hover .ico-informatique-white, button.hover .ico-informatique-white, .ico-informatique-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 47.460317460317455%; background-size: 1632.5581395348838% 1757.8947368421052%; width: 43px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-invisible-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 77.02503681885126% 34.25925925925926%; background-size: 3052.173913043478% 3340%; width: 23px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-lecteur-dvd { background-image: url(../../images/default/sprite.@2x.png); background-position: 30.198915009041592% 24.723247232472325%; background-size: 471.1409395973154% 530.1587301587301%; width: 149px; height: 126px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-list-view { background-image: url(../../images/default/sprite.@2x.png); background-position: 50% 79.18622848200313%; background-size: 1671.4285714285716% 2303.448275862069%; width: 42px; height: 29px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-maison-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 31.127819548872182% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-maison-white-hover, a:hover .ico-maison-white, button:hover .ico-maison-white, a.hover .ico-maison-white, button.hover .ico-maison-white, .ico-maison-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 18.796992481203006% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-micro-chaine { background-image: url(../../images/default/sprite.@2x.png); background-position: 35.9437751004016% 0%; background-size: 344.11764705882354% 607.2727272727273%; width: 204px; height: 110px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-pic { background-image: url(../../images/default/sprite.@2x.png); background-position: 50% 31.832797427652732%; background-size: 1132.258064516129% 1452.1739130434783%; width: 62px; height: 46px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-small { background-image: url(../../images/default/sprite.@2x.png); background-position: 49.84423676012461% 22.039473684210524%; background-size: 1170% 1113.3333333333333%; width: 60px; height: 60px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play { background-image: url(../../images/default/sprite.@2x.png); background-position: 0% 69.7080291970803%; background-size: 585% 556.6666666666666%; width: 120px; height: 120px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-print { background-image: url(../../images/default/sprite.@2x.png); background-position: 63.26836581709146% 90.85173501577287%; background-size: 2005.7142857142858% 1964.7058823529412%; width: 35px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-radio-reveil { background-image: url(../../images/default/sprite.@2x.png); background-position: 0% 84.0531561461794%; background-size: 580.1652892561983% 1012.1212121212121%; width: 121px; height: 66px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-radio { background-image: url(../../images/default/sprite.@2x.png); background-position: 67.89473684210526% 22.09737827715356%; background-size: 531.8181818181819% 498.5074626865671%; width: 132px; height: 134px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-resize-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.85422740524781% 83.87096774193549%; background-size: 4387.5% 3929.4117647058824%; width: 16px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-resize { background-image: url(../../images/default/sprite.@2x.png); background-position: 76.67638483965014% 48.23348694316436%; background-size: 4387.5% 3929.4117647058824%; width: 16px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-sante-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 73.53407290015848%; background-size: 1671.4285714285716% 1805.4054054054052%; width: 42px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-sante-white-hover, a:hover .ico-sante-white, button:hover .ico-sante-white, a.hover .ico-sante-white, button.hover .ico-sante-white, .ico-sante-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 67.0364500792393%; background-size: 1671.4285714285716% 1805.4054054054052%; width: 42px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-securite-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 40.96% 98.12606473594549%; background-size: 911.6883116883116% 824.6913580246913%; width: 77px; height: 81px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-securite { background-image: url(../../images/default/sprite.@2x.png); background-position: 28.000000000000004% 98.12606473594549%; background-size: 911.6883116883116% 824.6913580246913%; width: 77px; height: 81px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-telephonie-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.24357034795764% 80.03169572107765%; background-size: 1712.1951219512193% 1805.4054054054052%; width: 41px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-telephonie-white-hover, a:hover .ico-telephonie-white, button:hover .ico-telephonie-white, a.hover .ico-telephonie-white, button.hover .ico-telephonie-white, .ico-telephonie-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.61724659606656% 43.264659270998415%; background-size: 1712.1951219512193% 1805.4054054054052%; width: 41px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-televiseurs-black { background-image: url(../../images/default/sprite.@2x.png); background-position: 56.23100303951368% 66.875%; background-size: 1595.4545454545455% 2385.714285714286%; width: 44px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-television-large { background-image: url(../../images/default/sprite.@2x.png); background-position: 44.70588235294118% 47.2318339100346%; background-size: 656.0747663551401% 742.2222222222223%; width: 107px; height: 90px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-television-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.72727272727273% 49.60505529225908%; background-size: 1671.4285714285716% 1908.5714285714284%; width: 42px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-television-white-hover, a:hover .ico-television-white, button:hover .ico-television-white, a.hover .ico-television-white, button.hover .ico-television-white, .ico-television-white.hover { background-image: url(../../images/default/sprite.@2x.png); background-position: 49.09090909090909% 67.61453396524486%; background-size: 1671.4285714285716% 1908.5714285714284%; width: 42px; height: 35px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tour-de-son { background-image: url(../../images/default/sprite.@2x.png); background-position: 100% 0%; background-size: 1526.086956521739% 395.26627218934914%; width: 46px; height: 169px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tourne-disque { background-image: url(../../images/default/sprite.@2x.png); background-position: 0% 25.14071294559099%; background-size: 430.67484662576686% 494.8148148148148%; width: 163px; height: 135px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tv-dark { background-image: url(../../images/default/sprite.@2x.png); background-position: 100% 27.460317460317462%; background-size: 1526.086956521739% 1757.8947368421052%; width: 46px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tv-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 100% 34.12698412698413%; background-size: 1526.086956521739% 1757.8947368421052%; width: 46px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tv { background-image: url(../../images/default/sprite.@2x.png); background-position: 0% 0%; background-size: 401.14285714285717% 513.8461538461539%; width: 175px; height: 130px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-view-dark { background-image: url(../../images/default/sprite.@2x.png); background-position: 91.92073170731707% 73.01092043681747%; background-size: 1526.086956521739% 2474.074074074074%; width: 46px; height: 27px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-view-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 84.29878048780488% 73.01092043681747%; background-size: 1526.086956521739% 2474.074074074074%; width: 46px; height: 27px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-visible-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 26.362297496318117% 17.431192660550458%; background-size: 3052.173913043478% 4771.428571428572%; width: 23px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; }} .cols:after, .footer-cols:after, .product__support-content ul:after, .section-comm-detail .section__body-inner:after, .section-contact-press .section__body-inner:after, .section-articles .list-cards-press:after, .section-values .section__grid:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { 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; -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; } 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; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ html { font-size: 16px; } body { min-width: 320px; background: #fff; font-family: 'Segoe UI', sans-serif; line-height: 1.2; color: #444041; } a { color: inherit; text-decoration: underline; } a:hover { text-decoration: none; } p { letter-spacing: .025em; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: 'WindleshamPro', sans-serif; text-transform: uppercase; } h1 { font-size: 3.75rem; } h2 { font-size: 2.625rem; } h2.title-large { font-size: 3.75rem; } h3 { font-size: 1.75rem; } h5 { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 1.125rem; color: #d50032; text-transform: uppercase; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.2em; } 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; } .no-subnav .nav--left .nav__item:not(.nav__item--dark) > a, .no-subnav .nav--right .nav__item:not(.nav__item--dark) > a { font-size: 0; } /* Default Title */ .default-title { font-weight: 500; text-transform: uppercase; margin: 0 0 1.25rem; padding-bottom: 2.25rem; position: relative; text-align: center; } .default-title:after { content: ''; width: 70px; height: 2px; background-color: #d50032; position: absolute; left: 50%; margin-left: -2.11875rem; bottom: 0; } .go-top { width: 4rem; height: 4rem; background-color: rgba(241, 241, 242, .8); border-radius: 50%; box-shadow: 0 0 3px rgba(0,0,0, .25); position: fixed; right: 2.5rem; bottom: 3.75rem; z-index: 999; opacity: 0; visibility: hidden; transition: background-color .4s ease, opacity .3s, visibility .3s; } .go-top.visible { opacity: 1; visibility: visible; } .go-top:hover { background-color: rgba(241, 241, 242, 1); } .go-top:after { content: ''; width: 1.25rem; height: 1.25rem; border: 2px solid #444041; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border-left: 0; border-bottom: 0; position: absolute; left: 50%; top: 50%; margin-left: -0.56rem; margin-top: -5px; } @media (max-width: 1399px) { h1 { font-size: 2.5rem; } h2 { font-size: 2.1875rem; } .default-title { padding-bottom: 1.25rem; } } /* Small Desktop */ @media (max-width: 1199px) { .go-top { right: 30px; bottom: 30px; } } /* Mobile */ @media (max-width: 767px) { .default-title { font-size: 20px; padding-bottom: 15px; } .default-title:after { width: 30px; margin-left: -15px; } h1 { font-size: 22.5px; } p { font-size: 14px; } /*.go-top { width: 20px; height: 20px; }*/ } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ /* Font: WindleshamPro */ @font-face { font-family: 'WindleshamPro'; src: url('../../fonts/default/WindleshamPro-Regular5.eot'); src: url('../../fonts/default/WindleshamPro-Regular5.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/WindleshamPro-Regular5.woff') format('woff'),*/ url('../../fonts/default/WindleshamPro-Regular5.woff2') format('woff2'), url('../../fonts/default/WindleshamPro-Regular5.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'WindleshamPro'; src: url('../../fonts/default/WindleshamPro-Regular3.eot'); src: url('../../fonts/default/WindleshamPro-Regular3.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/WindleshamPro-Regular3.woff') format('woff'),*/ url('../../fonts/default/WindleshamPro-Regular3.woff2') format('woff2'), url('../../fonts/default/WindleshamPro-Regular3.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'WindleshamPro'; src: url('../../fonts/default/WindleshamPro-MediumItalic.eot'); src: url('../../fonts/default/WindleshamPro-MediumItalic.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/WindleshamPro-MediumItalic.woff') format('woff'),*/ url('../../fonts/default/WindleshamPro-MediumItalic.woff2') format('woff2'), url('../../fonts/default/WindleshamPro-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'WindleshamPro'; src: url('../../fonts/default/WindleshamPro-Regular4.eot'); src: url('../../fonts/default/WindleshamPro-Regular4.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/WindleshamPro-Regular4.woff') format('woff'),*/ url('../../fonts/default/WindleshamPro-Regular4.woff2') format('woff2'), url('../../fonts/default/WindleshamPro-Regular4.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Font: Segoe UI */ @font-face { font-family: 'Segoe UI'; src: url('../../fonts/default/SegoeUI.eot'); src: url('../../fonts/default/SegoeUI.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/SegoeUI.woff') format('woff'),*/ url('../../fonts/default/SegoeUI.woff2') format('woff2'), url('../../fonts/default/SegoeUI.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Segoe UI'; src: url('../../fonts/default/SegoeUI-Semibold.eot'); src: url('../../fonts/default/SegoeUI-Semibold.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/SegoeUI-Semibold.woff') format('woff'),*/ url('../../fonts/default/SegoeUI-Semibold.woff2') format('woff2'), url('../../fonts/default/SegoeUI-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Segoe UI'; src: url('../../fonts/default/SegoeUI-Bold.eot'); src: url('../../fonts/default/SegoeUI-Bold.eot?#iefix') format('embedded-opentype'), /*url('../../fonts/default/SegoeUI-Bold.woff') format('woff'),*/ url('../../fonts/default/SegoeUI-Bold.woff2') format('woff2'), url('../../fonts/default/SegoeUI-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { margin: 0 -15px; } .cols:after { } .col { float: left; width: 100%; padding: 0 15px; } .col--size1 { -webkit-flex: 0 0 320px; -ms-flex: 0 0 320px; flex: 0 0 320px; background-color: #fff; } .col--size2 { -webkit-flex: 0 0 450px; -ms-flex: 0 0 450px; flex: 0 0 450px; background-color: rgba(255, 255, 255, .95); } .col--1of2 { width: 50%; } .col--1of4 { width: 25%; } .cols--flex { height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; } .cols--flex .col { float: none; width: auto; padding: 0; } /* Row Flex */ .row--flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .row--flex .row__image, .row--flex .row__content { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } .row--flex .row__image img { width: 100%; height: auto; } .row--flex .row__content { max-width: 50%; padding: 0 6.25rem 0 7.94rem; } .row--flex .row__content h2 { font-weight: 500; margin: 0 0 0.75rem; color: #444041; } .row--flex .row__content p { margin: 0; font-size: 1.125rem; } @media (max-width: 1899px) { .row--flex .row__content { padding: 0 3.75rem; } } @media (max-width: 1399px) { .row--flex .row__content h2 { font-size: 2.625rem; } } /* Small Desktop */ @media (max-width: 1199px) { .row--flex .row__content { padding: 1.875rem; } .row--flex .row__content h2 { font-size: 2.19rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .row--flex .row__content h2 { font-size: 28px; } .row--flex .row__content p { font-size: 16px; } } /* Mobile */ @media (max-width: 767px) { .row--flex { -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .row--flex ~ .row--flex { margin-top: 24px; } .row--flex .row__content { -webkit-order: -1; -ms-flex-order: -1; order: -1; padding: 0 20px 35px; max-width: 100%; } .row--flex .row__content h2 { font-size: 20px; } .row--flex .row__content p { font-size: 14px; } .row--flex .row__image { margin-left: -20px; margin-right: -20px; } .row--flex:last-child { margin-top: 0; } .row--flex:last-child .row__content { padding-bottom: 30px; } .row--flex:last-child .row__image { -webkit-order: -1; -ms-flex-order: -1; order: -1; margin-bottom: 28px; } } /* 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: 1024px) { .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: 1025px) and (max-width: 1199px) { .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: 1200px) { .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; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container {} /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {} /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background: #444041 url(../css/../../images/default/footer-bg.jpg) no-repeat right top; text-align: center; padding: 3.69rem 0 3.94rem; color: #9c9ea2; } .footer .footer__inner > h3 { display: none; } .footer h6 { font-weight: 400; font-size: 0.875rem; color: #fff; text-transform: uppercase; margin: 0; } .footer ul:not([class]) { list-style: none; margin: 0; padding: 0; } .footer ul:not([class]) ~ ul { margin-top: 2.31rem; } .footer ul:not([class]) li ~ li { margin-top: 0.375rem; } .footer ul:not([class]) a { display: inline-block; text-decoration: none; font-size: 0.75rem; transition: color .4s ease; } .footer ul:not([class]) a:hover { color: rgb(179, 179, 179); } .footer .shell { max-width: 1396px; } .footer-cols { text-align: left; } .footer-cols:after { } .footer-col { float: left; } .footer-col--size1 { width: 15.7%; } .footer-col--size2 { width: 17.3%; } .footer-col--size3 { width: 15.1%; } .footer .lang { margin-top: 2.31rem; } .footer .socials { margin-bottom: 1.25rem; margin-top: -0.31rem; } .footer .socials ul li ~ li { margin-top: 0 !important; } /* Small Desktop */ @media (max-width: 1199px) { .footer { background: #444041; padding-top: 21.625rem; padding-bottom: 4.375rem; position: relative; } .footer .logo { display: none; } .footer .footer__inner > h3 { display: block; text-align: left; font-weight: 500; font-size: 1.56rem; color: #fff; text-transform: uppercase; margin: 0 0 2.31rem; } .footer h6 { font-weight: 500; margin-bottom: 0.56rem; } .footer ul:not([class]) a { font-size: 1rem; } .footer ul:not([class]) li ~ li { margin-top: 0.625rem; } .footer ul:not([class]) ~ ul { margin-top: 2.81rem; } .footer .socials { margin: 0; position: absolute; left: 50%; top: 5rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .footer .at-resp-share-element a.at-icon-wrapper .at-icon-wrapper { width: 1.625rem !important; height: 1.625rem !important; line-height: 1.625rem !important; } .footer .at-resp-share-element a.at-icon-wrapper .at-icon-wrapper svg { width: 1.625rem !important; height: 1.625rem !important; } .footer .lang { margin: 0; position: absolute; left: 50%; bottom: 9.19rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .footer .lang:before { content: ''; width: 2.5rem; height: 2px; background-color: #fff; position: absolute; left: 50%; margin-left: -1.25rem; bottom: 100%; margin-bottom: 3rem; } .footer-col--size1, .footer-col--size2 { width: 25%; } .footer-col--size3 { width: 0; } .footer-col--size2:nth-child(3) ul { float: left; width: 50%; } .footer-col--size2:nth-child(3) ul ~ ul { margin-top: 0; } .footer-col--size2:nth-child(3) ul:nth-child(odd) { clear: left; } .footer-col--size2:nth-child(3) ul:nth-child(n+3) { margin-top: 2.31rem; } .footer-col--size2:nth-child(4) { clear: left; } .footer-col--size2:nth-child(n+3) { width: 50%; } .footer-col--size2:nth-child(n+4) { margin-top: 3.75rem; } .footer-col--size2:nth-child(n+4) h6 { font-size: 1.56rem; padding-right: 1.875rem; } .footer-col--size2:nth-child(n+4) ul { float: left; width: 50%; } .footer-col--size2:nth-child(n+4) ul ~ ul { margin-top: 0; } .footer-col--size2:nth-child(n+4) ul:nth-child(odd) { clear: left; } .footer-col--size2:nth-child(n+4) ul:nth-child(n+3) { margin-top: 2.31rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .footer-col--size1, .footer-col--size2, .footer-col--size2:nth-child(n+3) { width: 33.3333%; } .footer-col--size2:nth-child(3) ul, .footer-col--size2:nth-child(4) ul { float: none; width: 100%; } .footer-col--size2:nth-child(3) ul ~ ul, .footer-col--size2:nth-child(4) ul ~ ul { margin-top: 37px; } .footer-col:nth-last-child(2) { width: 66.6667%; } } /* Mobile */ @media (max-width: 767px) { .footer { padding: 183px 0 40px; text-align: left; } .footer h6 { font-size: 14px; } .footer .shell { padding-left: 18px; padding-right: 18px; } .footer .socials { top: 33px; } .footer .at-resp-share-element a.at-icon-wrapper .at-icon-wrapper { width: 18px !important; height: 18px !important; line-height: 18px !important; } .footer .at-resp-share-element a.at-icon-wrapper .at-icon-wrapper svg { width: 18px !important; height: 18px !important; } .footer .footer__inner > h3 { display: inline-block; font-size: 18px; position: relative; margin-bottom: 0; } .footer .footer__inner > h3:after { content: ''; width: 10px; height: 10px; border: 1px solid #fff; border-left: 0; border-bottom: 0; position: absolute; left: 100%; top: 4px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-left: 5px; } .footer ul:not([class]) a { font-size: 14px; } .footer ul:not([class]) ~ ul { margin-top: 41px; } .footer ul:not([class]) li ~ li { margin-top: 8px; } .footer .footer__inner > h3.active { margin-bottom: 28px; } .footer .footer__inner > h3.active:after { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); top: 1px; margin-left: 10px; } .footer .footer-col--size1.js-col, .footer .footer-col--size2.js-col:nth-child(2), .footer .footer-col--size2.js-col:nth-child(3) { display: none; } .footer .footer__inner > h3.active ~ .footer-cols .footer-col--size1, .footer .footer__inner > h3.active ~ .footer-cols .footer-col--size2:nth-child(2), .footer .footer__inner > h3.active ~ .footer-cols .footer-col--size2:nth-child(3) { display: block; } .footer .footer-col--size1, .footer .footer-col--size2:nth-child(2) { width: 50%; } .footer .footer-col--size2:nth-child(3) { width: 100%; overflow: hidden; margin-top: 37px; } .footer .footer-col--size2:nth-child(3) ul { float: left; width: 50%; } .footer .footer-col--size2:nth-child(3) ul ~ ul { margin-top: 0; } .footer .footer-col--size2:nth-child(3) ul:nth-child(odd) { clear: left; } .footer .footer-col--size2:nth-child(3) ul:nth-child(n+3) { margin-top: 37px; } .footer-col--size2:nth-child(n+4) { width: 100%; margin-top: 37px; } .footer-col--size2:nth-child(n+4) h6 { font-size: 18px; padding-right: 0; margin-bottom: 0; } .footer-col--size2:nth-child(n+4) ul { width: 100%; float: none; overflow: hidden; } .footer-col--size2:nth-child(n+4) ul ~ ul { margin-top: 34px; } .footer-col--size2:nth-child(n+4) ul li { float: left; width: 50%; padding-right: 5px; } .footer-col--size2:nth-child(n+4) ul li ~ li { margin-top: 0; } .footer-col--size2:nth-child(n+4) ul li:first-child { width: 100%; } .footer-col--size2:nth-child(n+4) ul li:nth-child(n+4) { margin-top: 10px; } .footer-col--size2:nth-child(n+4) ul li:nth-child(even) { clear: left; } .footer .lang { bottom: 99px; white-space: nowrap; } .footer .lang:before { width: 22px; height: 1px; margin-left: -22px; margin-bottom: 24px; background-color: #9c9ea2; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: relative; background-color: #fff; text-align: center; z-index: 99; } .header + .overlay { width: 100%; height: 100%; background-color: rgba(36, 43, 49, .6); position: fixed; left: 0; top: 0; z-index: 10; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .header + .overlay.active { opacity: 1; visibility: visible; } .header .list-lang { margin: 2.1875rem 0 2.375rem 2.125rem; } .header .list-utilities { margin: 2.1875rem 2.0575rem 2.375rem 0; } .header .logo { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .header__aside { position: absolute; top: 0; z-index: 10; } .header__aside--left { left: 0; text-align: left; } .header__aside--right { right: 0; text-align: right; } .header--with-nav { background-color: transparent; } .header--with-nav:before { content: ''; width: 100%; background-color: #fff; position: absolute; left: 0; top: 0; bottom: 3.75rem; z-index: 1; } .header ~ .nav-dropdown__overlay { z-index: 10; } .header ~ .nav-dropdown__overlay.active { opacity: 1; visibility: visible; } @media (max-width: 1399px) { .header { height: 10.44rem; } .header .logo img { margin-top: -1.375rem; } .header--alt { height: 14.1875rem; } .header--alt .header__bar { margin-top: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .header { width: 100%; height: 70px; position: absolute; left: 0; top: 0; } .header__aside--left { display: none; } .header__aside--right { position: static; } .header .logo { display: inline-block; } .header .logo img { margin-top: -3px; } .header .list-utilities { margin: 0; height: 0; } .header .list-utilities > li { height: 0; } .header--alt .header__bar { display: none; } .header--with-nav { background-color: #fff; } } /* Mobile */ @media (max-width: 767px) { .header { height: 53px; z-index: 999; } .header .logo img { margin-top: -5px; margin-left: 4% } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main {} /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1840px; padding-left: 30px; padding-right: 30px; margin: auto; } .shell-fluid { max-width: none; padding-left: 0; padding-right: 0; } /* Small Desktop */ @media (max-width: 1199px) { .shell { padding-left: 30px; padding-right: 30px; } } /* Mobile */ @media (max-width: 767px) { .shell { padding-left: 20px; padding-right: 20px; } } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar {} /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; overflow-x: hidden; overflow: hidden; } /* Small Desktop */ @media (max-width: 1199px) { .wrapper { padding-top: 70px; position: relative; } } /* Mobile */ @media (max-width: 767px) { .wrapper { padding-top: 53px; overflow: hidden; } } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion__section ~ .accordion__section { margin-top: 4.125rem; } .accordion__head { cursor: pointer; position: relative; } .accordion__head:after { content: ''; width: 1.125rem; height: 1.125rem; border: 1px solid #444041; border-left: 0; border-top: 0; -webkit-transform: translateY(-85%) rotate(45deg); -ms-transform: translateY(-85%) rotate(45deg); transform: translateY(-85%) rotate(45deg); position: absolute; right: 0.5rem; top: 1.06rem; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .accordion__head.active:after { -webkit-transform: translateY(-25%) rotate(-135deg); -ms-transform: translateY(-25%) rotate(-135deg); transform: translateY(-25%) rotate(-135deg); } .accordion__head h3 { font-weight: 500; font-size: 1.75rem; text-transform: uppercase; margin: 0; padding-right: 3rem; } .accordion__body { display: none; padding-top: 0.625rem; padding-right: 5rem; padding-bottom: 1.625rem; } .accordion__body p { font-size: 1.25rem; margin: 0; letter-spacing: 0; } .accordion__body p ~ p { margin-top: 1.25rem; } /* Small Desktop */ @media (max-width: 1199px) { .accordion__head { padding-right: 3.125rem; } .accordion__head h3 { font-size: 1.5rem; padding-right: 0; } .accordion__body { padding: 0.625rem 3.125rem 0 0; } .accordion__body p { font-size: 1.125rem; } .accordion__section ~ .accordion__section { margin-top: 2.5rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .accordion__head:after { top: 13px; } .accordion__head h3 { font-size: 20px; } .accordion__body p { font-size: 16px; } } /* Mobile */ @media (max-width: 767px) { .accordion__section ~ .accordion__section { margin-top: 25px; } .accordion__head { padding-right: 30px; } .accordion__head:after { width: 12px; height: 12px; right: 0; top: 9px; } .accordion__head h3 { font-size: 18px; } .accordion__body { padding: 10px 0 0; } .accordion__body p { font-size: 14px; } } /* ------------------------------------------------------------ *\ Article Promo \* ------------------------------------------------------------ */ .article-promo .article__image { margin-bottom: 4.125rem; } .article-promo figure img { height: auto; } .article-promo .article__entry { padding: 0 6.625rem; } .article-promo .default-title { font-size: 2.94rem; text-align: left; padding-bottom: 2.44rem; margin-bottom: 3.75rem; } .article-promo .default-title:after { left: 0; margin-left: 0; } .article-promo .default-title + .lead, .article-promo .default-title + .lead + p { line-height: 1.2; } .article-promo h3 { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 2.25rem; text-transform: none; margin-bottom: 3.375rem; } .article-promo h4 { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 1.5rem; text-transform: uppercase; } .article-promo h5 { font-size: 1.5rem; color: #444041; text-transform: none; margin: 2.5rem 0 0; } .article-promo p { font-size: 1.5rem; margin-bottom: 1.44rem; line-height: 1.25; letter-spacing: 0; } .article-promo p a { text-decoration: none; color: #444041; } .article-promo p.lead { font-weight: 700; margin-bottom: 2.06rem; } .article-promo p.link { margin: 1.875rem 0; } .article-promo .list-numbers--alt { margin: 1.875rem 0 0; } .article-promo .btn-group { margin: 4.06rem 0 8.375rem; } .article-promo .btn-group--centered { font-size: 0; text-align: center; } .article-promo .btn-group--centered .btn { min-width: 12.5rem; padding-left: 0.625rem; padding-right: 0.625rem; margin-left: 0.875rem; margin-right: 0.875rem; } /* Small Desktop */ @media (max-width: 1199px) { .article-promo .article__image { margin-bottom: 2.5rem; } .article-promo .article__entry { padding: 0; } .article-promo .default-title { font-size: 2.19rem; margin-bottom: 2.5rem; } .article-promo h3 { font-size: 1.75rem; margin-bottom: 2.5rem; } .article-promo p { font-size: 1.125rem; } .article-promo .btn-group { margin: 2.5rem 0; } } /* Mobile */ @media (max-width: 767px) { .article-promo .article__image { margin: 0 -20px 33px; overflow: hidden; } .article-promo .article__entry { padding: 0 20px; } .article-promo .default-title { font-size: 16px; padding-bottom: 6px; margin-bottom: 21px; } .article-promo .default-title:after { height: 1px; } .article-promo h3 { font-size: 15px; margin-bottom: 18px; } .article-promo h4, .article-promo h5 { font-size: 12px; } .article-promo h5 { margin-top: 14px; } .article-promo p { font-size: 12.5px; margin-bottom: 15px; } .article-promo p.link { margin: 15px 0; } .article-promo p.lead { font-weight: 600; font-size: 14px; margin-bottom: 14px; margin-top: 27px; } .article-promo .default-title + .lead + p { font-size: 12px; } .article-promo .btn-group { display: block; width: 175px; margin: 37px auto 40px; } .article-promo .btn-group .btn { margin: 0; min-width: 0; width: 100%; } .article-promo .btn-group .btn ~ .btn { margin-top: 20px; } .article-promo .list-numbers--alt { margin-top: 16px; } } /* ------------------------------------------------------------ *\ Article Actu \* ------------------------------------------------------------ */ .article-actu .article__group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .article-actu .article__group ~ .article__group { margin-top: 3.625rem; } .article-actu .article__group-image, .article-actu .article__group-content { -webkit-flex: 0 0 49%; -ms-flex: 0 0 49%; flex: 0 0 49%; max-width: 50%; } .article-actu .article__group-image img { width: 100%; height: auto; } .article-actu .article__group-content { padding: 0 6.25rem 0 6.875rem; } .article-actu .article__group-content h5 { margin-bottom: 0.81rem; } .article-actu .article__group-content h2 { width: 80%; font-weight: 500; color: #444041; margin-bottom: 0.625rem; } .article-actu .article__group-content p { margin: 0; font-size: 1.125rem; } .article-actu .article__group--left .article__group-content { padding: 0 6.25rem 2.375rem 6.875rem; } .article-actu .article__group--right .article__group-content { padding: 0 6.25rem 1rem 8.31rem; } .article-actu .article__group--right .article__group-image { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } .article-actu .article__group + .cols { margin-top: 4.81rem; } .article-actu .cols { margin-left: 2.19rem; margin-right: -2.19rem; } .article-actu .col { padding-left: 2.19rem; padding-right: 2.19rem; } .article-actu h4 { width: 90%; font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.5rem; color: #444041; margin-bottom: 1.94rem; text-transform: none; } .article-actu h4.alt { margin-top: 4.25rem; } .article-actu p { width: 90%; font-size: 1.5rem; color: #444041; letter-spacing: 0; margin-bottom: 1.94rem; } .article-actu .list-disc { margin-bottom: 2.5rem; } .article-actu .list-disc li { padding-left: 1.06rem; position: relative; } .article-actu .list-disc li ~ li { margin-top: 0.75rem; } .article-actu .list-disc li:before { content: ''; width: 0.5rem; height: 0.5rem; left: 0; margin: 0; position: absolute; top: 0.75rem; } .article-actu .list-disc + p { margin-top: -0.625rem; } .article-actu figure { display: block; text-align: center; margin: 2.06rem 0 2.375rem; } .article-actu figure img { display: inline-block; max-width: 100%; height: auto; position: relative; left: -2.19rem; } .article-actu .cols:last-child .col:first-child { padding-top: 4.25rem; } @media (max-width: 1899px) { .article-actu figure img { left: 0; } } @media (max-width: 1399px) { .article-actu .cols { margin-left: -2.19rem; margin-right: -2.19rem; } .article-actu .cols:last-child .col:first-child { padding-top: 1.875rem; } .article-actu h4.alt { margin-top: 1.56rem; } .article-actu .article__group--left .article__group-content, .article-actu .article__group--right .article__group-content { padding: 0 3.75rem; } .article-actu .article__group-content h2 { width: 100%; font-size: 3.125rem; } } /* Small Desktop */ @media (max-width: 1199px) { .article-actu .article__group--left .article__group-content, .article-actu .article__group--right .article__group-content { padding: 1.875rem 0; } .article-actu .article__group-content h2 { font-size: 2.5rem; } .article-actu .article__group-content p { font-size: 1rem; } .article-actu h4, .article-actu p { width: 100%; } .article-actu p { font-size: 1.125rem; } .article-actu .list-disc li:before { top: 0.375rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .article-actu .article__group-content h2 { font-size: 35px; } } /* Mobile */ @media (max-width: 767px) { .article-actu .article__group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .article-actu .article__group ~ .article__group { margin-top: 28px; } .article-actu .article__group-content, .article-actu .article__group-image { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0; } .article-actu .article__group-content { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .article-actu .article__group-content h5 { font-size: 11px; margin-bottom: 10px; } .article-actu .article__group-content h2 { font-size: 20px; width: 70%; margin-bottom: 5px; } .article-actu .article__group-content p { font-size: 14px; line-height: 1.25; } .article-actu .article__group-image { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 194px; max-width: none; margin-left: -40px; margin-right: -40px; overflow: hidden; position: relative; } .article-actu .article__group-image img { } .article-actu .article__group--left .article__group-content, .article-actu .article__group--right .article__group-content { padding: 0 0 28px; } .article-actu .col { width: 100%; } .article-actu .article__group + .cols { margin-top: 28px; } .article-actu .cols:last-child .col:first-child { padding-top: 0; } .article-actu h4 { font-size: 14px; margin-bottom: 18px; } .article-actu p { font-size: 14px; line-height: 1.25; margin-bottom: 23px; } .article-actu .list-disc { margin-bottom: 8px; } .article-actu .list-disc li { font-size: 14px; padding-left: 12px; } .article-actu .list-disc li ~ li { margin-top: 9px; } .article-actu .list-disc li:before { width: 4px; height: 4px; top: 6px; } .article-actu .list-disc + p { margin-top: 14px; } .article-actu figure { max-width: none; margin: 9px -40px 0; } } /* ------------------------------------------------------------ *\ Banner Product \* ------------------------------------------------------------ */ .banner-product { height: 43.5rem; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; padding: 5rem 16.875rem 0 25.31rem; } .banner-product ~ .banner-product { margin-top: 0.375rem; } .banner-product .banner__bg { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; left: 0; top: 0; z-index: 1; } .banner-product .banner__content, .banner-product .banner__image { position: relative; z-index: 2; } .banner-product .banner__image { margin-top: auto; max-height: 100%; } .banner-product .banner__image img { width: auto; max-height: 39.75rem; } .banner-product .banner__content { -webkit-flex: 0 0 38.38rem; -ms-flex: 0 0 38.38rem; flex: 0 0 38.38rem; padding-top: 6.25rem; color: #444041; } .banner-product .banner__content h5 { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 1.125rem; color: #d50032; text-transform: uppercase; margin: 0 0 0.94rem; } .banner-product .banner__content h1 { width: 90%; font-weight: 500; text-transform: uppercase; margin: 0 0 0.625rem; } .banner-product .banner__content p { margin: 0 0 2.06rem; font-size: 1.125rem; letter-spacing: 0; } .banner-product .banner__content .btn { margin-left: 0; } /* Vertical Alignment */ .banner-product--right { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .banner-product--right .banner__image { margin-left: -6.25rem; } .banner-product.vertical-top { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .banner-product.vertical-top .banner__content { padding-top: 0; } .banner-product.vertical-center { -webkit-align-items: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .banner-product.vertical-center .banner__content { padding-top: 0; } .banner-product.vertical-bottom { -webkit-align-items: flex-end; -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } .banner-product.vertical-bottom .banner__content { padding-top: 0; } /* Horizontal Alignment */ .banner-product.horizontal-left, .banner-product.banner-product--right.horizontal-right { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .banner-product.horizontal-center { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .banner-product.horizontal-right, .banner-product.banner-product--right.horizontal-left { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1899px) { .banner-product { padding: 5rem 6.25rem 5rem 6.25rem; } } @media (max-width: 1399px) { .banner-product { padding: 3.75rem 1.875rem 3.75rem 1.875rem; } } @media (max-width: 1899px) { .banner-product { padding: 5rem 6.25rem 0 6.25rem; } } @media (max-width: 1399px) { .banner-product { padding: 3.75rem 1.875rem 0 1.875rem; } } /* Small Desktop */ @media (max-width: 1199px) { .banner-product { height: 23.125rem; padding: 3.125rem 3.75rem 0; overflow: hidden; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .banner-product .banner__content { padding-top: 0; -webkit-flex: 0 0 28.125rem; -ms-flex: 0 0 28.125rem; flex: 0 0 28.125rem; } .banner-product .banner__content h5, .banner-product .banner__content p { font-size: 1rem; } .banner-product .banner__content h1 { width: 80%; } .banner-product .banner__content p { margin-bottom: 1.56rem; } .banner-product .banner__content .btn { margin-left: 0; } .banner-product .banner__image { -webkit-flex: 0 0 calc(100% - 28.125rem); -ms-flex: 0 0 calc(100% - 28.125rem); flex: 0 0 calc(100% - 28.125rem); text-align: center; } .banner-product .banner__image img { width: auto; max-height: 20rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .banner-product { display: block; height: auto; padding: 50px 60px 0; text-align: center; } .banner-product .banner__content { text-align: left; } .banner-product .banner__content h1 { width: 60%; } .banner-product .banner__image { width: 100%; margin: -30px 0 0; } .banner-product .banner__image img { max-height: 320px; } } /* Mobile */ @media (max-width: 767px) { .banner-product { min-height: 387px; height: auto; padding: 25px 40px 0; } .banner-product .banner__content { z-index: 10; text-align: center; } .banner-product .banner__content h1, .banner-product .banner__content h5, .banner-product .banner__content p { text-align: left; } .banner-product .banner__content h1 { margin-bottom: 2px; width: 80%; } .banner-product .banner__content h5 { font-size: 11px; margin-bottom: 10px; } .banner-product .banner__content p { font-size: 14px; margin-bottom: 20px; } .banner-product .banner__image { margin-top: 20px; } .banner-product .banner__image img { max-height: 190px; } } /* ------------------------------------------------------------ *\ Breadcrumb \* ------------------------------------------------------------ */ .breadcrumbs { padding: 35px 0 31px; } .breadcrumbs .shell { max-width: 1730px; } .breadcrumbs__list { list-style: none; margin: 0; padding: 0; font-size: 0; } .breadcrumbs__item { display: inline-block; vertical-align: middle; } .breadcrumbs__item ~ .breadcrumbs__item { padding-left: 2.31rem; position: relative; } .breadcrumbs__item ~ .breadcrumbs__item:before { content: '>'; font-size: 1.125rem; position: absolute; left: 0.875rem; top: -0.19rem; } .breadcrumbs__item.active { pointer-events: none; } .breadcrumbs__item.active .breadcrumbs__link { font-weight: 700; } .breadcrumbs__link { display: block; font-family: 'WindleshamPro', sans-serif; font-size: 1rem; color: #444041; text-transform: uppercase; text-decoration: none; transition: color .4s ease; } .breadcrumbs__link:hover { color: #d50032; } /* Tablet Portrait */ @media (max-width: 1024px) { .breadcrumbs__link { font-size: 14px; } .breadcrumbs__item ~ .breadcrumbs__item { padding-left: 25px; } .breadcrumbs__item ~ .breadcrumbs__item:before { left: 7px; top: -4px; } } /* Mobile */ @media (max-width: 767px) { .breadcrumbs { display: none; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { height: 2.81rem; padding: 0.75rem 2.1875rem 0.875rem; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; border: 0; border-radius: 1.875rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-decoration: none; transition: background-color .4s ease, color .4s ease; } .btn--black { box-shadow: inset 0 0 0 1px #444041; } .btn--black.no--border { box-shadow: none; } .btn--white, .btn--black:hover { background-color: #fff; color: #444041; } .btn--black, .btn--white:hover { background-color: #444041; color: #fff; } .btn--border { border: 1px solid #444041; } .btn--red { background-color: #d50032; color: #fff; } .btn--red:hover { background-color: rgb(192, 0, 45); } .btn--compare { padding: 0.69rem 1.5rem 0.625rem; background-color: #f4f4f4; font-weight: 600; font-size: 1rem; color: #444041; text-transform: uppercase; border-radius: 1.25rem 1.25rem 0 0; position: fixed; right: 6.56rem; bottom: 0; z-index: 999; box-shadow: 0 0 0.5rem rgba(0,0,0, .2); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .btn--compare.active { opacity: 1; visibility: visible; } .btn--compare i { position: relative; top: -0.13rem; margin-right: 0.31rem; } .btn--video { display: block; text-decoration: none; position: relative; } .btn--video i { position: absolute; left: 50%; top: 50%; margin-left: -3.75rem; margin-top: -3.75rem; z-index: 10; transition: opacity .4s ease; } .btn--video:hover i { opacity: .75; } .btn--square { border-radius: 0; } .btn--print { text-decoration: none; font-weight: 600; font-size: 1rem; color: #444041; text-transform: uppercase; } .btn--print i {position: relative; top: -1px; margin-right: 1.25rem; } /* Small Desktop */ @media (max-width: 1199px) { .btn { height: 2.31rem; padding: 0.5rem 2.1875rem 0.625rem; } } /* Mobile */ @media (max-width: 767px) { .btn { height: 27px; padding: 5px 22px 7px; font-size: 13px; } } /* ------------------------------------------------------------ *\ Btn Nav \* ------------------------------------------------------------ */ .btn-nav { display: none; } /* Small Desktop */ @media (max-width: 1199px) { .btn-nav { display: block; width: 70px; height: 70px; background-color: #444041; padding: 25px 25px 0 15px; border-radius: 0; position: absolute; left: 0; top: 0; z-index: 9; } .btn-nav:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 70px 15px; border-color: transparent transparent #fff transparent; position: absolute; right: 0; top: 0; z-index: 1; } .btn-nav .bar { display: block; height: 3px; background-color: #fff; border-radius: 3px; position: relative; top: 0; transition: all .4s ease; } .btn-nav .bar ~ .bar { margin-top: 5px; } .btn-nav.active .bar:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 8px; } .btn-nav.active .bar:nth-child(2) { opacity: 0; } .btn-nav.active .bar:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: -8px; } } /* Tablet Portrait */ @media (max-width: 1024px) { .btn--video i { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; } } /* Mobile */ @media (max-width: 767px) { .btn-nav { width: 53px; height: 53px; padding: 18px 20px 0 11px; } .btn-nav:after { border-width: 0 0 53px 13px; } .btn-nav .bar ~ .bar { margin-top: 4px; } .btn-nav.active .bar:nth-child(1) { top: 7px; } .btn-nav.active .bar:nth-child(3) { top: -7px; } .btn--video i { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; top: 48%; } .btn--compare { right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); white-space: nowrap; padding-top: 6px; border-radius: 10px 10px 0 0; } .btn--compare-bg { width: 100%; height: 53px; background-color: #000; opacity: .6; position: fixed; left: 0; bottom: 0; z-index: 998; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .btn--compare.active + .btn--compare-bg { opacity: .6; visibility: visible; } } /* ------------------------------------------------------------ *\ Card Press \* ------------------------------------------------------------ */ .card-press { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 15.625rem; background-color: #f1f1f2; } .card-press__image { -webkit-flex: 0 0 18.75rem; -ms-flex: 0 0 18.75rem; flex: 0 0 18.75rem; height: 15.625rem; overflow: hidden; position: relative; background-color: #fff; background-repeat: no-repeat; background-position: center; } .card-press__image img { display: none; } .card-press__body { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; position: relative; } .card-press__content { padding: 1.94rem 1.25rem 6.25rem 2.125rem; } .card-press__content h3 { font-weight: 500; font-size: 1.75rem; margin: 0 0 0.31rem; } .card-press__content p { margin-bottom: 0.625rem; font-size: 1rem; letter-spacing: 0; } .card-press__meta { margin: 0; font-size: 0.875rem; position: relative; } .card-press__meta:after { content: ''; width: 1rem; height: 2px; background-color: #d50032; position: absolute; left: 0; top: 100%; margin-top: 0.625rem; } .card-press__actions { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: absolute; left: 2.31rem; right: 2.31rem; bottom: 2.19rem; } .card-press__actions .btn { font-weight: 400; } @media (max-width: 1899px) { .card-press__image { -webkit-flex: 0 0 15.625rem; -ms-flex: 0 0 15.625rem; flex: 0 0 15.625rem; background-size: cover; } .card-press__content h3 { font-size: 1.5rem; } } @media (max-width: 1399px) { .card-press__image { -webkit-flex: 0 0 12.5rem; -ms-flex: 0 0 12.5rem; flex: 0 0 12.5rem; } .card-press__content { padding: 1.25rem 1.25rem 6.25rem 1.25rem; } .card-press__actions { left: 1.25rem; right: 1.25rem; bottom: 1.56rem; } } /* Small Desktop */ @media (max-width: 1199px) { .card-press__content h3 { font-size: 1.25rem; } .card-press__content p { font-size: 1.25rem; } .card-press__actions .btn { padding-left: 1.25rem; padding-right: 1.25rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .card-press__image { -webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; } } /* Mobile */ @media (max-width: 767px) { .card-press { display: block; height: auto; } .card-press__image { height: auto; background: none !important; background-color: #fff; text-align: center; } .card-press__image img { display: block; width: 100%; height: auto; } .card-press__content { padding: 20px 20px 60px 20px; } .card-press__content h3 { font-size: 22.5px; } .card-press__content p { font-size: 14px; } .card-press__actions { left: 20px; right: 20px; } } /* ------------------------------------------------------------ *\ Card Product \* ------------------------------------------------------------ */ .card-product { height: 16.625rem; position: relative; } .card-product .card-press__image, .card-product .card-press__body { position: relative; z-index: 2; } .card-product .card-press__image { -webkit-flex: 0 0 16.625rem; -ms-flex: 0 0 16.625rem; flex: 0 0 16.625rem; height: 16.625rem; } .card-product .card-press__image.bg-white { background-color: #fff; } .card-product .card-press__content { padding: 2.19rem 1.25rem 6.25rem 2.125rem; } .card-product .card-press__content h3 { margin-bottom: 1.25rem; } .card-product .card-press__actions { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; bottom: 1.25rem; } .card-product .card-press__actions .btn { min-width: 10.19rem; font-weight: 600; padding-left: 1.25rem; padding-right: 1.25rem; } .card-product .card__bg { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: left center; position: absolute; left: 0; top: 0; z-index: 1; } .card--white-text .card-press__content h3, .card--white-text .card-press__content p { color: #fff; } @media (max-width: 1399px) { .card-product .card-press__image { -webkit-flex: 0 0 12.5rem; -ms-flex: 0 0 12.5rem; flex: 0 0 12.5rem; background-size: contain; background-color: transparent; } } /* Tablet Portrait */ @media (max-width: 1024px) { .card-product .card-press__image { -webkit-flex: 0 0 266px; -ms-flex: 0 0 266px; flex: 0 0 266px; } } /* Mobile */ @media (max-width: 767px) { .card-product, .card-product .card-press__image { height: auto; } .card-product .card-press__content { padding: 20px 20px 60px 20px; } .card-product .card-press__content h3 { margin-bottom: 5px; } .card-product .card-press__actions .btn { min-width: 0; } } /* ------------------------------------------------------------ *\ Category \* ------------------------------------------------------------ */ .category { height: 23.625rem; position: relative; } .category:after { content: ''; width: 7.75rem; height: 1px; background-color: #444041; position: absolute; left: 50%; margin-left: -3.875rem; bottom: 0; } .category:last-child:not(:first-child):after { display: none; } .category__head { padding: 2.125rem 1.25rem 0 5.9375rem; } .category__head h5 { margin: 0; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1rem; text-transform: uppercase; position: relative; color: #444041; } .category__head h5 a { display: block; text-decoration: none; } .category__head h5 i { position: absolute; left: -3.125rem; top: 44%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .category__list ul { list-style: none; margin: 0.625rem 0 0; padding: 0 0 0 5.9375rem; } .category__list ul a { display: block; text-decoration: none; position: relative; font-size: 0.875rem; color: #444041; padding-left: 1rem; transition: color .4s ease; } .category__list ul a:hover { color: rgb(173, 178, 182); } .category__list ul li ~ li { margin-top: 0.5rem; } .category__list ul a:before { content: ''; width: 0.375rem; height: 0.375rem; background-color: #9c9ea2; border-radius: 50%; position: absolute; left: 0; top: 0.375rem; } .category__foot { width: 100%; position: absolute; left: 0; bottom: 1rem; text-align: center; } .category__foot a { display: block; text-decoration: none; transition: opacity .4s ease; } .category__foot a:hover { opacity: .75; } .category__foot h6 { height: 2rem; margin: 0.625rem 0 0; font-family: 'Segoe UI', sans-serif; font-size: 0.875rem; color: #444041; letter-spacing: .025em; text-transform: none; padding: 0 15%; } /* Category Small */ .category--small { height: 13.125rem; } .category--small:after { bottom: -0.937rem; z-index: 10; } .category--small .category__media { width: 100%; text-align: center; position: absolute; left: 0; bottom: 0; } .category--small .category__media a { display: block; text-decoration: none; transition: opacity .4s ease; } .category--small .category__media a:hover { opacity: .75; } .category--small .category__media h6 { height: 2rem; margin: 0.625rem 0 0; font-family: 'Segoe UI', sans-serif; font-size: 0.875rem; color: #444041; letter-spacing: .025em; text-transform: none; padding: 0 2.5rem; } /* Category Large Icon */ .category--large-icon:after, .category--large-icon:before { background-color: #fff !important; } .category--large-icon .category__head h5 { padding-top: 7.5rem; color: #fff; } .category--large-icon .category__head h5 i { position: absolute; left: 1.875rem; top: 3.125rem; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .category--large-icon .category__head h5 i[class*='-black'] { display: none; } .category--large-icon .category__list ul { margin: 1.875rem 0 0; } .category--large-icon .category__list ul a { color: #fff; } .category--large-icon .category__list ul a:hover { color: rgb(173, 178, 182); } @media (max-width: 1399px) { .category__media-image img { width: auto; max-height: 8rem; } } /* Small Desktop */ @media (max-width: 1199px) { .category { height: auto; text-align: left; } .category ~ .category { border-top: 1px solid #a9adb0; } .category:before, .category:after { display: none; } .category__head { padding: 0; } .category__head h5 { position: relative; } .category__head h5 a { padding: 1.125rem 1.875rem 1.125rem 4.06rem; pointer-events: auto; } /*.category__head h5:after { content: ''; width: 0.875rem; height: 0.875rem; border: 1px solid #444041; border-left: 0; border-bottom: 0; position: absolute; right: 0.19rem; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.437rem; }*/ .category__head h5 i { left: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .category__list, .category__foot { display: none; } .category--small .category__media { position: relative; bottom: auto; text-align: left; } .category--small .category__media-image { display: none; } .category--small .category__media a { padding: 1.125rem 1.875rem 1.125rem 0; } .category--small .category__media a:after { content: ''; width: 0.875rem; height: 0.875rem; border: 1px solid #444041; border-left: 0; border-bottom: 0; position: absolute; right: 0.19rem; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.4375rem; } .category--small .category__media h6 { height: auto; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; } .category--small .category__media h6 br { display: none; } .category--large-icon .category__head h5 { padding: 0; color: #444041; } .category--large-icon .category__head h5 i { display: none; left: 0; top: 50%; -webkit-transform: translate(0, -50%) scale(.4); -ms-transform: translate(0, -50%) scale(.4); transform: translate(0, -50%) scale(.4); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .category--large-icon .category__head h5 i[class*='-black'] { display: block; } } /* Mobile */ @media (max-width: 767px) { .category__head h5, .category--small .category__media h6 { font-size: 12.5px; } .category__head h5 a { padding: 19px 30px 19px 65px; } .category--small .category__media a { padding: 19px 30px 19px 0; } } /* ------------------------------------------------------------ *\ Characteristics \* ------------------------------------------------------------ */ .characteristics { border: 1px solid #9d9fa1; } .characteristics .cols { margin-left: -2.19rem; margin-right: -2.19rem; } .characteristics .col { padding-left: 2.19rem; padding-right: 2.19rem; } .characteristics__head { text-align: center; margin: -1.56rem 0 4.125rem; } .characteristics__head h2 { display: inline-block; padding: 0 5rem 2.125rem; background-color: #fff; position: relative; z-index: 10; } .characteristics__body { padding: 0 4.25rem 3.06rem; } .characteristics__body > p { margin: 3rem 0 0; font-size: 0.81rem; } .characteristics__body .table ~ .table { margin-top: 3.94rem; } @media (max-width: 1399px) { .characteristics__body { padding: 0 1.875rem 2.5rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .characteristics .col { width: 100%; } .characteristics .col ~ .col, .characteristics__body .table ~ .table { margin-top: 40px; } } /* Mobile */ @media (max-width: 767px) { .characteristics { border: 0; } .characteristics .col { padding: 0; } .characteristics .cols { margin: 0 -20px; } .characteristics__head { margin: 0 0 30px; } .characteristics__head h2 { padding: 0 0 7px; background-color: transparent; } .characteristics__head h2:after { height: 1px; } .characteristics__body { padding: 0; } .characteristics__body > p { margin-top: 20px; font-size: 10px; } .characteristics .col ~ .col, .characteristics__body .table ~ .table { margin-top: 31px; } } /* ------------------------------------------------------------ *\ Compare \* ------------------------------------------------------------ */ .compare__head { text-align: center; margin-bottom: 4.56rem; } .compare__head h3 { margin: 0; padding-bottom: 0.94rem; position: relative; font-weight: 500; font-size: 2.125rem; color: #444041; text-transform: uppercase; } .compare__head h3:after { content: ''; width: 4.375rem; height: 0.13rem; background-color: #d50032; position: absolute; left: 50%; margin-left: -2.19rem; bottom: 0; } .compare__body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .compare__item { -webkit-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; text-align: center; padding: 1.875rem 3.44rem 4.875rem; position: relative; } .compare__item .delete { width: 1.875rem; height: 1.875rem; border: 1px solid #444041; color: #444041; text-decoration: none; font-size: 1.5rem; line-height: 1.44rem; position: absolute; right: 0.625rem; top: 0; transition: opacity .4s ease; } .compare__item .delete:hover { opacity: .5; } .compare__item h4 { width: 100%; font-weight: 700; font-size: 1.375rem; color: #444041; text-transform: uppercase; margin: 0; position: absolute; left: 0; bottom: 0; } .compare__actions { text-align: center; font-size: 0; padding-top: 3.75rem; padding-right: 0.375rem; } .compare__actions .btn { min-width: 15.44rem; margin: 0 1rem; padding-left: 0.625rem; padding-right: 0.625rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .compare__item { padding: 40px 25px 78px; } } /* Mobile */ @media (max-width: 767px) { .compare__head { margin-bottom: 35px; } .compare__head h3 { font-size: 17px; padding-bottom: 3px; } .compare__head h3:after { width: 35px; height: 1px; margin-left: -17px; } .compare__body { display: block; } .compare__item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; float: none; width: 100%; max-width: 100%; padding: 0 154px 0 0; position: relative; text-align: left; } .compare__item br { display: none; } .compare__item ~ .compare__item { margin-top: 30px; } .compare__item p { -webkit-order: 1; -ms-flex-order: 1; order: 1; font-size: 11px; text-transform: uppercase; margin: 0; } .compare__item h4 { -webkit-order: 2; -ms-flex-order: 2; order: 2; font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; position: static; margin: 0 0 10px; } .compare__item img { -webkit-order: 3; -ms-flex-order: 3; order: 3; width: 114px; height: auto; } .compare__item .btn { position: absolute; right: 18px; bottom: 24px; } .compare__actions { padding-top: 30px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .compare__actions .btn { min-width: 0; padding-left: 23px; padding-right: 23px; } .compare__actions .btn--black { -webkit-order: -1; -ms-flex-order: -1; order: -1; margin-bottom: 21px; } } /* Mobile */ @media (max-width: 374px) { .compare__item { padding: 0 100px 0 0; } .compare__item .btn { right: 0; } .compare__item .btn { height: auto; font-size: 12px; padding: 6px 10px; } } /* ------------------------------------------------------------ *\ Download \* ------------------------------------------------------------ */ .download { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 7.56rem; margin-left: -2.31rem; } .download__image { -webkit-flex: 0 0 52%; -ms-flex: 0 0 52%; flex: 0 0 52%; } .download__content { -webkit-flex: 0 0 32%; -ms-flex: 0 0 32%; flex: 0 0 32%; margin-right: 6.3%; margin-bottom: 4px; } @media (max-width: 1899px) { .download { margin-left: 0; } .download__content { -webkit-flex: 0 0 44%; -ms-flex: 0 0 44%; flex: 0 0 44%; margin-right: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .download { margin-bottom: 3.75rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .download { display: block; } .download__image { display: none; } } /* ------------------------------------------------------------ *\ Feed \* ------------------------------------------------------------ */ .feed__head { margin-bottom: 2.5rem; } .feed__head h5 { font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.125rem; color: #444041; text-transform: uppercase; letter-spacing: 0; margin: 0; } .feed__content ol { list-style: none; margin: 0; padding: 0; } .feed__actions { margin-top: 2.3rem; } .feed__actions .btn { min-width: 10.375rem; text-align: center; } .feed__actions .btn--black:hover { background-color: #fff; color: #444041; } .feed--facebook .feed__content ol li ~ li { margin-top: 1.69rem; } .feed--facebook .feed__content p a { color: #d50032; } .feed--twitter .feed__head { margin-bottom: 2.94rem; } .feed--twitter .feed__content ol li ~ li { margin-top: 3.06rem; } .feed--twitter .feed__content p a { color: #1ea1f3; } .feed--twitter .feed__actions { margin-top: 3rem; } @media (max-width: 1899px) { .feed--twitter .feed__head { margin-bottom: 1.875rem; } .feed--twitter .feed__content ol li ~ li { margin-top: 2.6rem; } .feed--twitter .feed__actions { margin-top: 2.19rem; } } /* Small Desktop */ @media (max-width: 1199px) { .feed__head { margin-bottom: 1.56rem; } .feed__head h5 { font-size: 1rem; } .feed__actions { text-align: center; } } /* Mobile */ @media (max-width: 767px) { .feed__head { margin-bottom: 23px; } .feed__head h5 { font-size: 14px; } .feed__actions .btn { min-width: 120px; padding: 5px 12px 7px; } .feed--twitter .feed__head { margin-bottom: 25px; } .feed--twitter .feed__content ol li ~ li { margin-top: 28px; } } /* ------------------------------------------------------------ *\ Feed Item \* ------------------------------------------------------------ */ .feed-item { display: -webkit-flex; display: -ms-flexbox; display: flex; } .feed-item__image { -webkit-flex: 0 0 4.75rem; -ms-flex: 0 0 4.75rem; flex: 0 0 4.75rem; margin-right: 1.56rem; text-align: center; } .feed-item__image img { width: 100%; height: auto; border: 3px solid #f1f1f2; border-radius: 3px; } .feed-item__image .fa { font-size: 3.5rem; color: #1ea1f3; line-height: 4.375rem; } .feed-item__content p { margin: 0; font-size: 1rem; color: #444041; letter-spacing: -.01em; } .feed-item__content p a { text-decoration: none; } .feed-item__content p a:hover { text-decoration: underline; } .feed-item__content p + span { display: block; font-size: 0.9375rem; color: #9c9ea2; } /* Small Desktop */ @media (max-width: 1199px) { .feed-item__image { -webkit-flex: 0 0 3.5rem; -ms-flex: 0 0 3.5rem; flex: 0 0 3.5rem; margin-right: 0.875rem; } .feed-item__image .fa { font-size: 2.25rem; line-height: 3.125rem; } } /* Mobile */ @media (max-width: 767px) { .feed-item__image { -webkit-flex: 0 0 48px; -ms-flex: 0 0 48px; flex: 0 0 48px; } .feed-item__image .fa { line-height: 38px; } .feed-item__image img { border-width: 2px; } .feed-item__content p, .feed-item__content p + span { font-size: 14px; } } /* ------------------------------------------------------------ *\ Floating Share \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-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::-moz-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%; height: 2.25rem; padding: 0.375rem 0.875rem 0.44rem; background-color: #fff; border: 1px solid #9d9fa1; border-radius: 5px; font-size: 1rem; } .select { position: relative; } .select:after { content: ''; width: 0.75rem; height: 0.75rem; border: 1px solid #626264; border-left: 0; border-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 1.81rem; top: 50%; margin-top: -0.56rem; pointer-events: none; } .select select { width: 100%; min-width: 16.94rem; height: 3.375rem; padding: 0 3.125rem 0 1.56rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.125rem; color: #444041; border: 1px solid #9c9ea2; border-radius: 0.31rem; } .select select::-ms-expand { display: none; } .checkbox input { display: none; } .checkbox label { display: block; font-weight: 600; font-size: 1rem; color: #444041; text-transform: uppercase; padding-left: 2.25rem; position: relative; } .checkbox label:before { content: ''; width: 1.375rem; height: 1.375rem; border: 1px solid #999; background-color: #444041; box-shadow: inset 0 0 0 0.7rem #fff; position: absolute; left: 0; top: 50%; margin-top: -0.69rem; transition: box-shadow .4s ease; } .checkbox input:checked ~ label:before { box-shadow: inset 0 0 0 0.19rem #fff; } .checkbox-default input { display: none; } .checkbox-default label { display: block; font-weight: 600; font-size: 1rem; color: #485661; padding-left: 1.875rem; position: relative; } .checkbox-default label:before { content: ''; width: 1rem; height: 1rem; background-color: #fff; position: absolute; left: 0; top: 50%; margin-top: -0.44rem; } .checkbox-default label:after { content: ''; width: 0.44rem; height: 0.81rem; border-right: 2px solid #444041; border-bottom: 2px solid #444041; position: absolute; left: 0.25rem; top: 50%; margin-top: -0.44rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; transition: opacity .4s ease; } .checkbox-default input:checked ~ label:after { opacity: 1; } .radio input { display: none; } .radio label { display: block; position: relative; padding-left: 1.875rem; font-size: 1rem; color: #485661; } .radio label:before { content: ''; width: 1rem; height: 1rem; background-color: #fff; border-radius: 50%; position: absolute; left: 0; top: 50%; margin-top: -0.5rem; } .radio label:after { content: ''; width: 0.375rem; height: 0.375rem; background-color: #444041; border-radius: 50%; position: absolute; left: 0.31rem; top: 50%; margin-top: -0.19rem; opacity: 0; transition: opacity .4s ease; } .radio input:checked ~ label:after { opacity: 1; } /* Mobile */ @media (max-width: 767px) { .select:after { width: 9px; height: 9px; right: 17px; margin-top: -6px; } .select select { height: 36px; font-size: 12px; padding: 0 30px 0 20px; } .checkbox label { font-size: 14px; padding-left: 28px; } .checkbox label:before { width: 17px; height: 17px; margin-top: -9px; } .checkbox-default label { font-weight: 400; font-size: 17px; padding-left: 35px; } .checkbox-default label:before { width: 19px; height: 19px; margin-top: -9px; } .checkbox-default label:after { left: 6px; } .radio label { font-size: 17px; padding-left: 32px; } .radio label:before { width: 19px; height: 19px; margin-top: -8px; } .radio label:after { width: 8px; height: 8px; left: 6px; margin-top: -3px; } } /* Mobile */ @media (max-width: 374px) { .select select { min-width: 0; } } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form .field + label.error { display: block; padding-top: 10px; color: #d50032; } .form .field.error ~ .fa { color: #d50032; } .form .field.valid ~ .fa { color: #3daf0a; } .form .form__alert { display: block; padding-top: 10px; } .form .form__alert.hidden { display: none; } .form .form__alert--success { color: #3daf0a; } /* ------------------------------------------------------------ *\ Form Newsletter \* ------------------------------------------------------------ */ .form-newsletter form { display: -webkit-flex; display: -ms-flexbox; display: flex; } .form-newsletter .form__image { -webkit-flex: 0 0 37.69rem; -ms-flex: 0 0 37.69rem; flex: 0 0 37.69rem; } .form-newsletter .form__body { padding-left: 2.125rem; margin-top: -0.44rem; } .form-newsletter .form__label { display: block; font-size: 1.125rem; margin: 0 0 1.5rem; padding-right: 1.25rem; } .form-newsletter .form__controls { width: 18.75rem; position: relative; margin-bottom: 2.31rem; } .form-newsletter .form__controls .fa { font-size: 1.5rem; color: #9c9ea2; position: absolute; right: 0.625rem; top: 0.375rem; opacity: 1; transition: opacity .4s ease, color .4s ease; } .form-newsletter .field { padding-right: 2.5rem; } .form-newsletter .field::-webkit-input-placeholder { color: #e1e2e2; } .form-newsletter .field::-moz-placeholder { color: #e1e2e2; } .form-newsletter .field:-moz-placeholder { color: #e1e2e2; } .form-newsletter .field:-ms-input-placeholder { color: #e1e2e2; } .form-newsletter .btn { padding: 0.75rem 2.94rem 0.875rem; } /* Small Desktop */ @media (max-width: 1199px) { .form-newsletter .btn { padding: 0.5rem 2.94rem 0.625rem; } .form-newsletter .form__image, .form-newsletter .form__body { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .form-newsletter .form__image { text-align: center; } .form-newsletter .form__image img { width: 70%; } .form-newsletter .form__controls { margin-bottom: 1.56rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .form-newsletter .form__image { padding-left: 20px; } .form-newsletter .form__image img { width: auto; margin-right: -30px; } } /* Mobile */ @media (max-width: 767px) { .form-newsletter form { display: block; } .form-newsletter .form__image { max-width: 100%; padding: 0 14%; margin-bottom: 2px; } .form-newsletter .form__image img { margin: 0; } .form-newsletter .form__body { max-width: 100%; padding: 0 20px; margin: 0; text-align: center; } .form-newsletter .form__label { font-size: 14px; margin: 0 0 32px; padding: 0; text-align: left; } .form-newsletter .field { height: 28px; font-size: 14px; padding: 3px 14px 4px; } .form-newsletter .form__controls { width: 100%; margin-bottom: 14px; text-align: left; } .form-newsletter .form__controls .fa { font-size: 20px; top: 4px; } .form-newsletter .btn { width: 120px; padding: 5px 22px 7px; } } /* ------------------------------------------------------------ *\ Form Send Comparison \* ------------------------------------------------------------ */ .form-send-comparison .form__head { text-align: center; margin-bottom: 5.125rem; } .form-send-comparison .form__head h3 { font-weight: 500; font-size: 2.125rem; padding-bottom: 0.875rem; margin: 0; position: relative; } .form-send-comparison .form__head h3:after { content: ''; width: 4.375rem; height: 2px; background-color: #d50032; position: absolute; left: 50%; margin-left: -2.19rem; bottom: 0; } .form-send-comparison .clone { display: inline-block; text-decoration: none; font-size: 1.125rem; padding-right: 2.125rem; position: relative; } .form-send-comparison .clone:before { content: ''; width: 0.875rem; height: 0.125rem; background-color: #444041; position: absolute; right: 0; top: 50%; margin-top: -0.125rem; } .form-send-comparison .clone:after { content: ''; width: 0.125rem; height: 0.875rem; background-color: #444041; position: absolute; right: 0.375rem; top: 50%; margin-top: -0.5rem; } .form-send-comparison .form__label { display: block; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.375rem; color: #444041; text-transform: uppercase; padding-bottom: 0.5rem; } .form-send-comparison .field, .form-send-comparison .textarea { height: 3.69rem; padding: 1.125rem 1.25rem 1.06rem; width: 100%; border: 0; border-radius: 0; background-color: #f3f3f3; font-size: 1.125rem; } .form-send-comparison .textarea { resize: none; height: 11.375rem; } .form-send-comparison .form__row-actions { text-align: right; padding: 0.9375rem 0 2.75rem; } .form-send-comparison .form__actions { text-align: center; padding-top: 2.5rem; } .form-send-comparison .form__actions .btn { min-width: 15.5rem; } /* Mobile */ @media (max-width: 767px) { .form-send-comparison .form__head { padding: 0 14%; margin-bottom: 52px; } .form-send-comparison .form__head h3 { font-size: 17px; padding-bottom: 7px; } .form-send-comparison .form__head h3:after { width: 34px; margin-left: -17px; height: 1px; } .form-send-comparison .form__label { font-size: 11px; padding-bottom: 3px; } .form-send-comparison .field, .form-send-comparison .textarea { height: auto; font-size: 14px; padding: 11px 10px; } .form-send-comparison .textarea { height: 160px; } .form-send-comparison .clone { font-size: 11px; padding-right: 20px; } .form-send-comparison .clone:before { width: 8px; right: 2px; margin-top: -1px; } .form-send-comparison .clone:after { height: 8px; right: 5px; margin-top: -4px; } .form-send-comparison .form__row-actions { padding: 7px 0 22px; } .form-send-comparison .form__actions { padding-top: 44px; } .form-send-comparison .form__actions .btn { min-width: 120px; } } /* ------------------------------------------------------------ *\ Form Indications \* ------------------------------------------------------------ */ .form-indications .form__head { margin-bottom: 1.875rem; } .form-indications .form__head h2 { font-weight: 500; font-size: 2.375rem; text-transform: uppercase; margin: 0 0 2.5rem; padding-bottom: 2.5rem; position: relative; } .form-indications .form__head h2:after { content: ''; width: 4.375rem; height: 0.13rem; background-color: #d50032; position: absolute; left: 0; bottom: 0; } .form-indications .form__head p { margin: 0; font-size: 1.125rem; } .form-indications .form__controls { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .form-indications .form__controls span { -webkit-flex: 0 0 6.875rem; -ms-flex: 0 0 6.875rem; flex: 0 0 6.875rem; text-align: right; font-size: 1.125rem; color: #b2b2b2; } .form-indications .field { height: auto; padding: 0.875rem 1.81rem; font-weight: 600; font-size: 1.125rem; text-transform: uppercase; border-color: #9c9ea2; } .form-indications .form__actions { padding-top: 1.81rem; } .form-indications .form__actions .btn { min-width: 10.625rem; } @media (max-width: 1399px) { .form-indications .form__head p br { display: none; } } /* Small Desktop */ @media (max-width: 1199px) { .form-indications .form__head h2 { font-size: 2rem; padding-bottom: 1.56rem; margin-bottom: 1.875rem; } .form-indications .form__head p { font-size: 1rem; } } /* Mobile */ @media (max-width: 767px) { .form-indications .form__head { margin-bottom: 20px; } .form-indications .form__head h2 { font-size: 22.5px; padding-bottom: 10px; margin-bottom: 15px; } .form-indications .form__head h2:after { width: 34px; height: 1px; } .form-indications .form__head p { font-size: 14px; } .form-indications .field { font-size: 14px; padding: 5px 15px; } .form-indications .form__actions { padding-top: 20px; } .form-indications .form__actions .btn { min-width: 0; } } /* ------------------------------------------------------------ *\ Gamme \* ------------------------------------------------------------ */ .gamme { position: relative; padding: 4.875rem 0 2.375rem; } .gamme h3 { font-weight: 500; font-size: 1.75rem; text-transform: uppercase; margin: 0; position: relative; z-index: 10; } .gamme__icon { position: relative; margin-bottom: 3rem; } .gamme__icon span { width: 100%; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 2.375rem; color: #444041; text-transform: uppercase; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -0.81rem; } .gamme__overlay { width: 100%; background-color: rgba(242, 242, 242, .9); position: absolute; left: 0; top: -1px; bottom: -1px; z-index: 5; opacity: 0; transition: opacity .4s ease; } .gamme__overlay ul { list-style: none; margin: 0; padding: 2.69rem 0.625rem 0; } .gamme__overlay ul li { font-size: 1.125rem; } .gamme__overlay ul li ~ li { margin-top: 0.56rem; } .gamme:hover .gamme__overlay { opacity: 1; } /* Gamme Alt */ .gamme--alt { padding: 15.94rem 0 0.375rem; position: static; } .gamme--alt h3 { padding: 0 1.875rem; } .gamme--alt .gamme__icon { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 15.625rem; margin: 0; position: absolute; left: 0; top: 0; padding-top: 1.875rem; } @media (max-width: 1399px) { .gamme--alt .gamme__icon img { -webkit-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); } } /* Mobile */ @media (max-width: 767px) { .gamme { padding: 0; } .gamme h3 { font-size: 15px; } .gamme__icon { margin-bottom: 15px; } .gamme__icon span { font-size: 15px; margin-top: -5px; } .gamme:not(.gamme--alt) .gamme__icon img { width: 70px; height: 52px; } .gamme__overlay { background-color: rgba(255, 255, 255, .9); z-index: 11; } .gamme__overlay ul { padding: 0; } .gamme__overlay ul li { font-size: 7px; } .gamme--alt { height: 124px; padding-top: 85px; } .gamme--alt h3 { padding: 0 10px; } .gamme--alt .gamme__icon { height: 100px; display: block; padding-top: 0; } .gamme--alt .gamme__icon img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(.3); -ms-transform: translate(-50%, -50%) scale(.3); transform: translate(-50%, -50%) scale(.3);} } /* ------------------------------------------------------------ *\ Grid Item \* ------------------------------------------------------------ */ .grid-item { float: left; position: relative; margin-bottom: 0.375rem; } .grid-item__bg { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; left: 0; top: 0; z-index: 1; } .grid-item__content { width: 100%; padding: 0 2.5rem 0 4.06rem; position: absolute; z-index: 10; } .grid-item__content h5 { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 1.125rem; color: #d50032; text-transform: uppercase; margin: 0 0 1.875rem; } .grid-item__content h2 { font-weight: 500; color: #444041; text-transform: uppercase; margin: 0 0 1.06rem; } .grid-item__content p { font-size: 1.125rem; color: #444041; margin: 0; } .grid-item__content p a { color: #d50032; text-decoration: none; } .grid-item__content p + .btn { margin-top: 2.19rem; } .grid-item__content .btn + img { display: block; margin-top: 2.5rem; width: auto; max-width: none; } .grid-item__content .btn + img.pull-up { margin-top: -1.75rem; } /* Grid Item Modifiers */ .grid-item--size1 { width: 33.3333%; } .grid-item--size2 { width: 50%; } .grid-item--size3 { width: 100%; } .grid-item--grey { background-color: #f1f1f2; } .grid-item--vertical-center .grid-item__content { left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .grid-item--vertical-bottom .grid-item__content { left: 0; bottom: 0; padding: 0 4.06rem; } .grid-item--horizontal-center .grid-item__content { text-align: center; } .grid-item--horizontal-left .grid-item__content { text-align: left; } .grid-item--horizontal-right .grid-item__content { text-align: right; } .grid-item--white .grid-item__content h2, .grid-item--white .grid-item__content h5, .grid-item--white .grid-item__content p { color: #fff; } .grid-item--large .grid-item__bg { width: 50%; left: auto; right: 0; } .grid-item--large .grid-item__content { width: 50%; } @media (max-width: 1899px) { .grid-item__content { padding: 0 1.875rem; } .grid-item__content .btn + img { max-width: 100%; } .grid-item__content .btn + img.pull-up { margin-top: -1.125rem; } } @media (max-width: 1399px) { .grid-item__content { padding: 0 1.25rem; } .grid-item__content h2 br { display: none; } .grid-item__content .btn + img.pull-up { margin-top: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .grid-item--size1 { width: 50%; } .grid-item--size1 + .grid-item--size1 + .grid-item--size1 { width: 100%; } .grid-item--size1 + .grid-item--size1 + .grid-item--size1 .grid-item__content { width: 50%; } .grid-item--size1 + .grid-item--size1 + .grid-item--size1 .grid-item__bg { background-position: right top; } .grid-item__content h5 { font-size: 0.875rem; margin: 0 0 0.94rem; } .grid-item__content h2 { font-size: 1.56rem; margin: 0 0 0.625rem; } .grid-item__content p { font-size: 0.875rem; margin: 0 0 0.94rem; } .grid-item__content p + .btn { margin-top: 0; } .grid-item__content .btn + img { margin-top: 2.06rem; max-width: 90%; margin-left: auto; margin-right: auto; } .grid-item__content .btn + img.pull-up { margin-top: 2.06rem; } .grid-item--vertical-center .grid-item__content { padding: 0 5rem 0 6.56rem; } .grid-item--vertical-bottom .grid-item__content { padding: 0 6.25rem; } .grid-item--right-bottom .grid-item__bg { background-size: auto auto; background-position: right bottom !important; } } /* Tablet Portrait */ @media (max-width: 1024px) { .grid-item--vertical-center .grid-item__content { padding: 0 30px 0 40px; } .grid-item--vertical-bottom .grid-item__content { padding: 0 30px; } } /* Mobile */ @media (max-width: 767px) { .grid-item--size1, .grid-item--size2 { width: 100%; } .grid-item__content { text-align: center; } .grid-item__content h2, .grid-item__content h5, .grid-item__content p { text-align: left; } .grid-item__content h2 { font-size: 20px; } .grid-item__content h5 { font-size: 11px; } .grid-item__content .btn + img { display: inline-block; } .grid-item--vertical-bottom .grid-item__content { padding: 0 40px; } .grid-item--horizontal-center .grid-item__content h2, .grid-item--horizontal-center .grid-item__content h5 { text-align: center; } .grid-item--horizontal-right .grid-item__content h2, .grid-item--horizontal-right .grid-item__content h5 { text-align: right; } .grid-item--horizontal-left .grid-item__content h2, .grid-item--horizontal-left .grid-item__content h5 { text-align: left; } .grid-item--size1 + .grid-item--size1 + .grid-item--size1 .grid-item__content { width: 100%; } .grid-item--right-bottom .grid-item__bg { background-size: auto 250px; } .grid-item--large .grid-item__content { width: 100%; } .grid-item--large .grid-item__bg { display: none; } } /* ------------------------------------------------------------ *\ Grid Banners \* ------------------------------------------------------------ */ .grid-banners { overflow: hidden; } .grid-banners .grid-item { height: 35.125rem; } /* Small Desktop */ @media (max-width: 1199px) { .grid-banners .grid-item { height: 20.94rem; } } /* Mobile */ @media (max-width: 767px) { .grid-banners { margin: 0 -20px; } .grid-banners .grid-item { height: 350px; min-height: 285px; padding-top: 20px; } } /* Mobile */ @media (max-width: 374px) { .grid-banners .grid-item { height: 320px; } } /* ------------------------------------------------------------ *\ Grid Mag \* ------------------------------------------------------------ */ .grid-mag__item { width: calc(33.3333% - 23.3333px); background-color: #f1f1f2; position: relative; margin-bottom: 2.125rem; } .grid-mag__item .label { background-color: #d50032; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; color: #fff; text-transform: uppercase; padding: 0.375rem 0.94rem 0.25rem; position: absolute; left: 2.19rem; top: -0.25rem; z-index: 5; } .grid-mag__item .label--dark { background-color: #444041; } .grid-mag__item-image img { width: 100%; height: auto; } .grid-mag__item-content { padding: 1.875rem 2.19rem 2.19rem; } .grid-mag__item-content h4 { font-weight: 500; font-size: 1.75rem; color: #444041; text-transform: uppercase; margin: 0 0 0.31rem; } .grid-mag__item-content p { font-size: 1rem; letter-spacing: 0; margin: 0 0 2.44rem; } .grid-mag__item-actions { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .grid-mag__item-actions .btn { font-weight: 400; } .grid-mag__item-actions .meta { display: inline-block; position: relative; font-size: 0.875rem; padding-bottom: 0.625rem; } .grid-mag__item-actions .meta:after { content: ''; width: 1.25rem; height: 2px; background-color: #d50032; position: absolute; left: 0; bottom: 0; } .grid-mag__item.large { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #444041; color: #fff; letter-spacing: 0; } .grid-mag__item.large .grid-mag__item-content, .grid-mag__item.large .grid-mag__item-image { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .grid-mag__item.large .grid-mag__item-content { margin-top: 4%; padding-right: 4.25rem; } .grid-mag__item.large .grid-mag__item-content h2 { width: 70%; font-weight: 500; font-size: 3.125rem; margin: 0 0 0.94rem; } .grid-mag__item.large .grid-mag__item-content p { font-size: 1.375rem; line-height: 1.65; margin-bottom: 6.25rem; } .grid-mag__item.large .grid-mag__item-actions .btn { box-shadow: inset 0 0 0 1px #fff; } .grid-mag__item.large .grid-mag__item-actions .meta { font-size: 1.125rem; } @media (max-width: 1899px) { .grid-mag__item.large .grid-mag__item-content { margin-top: 0; } .grid-mag__item.large .grid-mag__item-content h2 { width: 100%; } .grid-mag__item.large .grid-mag__item-content p { margin-bottom: 2.5rem; } } @media (max-width: 1399px) { .grid-mag__item.large .grid-mag__item-image { overflow: hidden; } .grid-mag__item.large .grid-mag__item-image img { height: 100%; width: auto; max-width: none; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .grid-mag__item.large .grid-mag__item-content { padding: 3.125rem 2.19rem; } .grid-mag__item.large .grid-mag__item-content h2 { font-size: 2.5rem; } .grid-mag__item.large .grid-mag__item-content p { font-size: 1.25rem; margin-bottom: 1.875rem; } } /* Small Desktop */ @media (max-width: 1199px) { .grid-mag__item-content { padding: 1.56rem; } .grid-mag__item-content h4 { font-size: 1.5rem; } .grid-mag__item-actions .btn { padding-left: 0.94rem; padding-right: 0.94rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .grid-mag__item { width: calc(50% - 17.5px); } .grid-mag__item.large { display: block; } .grid-mag__item.large .grid-mag__item-content, .grid-mag__item.large .grid-mag__item-image { max-width: 100%; } .grid-mag__item.large .grid-mag__item-image img { width: 100%; max-width: 100%; height: auto; } } /* Mobile */ @media (max-width: 767px) { .grid-mag__item { width: 100%; margin-bottom: 20px; } .grid-mag__item .label { font-size: 14px; left: 20px; padding: 3px 5px 1px; } .grid-mag__item-content { padding: 17px 15px 20px 20px; } .grid-mag__item-content h4 { font-size: 17.5px; } .grid-mag__item-content p { font-size: 14px; margin-bottom: 25px; } .grid-mag__item-image { height: 180px; overflow: hidden; position: relative; } .grid-mag__item-image img { width: auto; height: auto; min-width: 100%; min-height: 180px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .grid-mag__item.large .grid-mag__item-content { padding: 32px 20px 17px; } .grid-mag__item.large .grid-mag__item-content h2 { font-size: 22.5px; margin-bottom: 3px; } .grid-mag__item.large .grid-mag__item-content p { font-size: 14px; margin-bottom: 25px; line-height: 1.3; } .grid-mag__item.large .grid-mag__item-actions .meta { font-size: 14px; } .grid-mag__item.large .grid-mag__item-image img { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /* ------------------------------------------------------------ *\ Ico \* ------------------------------------------------------------ */ .ico-informatique-alt, .ico-informatique-alt-black { width: 6.19rem; height: 5.5rem; } .ico-electricite, .ico-electricite-black { width: 5.19rem; height: 5.75rem; } .ico-eclairage, .ico-eclairage-black { width: 5.625rem; height: 5.625rem; } .ico-securite, .ico-securite-black { width: 4.81rem; height: 5.06rem; } .ico-domotique, .ico-domotique-black { width: 5.69rem; height: 5.44rem; } .ico-print { width: 2.19rem; height: 2.124rem; } .ico-grid-view { width: 2.125rem; height: 2.125rem; } .ico-list-view { width: 2.625rem; height: 1.81rem; } .ico-view-dark, .ico-view-white { width: 2.875rem; height: 1.69rem; } .ico-tv-dark, .ico-tv-white { width: 2.875rem; height: 2.375rem; } .ico-play { width: 7.5rem; height: 7.5rem; } .ico-download { width: 1.31rem; height: 1.375rem; } .ico-resize { width: 1rem; height: 1.06rem; } .ico-external { width: 1.56rem; height: 1.5rem; } .ico-globe-white, .ico-globe-black { width: 1.375rem; height: 1.375rem; } .ico-play-small { width: 3.75rem; height: 3.75rem; } .ico-home { width: 1.31rem; height: 1.125rem; } .ico-television-white { width: 2.625rem !important; height: 2.19rem !important; } .ico-audio-white { width: 2.69rem !important; height: 2.31rem !important; } .ico-informatique-white { width: 2.69rem !important; height: 2.375rem !important; } .ico-telephonie-white { width: 2.56rem !important; height: 2.31rem !important; } .ico-connectes-white { width: 2.31rem !important; height: 2.31rem !important; } .ico-maison-white { width: 2.31rem !important; height: 2.31rem !important; } .ico-electromenager-white { width: 1.875rem !important; height: 2.19rem !important; } .ico-sante-white { width: 2.625rem !important; height: 2.31rem !important; } .ico-espace-white { width: 2.19rem !important; height: 2rem !important; } .ico-televiseurs-black { width: 2.75rem; height: 1.75rem; } .ico-accesoires-black { width: 2.5rem; height: 1.75rem; } .ico-television-large { width: 6.69rem; height: 5.625rem; } .ico-audio-large { width: 6.56rem; height: 5.75rem; } .ico-informatique-large { width: 6.19rem; height: 5.5rem; } .ico-connectes-large { width: 5.25rem; height: 5.19rem; } .ico-espace-large { width: 5.06rem; height: 4.56rem; } .ico-download { width: 1.31rem !important; height: 1.375rem !important; } /* ------------------------------------------------------------ *\ Lang \* ------------------------------------------------------------ */ .lang { transition: opacity .4s ease; } .lang:hover { opacity: .75; } .lang__btn { display: block; text-decoration: none; } .lang i, .lang__text { display: inline-block; vertical-align: middle; } .lang i { margin-right: 1.25rem; } .lang__text { font-size: 0.875rem; color: #444041; text-transform: uppercase; } .lang__text em { font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-style: italic; font-size: 1.25rem; text-transform: none; } .lang__text span { margin: 0 3px; } /* Lang White */ .lang--white .lang__text { color: #fff; } /* Small Desktop */ @media (max-width: 1199px) { .lang .ico-globe-white { width: 2.31rem; height: 2.31rem; background-image: url(../../images/default/sprite.@2x.png); background-position: 43.45864661654135% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .lang__text span { margin: 0 10px; } .lang__text, .lang__text em { font-size: 25px; } } /* Mobile */ @media (max-width: 767px) { .lang .ico-globe-white { width: 28px; height: 28px; margin-right: 10px; } .lang__text { font-size: 18px; } .lang__text span { font-size: 25px; margin: 0 11px; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; margin: 0; padding: 0; } /* ------------------------------------------------------------ *\ List Lang \* ------------------------------------------------------------ */ .list-lang { font-size: 0; } .list-lang li { max-height: 1.5rem; display: inline-block; vertical-align: middle; } .list-lang li ~ li { margin-left: 1.56rem; padding-left: 1.56rem; border-left: 1px solid #444041; } .list-lang a { display: block; transition: opacity .4s ease; } .list-lang a:hover { opacity: .75; } /* ------------------------------------------------------------ *\ List Utilities \* ------------------------------------------------------------ */ .list-utilities { font-size: 0; } .list-utilities > li { max-height: 1.5rem; display: inline-block; vertical-align: middle; } .list-utilities > li ~ li { margin-left: 1.4375rem; padding-left: 1.56rem; border-left: 1px solid #444041; } .list-utilities > li > a { display: block; text-decoration: none; color: #444041; transition: color .4s ease; } .list-utilities > li > a:hover { color: rgb(92, 101, 109); } .list-utilities > li > a > .fa { font-size: 1.5rem; line-height: 1.5rem; } /* Small Desktop */ @media (max-width: 1199px) { .list-utilities > li { display: none; } .list-utilities > li:first-child { display: block; } } /* ------------------------------------------------------------ *\ List Cards Press \* ------------------------------------------------------------ */ .list-cards-press { margin: 0 0 0 -2.19rem; padding: 0; overflow: hidden; } .list-cards-press li { float: left; width: 50%; padding-left: 2.19rem; margin-bottom: 2.19rem; } .list-cards-press li a { display: block; text-decoration: none; } /* Tablet Portrait */ @media (max-width: 1024px) { .list-cards-press li { width: 100%; margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ List Contact \* ------------------------------------------------------------ */ .list-contact { overflow: hidden; } .list-contact__item { float: left; } .list-contact__item ~ li { margin-left: 6.69rem; } .list-contact__sublist { list-style: none; margin: 0; padding: 0 0 0 3.44rem; position: relative; } .list-contact__sublist li { padding-bottom: 1.44rem; position: relative; } .list-contact__sublist li:after { content: ''; width: 1.5rem; height: 1px; background-color: #444041; position: absolute; left: 0; bottom: 0.56rem; } .list-contact__sublist li:first-child, .list-contact__sublist li:last-child { padding-bottom: 0; position: static; } .list-contact__sublist li:first-child:after, .list-contact__sublist li:last-child:after { display: none; } .list-contact__sublist li:first-child { margin-bottom: 1.25rem; } .list-contact__sublist h3 { font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.875rem; text-transform: uppercase; } .list-contact__sublist h3 img { width: 1.94rem; height: 1.375rem; position: absolute; left: 0; top: 0.5rem; } .list-contact__sublist p, .list-contact__sublist a { display: block; text-decoration: none; letter-spacing: 0; font-size: 1.25rem; } .list-contact__sublist a { cursor: pointer; transition: opacity .4s ease; } .list-contact__sublist a:hover { opacity: .5; } /* Small Desktop */ @media (max-width: 1199px) { .list-contact__item ~ li { margin-left: 3.125rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .list-contact__item { width: 50%; } .list-contact__item ~ li { margin-left: 0; } .list-contact__sublist h3 { font-size: 24px; } .list-contact__sublist h3 img { top: 4px; } .list-contact__sublist p, .list-contact__sublist a { font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .list-contact__item { width: 100%; } .list-contact__item ~ li { margin-top: 40px; } .list-contact__sublist li:first-child { margin-bottom: 15px; } .list-contact__sublist h3 { display: inline-block; font-size: 18px; position: relative; padding-left: 45px; } .list-contact__sublist h3 img { top: -1px; left: 0; } .list-contact__sublist p, .list-contact__sublist a { font-size: 14px; } .list-contact__sublist { padding: 0; text-align: center; } .list-contact__sublist li:after { left: 50%; margin-left: -12px; } } /* ------------------------------------------------------------ *\ List Numbers \* ------------------------------------------------------------ */ .list-numbers { counter-reset: list-numbers; margin-top: 2.125rem; } .list-numbers > li ~ li { margin-top: 1.875rem; } .list-numbers > li > :first-child:before { content: counter(list-numbers) '-'; display: inline-block; font-size: 1.5rem; counter-increment: list-numbers; margin-right: 0.19rem; } .list-numbers p { margin: 0; line-height: 1.2; } /* List Numbers Alt */ .list-numbers--alt { counter-reset: list-numbers-alt; } .list-numbers--alt li { font-size: 1.5rem; } .list-numbers--alt li:before { content: '(' counter(list-numbers-alt) ')'; display: inline-block; font-size: 1.5rem; counter-increment: list-numbers-alt; margin-right: 0.375rem; } /* Small Desktop */ @media (max-width: 1199px) { .list-numbers--alt li { font-size: 1.125rem; } } /* Mobile */ @media (max-width: 767px) { .list-numbers { margin-top: 17px; } .list-numbers > li ~ li { margin-top: 17px; } .list-numbers p, .list-numbers--alt li { font-size: 12px; } .list-numbers > li > :first-child:before, .list-numbers--alt li:before { font-size: 12px; } } /* ------------------------------------------------------------ *\ List Disc \* ------------------------------------------------------------ */ .list-disc li { font-size: 1.5rem; } .list-disc li:before { content: ''; width: 0.31rem; height: 0.31rem; display: inline-block; vertical-align: middle; background-color: #444041; border-radius: 0.625rem; margin-right: 0.31rem; } /* Small Desktop */ @media (max-width: 1199px) { .list-disc li { font-size: 1.125rem; } } /* Mobile */ @media (max-width: 767px) { .list-disc li { font-size: 12px; } .list-disc li:before { width: 3px; height: 3px; position: relative; top: -1px; } } /* ------------------------------------------------------------ *\ List Letters \* ------------------------------------------------------------ */ .list-letters li { font-size: 1.5rem; } /* Small Desktop */ @media (max-width: 1199px) { .list-letters li { font-size: 1.125rem; } } /* Mobile */ @media (max-width: 767px) { .list-letters li { font-size: 12px; } } /* ------------------------------------------------------------ *\ List Promos \* ------------------------------------------------------------ */ .list-promos li ~ li { margin-top: 4rem; } /* Mobile */ @media (max-width: 767px) { .list-promos li ~ li { margin-top: 30px; } } /* ------------------------------------------------------------ *\ List Features \* ------------------------------------------------------------ */ .list-features { margin: 0 0 2.5rem; padding: 0 0 3.56rem; font-size: 0; position: relative; } .list-features:after { content: ''; width: 4.375rem; height: 0.13rem; background-color: #d50032; position: absolute; left: 50%; margin-left: -2.19rem; bottom: 0; } .list-features li { display: inline-block; vertical-align: middle; margin: 0 2.125rem; position: relative; } .list-features li p { width: 23.75rem; margin: 0; font-size: 1rem; background-color: #fff; text-align: left; padding: 0.625rem 1.25rem; position: absolute; left: 50%; margin-left: -11.875rem; bottom: 100%; margin-bottom: 2rem; z-index: 10; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; box-shadow: 0 0 0.5rem rgba(0,0,0, .2); } .list-features li p:after { content: ''; width: 0.75rem; height: 0.75rem; background-color: #fff; box-shadow: 0.13rem 0.13rem 0.19rem rgba(0,0,0,.1); position: absolute; left: 50%; margin-left: -0.75rem; top: 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.42rem; } .list-features li p.close, .list-features li:hover p.close { opacity: 0; visibility: hidden; } @media(min-width: 768px) { .list-features li:hover p { opacity: 1; visibility: visible; } } /* Small Desktop */ @media (max-width: 1199px) { .list-features li p { font-size: 1.15rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .list-features li { width: 50%; margin: 0; padding: 0 25px; } .list-features li p { width: 200px; font-size: 14px; margin-left: -100px; } } /* Mobile */ @media (max-width: 767px) { .list-features { margin-bottom: 27px; padding: 0 0 48px; } .list-features:after { width: 24px; height: 1px; margin-left: -12px; } .list-features li { width: 100%; padding: 34px 10px 0; text-align: center; } .list-features li p { opacity: 0; visibility: hidden; } .list-features .owl-item img { display: inline-block; width: auto; max-width: 100%; height: 36px; } .list-features li:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 12px 12px 0 12px; border-color: #f4f4f4 transparent transparent transparent; position: absolute; left: 50%; margin-left: -12px; top: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .list-features li.active:after { opacity: 1; visibility: visible; } .list-features .owl-prev, .list-features .owl-next { font-size: 0; width: 20px; height: 20px; border: 2px solid #444041; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: -16px; } .list-features .owl-prev { left: 5px; border-top: 0; border-right: 0; } .list-features .owl-next { right: 5px; border-left: 0; border-bottom: 0; } } /* ------------------------------------------------------------ *\ List Logos \* ------------------------------------------------------------ */ .list-logos { text-align: center; margin: 0; padding: 0; font-size: 0; } .list-logos li { width: 25%; display: inline-block; vertical-align: middle; } .list-logos li img { width: auto; max-height: 6.25rem; } .list-logos--alt li { vertical-align: bottom; } .list-logos--alt a { display: block; font-size: 1.125rem; } .list-logos--alt .image { height: 7.5rem; } /* Mobile */ @media (max-width: 767px) { .list-logos li { width: 50%; margin-bottom: 35px; } .list-logos li > img { max-height: 70px; width: auto; } .list-logos li:nth-child(odd) { clear: left; } .list-logos--alt a { font-size: 14px; } .list-logos--alt li { margin-bottom: 29px; } .list-logos--alt .image { height: auto; margin-bottom: 10px; } .list-logos--alt .image img { max-height: 70px; width: auto; } } /* ------------------------------------------------------------ *\ List Gammes \* ------------------------------------------------------------ */ .list-gammes { margin: 0; padding: 0; font-size: 0; text-align: center; } .list-gammes > li { display: inline-block; vertical-align: top; width: 20%; position: relative; } .list-gammes > li > a { display: block; text-decoration: none; } .list-gammes > li ~ li:before { content: ''; width: 1px; height: 100%; background-color: #aaadb0; position: absolute; left: 0; top: 0; z-index: -1; transition: opacity .4s ease; } .list-gammes > li:hover:before, .list-gammes > li:hover + li:before { opacity: 0; } /* List Gammes Flex */ .list-gammes--flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 0 5.5%; position: relative; } .list-gammes--flex:before { content: ''; width: 1px; height: 100%; background-color: #fff; position: absolute; right: 0; top: 0; z-index: 5; } .list-gammes--flex:after { content: ''; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; bottom: 0; z-index: 5; } .list-gammes--flex > li { -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } .list-gammes--flex > li { border-bottom: 1px solid #aaadb0; } .list-gammes--flex > li:last-child:after { content: ''; width: 1px; height: 100%; background-color: #aaadb0; position: absolute; left: 100%; top: 0; } @media (min-width: 1200px) { .list-gammes--flex > li:nth-child(5n+1):before { display: none; } } @media (min-width: 1024px) and (max-width: 1199px) { .list-gammes--flex > li:nth-child(4n+1):before { display: none; } } @media (min-width: 320px) and (max-width: 1023px) { .list-gammes--flex > li:nth-child(3n+1):before { display: none; } .list-gammes--flex > li:last-child:after { margin-left: -1px; } } /* List Gammes Left Aligned */ .list-gammes--left-aligned { text-align: left; } .list-gammes--left-aligned .gamme { text-align: center; } /* Small Desktop */ @media (max-width: 1199px) { .list-gammes > li { width: 25%; } .list-gammes--flex { padding: 0; } .list-gammes--flex > li { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .list-gammes > li { width: 33.3333%; } .list-gammes--flex > li { -webkit-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; } } /* Mobile */ @media (max-width: 767px) { .list-gammes > li:hover:before, .list-gammes > li:hover + li:before { opacity: 1; z-index: 12; } } /* ------------------------------------------------------------ *\ List Categories \* ------------------------------------------------------------ */ .list-categories { display: -webkit-flex; display: -ms-flexbox; display: flex; } .list-categories li { -webkit-flex: 0 0 11.11%; -ms-flex: 0 0 11.11%; flex: 0 0 11.11%; background-color: #f4f4f6; transition: background-color .4s ease; } .list-categories li ~ li { border-left: 1px solid #acacae; } .list-categories a { display: block; height: 7.19rem; text-decoration: none; position: relative; font-weight: 600; font-size: 0.875rem; color: #444041; text-transform: uppercase; text-align: center; padding: 4.875rem 0.625rem 0; transition: color .4s ease; } .list-categories a .icon { position: absolute; left: 50%; top: 2.69rem; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .list-categories a .icon i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity .4s ease; } .list-categories a .icon span { font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 0.94rem; color: #444041; position: relative; top: -2px; transition: color .4s ease; } .list-categories a .icon .hover { opacity: 0; } .list-categories .active, .list-categories li:hover { background-color: #444041; } .list-categories .active a, .list-categories a:hover, .list-categories .active a .icon span, .list-categories a:hover .icon span { color: #fff; } .list-categories .active a .icon .hover, .list-categories a:hover .icon .hover { opacity: 1; } .list-categories .active a .icon .normal, .list-categories a:hover .icon .normal { opacity: 0; } /* Small Desktop */ @media (max-width: 1199px) { .list-categories a { font-size: 0.75rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .list-categories { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .list-categories li { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } .list-categories li:first-child { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } .list-categories li:nth-child(2), /* WARNING Modification Equinoa à conserver. Voir style-equinoa.css */ /*.list-categories li:nth-child(5n+1) { border-left: 0; }*/ .list-categories li:nth-child(n+6) { border-top: 1px solid #acacae; } } /* Mobile */ @media (max-width: 767px) { .list-categories li:first-child { border-bottom: 1px solid #acacae; } .list-categories li:first-child a { height: 40px; padding: 0; font-size: 10px; padding-top: 12px; } .list-categories li:first-child a .icon { width: 24px; height: 14px; position: relative; display: inline-block; vertical-align: middle; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); left: auto; top: -2px; margin-right: 10px; } .list-categories li:first-child a .icon i { width: 100%; height: 100%; } .list-categories li ~ li a { height: 60px; padding: 40px 5px 0; font-size: 9px; } .list-categories li ~ li a .icon { width: 23px; height: 17px; top: 20px; } .list-categories li ~ li a .icon i { width: 100%; height: 100%; } .list-categories li ~ li a .icon span { font-size: 8px; top: 0; } } /* Mobile */ @media (max-width: 374px) { .list-categories li ~ li a { padding: 35px 5px 0; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { display: inline-block; position: relative; z-index: 9; } .logo--header { width: 30rem; height: 10.44rem; } .logo--footer { display: inline-block; margin-bottom: 3.56rem; } /* Small Desktop */ @media (max-width: 1199px) { .logo--header { width: auto; height: auto; } .logo--header img { width: 210px; height: auto; } } /* Mobile */ @media (max-width: 767px) { .logo--header img { width: 168px; } } /* ------------------------------------------------------------ *\ Media \* ------------------------------------------------------------ */ .media { display: block; position: relative; max-width: calc(100% - 3.56rem); } .media a { display: block; text-decoration: none; } .media a i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; } .media__meta { width: 3.56rem; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; color: #444041; text-transform: uppercase; border-bottom: 1px solid #444041; position: absolute; bottom: 0; } .media--left .media__meta { text-align: left; right: 100%; } .media--right .media__meta { text-align: right; left: 100%; } /* Mobile */ @media (max-width: 767px) { .media a i.ico-play-small { width: 55px; height: 55px; } } /* ------------------------------------------------------------ *\ Mega Menu \* ------------------------------------------------------------ */ .mega-menu { height: 100%; position: absolute; left: 100%; top: 0; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } /*.mega-menu .col ~ .col .category:before { content: ''; width: 1px; height: 7.75rem; background-color: #444041; position: absolute; left: 0; top: 50%; margin-top: -3.875rem; }*/ .mega-menu__aside { text-align: center; padding: 2.56rem 4.06rem 1.875rem; } .mega-menu__aside h3 { font-weight: 700; font-size: 2.125rem; text-transform: uppercase; margin: 2.125rem 0 3rem; letter-spacing: .03em; } .mega-menu__aside p { text-align: left; font-size: 1rem; line-height: 1.5; margin: 0 -1.25rem 0 0; } .mega-menu__aside p ~ p { margin-top: 1.5rem; } .mega-menu__aside .btn { height: auto; padding: 1.9375rem 1.25rem; position: absolute; left: 4rem; right: 4rem; bottom: 4.81rem; font-size: 1.125rem; border-radius: 3.75rem; } @media (min-width: 1200px) and (max-width: 1449px) { .mega-menu { width: 958px; overflow-y: auto; overflow-x: hidden; } .mega-menu .cols--flex, .mega-menu--large .cols--flex { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .mega-menu:not(.mega-menu--large) .col--size1, .mega-menu:not(.mega-menu--large) .col--size2 { -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } .mega-menu:not(.mega-menu--large) .col--size2 { max-width: 33.33%; } .mega-menu .cols--flex { height: auto; min-height: 100%; } .mega-menu .col--size1 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; padding-bottom: 1.25rem; } .mega-menu .col--size2 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .mega-menu__aside { padding: 2rem 2rem 1.8rem; } .mega-menu__aside h3 { margin-bottom: 2rem; } .mega-menu--large .mega-menu__aside .btn { position: relative; width: 50%; left: auto; right: auto; bottom: auto; margin-top: 1.875rem; } } @media (min-width: 1450px) and (max-width: 1749px) { .mega-menu { width: 1145px; overflow-y: auto; overflow-x: hidden; } .mega-menu:not(.mega-menu--large) .col--size1, .mega-menu:not(.mega-menu--large) .col--size2 { -webkit-flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } .mega-menu:not(.mega-menu--large) .col--size2 { max-width: 33.33%; } .mega-menu--large .cols--flex { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .mega-menu .cols--flex { height: auto; min-height: 100%; } .mega-menu .col--size1 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; padding-bottom: 1.25rem; } .mega-menu .col--size2 { -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .mega-menu .mega-menu__aside { padding: 2rem 2rem 1.8rem; } .mega-menu .mega-menu__aside h3 { margin-bottom: 2rem; font-size: 2rem; } .mega-menu--large .mega-menu__aside .btn { position: relative; width: 50%; left: auto; right: auto; bottom: auto; margin-top: 1.875rem; } } /* Mega Menu with Title */ .mega-menu--titled .col--size1 { padding-top: 6.875rem; } .mega-menu--titled > h2 { width: 60rem; position: absolute; left: 0; top: 2.5rem; } /* Mega Menu Black */ .mega-menu--black .col--size1 { background-color: #232c32; } /* Small Desktop */ @media (max-width: 1199px) { .mega-menu { width: 100vw; height: 0; position: relative; left: 0; margin-left: -1px; opacity: 1; visibility: visible; overflow: hidden; } .mega-menu .cols { display: block; } .mega-menu .col ~ .col .category:first-child { border-top: 1px solid #a9adb0; } .mega-menu .col--size1 { float: none; width: 100%; padding: 0 1.25rem; } .mega-menu .col--size2 { display: none; } .mega-menu .default-title { display: none; } .mega-menu--black .col--size1 { background-color: #fff; } } /* Mobile */ @media (max-width: 767px) { .mega-menu { z-index: 9; } } /* ------------------------------------------------------------ *\ Modal \* ------------------------------------------------------------ */ .modal, .modal-overlay { top: 0; right: 0; bottom: 0; left: 0; } .modal { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; opacity: 0; visibility: hidden; position: fixed; transition: opacity .4s ease-in-out, visibility .4s ease-in-out; will-change: opacity, visibility; z-index: 999; } .modal-close { font-size: 30px; position: absolute; top: 0; right: .75rem; cursor: pointer; } .modal-overlay { position: absolute; z-index: 998; background-color: rgba(0,0,0,.5); } .modal-container { position: relative; z-index: 999; background-color: #fff; } .modal.is-visible { opacity: 1; visibility: visible; } /* ------------------------------------------------------------ *\ Modal Lang \* ------------------------------------------------------------ */ .modal-lang .modal-container { -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; max-width: 68.75rem; margin: 0 auto; background: #fff url(../css/../../images/default/modal-lang-bg.jpg) no-repeat center; background-size: cover; padding: 3.4375rem 5rem 3.56rem; } .modal-lang button.mfp-close { width: 16px; height: 16px; opacity: 1; color: #444041; font-size: 0; line-height: 1; right: 1.9375rem; top: 1.625rem; } .modal-lang button.mfp-close:before, .modal-lang button.mfp-close:after { content: ''; width: 1.5rem; height: 2px; background-color: #444041; position: absolute; top: 1px; } .modal-lang button.mfp-close:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); left: 0; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } .modal-lang button.mfp-close:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); right: 0; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; } .modal-lang .cols { margin-left: -1.25rem; margin-right: -1.875rem; } .modal-lang .col { width: 15.19rem; padding-left: 1.25rem; padding-right: 1.25rem; } .modal-lang .modal__head { text-align: center; margin-bottom: 3.6875rem; } .modal-lang .modal__head h2 { font-size: 2.125rem; color: #444041; letter-spacing: .03em; padding-bottom: 0.875rem; } .modal-lang h5 { font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.25rem; color: #444041; text-transform: uppercase; margin: 0 0 0.5rem; border-bottom: 1px solid #444041; } .modal-lang h5 ~ h5:not(:empty) { margin-top: 2.375rem; } .modal-lang h5:empty { min-height: 1.56rem; border: 0; } .modal-lang ul { list-style: none; margin: 0; padding: 0 0 0 1.25rem; } .modal-lang ul a { display: block; text-decoration: none; font-size: 1rem; color: #444041; transition: opacity .4s ease; padding-left: 1.625rem; position: relative; } .modal-lang ul a:hover { opacity: .5; } .modal-lang ul li ~ li { margin-top: 0.6875rem; } .modal-lang ul img { width: 1rem; height: 0.69rem; position: absolute; left: 0; top: 0.31rem; } @media (max-height: 726px) { .modal-lang { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-lang .modal-overlay { position: fixed; } } /* Small Desktop */ @media (max-width: 1199px) { .modal-lang .modal-container { padding: 3.44rem 1.875rem 3.56rem; } } /* Mobile */ @media (max-width: 767px) { .modal-lang { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-lang .modal-container { padding: 40px 20px 30px; } .modal-lang h5 { font-size: 16px; } .modal-lang ul { padding: 0; } .modal-lang button.mfp-close { right: 15px; top: 10px; } .modal-lang .modal__head { margin-bottom: 30px; } .modal-lang .modal__head h2 { font-size: 20px; } .modal-lang .cols { margin-left: -20px; margin-right: -20px; } .modal-lang .col--1of4 { width: 50%; } .modal-lang .col--1of4:nth-child(odd) { clear: left; } .modal-lang .col--1of4:nth-child(n+3) { margin-top: 30px; } .modal-lang ul a { font-size: 14px; } } /* ------------------------------------------------------------ *\ Modal Sample Video \* ------------------------------------------------------------ */ .modal-sample-video .modal-close { top: auto; bottom: 100%; right: 0; color: #fff; } .modal-sample-video .modal-container { max-width: 900px; background-color: transparent; } .modal-sample-video .modal__body { width: 56.25rem; padding-bottom: 56.25%; position: relative } .modal-sample-video .modal__body iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* Tablet Portrait */ @media (max-width: 1024px) { .modal-sample-video .modal-close { right: 15px; } .modal-sample-video .modal-container { max-width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 0 15px; } .modal-sample-video .modal__body { width: 100%; } } /* ------------------------------------------------------------ *\ Modal Timeline \* ------------------------------------------------------------ */ .modal-timeline .modal-container { max-width: 1100px; } .modal-timeline .modal-close { font-size: 2.25rem; right: 1.56rem; top: 0.625rem; color: #444041; z-index: 10; } .modal-timeline .modal__body { padding: 10.19rem 4.375rem 4.375rem 4.375rem; overflow: hidden; } .modal-timeline .modal__video, .modal-timeline .modal__image, .modal-timeline .modal__content { float: left; } .modal-timeline .modal__video, .modal-timeline .modal__image { width: 55.5%; } .modal-timeline .modal__image { width: 46.4%; position: relative; } .modal-timeline .modal__image .link-external { position: absolute; left: 100%; top: 0; margin-left: 1.25rem; } .modal-timeline .modal__video { padding-bottom: 41.6%; position: relative; overflow: hidden; } .modal-timeline .modal__video iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .modal-timeline .modal__content { float: right; width: 37.1%; color: #444041; } .modal-timeline .modal__content h2 { font-weight: 500; font-size: 3rem; margin: 0; } .modal-timeline .modal__content h4 { font-weight: 400; font-size: 1.5rem; text-transform: none; margin-bottom: 0.94rem; padding-bottom: 0.94rem; border-bottom: 1px solid #444041; } .modal-timeline .modal__content p { font-size: 1rem; letter-spacing: 0; margin: 0; } .modal-timeline .modal__share { text-align: right; padding: 0 4.375rem 4.375rem; } .modal-timeline-image .modal__body { padding: 4.375rem; position: relative; font-size: 0; } .modal-timeline-image .modal__content, .modal-timeline-image .modal__image { float: none; display: inline-block; vertical-align: middle; } .modal-timeline-image .modal__content { width: 46.5%; margin-left: 7.1%; padding: 3.125rem 0; } .modal-timeline-image .modal__share { width: 46.5%; padding: 0; position: absolute; right: 4.375rem; bottom: 4.375rem; } @media (max-height: 767px) { .modal-timeline { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow-y: auto; } .modal-timeline .modal-overlay { position: fixed; } } /* Tablet Portrait */ @media (max-width: 1024px) { .modal-timeline .modal__body { padding: 40px 30px; } } /* Mobile */ @media (max-width: 767px) { .modal-timeline { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-timeline-image .modal__share, .modal-timeline-video .modal__share { width: 100%; padding: 14px 0; background-color: #e5e8eb; text-align: center; position: absolute; bottom: 0; right: 0; } .modal-timeline .modal-close { right: 10px; top: 0; font-size: 32px; } .modal-timeline .modal__body { padding: 40px 40px 70px; position: relative; } .modal-timeline .modal__content h2 { font-size: 20px; } .modal-timeline .modal__content h4 { font-size: 15px; } .modal-timeline .modal__content p { font-size: 14px; } .modal-timeline .modal__image .link-external { margin-left: 8px; display: none; } .modal-timeline .modal__content, .modal-timeline .modal__image { display: block; width: 100%; } .modal-timeline .modal__image img { width: 100%; height: auto; } .modal-timeline .modal__video { width: 100%; padding-bottom: 75%; } .modal-timeline .modal__content { padding: 25px 0 0; margin: 0; } } /* ------------------------------------------------------------ *\ Modal Compare \* ------------------------------------------------------------ */ .modal-compare .modal-container { width: 100%; max-width: 1235px; } .modal-compare .modal__body { padding: 4.06rem 3.44rem 5rem; } .modal-compare .modal-close { font-size: 2.375rem; right: 2rem; top: 1.06rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .modal-compare .modal__body { padding: 65px 25px 80px; } } /* Mobile */ @media (max-width: 767px) { .modal-compare { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-compare .modal__body { padding: 40px 20px; } .modal-compare .modal-close { font-size: 32px; right: 7px; top: -4px; } } /* ------------------------------------------------------------ *\ Modal Send Comparison \* ------------------------------------------------------------ */ .modal-send-comparison .modal-container { width: 100%; max-width: 72.125rem; } .modal-send-comparison .modal__body { padding: 4.125rem 8.06rem 3.75rem 7.81rem; } .modal-send-comparison .modal-close { font-size: 2.375rem; right: 3.5rem; top: 1.06rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .modal-send-comparison .modal__body { padding: 66px 50px 60px; } } /* Mobile */ @media (max-width: 767px) { .modal-send-comparison { -webkit-align-items: flex-start; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-send-comparison .modal-close { font-size: 32px; right: 7px; top: -4px; } .modal-send-comparison .modal__body { padding: 40px 20px; } } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav > ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .nav__item { display: inline-block; vertical-align: middle; position: relative; } .nav__item > a { display: block; height: 4.375rem; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.125rem; color: #444041; text-transform: uppercase; line-height: 4.5rem; } .nav__item--dark { background-color: #444041; } .nav__item--dark > a { color: #fff; } .nav__item > .nav-dropdown { padding-top: 1.875rem; } .nav__item:hover > .nav-dropdown { opacity: 1; visibility: visible; } /* Nav Left */ .nav--left .nav__item ~ .nav__item { margin-left: 2.375rem; } .nav--left .nav__item--dark { width: 20rem; text-align: center; position: relative; padding-right: 1.06rem; } .nav--left .nav__item--dark:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 1rem 4.375rem 0; border-color: transparent #fff transparent transparent; position: absolute; right: 0; top: 0; z-index: 1; } /* Nav Right */ .nav--right .nav__item:first-child { padding-right: 2.25rem; position: relative; } /* WARNING Modification Equinoa à conserver. Voir style-equinoa.css */ /*.nav--right .nav__item:first-child:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 4.375rem 1rem 0 0; border-color: #fff transparent transparent transparent; position: absolute; left: 100%; top: 0; z-index: 1; }*/ .nav--right .nav__item--dark { padding: 0 2.5rem 0 3rem; } .nav--right .nav__item--dark ~ .nav__item--dark { position: relative; padding: 0 2.31rem; } .nav--right .nav__item--dark ~ .nav__item--dark:before { content: ''; width: 1px; height: 1.44rem; background-color: #fff; position: absolute; left: 0; top: 50%; margin-top: -0.75rem; } .nav--left .nav__item:not(.nav__item--dark) > a, .nav--right .nav__item:not(.nav__item--dark) > a { position: relative; } .nav--left .nav__item:not(.nav__item--dark) > a:after, .nav--right .nav__item:not(.nav__item--dark) > a:after { content: ''; width: 100%; height: 2px; background-color: #444041; position: absolute; left: 0; bottom: 1.44rem; opacity: 0; transition: opacity .4s ease; } .nav--left .nav__item:not(.nav__item--dark):hover > a:after, .nav--right .nav__item:not(.nav__item--dark):hover > a:after { opacity: 1; } .nav--right .nav__item { position: relative; } .nav--right .nav__item > .nav-mega { left: 50%; margin-left: -10rem; } .nav--right .nav__item > .nav-mega--right { left: auto; margin-left: 0; right: 0; } .nav--right .nav__item > .nav-mega--right > ul:before { left: auto; margin-left: 0; right: 3.125rem; } .nav--left .nav__item:hover > .nav-mega, .nav--right .nav__item:hover > .nav-mega { opacity: 1; visibility: visible; } /* Small Desktop */ @media (max-width: 1199px) { .nav--right { display: none; } } /* ------------------------------------------------------------ *\ Nav Mega \* ------------------------------------------------------------ */ .nav-mega { width: 20rem; padding-top: 2.1875rem; position: absolute; left: 0; top: 100%; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; text-align: left; } .nav-mega.active { opacity: 1; visibility: visible; } .nav-mega.shown { opacity: 1; visibility: visible; } .nav__item.notvisible .nav-mega { opacity: 0; visibility: hidden; } .nav-mega > .default-title { display: none; } .nav-mega .col--relative { position: relative; } .nav-mega > ul { list-style: none; margin: 0; padding: 0; background-color: #444041; position: relative; } .nav-mega > ul:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 1.125rem 1.125rem 1.125rem; border-color: transparent transparent #444041 transparent; position: absolute; left: 50%; top: -1.125rem; margin-left: -1.125rem; } .nav-mega .nav-mega__item > a { height: 5.25rem; display: block; padding: 2.31rem 1.25rem 1.81rem 6.81rem; position: relative; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 700; font-size: 0.94rem; color: #fff; text-transform: uppercase; letter-spacing: .03em; transition: background-color .4s ease, color .4s ease; text-align: left; } .nav-mega .nav-mega__item > a:before { content: ''; width: 1.44rem; height: 1px; background-color: #fff; position: absolute; left: 50%; margin-left: -0.69rem; bottom: 0; } .nav-mega .nav-mega__item:last-child > a:before, .nav-mega .nav-mega__item:nth-last-child(1) > a:before { display: none; } .nav-mega .nav-mega__item:first-child > a:after, .nav-mega .nav-mega__item:last-child > a:after { display: none; } .nav-mega .nav-mega__item > a:after { content: ''; width: 100%; height: 1px; background-color: #fff; position: absolute; left: 0; top: -1px; opacity: 0; transition: opacity .4s ease; } .nav-mega .nav-mega__item:hover > a:after { opacity: 1; } .nav-mega .nav-mega__item > a > i { position: absolute; left: 3.44rem; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nav-mega .nav-mega__item > a > span { display: block; } .nav-mega .nav-mega__item--alt > a { background-color: #485661; } .nav-mega .nav-mega__item:hover > a { background-color: #fff; color: #444041; } .nav-mega .nav-mega__item--alt:hover > a { background-color: #232c32; color: #fff; } .nav-mega .nav-mega__item:hover > .mega-menu { opacity: 1; visibility: visible; } /* Medium Desktop */ @media (max-width: 1399px) { .nav-mega .nav-mega__item > a { height: 4.5rem; padding: 1.94rem 1.25rem 1.44rem 6.81rem; } } /* ------------------------------------------------------------ *\ Nav Tablet \* ------------------------------------------------------------ */ .nav-tablet { display: none; } /* Small Desktop */ @media (max-width: 1199px) { .nav-tablet { display: block; text-align: center; background-color: #fff; } .nav-tablet > ul { list-style: none; margin: 0; padding: 1.125rem 0; font-size: 0; } .nav-tablet > ul > li { display: inline-block; vertical-align: middle; } .nav-tablet > ul > li ~ li { border-left: 1px solid #444041; } .nav-tablet > ul > li > a { display: block; text-decoration: none; font-weight: 600; font-size: 1.25rem; color: #444041; text-transform: uppercase; padding: 0 4.375rem; } .nav-tablet--home { background-color: #f4f4f4; } .nav-tablet--home > ul { position: relative; } .nav-tablet--home .nav-dropdown { width: auto; margin-left: 0; left: 20px; right: 20px; padding-top: 28px; z-index: 99; } .nav-tablet--home .nav-dropdown:after { content: ''; height: 9999px; left: -20px; right: -20px; top: 15px; background-color: #242b31; opacity: .6; position: absolute; z-index: -1; } .nav-tablet--home .nav-dropdown ul { background-color: #f4f4f4; padding: 20px 20px 20px; } .nav-tablet--home .nav-dropdown ul:before { width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 15px; border-color: transparent transparent #f4f4f4 transparent; margin-left: -15px; top: -15px; } .nav-tablet--home .nav-dropdown a { font-size: 14px; padding-left: 20px; } .nav-tablet--home .nav-dropdown a:before { width: 6px; height: 6px; top: 5px; } .nav-tablet--home .active .nav-dropdown { opacity: 1; visibility: visible; } } /* Mobile */ @media (max-width: 767px) { .nav-tablet > ul > li > a { padding: 0; font-size: 12.5px; } .nav-tablet > ul { padding: 13px 0; } .nav-tablet > ul > li { width: 33.3333%; text-align: center; } .nav-tablet--home, .nav-tablet--category { background-color: #f4f4f4; } .nav-tablet--home > ul, .nav-tablet--category > ul { position: relative; } .nav-tablet--home .nav-dropdown, .nav-tablet--category .nav-dropdown { width: auto; margin-left: 0; left: 20px; right: 20px; padding-top: 28px; z-index: 99; } .nav-tablet--home .nav-dropdown:after, .nav-tablet--category .nav-dropdown:after { content: ''; height: 9999px; left: -20px; right: -20px; top: 15px; background-color: #242b31; opacity: .6; position: absolute; z-index: -1; } .nav-tablet--home .nav-dropdown ul, .nav-tablet--category .nav-dropdown ul { background-color: #f4f4f4; padding: 20px 20px 20px; } .nav-tablet--home .nav-dropdown ul:before, .nav-tablet--category .nav-dropdown ul:before { width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 15px; border-color: transparent transparent #f4f4f4 transparent; margin-left: -15px; top: -15px; } .nav-tablet--home .nav-dropdown a, .nav-tablet--category .nav-dropdown a { font-size: 14px; padding-left: 20px; } .nav-tablet--home .nav-dropdown a:before, .nav-tablet--category .nav-dropdown a:before { width: 6px; height: 6px; top: 5px; } .nav-tablet--home .active .nav-dropdown, .nav-tablet--category .active .nav-dropdown { opacity: 1; visibility: visible; } } /* ------------------------------------------------------------ *\ Nav Categories \* ------------------------------------------------------------ */ .nav-categories { display: none; } /* Small Desktop */ @media (max-width: 1199px) { .nav-categories { display: block; background-color: #444041; padding: 67px 0; text-align: center; } .nav-categories .default-title { font-size: 35px; color: #fff; margin-bottom: 60px; } .nav-categories > ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .nav-categories > ul > li { width: 20%; display: inline-block; vertical-align: top; border-right: 1px solid #fff; } .nav-categories > ul > li:nth-child(n+6) { margin-top: 65px; } .nav-categories > ul > li:nth-child(5n), .nav-categories > ul > li:last-child { border-right: 0; } .nav-categories > ul > li > a { display: block; height: 105px; text-decoration: none; padding-top: 79px; position: relative; } .nav-categories > ul > li > a > i { position: absolute; left: 50%; top: 35px; -webkit-transform: translate(-50%, -50%) scale(1.2); -ms-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } .nav-categories > ul > li > a > span { display: block; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 16px; color: #fff; text-transform: uppercase; } .nav-categories > ul > li.active > a { background-color: #fff; } .nav-categories > ul > li.active > a > span { color: #444041; } .nav-categories > ul > li.active > .mega-menu { height: auto; } .nav-categories .nav-mega__item a .ico-television-white, .nav-categories .nav-mega__item a:hover .ico-television-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.72727272727273% 49.60505529225908%; background-size: 1671.4285714285716% 1908.5714285714284%; } .nav-categories .nav-mega__item a .ico-audio-white, .nav-categories .nav-mega__item a:hover .ico-audio-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 54.04120443740095%; background-size: 1632.5581395348838% 1805.4054054054052%; } .nav-categories .nav-mega__item a .ico-informatique-white, .nav-categories .nav-mega__item a:hover .ico-informatique-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 40.79365079365079%; background-size: 1632.5581395348838% 1757.8947368421052%; } .nav-categories .nav-mega__item a .ico-telephonie-white, .nav-categories .nav-mega__item a:hover .ico-telephonie-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.24357034795764% 80.03169572107765%; background-size: 1712.1951219512193% 1805.4054054054052%; } .nav-categories .nav-mega__item a .ico-connectes-white, .nav-categories .nav-mega__item a:hover .ico-connectes-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 37.29323308270677% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-categories .nav-mega__item a .ico-maison-white, .nav-categories .nav-mega__item a:hover .ico-maison-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 31.127819548872182% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-categories .nav-mega__item a .ico-electromenager-white, .nav-categories .nav-mega__item a:hover .ico-electromenager-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 62.797619047619044% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; } .nav-categories .nav-mega__item a .ico-sante-white, .nav-categories .nav-mega__item a:hover .ico-sante-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 73.53407290015848%; background-size: 1671.4285714285716% 1805.4054054054052%; } .nav-categories .nav-mega__item.active .ico-television-white, .nav-categories .nav-mega__item.active a:hover .ico-television-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 49.09090909090909% 67.61453396524486%; background-size: 1671.4285714285716% 1908.5714285714284%; } .nav-categories .nav-mega__item.active .ico-audio-white, .nav-categories .nav-mega__item.active a:hover .ico-audio-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 60.538827258320126%; background-size: 1632.5581395348838% 1805.4054054054052%; } .nav-categories .nav-mega__item.active .ico-informatique-white, .nav-categories .nav-mega__item.active a:hover .ico-informatique-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 47.460317460317455%; background-size: 1632.5581395348838% 1757.8947368421052%; } .nav-categories .nav-mega__item.active .ico-telephonie-white, .nav-categories .nav-mega__item.active a:hover .ico-telephonie-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.61724659606656% 43.264659270998415%; background-size: 1712.1951219512193% 1805.4054054054052%; } .nav-categories .nav-mega__item.active .ico-connectes-white, .nav-categories .nav-mega__item.active a:hover .ico-connectes-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 24.962406015037594% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-categories .nav-mega__item.active .ico-maison-white, .nav-categories .nav-mega__item.active a:hover .ico-maison-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 18.796992481203006% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-categories .nav-mega__item.active .ico-electromenager-white, .nav-categories .nav-mega__item.active a:hover .ico-electromenager-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 67.85714285714286% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; } .nav-categories .nav-mega__item.active .ico-sante-white, .nav-categories .nav-mega__item.active a:hover .ico-sante-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 67.0364500792393%; background-size: 1671.4285714285716% 1805.4054054054052%; } .nav-categories .nav-mega__item.active .ico-espace-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 80.65967016491754% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .nav-categories > ul > li { width: 33.3333%; border: 0; } .nav-categories > ul > li:nth-child(n+4) { margin-top: 60px; } .nav-categories > ul > li:nth-child(3n+1), .nav-categories > ul > li:nth-child(3n+2) { border-right: 1px solid #fff; } .nav-categories > ul > li > a > i { -webkit-transform: translate(-50%, -50%) scale(1.5); -ms-transform: translate(-50%, -50%) scale(1.5); transform: translate(-50%, -50%) scale(1.5); } } /* Mobile */ @media (max-width: 767px) { .nav-categories { padding: 30px 0; } .nav-categories .default-title { font-size: 20px; margin-bottom: 30px; } .nav-categories > ul > li:nth-child(n+4) { margin-top: 30px; } .nav-categories > ul > li > a { height: 80px; padding-top: 60px; } .nav-categories > ul > li > a > i { -webkit-transform: translate(-50%, -50%) scale(1.2); -ms-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); top: 26px; } .nav-categories > ul > li > a > span { font-size: 12.5px; } .nav-categories > ul > li.active > a { z-index: 10; } } /* Mobile */ @media (max-width: 374px) { .nav-categories > ul > li > a > span { font-size: 11px; } } /* ------------------------------------------------------------ *\ Nav Footer \* ------------------------------------------------------------ */ .nav-footer { margin-top: 3.75rem; } .nav-footer__list { list-style: none; margin: 0; padding: 0; font-size: 0; } .nav-footer__item { display: inline-block; vertical-align: middle; line-height: 1; } .nav-footer__item:first-child { margin-right: 0.31rem; } .nav-footer__item:nth-child(n+3) { margin-left: 0.25rem; padding-left: 0.375rem; position: relative; } .nav-footer__item:nth-child(n+3):before { content: ''; width: 1px; height: 0.75rem; background-color: #fff; position: absolute; left: 0; top: 50%; margin-top: -0.31rem; } .nav-footer__item p, .nav-footer__item a { display: block; text-decoration: none; margin: 0; font-size: 0.75rem; color: #fff; } .nav-footer__item a { transition: color .4s ease; } .nav-footer__item a:hover { color: rgb(179, 179, 179); } /* Small Desktop */ @media (max-width: 1199px) { .nav-footer { margin-top: 13.44rem; } .nav-footer__item p, .nav-footer__item a { font-size: 1rem; } } /* Mobile */ @media (max-width: 767px) { .nav-footer { margin-top: 116px; text-align: center; } .nav-footer__item:first-child { display: block; } .nav-footer__item p, .nav-footer__item a { font-size: 14px;} .nav-footer__item p { padding-bottom: 6px; } } /* Mobile */ @media (max-width: 374px) { .nav-footer__item p, .nav-footer__item a { font-size: 12px; } } /* ------------------------------------------------------------ *\ Nav Left \* ------------------------------------------------------------ */ .nav-left { display: none; } /* Small Desktop */ @media (max-width: 1199px) { .nav-left { display: block; width: 320px; background-color: #444041; text-align: left; position: fixed; left: 0; top: 70px; bottom: 0; z-index: 100; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; will-change: transform; } .nav-left-overlay { width: 100%; background-color: #050505; opacity: 0; visibility: hidden; position: fixed; left: 0; top: 70px; bottom: 0; z-index: 99; transition: opacity .4s ease, visibility .4s ease; will-change: opacity, visibility; } .nav-left.active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .nav-left.active + .nav-left-overlay { opacity: .5; visibility: visible; } .nav-left__list { list-style: none; margin: 0; padding: 0 20px; } .nav-left__item ~ .nav-left__item { border-top: 1px solid #7c848a; } .nav-left__item--back + .nav-left__item { border-top: 0; } .nav-left__link { height: 50px; padding: 20px 30px 15px 0; display: block; position: relative; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 12.5px; color: #fff; text-transform: uppercase; text-decoration: none; } /* WARNING Modification Equinoa à conserver. */ /*.nav-left__link:after { content: ''; width: 14px; height: 14px; border: 1px solid #fff; border-left: 0; border-bottom: 0; position: absolute; right: 7px; top: 50%; -webkit-transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }*/ .nav-left__link--back { background-color: #485661; padding: 20px 30px 15px 30px; } .nav-left__link--back:before { content: ''; height: 100%; background-color: #485661; position: absolute; left: -20px; top: 0; right: -20px; z-index: -1; } .nav-left__link--back:after { right: auto; left: 0; border: 1px solid #fff; border-right: 0; border-top: 0; } /* Nav Sublist */ .nav-sublist { list-style: none; margin: 0; padding: 0; } .nav-sublist__item > a { height: 50px; padding: 19px 30px 16px 54px; display: block; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 12.5px; text-transform: uppercase; color: #fff; position: relative; transition: color .4s ease, background-color .4s ease; z-index: 10; } .nav-sublist__item > a:before { content: ''; height: 100%; top: 0; left: -20px; right: -20px; background-color: #fff; position: absolute; z-index: -1; opacity: 0; transition: opacity .4s ease; } .nav-sublist__item.has-dd > a:after { content: ''; width: 14px; height: 14px; border: 1px solid #fff; border-left: 0; border-bottom: 0; position: absolute; right: 3px; top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transition: border-color .4s ease, -webkit-transform .4s ease; transition: border-color .4s ease, transform .4s ease; transition: border-color .4s ease, transform .4s ease, -webkit-transform .4s ease; margin-top: -7px; } .nav-sublist__item > a > i { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%) scale(.75) ; -ms-transform: translateY(-50%) scale(.75) ; transform: translateY(-50%) scale(.75) ; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .nav-sublist__item.active > a { color: #444041; } .nav-sublist__item.active > a:before { opacity: 1; } .nav-sublist__item.active > a:after { border-color: #444041; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin-top: -10px; right: 0; } .nav-sublist ul { display: none; list-style: none; margin: 0 -20px; padding: 0 20px 0 94px; background-color: #fff; position: relative; z-index: 5; } .nav-sublist ul:before { content: ''; height: 1px; background-color: #444041; position: absolute; left: 74px; top: 0; right: 20px; } .nav-sublist ul a { display: block; padding: 19px 0 16px 0; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 12.5px; text-transform: uppercase; color: #444041; } .nav-sublist__item a:hover .ico-television-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.72727272727273% 49.60505529225908%; background-size: 1671.4285714285716% 1908.5714285714284%; } .nav-sublist__item a:hover .ico-audio-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 54.04120443740095%; background-size: 1632.5581395348838% 1805.4054054054052%; } .nav-sublist__item a:hover .ico-informatique-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 40.79365079365079%; background-size: 1632.5581395348838% 1757.8947368421052%; } .nav-sublist__item a:hover .ico-telephonie-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.24357034795764% 80.03169572107765%; background-size: 1712.1951219512193% 1805.4054054054052%; } .nav-sublist__item a:hover .ico-connectes-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 37.29323308270677% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-sublist__item a:hover .ico-maison-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 31.127819548872182% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-sublist__item a:hover .ico-electromenager-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 62.797619047619044% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; } .nav-sublist__item a:hover .ico-sante-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 73.53407290015848%; background-size: 1671.4285714285716% 1805.4054054054052%; } .nav-sublist__item a:hover .ico-espace-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 74.81259370314842% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; } .nav-sublist__item.active a .ico-television-white, .nav-sublist__item.active a:hover .ico-television-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 49.09090909090909% 67.61453396524486%; background-size: 1671.4285714285716% 1908.5714285714284%; } .nav-sublist__item.active a .ico-audio-white, .nav-sublist__item.active a:hover .ico-audio-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 60.538827258320126%; background-size: 1632.5581395348838% 1805.4054054054052%; } .nav-sublist__item.active a .ico-informatique-white, .nav-sublist__item.active a:hover .ico-informatique-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 47.460317460317455%; background-size: 1632.5581395348838% 1757.8947368421052%; } .nav-sublist__item.active a .ico-telephonie-white, .nav-sublist__item.active a:hover .ico-telephonie-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.61724659606656% 43.264659270998415%; background-size: 1712.1951219512193% 1805.4054054054052%; } .nav-sublist__item.active a .ico-connectes-white, .nav-sublist__item.active a:hover .ico-connectes-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 24.962406015037594% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-sublist__item.active a .ico-maison-white, .nav-sublist__item.active a:hover .ico-maison-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 18.796992481203006% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .nav-sublist__item.active a .ico-electromenager-white, .nav-sublist__item.active a:hover .ico-electromenager-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 67.85714285714286% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; } .nav-sublist__item.active a .ico-sante-white, .nav-sublist__item.active a:hover .ico-sante-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 67.0364500792393%; background-size: 1671.4285714285716% 1805.4054054054052%; } .nav-sublist__item.active a .ico-espace-white, .nav-sublist__item.active a:hover .ico-espace-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 80.65967016491754% 90.56603773584906%; background-size: 2005.7142857142858% 2087.5%; } } /* Mobile */ @media (max-width: 767px) { .nav-left, .nav-left-overlay { top: 53px; } } /* ------------------------------------------------------------ *\ Nav Subhead \* ------------------------------------------------------------ */ .nav-subhead { text-align: center; margin: 0 21.125rem; background-color: #f4f4f4; position: relative; } .nav-subhead:before, .nav-subhead:after { content: ''; width: 0; height: 0; border-style: solid; position: absolute; top: 0; } .nav-subhead:before { border-width: 0 1.125rem 3.75rem 0; border-color: transparent #f4f4f4 transparent transparent; right: 100%; } .nav-subhead:after { border-width: 3.75rem 1.125rem 0 0; border-color: #f4f4f4 transparent transparent transparent; left: 100%; } .nav-subhead__list { list-style: none; margin: 0; padding: 1.25rem 0 1.19rem; font-size: 0; } .nav-subhead__item { display: inline-block; vertical-align: middle; position: relative; } .nav-subhead__item ~ .nav-subhead__item { margin-left: 1.75rem; padding-left: 1.75rem; border-left: 1px solid #444041; } .nav-subhead__item:hover > .nav-dropdown, .nav-subhead__item:hover + .nav-dropdown__overlay { opacity: 1; visibility: visible; } .nav-subhead__link { display: block; font-weight: 600; font-size: 1.125rem; color: #444041; text-transform: uppercase; text-decoration: none; position: relative; } .nav-subhead__link:after { content: ''; width: 100%; height: 2px; background-color: #444041; position: absolute; left: 0; bottom: -3px; opacity: 0; transition: opacity .4s ease; } .nav-subhead__item.active .nav-subhead__link:after, .nav-subhead__item:hover .nav-subhead__link:after { opacity: 1; } @media (max-width: 1399px) { .nav-subhead__link { font-size: 1rem; } .nav-subhead__item ~ .nav-subhead__item { margin-left: 1.25rem; padding-left: 1.25rem; } } /* ------------------------------------------------------------ *\ Nav Dropdown \* ------------------------------------------------------------ */ .nav-dropdown { width: 12.75rem; padding-top: 3.125rem; text-align: left; position: absolute; left: 50%; margin-left: -6.375rem; z-index: 98; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .nav-dropdown ul { list-style: none; margin: 0; padding: 1.56rem 1.56rem 1.56rem 2rem; background-color: #f4f4f4; position: relative; } .nav-dropdown ul:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 1.31rem 1.31rem 1.31rem; border-color: transparent transparent #f4f4f4 transparent; position: absolute; left: 50%; margin-left: -1.31rem; top: -1.31rem; } .nav-dropdown ul a { display: block; text-decoration: none; font-weight: 600; font-size: 1.125rem; color: #444041; padding-left: 0.81rem; position: relative; transition: opacity .4s ease; } .nav-dropdown ul a:hover { opacity: .75; } .nav-dropdown ul li ~ li { margin-top: 1.25rem; } .nav-dropdown ul a:before { content: ''; width: 0.31rem; height: 0.31rem; background-color: #444041; border-radius: 0.625rem; position: absolute; left: 0; top: 0.5rem; } .nav-dropdown__overlay { width: 100%; height: 100%; background-color: rgba(0,0,0, .5); position: fixed; left: 0; top: 0; z-index: -1; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } /* ------------------------------------------------------------ *\ No Touch \* ------------------------------------------------------------ */ /* Icon Hovers */ .no-touch .nav-mega .nav-mega__item:hover .ico-television-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 49.09090909090909% 67.61453396524486%; background-size: 1671.4285714285716% 1908.5714285714284%; } .no-touch .nav-mega .nav-mega__item:hover .ico-audio-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 60.538827258320126%; background-size: 1632.5581395348838% 1805.4054054054052%; } .no-touch .nav-mega .nav-mega__item:hover .ico-informatique-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.54476479514416% 47.460317460317455%; background-size: 1632.5581395348838% 1757.8947368421052%; } .no-touch .nav-mega .nav-mega__item:hover .ico-telephonie-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 72.61724659606656% 43.264659270998415%; background-size: 1712.1951219512193% 1805.4054054054052%; } .no-touch .nav-mega .nav-mega__item:hover .ico-connectes-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 24.962406015037594% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .no-touch .nav-mega .nav-mega__item:hover .ico-maison-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 18.796992481203006% 80.19017432646592%; background-size: 1897.2972972972973% 1805.4054054054052%; } .no-touch .nav-mega .nav-mega__item:hover .ico-electromenager-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 67.85714285714286% 96.99842022116904%; background-size: 2340% 1908.5714285714284%; } .no-touch .nav-mega .nav-mega__item:hover .ico-sante-white { background-image: url(../../images/default/sprite.@2x.png); background-position: 99.39393939393939% 67.0364500792393%; background-size: 1671.4285714285716% 1805.4054054054052%; } /* ------------------------------------------------------------ *\ Product \* ------------------------------------------------------------ */ /* Product Intro */ .product__intro { background-color: #fff; overflow: hidden; box-shadow: inset 0 1.25rem 1.875rem rgba(223, 223, 223, .4), inset 0 -1.25rem 1.875rem rgba(223, 223, 223, .4); } .product__intro-text { display: -webkit-flex; display: -ms-flexbox; display: flex; } /* Product Rating */ .product__rating { text-align: right; padding: 1.56rem 2.125rem 1.44rem 0.625rem; } /* Product Carousel */ .product__carousel { position: relative; padding: 0 11.875rem 0 2.06rem; } .product__thumbs { position: absolute; top: 2rem; bottom: 0.625rem; right: 4.19rem; } /* Product Text */ .product__carousel, .product__text { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .product__text.cloned { display: none; } .product__text { background-color: #444041; color: #fff; position: relative; padding: 2.875rem 0 2.75rem 3.75rem; letter-spacing: 0; } .product__text:after { content: ''; width: 1000px; height: 100%; background-color: #444041; position: absolute; left: 100%; top: 0; } .product__text h1 { font-weight: 400; text-transform: uppercase; margin: 0 0 0.44rem; } .product__text h3 { font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.625rem; margin: 0 0 3rem; text-transform: none; } .product__text h5 { color: #fff; margin: 0 0 0.94rem; } .product__text ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } .product__text ul li { float: left; width: 50%; font-style: italic; font-size: 1.5rem; padding-left: 1rem; position: relative; margin-bottom: 0.56rem; } .product__text ul li:before { content: ''; width: 0.375rem; height: 0.375rem; background-color: #fff; border-radius: 0.625rem; position: absolute; left: 0; top: 0.81rem; } .product__text ul li:nth-child(odd) { clear: left; padding-right: 20px; } /* Porduct Share */ .product__share { text-align: right; padding: 1.06rem 0; } /* Product Features */ .product__features { padding: 3.56rem 0; text-align: center; } .product__features h4 { font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.5rem; text-transform: none; margin: 0 0 0.625rem; } .product__features p { margin: 0 -1.25rem 0 0; font-size: 1.5rem; letter-spacing: 0; } .product__features .cols { text-align: left; padding: 0 2.125rem; margin-left: -2.19rem; margin-right: -2.19rem; } .product__features .col { padding-left: 2.19rem; padding-right: 2.19rem; } /* Product Nav */ .product__nav { height: 3.75rem; margin-bottom: 4.375rem; position: relative; } .product__nav ul { padding: 1.125rem 0 1.19rem 2.06rem; } .product__nav li { display: inline-block; vertical-align: middle; } .product__nav li ~ li { padding-left: 1.75rem; margin-left: 1.375rem; border-left: 1px solid #fff; } .product__nav a { display: block; text-decoration: none; font-weight: 600; font-size: 1.125rem; color: #fff; text-transform: uppercase; transition: opacity .4s ease; } .product__nav a:hover { opacity: .75; } .product__nav-inner { width: 100%; height: 3.75rem; background-color: #444041; position: absolute; left: 0; top: 0; z-index: 98; } .product__nav-inner.fixed { position: fixed; top: 5.69rem; } /* Product Details */ .product__details { overflow: hidden; margin: 0.625rem -0.19rem 2.5rem; } .product-detail { float: left; width: 33.3333%; padding: 0 0.19rem; } .product-detail__image img { width: 100%; height: auto; } .product-detail__content { padding: 1.875rem 22.5% 0; } .product-detail__content h3 { margin: 0 0 1.625rem; } .product-detail__content p { margin: 0; font-size: 1.125rem; letter-spacing: 0; line-height: 1.3; } /* Product Characteristics */ .product__characteristics { margin-top: 5.625rem; margin-bottom: 5.5rem; } /* Product Support */ .product__support-inner { background-color: #f1f1f2; padding: 3.875rem 3.75rem 3.94rem; } .product__support-inner h2 { margin-bottom: 3.125rem; } .product__support-body { overflow: hidden; padding: 0 0 0 0.625rem; } .product__support-image, .product__support-content { float: left; width: 50%; } .product__support-content { width: 44.8%; margin-left: 5.2%; padding-top: 1.19rem; } .product__support-content p { width: 64%; margin-bottom: 4.375rem; letter-spacing: 0; line-height: 1.3; } .product__support-content ul { list-style: none; margin: 0 -2.19rem; padding: 0; } .product__support-content ul:after { } .product__support-content .btn-group { width: 92.2%; } .product__support-content ul li { float: left; width: 50%; padding: 0 2.19rem; } .product__support-content ul li:nth-child(n+3) { margin-top: 0.625rem; } .product__support-content ul .btn { width: 100%; text-align: left; text-transform: none; padding-left: 1.31rem; padding-right: 1.31rem; background-color: transparent; } .product__support-content ul .btn:hover { background-color: #444041; } .product__support-content ul .btn i { margin-right: 0.625rem; position: relative; top: -0.13rem; } /* Product Related */ .product__related .section-related { margin-top: 3.75rem; } .product__related .section-related .section__inner { padding: 0; background-color: transparent; } .product__related .slider-related { padding: 0 10.44rem; } .product__related .slider-related .owl-prev, .product__related .slider-related .owl-next { top: 25%; } .product__related .related__content h3 { margin-bottom: 1.25rem; } .product__related .related__content .checkbox { margin-bottom: 1.56rem; } .product__related .related__content .checkbox label { display: inline-block; margin-left: -2.5rem; } .product__related .section-grid { margin-top: 4rem; } .product__related .section-grid .shell { padding: 0; } /* Product Partners */ .product__partners { margin-bottom: 5.5rem; margin-top: 4.94rem; } .product__partners-inner { border: 1px solid #9d9fa1; text-align: center; padding-bottom: 4.31rem; } .product__partners-inner h2 { display: inline-block; position: relative; z-index: 10; padding: 0 6.25rem 1.875rem; background-color: #fff; margin: -1.875rem 0 4.06rem; } .product__partners-inner h4 { font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1.5rem; text-transform: none; margin: 0 0 1.875rem; } .product__partners-inner h4 ~ h4 { margin-top: 4rem; } .product__partners-inner .list-logos { width: 60%; margin: 0 auto; } /* Product Assistance */ .product__assistance { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 43.5rem; position: relative; margin-bottom: 4.375rem; } .product__assistance-bg { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: left center; position: absolute; left: 0; top: 0; z-index: 1; } .product__assistance-content { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; position: relative; z-index: 5; } .product__assistance-content h1 { font-weight: 500; margin: 0 0 0.625rem; } .product__assistance-content h5 { margin: 0 0 0.75rem; } .product__assistance-content p { font-size: 1.125rem; margin: 0 0 1.875rem; } .product__assistance-content .btn { padding-left: 1.5rem; padding-right: 1.5rem; } .product__assistance-content-inner { width: 35%; margin-left: 55%; } @media (max-width: 1899px) { .product__carousel { -webkit-flex: 0 0 60%; -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; } .product__text { -webkit-flex: 0 0 40%; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; } .product__text h1 { font-size: 2.625rem; } .product__text h3, .product__text ul li { font-size: 1.25rem; } .product-detail__content { padding: 1.875rem 3.125rem 0; } .product__support-body { padding: 0; } .product__support-inner { padding: 3.875rem 1.875rem 3.94rem; } .product__support-image { width: 45%; } .product__support-content { width: 51%; margin-left: 4%; } .product__support-content p { margin-bottom: 2.5rem; } .product__support-content .btn-group { width: 100%; } .product__support-content ul { margin: 0 -0.94rem; } .product__support-content ul li { padding: 0 0.94rem; } .product__assistance-bg { background-position: 50% center; } .product__assistance-content-inner { width: 40%; } } @media (max-width: 1399px) { .product__carousel { padding: 0 7.5rem 0 0; } .product__thumbs { right: 1.875rem; top: -0.5rem; } .product__text { padding: 1.875rem 0 1.875rem 1.875rem; } .product__text ul li:before { top: .7rem; border-radius: 50%; } .product__nav ul { padding: 1.125rem 0 1.19rem 0; } .product__nav a { font-size: 1rem; } .product-detail__content { padding: 1.875rem 1.875rem 0; } .product__characteristics { margin-bottom: 2.5rem; } .product__support-body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .product__support-content ul .btn { font-size: 0.875rem; padding: 0.81rem 0.94rem 0.81rem; } .product__related .slider-related { padding: 0 1.875rem; } .product__partners { margin-bottom: 2.5rem; } .product__partners-inner .list-logos { width: 80%; } .product__assistance { height: 30rem; margin-bottom: 2.5rem; } } /* Small Desktop */ @media (max-width: 1199px) { .product__intro-text { display: block; } .product__thumbs { top: 1.25rem; bottom: 2.5rem; } .product__carousel { max-width: 100%; } .product__nav-inner.fixed { top: 5.67rem; } .product__nav a { font-size: 0.94rem; } .product__nav li ~ li { margin-left: 0.94rem; padding-left: 1rem; } .product__text { width: 100%; max-width: 100%; z-index: 1; } .product__text:after { width: 2000px; left: 50%; margin-left: -1000px; z-index: -1; } .product__text.cloned.fixed { position: fixed; top: 0; z-index: 98; } .product-detail__content h3 { font-size: 1.5rem; } .product__support-inner h2 { margin-bottom: 1.875rem; } .product__support-content p { width: 100%; margin-bottom: 1.56rem; } .product__support-content ul li { width: 100%; } .product__support-content .btn-group { width: 70%; } .product__support-content ul li ~ li, .product__support-content ul li:nth-child(n+3) { margin-top: 0.94rem; } .product__support-content ul .btn { width: auto; max-width: 100%; padding: 0.5rem 1.25rem 0.625rem 0.94rem; } .product__related .shell .shell { padding-left: 0; padding-right: 0; } } /* Tablet Portrait */ @media (max-width: 1024px) { .product__text { padding: 30px 0; } .product__features .cols { padding: 0; } .product__features h4 { font-size: 20px; } .product__features p { font-size: 16px; } .product__nav { margin-bottom: 30px; } .product__nav .shell { padding-left: 15px; padding-right: 15px; } .product__nav a { font-size: 12px; } .product__nav li ~ li { margin-left: 7px; padding-left: 7px; } .product-detail__content { padding: 20px 10px 0; } .product-detail__content h3 { font-size: 20px; margin-bottom: 10px; } .product-detail__content p { font-size: 14px; } .product__support-content .btn-group, .product__partners-inner .list-logos { width: 100%; } .product__assistance-content-inner { width: 50%; margin-left: 50%; } } /* Mobile */ @media (max-width: 767px) { .product__rating { padding: 16px 0 0; } .product__thumbs, .product__nav { display: none; } .product__carousel { padding: 0 0 23px; } .product__text { padding: 25px 20px; } .product__text h1, .product__text h5 { display: none; } .product__text h3 { font-size: 16px; margin-bottom: 24px; } .product__text ul { width: auto; margin-right: -20px; } .product__text ul li { font-size: 14px; padding-left: 10px; margin-bottom: 2px; } .product__text ul li:before { width: 4px; height: 4px; left: 0; top: 6px; } .product__text.cloned { width: 100%; display: block; padding: 10px 40px 5px 20px; position: absolute; left: 0; top: 53px; z-index: 99; } .product__text.cloned:before { content: ''; width: 100%; background-color: #242b31; opacity: 0; visibility: hidden; position: fixed; left: 0; top: 110px; bottom: 0; z-index: 97; transition: opacity .4s ease, visibility .4s ease; } .product__text.cloned.fixed { z-index: 99; } .product__text.cloned .toggle-mobile-product-nav { width: 12px; height: 12px; border: 2px solid #444041; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); border-left: 0; border-top: 0; position: absolute; right: 23px; top: 50%; margin-top: -8px; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .product__text.cloned, .product__text.cloned:after { background-color: #f4f4f4; } .product__text.cloned h3, .product__text.cloned ul { display: none; } .product__text.cloned h1, .product__text.cloned h5 { display: block; color: #444041; margin: 0; } .product__text.cloned h1 { font-weight: 500; font-size: 20px; } .product__text.cloned h5 { font-size: 11px; margin: 0; } .product__text.cloned .product__nav { width: 100%; position: absolute; left: 0; top: 100%; z-index: 99; display: none; } .product__text.cloned.active:before { opacity: .6; visibility: visible; } .product__text.cloned.active .product__nav { display: block; } .product__text.cloned.active .toggle-mobile-product-nav { -webkit-transform: translateY(5px) rotate(-135deg); -ms-transform: translateY(5px) rotate(-135deg); transform: translateY(5px) rotate(-135deg); } .product__nav.cloned, .product__nav.cloned .product__nav-inner { background-color: #f4f4f4; height: auto; } .product__nav.cloned .product__nav-inner { top: -5px; padding: 5px 0 10px; } .product__nav.cloned ul { display: block; list-style: none; margin: 0; padding: 0; } .product__nav.cloned .shell { padding-left: 20px; padding-right: 20px; } .product__nav.cloned ul li { width: 100%; padding: 0; margin-bottom: 0; } .product__nav.cloned ul li ~ li { margin-left: 0; border-top: 1px solid #a7acaf; border-left: 0; } .product__nav.cloned ul li:before { display: none; } .product__nav.cloned ul a { display: block; padding: 17px 0; text-decoration: none; font-style: normal; font-weight: 600; font-size: 12.5px; color: #444041; text-transform: uppercase; } .product__features { padding: 0 0 30px; } .product__features .cols { padding: 0 20px; margin: 0; } .product__features .col { width: 100%; padding: 0; } .product__features .col ~ .col { margin-top: 20px; } .product__features h4 { font-size: 17px; } .product__features p { font-size: 14px; } .product__share { padding: 0; } .product__description .default-title { margin-bottom: 27px; padding-bottom: 9px; } .product__description .default-title:after { height: 1px; } .product__details { margin: 23px -15px 23px -20px; } .product-detail { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; width: 50%; padding: 0 0 0 5px; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .product-detail__content { padding: 10px 20px 10px 33px; } .product-detail__content h3, .product-detail__content p { font-size: 14px; } .product-detail__content h3 { margin-bottom: 7px; } .product-detail:last-child { width: 100%; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 4px; } .product-detail:last-child .product-detail__content { padding: 23px 33px 0; } .product-detail:last-child .product-detail__image { overflow: hidden; padding-bottom: 38.5%; position: relative; } .product-detail:last-child .product-detail__image img { width: 100%; height: auto; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .product__characteristics { margin-top: 0; margin-bottom: 35px; } .product__support-inner { padding: 24px 20px 30px; } .product__support-inner h2 { padding-bottom: 10px; } .product__support-inner h2:after { height: 1px; } .product__support-body { display: block; } .product__support-image, .product__support-content { width: 100%; margin: 0; padding: 0; } .product__support-image { padding: 0 17px; } .product__support-content { margin-top: 30px; } .product__support-content p { margin-bottom: 30px; } .product__support-content ul .btn { height: auto; padding: 5px 10px 6px 33px; font-size: 13px; position: relative; } .product__support-content ul .btn i { position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%) scale(.6); -ms-transform: translateY(-50%) scale(.6); transform: translateY(-50%) scale(.6); } .product__support-content .btn-group { width: 78%; margin: 0 auto; } .product__related .section-related { margin-top: 30px; } .product__related .section-related .section__head { margin-bottom: 32px; } .product__related .section-related h2 { padding: 0 15% 8px; } .product__related .section-related h2:after { height: 1px; } .product__related .slider-related { padding: 0 93px; } .product__related .slider-related .owl-prev, .product__related .slider-related .owl-next { top: 28%; } .product__related .slider-related .owl-prev { left: -70px; } .product__related .slider-related .owl-next { right: -70px; } .product__related .related__content h3, .product__related .related__content .checkbox { margin-bottom: 15px; } .product__related .related__content h3 { margin-bottom: 24px; } .product__related .related__content .checkbox label { margin-left: -5px; } .product__related .section-grid { margin-top: 30px; } .product__related .grid-banners .grid-item { height: 286px; } .product__related .grid-item--vertical-center .grid-item__content { top: 40px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .product__partners { margin-top: 26px; margin-bottom: 0; padding-bottom: 20px; } .product__partners-inner { border: 0; padding-bottom: 0; } .product__partners-inner h2 { margin: 0 0 42px; padding: 0 0 10px; } .product__partners-inner h2:after { height: 1px; } .product__partners-inner h4 { font-size: 15px; margin-bottom: 28px; } .product__partners-inner h4 ~ h4 { margin-top: 22px; } .product__assistance { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; height: auto; background-color: #f1f1f2; padding: 26px 0 0; margin-bottom: 5px; } .product__assistance-bg, .product__assistance-content { position: relative; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); top: auto; left: auto; right: auto; bottom: auto; } .product__assistance-bg { height: 195px; background: url(../css/../../images/default/temp/product-assistance-mobile-bg.jpg) no-repeat left bottom !important; margin-top: -20px; } .product__assistance-content-inner { width: 100%; max-width: 100%; margin: 0; text-align: center; padding: 0 20px; } .product__assistance-content-inner h5 { font-size: 11px; margin-bottom: 8px; } .product__assistance-content-inner h1 { font-size: 22.5px; margin-bottom: 3px; } .product__assistance-content-inner p { font-size: 14px; text-align: left; letter-spacing: 0; margin-bottom: 17px; } .product__assistance-content-inner .btn { padding-left: 10px; padding-right: 10px; } } /* Mobile */ @media (max-width: 374px) { .product__support-content .btn-group { width: 100%; } } /* ------------------------------------------------------------ *\ Product List \* ------------------------------------------------------------ */ .product-list { display: -webkit-flex; display: -ms-flexbox; display: flex; } .product-list ~ .product-list { margin-top: 4rem; } .product-list__image { -webkit-flex: 0 0 28.9%; -ms-flex: 0 0 28.9%; flex: 0 0 28.9%; text-align: center; padding: 1.125rem 0; position: relative; } .product-list__image .label { padding: 0.31rem 0.69rem 0.19rem; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.125rem; color: #fff; text-transform: uppercase; background-color: #d50032; position: absolute; left: 0; top: 0; } .product-list__body { -webkit-flex: 0 0 46%; -ms-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%; padding-left: 5rem; } .product-list__body h3 { font-size: 1.75rem; margin: 0 0 0.94rem; } .product-list__body .rating { margin: 0 0 1.5rem; } .product-list__body p { font-size: 1.125rem; letter-spacing: 0; margin: 0 0 1.81rem; } .product-list__body h6 { font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: none; margin: 0 0 0.19rem; } .product-list__body .lists { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .product-list__body .lists ul { list-style: none; margin: 0; padding: 0; max-width: 48%; } .product-list__body .lists ul li { padding-left: 0.75rem; position: relative; font-size: 1.125rem; } .product-list__body .lists ul li ~ li { margin-top: 0.19rem; } .product-list__body .lists ul li:before { content: ''; width: 0.25rem; height: 0.25rem; background-color: #444041; border-radius: 0.625rem; position: absolute; left: 0; top: 0.56rem; } .product-list__actions { -webkit-flex: 0 0 25.1%; -ms-flex: 0 0 25.1%; flex: 0 0 25.1%; max-width: 25.1%; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; padding-left: 1.875rem; text-align: right; margin-bottom: 1.25rem; } .product-list__actions .checkbox { display: inline-block; vertical-align: middle; margin-right: 1.75rem; } .product-list__actions .btn { min-width: 10.25rem; } @media (max-width: 1899px) { .product-list__actions { margin: 0; } .product-list__actions .checkbox { display: block; margin: 0 0 1.25rem; padding-right: 1.56rem; } .product-list__actions .checkbox label { display: inline-block; } } @media (max-width: 1399px) { .product-list__body { padding-left: 1.25rem; } } /* Small Desktop */ @media (max-width: 1199px) { .product-list__actions .btn { min-width: 8.125rem; padding-left: 0.625rem; padding-right: 0.625rem; } } /* ------------------------------------------------------------ *\ Product Grid \* ------------------------------------------------------------ */ .product-grid { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-flex: 0 0 28.9%; -ms-flex: 0 0 28.9%; flex: 0 0 28.9%; position: relative; } .product-grid:nth-child(n+4) { margin-top: 5.31rem; } .product-grid__image { text-align: center; position: relative; margin-bottom: 4.25rem; padding-top: 1.125rem; } .product-grid__image img { width: auto; height: 15rem; } .product-grid__image .label { padding: 0.31rem 0.69rem 0.19rem; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.125rem; color: #fff; text-transform: uppercase; background-color: #d50032; position: absolute; left: 0; top: 0; } .product-grid__body { text-align: center; } .product-grid__body h3 { width: 60%; margin: 0 auto 0.625rem; } .product-grid__body .rating { margin: 1.125rem 0 1.44rem; } .product-grid__body p { width: 75%; text-align: left; font-size: 1.125rem; margin: 0 auto; letter-spacing: 0; line-height: 1.3; } .product-grid__body h6, .product-grid__body .lists { display: none; } .product-grid__actions { padding-top: 2.5rem; text-align: center; margin-top: auto; } .product-grid__actions .checkbox { margin-bottom: 1.25rem; } .product-grid__actions .checkbox label { display: inline-block; } @media (max-width: 1399px) { .product-grid { -webkit-flex: 0 0 44%; -ms-flex: 0 0 44%; flex: 0 0 44%; max-width: 44%; } .product-grid:nth-child(n+3) { margin-top: 3.125rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .product-grid__image { margin-bottom: 40px; } .product-grid__body h3, .product-grid__body p { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .product-grid { max-width: 100%; } .product-grid__image { margin-bottom: 0; } .product-grid__image img { height: auto; } .product-grid__body h3 { width: auto; } .product-grid__body p { margin: 0 0 1.81rem; } .product-grid__actions { padding-top: 0; } .product-grid__actions .btn { height: auto; min-width: 0; font-size: 12px; margin-top: 3px; padding-left: .625rem; padding-right: .625rem; } } /* ------------------------------------------------------------ *\ Promo \* ------------------------------------------------------------ */ .promo__meta { font-weight: 600; font-size: 1.875rem; margin: 0 0 2.375rem; } .promo__body { background-color: #f1f1f2; display: -webkit-flex; display: -ms-flexbox; display: flex; } .promo__image, .promo__content { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; position: relative; max-width: 50%; } .promo__image { overflow: hidden; text-align: center; } .promo__image img { width: 100%; height: auto; display: inline-block; } .promo__content { padding: 3.75rem 3.5rem 6.25rem; } .promo__content .default-title { font-size: 2.94rem; padding-bottom: 1.375rem; text-align: left; margin-bottom: 1.69rem; } .promo__content .default-title:after { width: 1rem; left: 0; margin-left: 0; } .promo__content p { font-size: 1.875rem; } .promo__content .btn { min-width: 12.625rem; position: absolute; right: 3.06rem; bottom: 2.875rem; } @media (max-width: 1899px) { .promo__image img { height: 50%; width: auto; max-width: none; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 1340px) { .promo__image img { height: 250px;} } @media (max-width: 1024px) { .promo__image img { height: 210px !important;} } @media (max-width: 920px) { .promo__image img { height: 170px !important;} } /* Small Desktop */ @media (max-width: 1199px) { .promo__content { padding: 1.875rem; } .promo__content .default-title { font-size: 2.19rem; } .promo__content p { font-size: 1.5rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .promo__meta { font-size: 20px; } .promo__content { padding: 30px 30px 80px; } .promo__content p { font-size: 18px; } .promo__content .btn { right: 30px; bottom: 30px; } .promo__image img { height: 320px; } } /* Mobile */ @media (max-width: 767px) { .promo__meta { margin-bottom: 13px; } .promo__meta p { font-size: 11px; } .promo__body { display: block; } .promo__image, .promo__content { max-width: 100% !important; } .promo__body .promo__image img { width: 100%; height: auto !important; } .promo__content { padding: 17px 19px 20px; text-align: right; } .promo__content p { font-size: 14px; text-align: left; margin-bottom: 13px; } .promo__content .default-title { font-size: 20px; padding-bottom: 5px; margin-bottom: 10px; } .promo__content .default-title:after { width: 10px; height: 1px; } .promo__content .btn { position: static; min-width: 0; } } /* ------------------------------------------------------------ *\ Rating \* ------------------------------------------------------------ */ .rating { font-size: 0; } .rating > p, .rating > ul { display: inline-block; vertical-align: middle; } .rating > p { margin: 0 1.375rem 0 0; font-size: 1.125rem; color: #7a7979; } .rating > p a { text-decoration: underline; } .rating > ul { list-style: none; margin: 0; padding: 0; } .rating > ul li { display: inline-block; vertical-align: middle; } .rating > ul li ~ li { margin-left: 0.56rem; } .rating > ul .fa { font-size: 1.31rem; color: #fade5e; } .rating ul[data-rating="0"] li .fa, .rating ul[data-rating="1"] li:nth-child(n+2) .fa, .rating ul[data-rating="2"] li:nth-child(n+3) .fa, .rating ul[data-rating="3"] li:nth-child(n+4) .fa, .rating ul[data-rating="4"] li:nth-child(n+5) .fa { color: #d1d1d1; } /* Rating Red */ .rating--red > ul .fa { font-size: 1.125rem; color: #d50032; } .rating--red > ul li ~ li { margin-left: 0.31rem; } /* Mobile */ @media (max-width: 767px) { .rating > p { font-size: 14px; margin-right: 13px; } .rating > ul .fa { font-size: 12px; } .rating > ul li ~ li { margin-left: 5px; } .rating--red > ul li ~ li { margin-left: 3px; } } /* ------------------------------------------------------------ *\ Related \* ------------------------------------------------------------ */ .related { text-align: center; } .related__image { margin-bottom: 4.75rem; } .related__image img { width: 100%; height: auto; } .related__content h3 { font-size: 1.75rem; text-transform: uppercase; margin: 0 0 1.875rem; } .related__content h3 span { display: block; } /* Mobile */ @media (max-width: 767px) { .related__image { margin-bottom: 14px; } .related__content h3 { font-size: 17px; margin-bottom: 15px; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { width: 18.31rem; position: relative; padding-right: 1.875rem; } .search label { font-family: 'WindleshamPro', sans-serif; font-size: 0.875rem; color: #444041; text-transform: uppercase; position: absolute; right: 1.875rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: opacity .4s ease; } .search__btn { font-weight: normal; font-size: 1.5rem; color: #444041; border: 0; background-color: transparent; padding: 0; position: absolute; right: 0; bottom: -3px; transition: opacity .4s ease; } .search__btn:hover { opacity: .75; } .search__btn .fa { -webkit-backface-visibility: hidden; } .search__btn--submit { display: none; } .search__field { width: 100%; background-color: #fff; border: 0; border-bottom: 1px solid #444041; font-family: 'WindleshamPro', sans-serif; font-size: 0.875rem; color: #444041; opacity: 0; transition: opacity .4s ease; position: relative; pointer-events: none; } .search__field:focus { opacity: 1; pointer-events: auto; } .search__field:focus + label { opacity: 0; pointer-events: none; } .search__field::-webkit-input-placeholder { color: #cacbcc; } .search__field::-moz-placeholder { color: #cacbcc; } .search__field:-moz-placeholder { color: #cacbcc; } .search__field:-ms-input-placeholder { color: #cacbcc; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .search__field { opacity: 1; visibility: visible; width: 0; overflow: hidden; } .search__field:focus { width: 100%; opacity: 1; } } /* Autocomplete */ .search .ui-autocomplete { top: 2.4375rem !important; background-color: #f1f1f2; box-shadow: 0 4px 8px rgba(0,0,0, .1); padding: 0.9375rem 1.25rem; border: 0; text-align: left; } .search .ui-autocomplete:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0.69rem 0.625rem 0.69rem; border-color: transparent transparent #f1f1f2 transparent; position: absolute; left: 50%; top: -0.625rem; margin-left: -0.69rem; } .search .ui-autocomplete li ~ li { position: relative; padding-top: 1.5rem; } .search .ui-autocomplete li ~ li:before { content: ''; width: 1.44rem; height: 1px; background-color: #444041; position: absolute; left: 0; top: 0.69rem; } .search .ui-autocomplete .ui-menu-item-wrapper { display: block; font-family: 'WindleshamPro', sans-serif; font-size: 0.875rem; color: #444041; padding: 0; transition: color .4s ease; } .search .ui-autocomplete .ui-menu-item-wrapper:hover, .search .ui-autocomplete .ui-menu-item-wrapper.ui-state-active { border: 0; background-color: transparent; color: #d50032; padding: 0; margin: 0; } @media (max-width: 1399px) { .search { width: 13.75rem; } } /* Small Desktop */ @media (max-width: 1199px) { .search { width: 100%; padding: 0; left: 0; top: 100%; z-index: 999; pointer-events: none; } .search .form__inner { background-color: #f1f1f2; padding: 1.25rem 1.44rem; position: relative; opacity: 0; transition: opacity .4s ease; } .search__field { height: 2rem; padding: 0.44rem 2.5rem 0.44rem 0.63rem; opacity: 1; border: 0; } .search label { display: none; } .search__btn { font-size: 2rem; right: 1.25rem; top: auto; bottom: 100%; margin-bottom: 1.6rem; pointer-events: auto; } .search__btn--submit { display: block; width: 2.25rem; height: 2rem; border: 0; border-radius: 3px; background-color: #444041; position: absolute; right: 1.44rem; bottom: 1.25rem; font-size: 0; color: #fff; line-height: 2rem; } .search__btn--submit:before, .search__btn--submit:after { content: ''; width: 18px; height: 1px; background-color: #fff; position: absolute; top: 5px; } .search__btn--submit:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; left: 8px; } .search__btn--submit:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; right: 7px; } .search.active .form__inner { opacity: 1; } .search.active { pointer-events: auto; } .search .ui-autocomplete { top: 5.625rem !important; } } /* Mobile */ @media (max-width: 767px) { .search__btn { font-size: 26px; margin-bottom: 12px; } .search__field { pointer-events: none; } .search.active .search__field { pointer-events: auto; } } /* ------------------------------------------------------------ *\ Search Results \* ------------------------------------------------------------ */ .search-results { border: 1px solid #9d9fa1; margin-bottom: 8.25rem; } .search-results__head { text-align: center; margin-bottom: 3.125rem; } .search-results__head h2 { display: inline-block; padding-left: 4.375rem; padding-right: 4.375rem; background-color: #fff; margin-top: -1.875rem; padding-bottom: 1.875rem; } .search-results__body { padding: 0 12.6% 6.1875rem 9.8%; } .search-result { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .search-result ~ .search-result { margin-top: 2.625rem; } .search-result__image { -webkit-flex: 0 0 26.3%; -ms-flex: 0 0 26.3%; flex: 0 0 26.3%; } .search-result__image img { width: 100%; height: auto; } .search-result__content { padding-left: 6.75rem; padding-right: 1.25rem; margin-top: 0.4375rem; } .search-result__content h5 { color: #444041; margin: 0 0 1.375rem; } .search-result__content h3 { font-weight: 700; font-size: 2.375rem; text-transform: uppercase; margin: 0; } .search-result__actions { -webkit-flex: 0 0 10.5rem; -ms-flex: 0 0 10.5rem; flex: 0 0 10.5rem; margin-left: auto; } .search-result__actions .btn { width: 100%; } @media (max-width: 1899px) { .search-results__body { padding: 0 4.375rem 6.1875rem 4.375rem; } } /* Small Desktop */ @media (max-width: 1199px) { .search-results { margin-bottom: 4.375rem; } .search-results__body { padding: 0 4.375rem 4.375rem 4.375rem; } .search-result__content { padding-left: 2.5rem; margin: 0; } .search-result__content h3 { font-size: 1.75rem; } .search-result__content h5 { margin-bottom: 0.625rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .search-results { margin-bottom: 30px; } .search-results__head { margin-bottom: 30px; } .search-results__head h2 { padding-bottom: 25px; } .search-results__body { padding: 0 30px 30px; } .search-result__content { padding-left: 20px; } .search-result__content h5 { font-size: 14px; } .search-result__content h3 { font-size: 24px; } } /* Mobile */ @media (max-width: 767px) { .search-results { border: 0; margin-bottom: 0; } .search-result ~ .search-result { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #444041; } .search-results__head { margin-bottom: 30px; } .search-results__head h2 { margin: 0; padding: 0 0 10px; } .search-results__head h2:after { height: 1px; } .search-results__body { padding: 0 0 30px; } .search-result { display: block; } .search-result__content { padding: 10px 0; } .search-result__content h5 { font-size: 11px; } .search-result__content h3 { font-size: 20px; } .search-result__actions { text-align: center; } .search-result__actions .btn { width: auto; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section__title { text-align: center; background-color: #f4f4f5; padding: 3.06rem 0 2.31rem; } .section__title .default-title { padding-bottom: 1.5rem; } .section__bar { padding: 2.06rem 0; } .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section__bar-inner .btn { padding-left: 1.56rem; padding-right: 1.56rem; } .section__bar-inner .btn--black { padding-left: 1.25rem; padding-right: 1.25rem; } .section__bar-inner ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section__bar-inner ul li { display: inline-block; vertical-align: middle; } .section__bar-inner ul li ~ li { margin-left: 1.5rem; } .section__bar ul a.back { background-color: #f4f4f5; padding-left: 2.375rem; position: relative; transition: background-color .4s ease; } .section__bar ul a.back:hover { background-color: rgb(220, 220, 221); } .section__bar ul a.back:before { content: ''; width: 0.75rem; height: 0.75rem; border: 2px solid #444041; border-right: 0; border-bottom: 0; position: absolute; left: 1.125rem; top: 0.69rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Mobile */ @media (max-width: 767px) { .section__title { padding: 17px 0 15px; } .section__title .default-title { padding-bottom: 10px; } .section__title .default-title:after { height: 1px; } } /* ------------------------------------------------------------ *\ Section Latest \* ------------------------------------------------------------ */ .section-latest { padding: 3.875rem 0 0; margin-bottom: 4.375rem; } .section-latest .section__head { text-align: center; margin-bottom: 2.875rem; } .section-latest .section__body { position: relative; padding-bottom: 2.875rem; } .section-latest .section__body:before { content: ''; width: 100%; height: 15rem; background-color: #f1f1f2; position: absolute; left: 0; bottom: 0; z-index: -1; } @media (max-width: 1899px) { .section-latest .section__body:before { width: auto; left: 0.625rem; right: 0.625rem; } } /* Small Desktop */ @media (max-width: 1199px) { .section-latest { margin-bottom: 1.875rem; padding: 4.125rem 0 0; } .section-latest .section__body { padding-bottom: 2.125rem; } .section-latest .section__body:before { height: 11.25rem; left: 0; right: 0; } } /* Mobile */ @media (max-width: 767px) { .section-latest { padding-top: 30px; margin-bottom: 37px; } .section-latest .section__head { margin-bottom: 32px; } .section-latest .section__body { padding-bottom: 15px; } .section-latest .section__body:before { height: 140px; } } /* ------------------------------------------------------------ *\ Section History \* ------------------------------------------------------------ */ .section-history { padding: 3.94rem 0; overflow: hidden; } .section-history .section__head { text-align: center; margin-bottom: 1.875rem; } .section-history .section__head h2 { margin-bottom: 2.5rem; } .section-history .section__head p { margin: 0 0 1.875rem; font-size: 1.125rem; } .section-history .section__head .btn { padding: 0.75rem 1.44rem 0.875rem; } .section-history .timeline-img { width: 100%; height: auto; } /* Small Desktop */ @media (max-width: 1199px) { .section-history { padding: 4.125rem 0 1.875rem; } .section-history .section__head { margin-bottom: 1rem; } .section-history .section__head p { font-size: 1rem; } .section-history .section__head h2 { margin-bottom: 3.56rem; } .section-history .section__head .btn { padding: 0.5rem 1.44rem 0.625rem; } } /* Mobile */ @media (max-width: 767px) { .section-history { padding: 32px 0 30px; } .section-history .section__head h2 { margin-bottom: 20px; } .section-history .section__head p { font-size: 14px; padding: 0 20px; text-align: left; line-height: 1.25; margin-bottom: 9px; } .section-history .section__head .btn { padding: 5px 11px 7px; } .section-history .section__body { overflow: hidden; } .section-history .timeline-img { max-width: none; width: auto; height: 220px; } } /* ------------------------------------------------------------ *\ Section Newsletter \* ------------------------------------------------------------ */ .section-newsletter .section__inner { background-color: #f1f1f2; padding: 4.06rem 0 0.75rem; } .section-newsletter .section__head { text-align: center; margin-bottom: 2.81rem; } .section-newsletter .section__body { width: 68.38rem; margin: 0 auto; } /* Small Desktop */ @media (max-width: 1199px) { .section-newsletter .section__inner { padding: 3.5rem 0 0.75rem; } .section-newsletter .section__body { width: 100%; } .section-newsletter .section__head { margin-bottom: 4.06rem; } } /* Mobile */ @media (max-width: 767px) { .section-newsletter .section__inner { padding: 27px 0 17px; } .section-newsletter .section__head { margin-bottom: 30px; } } /* ------------------------------------------------------------ *\ Section Grid \* ------------------------------------------------------------ */ .section-grid { margin: 1.5rem 0; } /* Small Desktop */ @media (max-width: 1199px) { .section-grid { margin: 1.875rem 0; } } /* Mobile */ @media (max-width: 767px) { .section-grid { margin: 20px 0; } } /* ------------------------------------------------------------ *\ Section Feeds \* ------------------------------------------------------------ */ .section-feeds { overflow: hidden; padding: 1.06rem 0 8.75rem; } .section-feeds .section__head { margin-bottom: 2.69rem; } .section-feeds .section__body { padding: 0 19.5% 0 21.4%; position: relative; } .section-feeds .section__body > .fa { position: absolute; top: -1.25rem; font-size: 32.5rem; z-index: -1; } .section-feeds .section__body > .fa-facebook { left: -3.125rem; color: #d0d6e4; } .section-feeds .section__body > .fa-twitter { top: -7.94rem; right: -12.56rem; font-size: 40rem; color: #c7e7fc; } .section-feeds .col--1of2 { width: 45%; } .section-feeds .col--1of2 ~ .col--1of2 { margin-left: 10%; } @media (max-width: 1899px) { .section-feeds { padding: 1.06rem 0 4.375rem; } .section-feeds .section__body { padding: 0 2.5rem; } .section-feeds .section__body > .fa { display: none; } } @media (max-width: 1399px) { .section-feeds .col--1of2 { width: 48%; } .section-feeds .col--1of2 ~ .col--1of2 { width: 45%; margin-left: 7%; } } /* Small Desktop */ @media (max-width: 1199px) { .section-feeds { padding-bottom: 3.75rem; padding-top: 1.875rem; } .section-feeds .section__head { margin-bottom: 3.375rem; } .section-feeds .section__body { padding: 0 3.75rem; } .section-feeds .section__body .cols { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: -1.875rem; margin-right: -1.875rem; } .section-feeds .section__body .col { padding-left: 1.875rem; padding-right: 1.875rem; } .section-feeds .col--1of2 { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%; padding-bottom: 5rem; position: relative; } .section-feeds .col--1of2 .feed__actions { width: 100%; position: absolute; left: 0; bottom: 0; margin: 0; } .section-feeds .col--1of2 ~ .col--1of2 { margin-left: 0; width: 100%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-feeds .col--1of2 { width: 100%; max-width: 100%; } .section-feeds .section__body .col { float: none; } .section-feeds .section__body .col ~ .col { margin-top: 60px; } .section-feeds .section__body .cols { display: block; } } /* Mobile */ @media (max-width: 767px) { .section-feeds { padding: 0 0 30px; } .section-feeds .section__head { margin-bottom: 22px; } .section-feeds .section__body { padding: 0 20px; } .section-feeds .section__body .col { padding-bottom: 55px; } .section-feeds .section__body .col ~ .col { margin-top: 26px; } } /* ------------------------------------------------------------ *\ Section Register Product \* ------------------------------------------------------------ */ .section-register-product { background-color: #f1f1f2; text-align: center; padding: 11.25rem 0 12.81rem; position: relative; overflow: hidden; } .section-register-product .section__image { position: absolute; bottom: 0; z-index: 1; } .section-register-product .section__image--left { left: 0; } .section-register-product .section__image--right { right: 0; } .section-register-product .section__content { width: 50rem; margin: 0 auto; position: relative; z-index: 2; } .section-register-product .section__content h5 { font-family: 'Segoe UI', sans-serif; font-weight: 400; color: #d50032; text-transform: uppercase; margin: 0 0 0.9375rem; } .section-register-product .section__content h1 { font-weight: 500; color: #444041; margin: 0 0 0.69rem; } .section-register-product .section__content p { font-size: 1.125rem; color: #444041; margin: 0 8% 2.125rem; } @media (max-width: 1899px) { .section-register-product .section__image { max-width: 25%; } } /* Small Desktop */ @media (max-width: 1199px) { .section-register-product { padding: 3.56rem 0 3.125rem; } .section-register-product .section__image { max-width: 29%; } .section-register-product .section__image--left { margin-left: -4%; } .section-register-product .section__image--right { margin-right: -4%; } .section-register-product .section__content h5, .section-register-product .section__content p { font-size: 1rem; } .section-register-product .section__content p { width: 56%; margin-left: auto; margin-right: auto; margin-bottom: 1.875rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-register-product { padding: 57px 0 256px; } .section-register-product .section__image { max-width: 33%; bottom: 40px; } } /* Mobile */ @media (max-width: 767px) { .section-register-product { padding: 27px 0 175px; } .section-register-product .section__image { max-width: 40%; bottom: 5px; } .section-register-product .section__image--left { left: 10px; } .section-register-product .section__image--right { right: 10px; } .section-register-product .section__content { width: 100%; } .section-register-product .section__content h5 { font-size: 11px; margin-bottom: 9px; } .section-register-product .section__content h1 { margin-bottom: 0; } .section-register-product .section__content p { width: 100%; font-size: 14px; text-align: left; padding: 0 20px 0 40px; margin-bottom: 18px; } } /* ------------------------------------------------------------ *\ Section Help \* ------------------------------------------------------------ */ .section-help { padding: 7.81rem 0 7.125rem; } .section-help .shell { max-width: 1120px; } .section-help .section__inner:after { content: ''; display: table; clear: both; } .section-help .section__body { float: left; width: 56%; position: relative; z-index: 10; } .section-help .section__body h5 { margin: 0 0 0.875rem; } .section-help .section__body h1 { font-weight: 500; margin: 0 0 0.625rem -0.31rem; } .section-help .section__body p { margin: 0 0 2.125rem; font-size: 1.125rem; color: #444041; } .section-help .section__body .btn { padding: 0.75rem 1.31rem 0.875rem; } .section-help .section__image { float: left; width: 50%; margin-right: -6%; margin-left: -4.5%; margin-top: -0.375rem; } @media (max-width: 1399px) { .section-help .section__image { width: 40%; margin-left: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .section-help { padding: 3.875rem 0 1.69rem; } .section-help .section__body, .section-help .section__image { width: 50%; padding: 0 1.875rem; } .section-help .section__body { padding-right: 3.75rem; } .section-help .section__body h5, .section-help .section__body p { font-size: 1rem; } .section-help .section__body p { margin-right: -1.875rem; margin-bottom: 1.875rem; } .section-help .section__body .btn { padding: 0.5rem 1.31rem 0.625rem; } .section-help .section__image { text-align: center; } .section-help .section__image img { width: 70%; margin-left: 21%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-help .section__body { float: none; width: 100%; } .section-help .section__image { float: right; margin-right: 5%; margin-top: -50px; } .section-help .section__image img { width: 100%; margin: 0; } } /* Mobile */ @media (max-width: 767px) { .section-help { padding: 31px 0 26px; } .section-help .section__body { text-align: center; padding: 0 20px; } .section-help .section__body h1 { margin-bottom: 0; } .section-help .section__body h5 { font-size: 11px; margin-bottom: 9px; } .section-help .section__body p { font-size: 14px; text-align: left; line-height: 1.25; margin-bottom: 15px; } .section-help .section__body .btn { padding: 5px 11px 7px; } .section-help .section__image { float: none; margin: -27px 0 0 0; width: 100%; text-align: right; padding: 0; } .section-help .section__image img { width: 48%; height: auto; position: relative; left: 17px; } } /* ------------------------------------------------------------ *\ Section Comm Detail \* ------------------------------------------------------------ */ .section-comm-detail .section__bar { padding: 2.5rem 0 6.38rem; } .section-comm-detail .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-comm-detail .section__bar ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-comm-detail .section__bar ul li { display: inline-block; vertical-align: middle; } .section-comm-detail .section__bar ul li ~ li { margin-left: 1.44rem; } .section-comm-detail .section__bar ul a, .section-comm-detail .section__bar ul p { height: 2.19rem; padding: 0.44rem 1.125rem 0.25rem; display: block; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; text-transform: uppercase; } .section-comm-detail .section__bar ul p { font-weight: 500; background-color: #444041; color: #fff; letter-spacing: 0; } .section-comm-detail .section__bar ul a.back { background-color: #f4f4f5; padding-left: 2.375rem; position: relative; transition: background-color .4s ease; } .section-comm-detail .section__bar ul a.back:hover { background-color: rgb(220, 220, 221); } .section-comm-detail .section__bar ul a.back:before { content: ''; width: 0.75rem; height: 0.75rem; border: 2px solid #444041; border-right: 0; border-bottom: 0; position: absolute; left: 1.125rem; top: 0.69rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .section-comm-detail .section__body-inner { padding: 0 6.8% 0 8.5%; } .section-comm-detail .section__body-inner:after { } .section-comm-detail .section__content { width: 44.5%; float: left; } .section-comm-detail .section__content h1 { font-weight: 500; margin: 0 0 1.44rem; } .section-comm-detail .section__content h1:first-child { margin-top: 4.5rem; margin-left: -0.25rem; } .section-comm-detail .section__content p { font-size: 1.125rem; margin: 0 0 1.5rem; letter-spacing: 0; } .section-comm-detail .section__content figure img { width: 100%; height: auto; max-width: 100%; } .section-comm-detail .section__content--left figure { margin-top: 8.625rem; } .section-comm-detail .section__content--right { float: right; } .section-comm-detail .section__content--right figure { margin-bottom: 6.25rem; } .section-comm-detail .section__content--right p { margin-right: -0.625rem; line-height: 1.25; margin-bottom: 1.19rem; } .section-comm-detail .section__actions { padding: 5.56rem 0 4.375rem; text-align: center; } .section-comm-detail .btn-group { font-size: 0; } .section-comm-detail .btn-group .btn { min-width: 13.75rem; margin: 0 2.19rem; padding: 0.75rem 1.25rem 0.875rem; } .section-comm-detail .btn-group ~ .btn-group { margin-top: 2.25rem; } .section-comm-detail .btn-group ~ .btn-group .btn { min-width: 0; margin: 0 0.94rem; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .section-comm-detail .section__bar ul a, .section-comm-detail .section__bar ul p { height: auto; padding: 0.81rem 1.125rem 0.25rem; } } @media (max-width: 1899px) { .section-comm-detail .section__body-inner { padding: 0 6%; } } @media (max-width: 1399px) { .section-comm-detail .section__bar { padding: 2.5rem 0; } .section-comm-detail .section__body-inner { padding: 0; } .section-comm-detail .section__content h1:first-child { margin-top: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .section-comm-detail .btn-group .btn { padding: 0.5rem 0.94rem 0.625rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-comm-detail .section__bar ul a, .section-comm-detail .section__bar ul p { height: auto; font-size: 16px; } .section-comm-detail .section__content { width: 48%; } .section-comm-detail .section__content--left figure { margin-top: 40px; } .section-comm-detail .section__content--right figure { margin-bottom: 40px; } .section-comm-detail .section__actions { padding: 40px 0; } .section-comm-detail .btn-group .btn { min-width: 200px; padding: 8px 15px 10px; margin: 0 15px; } .section-comm-detail .btn-group ~ .btn-group { margin-top: 25px; } } /* Mobile */ @media (max-width: 767px) { .section-comm-detail .section__bar { padding: 0; } .section-comm-detail .section__bar-inner { display: block; } .section-comm-detail .section__bar ul { margin-bottom: 10px; display: none; } .section-comm-detail .section__bar ul li ~ li { margin-left: 10px; } .section-comm-detail .section__bar ul a, .section-comm-detail .section__bar ul p { height: auto; font-size: 14px; padding: 5px 5px 2px; } .section-comm-detail .section__bar ul a.back { padding-left: 15px; } .section-comm-detail .section__bar ul a.back:before { width: 8px; height: 8px; border-width: 1px; left: 6px; top: 8px; } .section-comm-detail .section__body { padding-top: 20px; } .section-comm-detail .section__content { float: none; width: 100%; } .section-comm-detail .section__content h1 { margin-bottom: 20px; } .section-comm-detail .section__content p { font-size: 14px; } .section-comm-detail .section__content ~ .section__content { margin-top: 30px; } .section-comm-detail .section__content--left figure { margin-top: 30px; } .section-comm-detail .section__content--right figure { margin-bottom: 30px; } .section-comm-detail .section__actions { padding: 0 0 20px; } .section-comm-detail .btn-group .btn { width: 220px; display: block; margin: 0 auto; padding: 5px 22px 7px; } .section-comm-detail .btn-group .btn ~ .btn { margin-top: 10px; } .section-comm-detail .btn-group ~ .btn-group .btn { display: inline-block; width: auto; padding: 5px 12px 7px; margin: 0 7px; } } /* ------------------------------------------------------------ *\ Section Press release \* ------------------------------------------------------------ */ .section-press-release .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 2.125rem 0; } .section-press-release .section__bar-inner .btn { padding-left: 1.56rem; padding-right: 1.56rem; } .section-press-release .section__bar-inner .btn--black { padding-left: 1.25rem; padding-right: 1.25rem; } .section-press-release .section__bar-inner ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-press-release .section__bar-inner ul li { display: inline-block; vertical-align: middle; } .section-press-release .section__bar-inner ul li ~ li { margin-left: 1.5rem; } .section-press-release .section__body { padding-bottom: 2.19rem; } .section-press-release--thomson .section__bar-inner { padding: 1.875rem 0; } .section-press-release--thomson .section__bar-inner ul li p { margin: 0 0.625rem 0 0; font-weight: 600; font-size: 1.125rem; color: #444041; text-transform: uppercase; letter-spacing: 0; } /* Tablet Portrait */ @media (max-width: 1024px) { .section-press-release .section__bar-inner { display: block; } .section-press-release .section__bar-inner ul { margin-bottom: 20px; } .section-press-release--licencie .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; } .section-press-release--licencie .section__bar-inner ul { margin: 0; } } /* Mobile */ @media (max-width: 767px) { .section-press-release .section__bar { padding: 0; } .section-press-release .section__bar ul { display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 20px; margin-bottom: 10px; } .section-press-release .section__body { padding: 20px 0 0; } .section-press-release .section__bar-inner { text-align: center; padding: 0; } .section-press-release .section__bar-inner ul li ~ li { margin-left: 0; margin-top: 0; } .section-press-release .section__bar-inner ul li:nth-child(2) { -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .section-press-release .section__bar-inner ul li:last-child { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; text-align: left; } .section-press-release .section__bar-inner .btn { height: auto; } .section-press-release--thomson .section__bar-inner ul li:last-child { margin-top: 10px; } .section-press-release--licencie .section__bar-inner { display: block; } .section-press-release--licencie .section__bar-inner ul li { margin-right: 10px; margin-bottom: 10px; } .section-press-release--licencie .section__bar-inner ul li:last-child { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; margin-top: 0 !important; } } /* ------------------------------------------------------------ *\ Section Condition \* ------------------------------------------------------------ */ .section-condition .section__body { padding: 4.125rem 0 5.19rem; } .section-condition .section__body-inner { max-width: 1190px; margin: 0 auto; } .section-condition .section__body-inner p { margin-bottom: 1.25rem; } .section-condition .section__body-inner p:last-child { margin-bottom: 0; } /* Tablet Portrait */ @media (max-width: 1024px) { .section-condition .section__body { padding: 30px 0; } } /* Mobile */ @media (max-width: 767px) { .section-condition .section__body { padding: 20px 0; } } /* ------------------------------------------------------------ *\ Section Contact Press \* ------------------------------------------------------------ */ .section-contact-press { padding-bottom: 5.19rem; } .section-contact-press .section__bar { padding: 2.06rem 0; } .section-contact-press .section__bar .btn { padding-left: 1.81rem; padding-right: 1.81rem; } .section-contact-press .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-contact-press .section__bar ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-contact-press .section__bar ul li { display: inline-block; vertical-align: middle; } .section-contact-press .section__body { padding-top: 2.44rem; } .section-contact-press .section__body-inner { padding: 0 0 0 6.69rem; } .section-contact-press .section__body-inner:after { } .section-contact-press .section__content, .section-contact-press .section__image { float: left; width: 50%; } .section-contact-press .section__content { text-align: left; padding-top: 6.875rem; } .section-contact-press .section__content h2 { text-align: left; font-size: 2.375rem; padding-bottom: 2.31rem; margin-bottom: 2.25rem; } .section-contact-press .section__content h2:after { left: 0; margin-left: 0; } .section-contact-press .section__image { float: right; } .section-contact-press .section__image img { width: 100%; height: auto; } /* Section Contact Press Alt */ .section-contact-press--alt { padding-bottom: 7.06rem; } .section-contact-press--alt .section__bar { padding: 2.5rem 0 2.25rem; } .section-contact-press--alt .section__bar-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .section-contact-press--alt .section__image { padding-top: 2.56rem; } .section-contact-press--alt .section__body { padding: 0; } .section-contact-press--alt .section__content { padding-top: 0; } .section-contact-press--alt .section__content h2 ~ h2 { margin-top: 4.875rem; margin-bottom: 3rem; } .section-contact-press--alt .select-category { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 79%; } .section-contact-press--alt .select-category .select { -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; } .section-contact-press--alt .select-category .btn { -webkit-flex: 0 0 10.625rem; -ms-flex: 0 0 10.625rem; flex: 0 0 10.625rem; margin-left: 1.5rem; } @media (max-width: 1899px) { .section-contact-press { padding-bottom: 1.875rem; } .section-contact-press .section__body { padding-top: 1.875rem; } .section-contact-press .section__body-inner { padding: 0; } .section-contact-press .section__content { padding-top: 1.875rem; } } /* Small Desktop */ @media (max-width: 1199px) { .section-contact-press .section__content h2 { font-size: 2.19rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-contact-press .section__body { padding: 0; } .section-contact-press .section__body-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .section-contact-press .section__content, .section-contact-press .section__image { width: 100%; } .section-contact-press .section__image { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .section-contact-press .section__content h2 { font-size: 30px; padding-bottom: 20px; margin-bottom: 30px; } } /* Mobile */ @media (max-width: 767px) { .section-contact-press .section__bar { padding: 0; } .section-contact-press .section__bar ul { margin-top: 20px; } .section-contact-press .section__bar .btn { height: auto; } .section-contact-press .section__body { padding-top: 0; } .section-contact-press .section__content h2 { font-size: 18px; text-align: center; } .section-contact-press .section__content h2:after { left: 50%; margin-left: -15px; } .section-contact-press--alt { padding-bottom: 38px; } .section-contact-press--alt .section__content h2 ~ h2 { margin: 40px 0 20px; } .section-contact-press--alt .select-category { width: 100%; padding: 0; display: block; text-align: center; } .section-contact-press--alt .select-category .select { margin-bottom: 35px; background-color: #fff; } .section-contact-press--alt .select-category .select select { background-color: #fff; } .section-contact-press--alt .select-category .btn { margin-left: 0; } .section-contact-press.contact-presse-thomson .section__content h2, .section-contact-press.contact-presse-thomson .list-contact__sublist, .section-contact-press.contact-presse-thomson .select-category { text-align: left; } .section-contact-press.contact-presse-thomson .section__content h2:after, .section-contact-press.contact-presse-thomson .list-contact__sublist li:after { left: 0; margin-left: 0; } .section-contact-press.contact-presse-thomson .section__image { display: none; } } /* ------------------------------------------------------------ *\ Section Support Press \* ------------------------------------------------------------ */ .section-support-press { padding-bottom: 2.06rem; } .section-support-press .section__bar-inner { padding: 0 0 0 1.375rem; } .section-support-press .section__bar .btn { padding-left: 2.19rem; padding-right: 2.19rem; } .section-support-press .section__body { padding-top: 2px; } .section-support-press .section__content { padding-top: 9.19rem; } /* Section Support Press Alt */ .section-support-press--alt { padding-bottom: 3rem; } .section-support-press--alt .section__image { padding-top: 2px; } .section-support-press--alt .section__body-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 0 0 0 5.5rem; } .section-support-press--alt .section__content h2 { padding-bottom: 2.5rem; margin-bottom: 2.81rem; } @media (max-width: 1399px) { .section-support-press .section__content { padding-top: 1.875rem; } } /* Small Desktop */ @media (max-width: 1199px) { .section-support-press .section__bar-inner { padding: 0; } .section-support-press--alt .section__body-inner { padding: 0; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-support-press .section__bar-inner { padding: 0; } } /* Mobile */ @media (max-width: 767px) { .section-support-press--alt { padding-bottom: 38px; } .section-support-press--alt .section__content h2 { padding-bottom: 20px; margin-bottom: 30px; } .section-support-press .section__image, .section-support-press--alt .section__image { display: none; } .section-support-press .section__content h2, .section-support-press--alt .section__content h2 { text-align: left; } .section-support-press .section__content h2:after, .section-support-press--alt .section__content h2:after, .section-support-press .list-contact__sublist li:after { left: 0; margin-left: 0; } .section-support-press .select-category, .section-support-press--alt .select-category, .section-support-press .list-contact__sublist { text-align: left; } } /* ------------------------------------------------------------ *\ Section Registration \* ------------------------------------------------------------ */ .section-registration { padding-bottom: 2.5rem; } .section-registration .section__bar { padding: 2.06rem 0; } .section-registration .section__bar .btn { padding-left: 1.81rem; padding-right: 1.81rem; } .section-registration .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-registration .section__bar ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-registration .section__bar ul li { display: inline-block; vertical-align: middle; } .section-registration .section__body { position: relative; } .section-registration .section__image { width: 53%; margin-left: 47%; } .section-registration .section__image img { width: 100%; height: auto; } .section-registration .section__content { width: 100%; /*position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); */ z-index: 10; } .section-registration .section__content h2 { font-size: 2.375rem; text-align: left; margin-bottom: 3.06rem; padding-bottom: 2.19rem; } .section-registration .section__content h2:after { left: 0; margin-left: 0; } .section-registration .section__content .btn { padding-left: 3.06rem; padding-right: 3.06rem; } .section-registration .section__content-inner { width: 40%; text-align: left; padding-left: 6.625rem; } /* Section Registration Alt */ .section-registration--alt { padding-bottom: 3.375rem; } .section-registration--alt .section__bar { padding: 2.44rem 0; } .section-registration--alt .section__bar-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .section-registration--alt .section__content-inner { width: 50%; } .section-registration--alt .section__content h2 { padding-bottom: 2.75rem; margin-bottom: 2.81rem; } .section-registration--alt .select-category { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 85%; } .section-registration--alt .select-category .select { -webkit-flex: 0 1 100%; -ms-flex: 0 1 100%; flex: 0 1 100%; } .section-registration--alt .select-category .btn { -webkit-flex: 0 0 10.625rem; -ms-flex: 0 0 10.625rem; flex: 0 0 10.625rem; margin-left: 1.5rem; } @media (max-width: 1399px) { .section-registration .section__content-inner { padding: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .section-registration .section__content h2 { font-size: 2rem; } .section-registration .section__content-inner { width: 50%; } .section-registration .section__image { width: 60%; margin-left: 40%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-registration .section__content h2 { font-size: 24px; padding-bottom: 30px; margin-bottom: 40px; } } /* Mobile */ @media (max-width: 767px) { .section-registration { padding-bottom: 30px; } .section-registration .section__bar { padding: 0; } .section-registration .section__bar ul { margin-top: 20px; } .section-registration .section__bar .btn { height: auto; } .section-registration .select select { border-radius: 3px; } .section-registration .section__body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .section-registration .section__image { -webkit-order: -1; -ms-flex-order: -1; order: -1; display: none; } .section-registration .section__content-inner { width: 100%; } .section-registration .section__content { width: 100%; position: static; text-align: center; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); padding-top: 20px; } .section-registration .section__content h2 { font-size: 18px; padding-bottom: 20px; margin-bottom: 30px; text-align: left; } .section-registration .section__content .btn { min-width: 120px; padding-left: 10px; padding-right: 10px; } .section-registration--alt .select-category { width: 100%; padding: 0 0; display: block; text-align: left; } .section-registration--alt .select-category .select { margin-bottom: 35px; } .section-registration--alt .select-category .btn { margin-left: 0; } .section-registration--licencie { padding-bottom: 0; } .section-registration--licencie .section__image { display: block; -webkit-order: 10; -ms-flex-order: 10; order: 10; margin-top: 20px; } } /* ------------------------------------------------------------ *\ Section FAQ \* ------------------------------------------------------------ */ .section-faq { padding-bottom: 5.31rem; } .section-faq + .section-grid { margin-bottom: 4.81rem; } .section-faq .section__bar { padding: 2.31rem 0 2rem; } .section-faq .section__bar .btn { min-width: 25.625rem; padding-left: 2.06rem; padding-right: 2.06rem; } .section-faq .section__body { position: relative; padding-top: 2px; } .section-faq .section__body .tabs__head { position: absolute; left: 0; top: 0; } .section-faq .section__body .tabs__body { padding-left: 19.69rem; } /* Section FAQ Alt */ .section-faq--alt .section__content-inner { padding-left: 5.31rem; } .section-faq--alt .select-category { width: 82%; } .section-faq--alt + .section-grid { margin: 1.56rem 0 4.875rem; } @media (max-width: 1899px) { .section-faq .section__body .tabs__body { padding-left: 20.625rem; } } @media (max-width: 1399px) { .section-faq--alt .section__content-inner { padding-left: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .section-faq { padding-bottom: 2.5rem; } .section-faq .section__body .tabs__body { padding-left: 14.375rem; } .section-faq + .section-grid { margin-bottom: 1.875rem; } .section-faq--alt { padding-bottom: 0; } .section-faq--alt + .section-grid { margin: 1.875rem 0; } } /* Mobile */ @media (max-width: 767px) { .section-faq { padding-bottom: 30px; } .section-faq .section__bar { padding: 0; margin-left: 8%; margin-top : 3% } .section-faq .section__bar ul { display: block; margin: 0 0 10px; } .section-faq .section__bar ul .btn { min-width: 0; max-width: 100%; background-color: transparent; } .section-faq .section__body .tabs__head { position: relative; } .section-faq .section__body .tabs__body { padding: 20px 0 0; } .section-faq + .section-grid { margin: 0 0 20px; } .section-faq--alt .select-category { width: 100%; } .section-faq--alt + .section-grid { margin: 30px 0 20px; } .section-faq--alt + .section-grid .grid-banners .grid-item { height: 286px; } .section-faq--alt + .section-grid .grid-item--vertical-center .grid-item__content { top: 30px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* ------------------------------------------------------------ *\ Section Promo Detail \* ------------------------------------------------------------ */ .section-promo-detail .section__bar { padding: 2.44rem 0 2.56rem; } .section-promo-detail .section__bar ul a { height: 2.19rem; padding: 0.44rem 1.125rem 0.25rem 2.125rem; display: block; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; text-transform: uppercase; } .section-promo-detail .section__bar ul a.back:before { top: 0.75rem; } .section-promo-detail .section__bar ul p { margin: 0; font-weight: 600; font-size: 1.5rem; } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .section-promo-detail .section__bar ul a { height: auto; padding: 0.81rem 1.125rem 0.25rem 2.125rem; } .section-promo-detail .section__bar ul a.back:before { top: 0.875rem; } } /* Mobile */ @media (max-width: 767px) { .section-promo-detail .section__bar { padding: 35px 20px 33px; } .section-promo-detail .section__bar ul a { height: auto; font-size: 14px; padding: 2px 5px 2px 16px; } .section-promo-detail .section__bar ul li ~ li { margin-left: 10px; } .section-promo-detail .section__bar ul li:last-child { display: block; margin-left: 0; margin-top: 10px; } .section-promo-detail .section__bar ul a.back:before { width: 8px; height: 8px; left: 6px; top: 5px; } .section-promo-detail .section__bar ul p { font-size: 12px; letter-spacing: 0; } } /* ------------------------------------------------------------ *\ Section Related \* ------------------------------------------------------------ */ .section-related { margin: 10.5rem 0 4.125rem; } .section-related .section__inner { background-color: #f1f1f2; padding: 4.75rem 0 6.5rem; } .section-related .section__head { margin-bottom: 4.375rem; } /* Small Desktop */ @media (max-width: 1199px) { .section-related { margin: 3.125rem 0; } .section-related .section__inner { padding: 3.125rem 0; } } /* Mobile */ @media (max-width: 767px) { .section-related { margin: 50px -20px 20px; } .section-related .section__inner { padding: 30px 20px; } .section-related .section__head { margin-bottom: 30px; } } /* Mobile */ @media (max-width: 767px) { .section-related { margin-top: 38px; margin-bottom: 16px; } .section-related .section__inner { padding: 25px 20px 33px; } .section-related .section__head { margin-bottom: 27px; } } /* ------------------------------------------------------------ *\ Section Promo \* ------------------------------------------------------------ */ .section-promo { padding-bottom: 6.625rem; } .section-promo p { letter-spacing: 0; } .section-promo .section__body-inner { padding: 0 2.375rem 0 2.19rem; } .section-promo .section__body-inner > .default-title { text-align: left; padding-bottom: 2.31rem; margin-bottom: 3.75rem; } .section-promo .section__body-inner > .default-title:after { left: 0; margin-left: 0; } .section-promo .section__bar { padding: 2.19rem 0 3.875rem; } .section-promo .section__bar-inner { padding: 0 0 0 2.19rem; } .section-promo .list-promos + .default-title { margin-top: 8.75rem; } /* Small Desktop */ @media (max-width: 1199px) { .section-promo .list-promos + .default-title { margin-top: 3.75rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-promo { padding-bottom: 40px; } .section-promo .section__bar { padding: 30px 0; } .section-promo .section__bar-inner { padding: 0; } .section-promo .section__body-inner { padding: 0; } .section-promo .section__body-inner > .default-title { padding-bottom: 25px; margin-bottom: 35px; } } /* Mobile */ @media (max-width: 767px) { .section-promo { padding-bottom: 80px; position: relative; } .section-promo .section__bar { position: static; } .section-promo .section__bar ul { top: 5px; position: relative; } .section-promo .section__bar ul .btn { padding-left: 10px; padding-right: 10px; } .section-promo .section__body { padding: 16px 0 0; } .section-promo .section__body-inner > .default-title { padding-bottom: 4px; margin-bottom: 20px; } .section-promo .section__body-inner > .default-title:after { width: 20px; height: 1px; } .section-promo .list-promos + .default-title { margin-top: 24px; } } /* ------------------------------------------------------------ *\ Section Product \* ------------------------------------------------------------ */ .section-product { position: relative; padding-top: 5.69rem; } .section-product > .section__head { width: 100%; height: 5.69rem; background-color: #fff; position: absolute; left: 0; top: 0; z-index: 98; } .section-product .section__head-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 0 2.19rem 0 2.125rem; } .section-product .section__head-inner .btn { padding: 0.8rem 1.5rem 0.75rem; } .section-product .section__head-inner ul:not([class]) { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-product .section__head-inner ul:not([class]) li { display: inline-block; vertical-align: middle; } .section-product .section__head-inner ul:not([class]) li ~ li { margin-left: 2.69rem; } .section-product > .section__head.fixed { position: fixed; } /* Small Desktop */ @media (max-width: 1199px) { .section-product > .section__head { top: 0; z-index: 98; } .section-product .section__head-inner .btn { padding: 0.55rem 1.5rem 0.5rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-product .section__head-inner { padding: 0; white-space: nowrap; } .section-product .section__head-inner .checkbox label { font-size: 14px; } .section-product .section__head-inner .btn { padding-left: 15px; padding-right: 15px; } .section-product .section__head-inner ul:not([class]) li ~ li { margin-left: 10px; } } /* Mobile */ @media (max-width: 767px) { .section-product { padding-top: 105px; } .section-product > .section__head { position: absolute; height: 53px; top: 52px; } .section-product > .section__head.fixed { position: fixed; top: 52px; } .section-product .section__head-inner { display: block; padding-top: 13px; } .section-product .section__head-inner ul:not([class]) { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-product .section__head-inner ul:not([class]) .btn { font-weight: 400; font-size: 12px; } } /* ------------------------------------------------------------ *\ Section Pubs \* ------------------------------------------------------------ */ .section-pubs .section__body { padding: 2.44rem 0 1.75rem; background: url(../css/../../images/default/temp/pubs-bg.jpg) no-repeat 92% 5.88rem; } .section-pubs .section__body-inner { overflow: hidden; } .section-pubs .section__content { float: left; width: 60.23%; padding: 4.75rem 0 2.5rem; margin-left: 13.27%; } .section-pubs .section__aside { float: left; } .section-pubs .section__aside--left { width: 13%; } .section-pubs .section__aside--right { float: right; width: 13.5%; text-align: right; } .section-pubs .hide-videos .media--video, .section-pubs .hide-images .media--image { display: none; } @media (max-width: 1899px) { .section-pubs .section__aside--left { width: 14.375rem; } .section-pubs .section__content { width: calc(100% - 31.25rem); margin: 0 0.94rem; padding: 0 0 2.5rem; } } /* Small Desktop */ @media (max-width: 1199px) { .section-pubs .section__aside--right { width: auto; white-space: nowrap; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-pubs .section__aside { width: 100%; float: none; position: relative !important; top: auto !important; bottom: auto !important; z-index: 2; } .section-pubs .section__aside + div:empty { display: none !important; } .section-pubs .section__aside--right { text-align: center; clear: both; } .section-pubs .section__content { padding: 30px 0; width: 100%; margin: 0; } } /* Mobile */ @media (max-width: 767px) { .section-pubs .section__title h2 { width: 60%; margin: 0 auto; } .section-pubs .section__body { background: #fff; padding: 25px 0 0; } .section-pubs .section__content { float: none; padding: 17px 0 13px; } .section-pubs .section__aside--left { z-index: 11; } .section-pubs .section__aside--right { z-index: 10; } } /* ------------------------------------------------------------ *\ Section Mag \* ------------------------------------------------------------ */ .section-mag .section__bar { padding: 2.44rem 0; } .section-mag .section__bar-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .section-mag .section__body { padding: 0 0 2.81rem; } .section-mag .section__actions { text-align: center; padding-bottom: 4.375rem; } .section-mag .section__actions .btn { height: auto; padding: 0.75rem 1.375rem 0.875rem; } /* Section Mag Actus */ .section-mag--actus .section__body { padding-bottom: 2.31rem; } .section-mag--actus .section__actions { font-size: 0; } .section-mag--actus .section__actions .btn { margin: 0 2.19rem; padding-left: 1.56rem; padding-right: 1.56rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .section-mag .section__body { padding-bottom: 0; } .section-mag .section__actions { padding-bottom: 35px; } .section-mag--actus .section__actions .btn { width: 48%; margin: 0; } .section-mag--actus .section__actions .btn ~ .btn { margin-left: 4%; } } /* Mobile */ @media (max-width: 767px) { .section-mag .section__bar { padding: 0; } .section-mag .section__body { padding: 20px 0 0; } .section-mag .section__actions { padding: 0; margin: 0 0 28px; } .section-mag .section__actions .btn { padding: 5px 12px; } .section-mag--actus .section__actions .btn { width: 100%; } .section-mag--actus .section__actions .btn ~ .btn { margin-left: 0; margin-top: 15px; } } /* ------------------------------------------------------------ *\ Section Articles \* ------------------------------------------------------------ */ /* Section Articles Thomson */ .section-articles .section__bar { padding: 2.125rem 0; } .section-articles .section__bar-inner { padding: 0; } .section-articles .label { font-family: 'WindleshamPro', sans-serif; padding: 0.375rem 1.25rem 0.125rem; font-weight: 500; font-size: 1.25rem; background-color: #444041; position: absolute; left: 2.125rem; top: -0.31rem; color: #fff; text-transform: uppercase; z-index: 10; } .section-articles .list-cards-press { overflow: visible; } .section-articles .list-cards-press:after { } .section-articles .card-press { position: relative; } .section-articles--thomson .section__bar { padding: 1.875rem 0; } .section-articles--thomson .section__bar-inner { padding: 0; } .section-articles--thomson .section__bar-inner ul .results-num { display: block; font-size: 1.125rem; color: #b1b2b2; padding-left: 1.25rem; } /* Small Desktop */ @media (max-width: 1199px) { .section-articles .label { left: 6.25rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-articles .label { left: 150px; } } /* Mobile */ @media (max-width: 767px) { .section-articles .label { left: 20px; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .section-articles .section__bar { display: block; padding: 0; } .section-articles .section__bar ul { display: none; } .section-articles--thomson .section__bar-inner ul .results-num { padding: 10px 0 0; } } /* ------------------------------------------------------------ *\ Section Actu Detail \* ------------------------------------------------------------ */ .section-actu-detail { padding-bottom: 2.06rem; } .section-actu-detail .section__bar { padding: 2.44rem 0; } .section-actu-detail .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-actu-detail .section__bar ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-actu-detail .section__bar ul li { display: inline-block; vertical-align: middle; } .section-actu-detail .section__bar ul li ~ li { margin-left: 1.44rem; } .section-actu-detail .section__bar ul a, .section-actu-detail .section__bar ul p { height: 2.19rem; padding: 0.44rem 1.125rem 0.25rem; display: block; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; text-transform: uppercase; } .section-actu-detail .section__bar ul a { pointer-events: none; } .section-actu-detail .section__bar ul span { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 0.875rem; letter-spacing: 0; text-transform: none; } .section-actu-detail .section__bar ul a.back { background-color: #f4f4f5; padding-left: 2.375rem; position: relative; transition: background-color .4s ease; } .section-actu-detail .section__bar ul a.back:hover { background-color: rgb(220, 220, 221); } .section-actu-detail .section__bar ul a.back:before { content: ''; width: 0.75rem; height: 0.75rem; border: 2px solid #444041; border-right: 0; border-bottom: 0; position: absolute; left: 1.125rem; top: 0.69rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* Tablet Portrait */ @media (max-width: 1024px) { .section-actu-detail .section__bar ul a.btn { padding: 0.47rem 1.125rem 0.25rem; } } /* Mobile */ @media (max-width: 767px) { .section-actu-detail .shell { padding-left: 40px; padding-right: 40px; } .section-actu-detail .section__bar { padding: 10px 0 35px; } .section-actu-detail .section__bar ul a, .section-actu-detail .section__bar ul p { height: auto; font-size: 14px; padding: 5px 7px 3px; } .section-actu-detail .section__bar ul a.back { padding: 4px 7px 4px 16px; } .section-actu-detail .section__bar ul a.back:before { width: 8px; height: 8px; left: 6px; top: 7px; border-width: 1px; } .section-actu-detail .section__bar ul li ~ li { margin-left: 7px; } .section-actu-detail .section__bar ul li:last-child { display: block; margin-top: 6px; margin-left: 0; } .section-actu-detail .section__bar ul span { font-size: 11px; } } /* ------------------------------------------------------------ *\ Section Timeline \* ------------------------------------------------------------ */ .section-timeline .section__bar { padding: 2.44rem 0 4.56rem; } .section-timeline .section__bar-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .section-timeline .section__body-inner > h3, .section-timeline .section__body-inner > p { margin: 0; text-align: center; } .section-timeline .section__body-inner > h3 { width: 63%; margin: 0 auto 3rem; font-weight: 500; font-size: 1.875rem; text-transform: uppercase; } .section-timeline .section__body-inner > h3 span { display: block; } .section-timeline .section__body-inner > p { width: 63%; margin: 0 auto 9.56rem; font-size: 1.125rem; letter-spacing: 0; } @media (max-width: 1899px) { .section-timeline .section__body-inner > p { margin: 0 auto 3.125rem; } .section-timeline .section__body-inner > p br { display: none; } } /* Small Desktop */ @media (max-width: 1199px) { .section-timeline .section__body-inner > h3, .section-timeline .section__body-inner > p { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .section-timeline .section__bar { padding: 0; } .section-timeline .section__body { padding-top: 30px; } .section-timeline .section__body-inner > h3, .section-timeline .section__body-inner > p { text-align: left; } .section-timeline .section__body-inner > h3 { font-size: 22.5px; margin-bottom: 20px; } .section-timeline .section__body-inner > p { font-size: 14px; margin-bottom: 40px; } } /* ------------------------------------------------------------ *\ Section Values \* ------------------------------------------------------------ */ .section-values .section__bar { padding: 2.375rem 0 2.125rem; } .section-values .section__bar-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .section-values .section__body-inner { padding: 0 1.25rem 0 0.63rem; } .section-values .section__intro { margin-bottom: 3.125rem; } .section-values .section__intro p { font-size: 1.125rem; letter-spacing: 0; margin-bottom: 1.44rem; } .section-values .section__intro h3 { font-weight: 500; font-size: 1.875rem; margin: 0 0 2.625rem; } .section-values .section__intro .cols { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 1.25rem 0 10.125rem; } .section-values .section__intro .col { -webkit-flex: 0 0 39%; -ms-flex: 0 0 39%; flex: 0 0 39%; max-width: 39%; } .section-values .section__intro .col ~ .col { -webkit-flex: 0 0 61%; -ms-flex: 0 0 61%; flex: 0 0 61%; max-width: 61%; text-align: center; } .section-values .section__intro .col ~ .col img { margin-right: 2.5rem; margin-bottom: 2.5rem; } .section-values .section__intro > p { width: 70%; margin: 5.06rem 0 0; padding: 0 0 0 10rem; } .section-values .section__grid { margin-top: 5.625rem; margin-bottom: 4.06rem; } .section-values .section__grid:after { } .section-values .section__video { width: 81.5%; margin: 0 auto 100px; padding-bottom: 45.6%; position: relative; overflow: hidden; } .section-values .section__video a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4; display: block; text-decoration: none; } .section-values .section__video img { width: 100%; height: auto; } .section-values .section__video i { position: absolute; left: 50%; top: 50%; margin-left: -1.875rem; margin-top: -1.875rem; z-index: 5; } .section-values .section__video iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; visibility: hidden; } .section-values .section__video.playing a { display: none; } .section-values .section__video.playing iframe { visibility: visible; } .section-values .item { width: 50%; } .section-values .item:nth-child(n+3) { margin-top: 4.375rem; } .section-values .item:nth-child(odd) { float: left; text-align: right; padding-right: 2.25rem; } .section-values .item:nth-child(even) { float: right; text-align: left; padding-left: 2.25rem; } .section-values .item__content h3 { font-weight: 500; font-size: 1.875rem; margin: 0 0 1.125rem; } .section-values .item__content p { margin: 0; font-size: 1rem; } .section-values .item--top .item__content { display: inline-block; width: 47%; margin-bottom: 3.5rem; } .section-values .item--right { margin-top: 9.19rem; font-size: 0; } .section-values .item--right .item__image, .section-values .item--right .item__content { display: inline-block; vertical-align: bottom; } .section-values .item--right .item__image { width: 51.5%; } .section-values .item--right .item__image img { width: 100%; height: auto; } .section-values .item--right .item__content { width: 39.5%; padding-left: 3.625rem; } .section-values .item--bottom .item__content { width: 58%; display: inline-block; padding-top: 3.5rem; } .section-values .item--bottom:nth-child(4) .item__content { width: 70%; padding-top: 3.125rem; } .section-values .item--bottom:nth-child(5) { margin-top: 2.31rem; } .section-values .item--bottom:nth-child(5) .item__content { width: 55%; } @media (max-width: 1899px) { .section-values .section__intro .cols { padding: 0; } .section-values .section__intro > p { width: 100%; padding: 0; } .section-values .item--top .item__image { width: 80%; margin-left: 20%; } .section-values .item--right .item__image { width: 54.5%; } .section-values .item--right .item__content { width: 45.5%; } } /* Small Desktop */ @media (max-width: 1199px) { .section-values .section__intro .cols { -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .section-values .section__intro .col { width: 100%; max-width: 100%; padding: 0 0.94rem; } .section-values .section__intro .col ~ .col { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .section-values .section__intro > p { margin-top: 3.125rem; } .section-values .section__grid { margin: 3.125rem 0; } .section-values .item__content h3 { font-size: 1.75rem; margin-bottom: 0.625rem; } .section-values .item__content p { font-size: 1.15rem; } .section-values .item--top .item__content { width: 60%; margin-bottom: 1.25rem; } .section-values .item--right { margin-top: 7.5rem; } .section-values .item--right .item__content { padding-left: 1.25rem; } .section-values .item--bottom .item__content { width: 70%; padding-top: 1.25rem; } .section-values .item--bottom:nth-child(4) .item__content { padding-top: 1.25rem; } .section-values .item--bottom:nth-child(5) .item__content { width: 70%; } .section-values .section__video { width: 100%; margin: 0 auto 3.125rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-values .section__intro { margin-bottom: 6rem; } .section-values .section__intro h3 { margin-bottom: 30px; } .section-values .section__intro p:last-child { margin-bottom: 0; } .section-values .section__intro > p { margin-top: 20px; } .section-values .item:nth-child(odd) { padding-right: 15px; } .section-values .item:nth-child(even) { padding-left: 15px; } .section-values .item__content h3 { font-size: 24px; } .section-values .item--top .item__content { width: 90%; } .section-values .item--top .item__image { width: 100%; margin-left: 0; } .section-values .item--right .item__image { width: 60%; } .section-values .item--right .item__content { width: 100%; padding-left: 0; padding-top: 20px; } .section-values .item--bottom .item__content, .section-values .item--bottom:nth-child(4) .item__content, .section-values .item--bottom:nth-child(5) .item__content { width: 90%; } } /* Mobile */ @media (max-width: 767px) { .section-values .section__bar { padding: 0; } .section-values .section__intro .col ~ .col img { margin: 20px 0; } .section-values .section__intro h3 { font-size: 22.5px; margin-bottom: 10px; } .section-values .section__intro p { font-size: 14px; margin-bottom: 15px; } .section-values .section__intro > p { margin-top: 15px; } .section-values .section__body-inner { padding: 0; } .section-values .item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; float: none; width: 100%; text-align: left; padding: 0; } .section-values .item ~ .item { margin-top: 40px; } .section-values .item--top .item__image { width: 100%; -webkit-order: -1; -ms-flex-order: -1; order: -1; } .section-values .item--top .item__content { width: 100%; padding: 20px 0 0; margin-bottom: 0; } .section-values .item__content p { font-size: 1.25rem; } .section-values .item:nth-child(odd), .section-values .item:nth-child(even) { padding: 0; text-align: left; } .section-values .item--right { margin-top: 0; } .section-values .item--right .item__image, .section-values .item--bottom .item__content, .section-values .item--bottom:nth-child(4) .item__content, .section-values .item--bottom:nth-child(5) .item__content { width: 100%; } .section-values .section__video { padding-bottom: 56.25%; } } /* ------------------------------------------------------------ *\ Section Compare \* ------------------------------------------------------------ */ .section-compare .section__bar { padding: 2.44rem 0 6.31rem; } .section-compare .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-compare .section__bar .btn--print { margin-left: auto; margin-right: 3.25rem; } .section-compare .section__bar ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-compare .section__bar ul li { display: inline-block; vertical-align: middle; } .section-compare .section__bar ul li ~ li { margin-left: 1.44rem; } .section-compare .section__bar ul a, .section-compare .section__bar ul p { height: 2.19rem; padding: 0.44rem 1.125rem 0.25rem; display: block; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; text-transform: uppercase; } .section-compare .section__bar ul span { font-family: 'Segoe UI', sans-serif; font-weight: 400; font-size: 0.875rem; letter-spacing: 0; text-transform: none; } .section-compare .section__bar ul a.back { background-color: #f4f4f5; padding-left: 2.375rem; position: relative; transition: background-color .4s ease; } .section-compare .section__bar ul a.back:hover { background-color: rgb(220, 220, 221); } .section-compare .section__bar ul a.back:before { content: ''; width: 0.75rem; height: 0.75rem; border: 2px solid #444041; border-right: 0; border-bottom: 0; position: absolute; left: 1.125rem; top: 0.69rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .section-compare .section__body-inner { padding: 0 4.375rem; } @media (max-width: 1899px) { .section-compare .section__body-inner { padding: 0; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-compare .section__bar { padding: 30px 0; } } /* Mobile */ @media (max-width: 767px) { .section-compare .section__bar { padding: 12px 20px 17px; } .section-compare .section__bar ul a.back { height: auto; font-size: 14px; padding: 2px 5px 1px 16px; } .section-compare .section__bar ul a.back:before { width: 8px; height: 8px; left: 6px; top: 5px; } .section-compare .section__bar-inner { display: block; overflow: hidden; } .section-compare .section__bar-inner > ul { float: left; } .section-compare .section__bar-inner > .btn--print { float: right; margin: 0; font-size: 9px; position: relative; top: -5px; } .section-compare .section__bar-inner > .btn--print i { -webkit-transform: scale(.6); -ms-transform: scale(.6); transform: scale(.6); margin-right: 7px; } .section-compare .section__body-inner { margin: 0 -20px; } } /* ------------------------------------------------------------ *\ Section Products \* ------------------------------------------------------------ */ .section-products .shell { max-width: 1480px; } .section-products .section__bar { padding: 1.875rem 0; } .section-products .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-products .section__bar-inner .btn { padding-left: 1.56rem; padding-right: 1.56rem; } .section-products .section__bar-inner .btn--black { padding-left: 1.25rem; padding-right: 1.25rem; } .section-products .section__bar-inner ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-products .section__bar-inner ul li { display: inline-block; vertical-align: middle; } .section-products .section__bar-inner ul li p { margin: 0 0.625rem 0 0; font-weight: 600; font-size: 1.125rem; color: #444041; text-transform: uppercase; letter-spacing: 0; } .section-products .section__bar-inner ul .results-num { display: block; font-size: 1.125rem; color: #b1b2b2; padding-left: 0.56rem; } .section-products .section__bar-inner ul li ~ li { margin-left: 1.56rem; } .section-products .section__body { padding-bottom: 2.19rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .section-products .section__bar-inner { display: block; } .section-products .section__bar-inner ul { margin-bottom: 20px; } } /* Mobile */ @media (max-width: 767px) { .section-products .section__bar { padding: 0; } .section-products .section__bar-inner ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 20px 0 10px; } .section-products .section__bar-inner ul li:last-child { display: block; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; margin: 10px 0 0 0; } .section-products .section__bar-inner ul li:nth-child(2) { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .section-products .section__bar-inner ul .results-num { padding: 0; } .section-products .section__body { padding-top: 20px; padding-bottom: 0; } } /* ------------------------------------------------------------ *\ Section Download \* ------------------------------------------------------------ */ .section-download .section__bar { padding: 2.44rem 0 0.75rem; } .section-download .section__bar-inner { -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @media (max-width: 1899px) { .section-download .section__bar { padding: 2.44rem 0; } } /* Mobile */ @media (max-width: 767px) { .section-download .section__bar { padding: 0; } .section-download .section__body { padding-top: 20px; } } /* ------------------------------------------------------------ *\ Section Gammes \* ------------------------------------------------------------ */ .section-gammes { text-align: center; padding: 3.94rem 0 8.75rem; } .section-gammes .section__head { margin-bottom: 3.56rem; } /* Small Desktop */ @media (max-width: 1199px) { .section-gammes { padding: 3.75rem 0; } .section-gammes .section__body { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .section-gammes { padding: 30px 0; } .section-gammes .section__head { margin-bottom: 30px; } .section-gammes .section__head h2 { padding-bottom: 11px; } .section-gammes .section__head h2:after { height: 1px; } .section-gammes .section__body { width: auto; margin: 0 -18px; } } /* ------------------------------------------------------------ *\ Section Category Grid \* ------------------------------------------------------------ */ .section-category-grid .section__group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #f1f1f2; } .section-category-grid .section__group-image, .section-category-grid .section__group-content { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .section-category-grid .section__group-image { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .section-category-grid .section__group-image-inner { padding-bottom: 78.2%; position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; } .section-category-grid .section__group:nth-child(even) .section__group-content { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .section-category-grid .section__group-content { padding: 2.5rem 8.5rem; } .section-category-grid .section__group-content h5 { margin: 0 0 0.875rem; } .section-category-grid .section__group-content h2 { font-weight: 500; margin: 0 0 0.625rem; } .section-category-grid .section__group-content p { margin-bottom: 2.5rem; } .section-category-grid .section__group-content .btn { min-width: 10.5rem; transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; } .section-category-grid .section__group-content .btn:hover { background-color: #fff; box-shadow: inset 0 0 0 1px #fff; } .section-category-grid--alt .section__group:nth-child(odd) .section__group-content { -webkit-order: -1; -ms-flex-order: -1; order: -1; } .section-category-grid--alt .section__group:nth-child(even) .section__group-content { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .section-category-grid--alt .section__group-content { padding: 2.5rem 7.5rem 2.5rem 8.5rem; } @media (max-width: 1899px) { .section-category-grid .section__group-content { padding: 2.5rem 5rem; } } @media (max-width: 1399px) { .section-category-grid .section__group-content { padding: 2.5rem; } } /* Small Desktop */ @media (max-width: 1199px) { .section-category-grid .section__group-content h2 { font-size: 2.19rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-category-grid .section__group-image-inner { padding-bottom: 120%; } .section-category-grid .section__group-content p { margin-bottom: 20px; } } /* Mobile */ @media (max-width: 767px) { .section-category-grid .shell { padding: 0; } .section-category-grid .section__group { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .section-category-grid .section__group-content, .section-category-grid .section__group-image { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .section-category-grid .section__group-content { -webkit-order: 1; -ms-flex-order: 1; order: 1; padding: 26px 38px 20px; text-align: center; } .section-category-grid .section__group-content h5 { font-size: 11px; margin-bottom: 9px; text-align: left; } .section-category-grid .section__group-content h2 { width: 80%; font-size: 22.5px; margin-bottom: 0; text-align: left; } .section-category-grid .section__group-content p { text-align: left; } .section-category-grid .section__group-content .btn { min-width: 0; } .section-category-grid .section__group-image { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .section-category-grid .section__group-image-inner { padding: 0; height: 202px; } } /* ------------------------------------------------------------ *\ Section Selection \* ------------------------------------------------------------ */ .section-selection { margin: 5.5rem 0; } .section-selection .section__inner { border: 1px solid #444041; } .section-selection .section__head { position: relative; z-index: 5; margin: -1.56rem 0 6.19rem; text-align: center; } .section-selection .section__head h2 { display: inline-block; padding: 0 4.81rem 2.19rem; background-color: #fff; } .section-selection .section__body { padding: 0 10.94rem 3.5rem; position: relative; overflow: hidden; } .section-selection .section__body .owl-carousel .owl-stage-outer:before, .section-selection .section__body .owl-carousel .owl-stage-outer:after { content: ''; width: 6rem; height: 100%; position: absolute; top: 0; z-index: 10; } .section-selection .section__body .owl-carousel .owl-stage-outer:before { left: -5px; background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bfffffff',GradientType=1 ); } .section-selection .section__body .owl-carousel .owl-stage-outer:after { right: -5px; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#ffffff',GradientType=1 ); } /* Section Selection Alt */ .section-selection--alt .section__head { margin-bottom: 4.44rem; } @media (max-width: 1899px) { .section-selection .section__body { padding: 0 4.69rem 3.5rem; } } @media (max-width: 1399px) { .section-selection .section__body .owl-carousel .owl-stage-outer:before, .section-selection .section__body .owl-carousel .owl-stage-outer:after { width: 3rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-selection { margin: 88px 0 50px; } .section-selection .section__head { margin: -18px 0 60px; } .section-selection .section__body { padding: 0 75px 30px; } } /* Mobile */ @media (max-width: 767px) { .section-selection { margin: 30px 0 20px; } .section-selection .section__inner { border: 0; } .section-selection .section__head { margin: 0 0 30px; } .section-selection .section__head h2 { padding-bottom: 11px; } .section-selection .section__head h2:after { height: 1px; } .section-selection .section__body { padding: 0 19px 17px; } .section-selection--alt { margin-bottom: 0; } .section-selection .section__body .owl-carousel .owl-stage-outer:before, .section-selection .section__body .owl-carousel .owl-stage-outer:after { width: 2rem; } } /* ------------------------------------------------------------ *\ Section Subscribe \* ------------------------------------------------------------ */ .section-subscribe { margin-bottom: 4.44rem; } .section-subscribe .section__inner { background-color: #f1f1f2; padding: 3.94rem 0 4.375rem; } .section-subscribe .section__head { margin-bottom: 2.94rem; } .section-subscribe .section__body { width: 78%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 auto; } .section-subscribe .section__image, .section-subscribe .section__content { -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .section-subscribe .section__content { padding: 0 9% 2.31rem 6.5%; } .section-subscribe .section__content p { font-size: 1.125rem; margin-bottom: 1.56rem; letter-spacing: 0; } .section-subscribe .section__content .btn { min-width: 10.25rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .section-subscribe { margin-bottom: 30px; } .section-subscribe .section__inner { padding: 60px 0; } .section-subscribe .section__head { padding: 0 30px; margin-bottom: 35px; } .section-subscribe .section__body { width: 100%; padding: 0 20px; } .section-subscribe .section__content { padding: 0 0 0 40px; } } /* Mobile */ @media (max-width: 767px) { .section-subscribe { margin-bottom: 20px; } .section-subscribe .section__inner { padding: 25px 0 21px; } .section-subscribe .section__head { margin-bottom: 36px; } .section-subscribe .section__head h2 { padding-bottom: 10px; } .section-subscribe .section__head h2:after { height: 1px; } .section-subscribe .section__body { display: block; text-align: center; } .section-subscribe .section__image, .section-subscribe .section__content { width: 100%; max-width: 100%; } .section-subscribe .section__image { padding: 0 27px; margin-bottom: 32px; } .section-subscribe .section__content { padding: 0; text-align: center; } .section-subscribe .section__content p { font-size: 14px; margin-bottom: 20px; text-align: left; } .section-subscribe .section__content .btn { min-width: 0; } } /* ------------------------------------------------------------ *\ Section Products View \* ------------------------------------------------------------ */ .section-products-view .section__bar { padding: 37px 0; } .section-products-view .section__bar-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-products-view .section__bar ul { list-style: none; margin: 0; padding: 0; font-size: 0; } .section-products-view .section__bar ul li { display: inline-block; vertical-align: middle; } .section-products-view .section__bar ul li ~ li { margin-left: 1.44rem; } .section-products-view .section__bar ul a { height: 2.19rem; padding: 0.44rem 1.125rem 0.25rem; display: block; text-decoration: none; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; text-transform: uppercase; } .section-products-view .section__bar ul span { font-size: 1.125rem; color: #b1b2b2; padding-left: 0.625rem; } .section-products-view .section__bar ul a.back { background-color: #f4f4f5; padding-left: 2.375rem; position: relative; transition: background-color .4s ease; } .section-products-view .section__bar ul a.back:hover { background-color: rgb(220, 220, 221); } .section-products-view .section__bar ul a.back:before { content: ''; width: 0.75rem; height: 0.75rem; border: 2px solid #444041; border-right: 0; border-bottom: 0; position: absolute; left: 1.125rem; top: 0.69rem; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .section-products-view .list-categories { margin-bottom: 4.375rem; } .section-products-view .toggle-view { margin-left: auto; margin-right: 4.69rem; font-size: 0; } .section-products-view .toggle-view a { display: inline-block; vertical-align: middle; text-decoration: none; opacity: .35; transition: opacity .4s ease; } .section-products-view .toggle-view a ~ a { margin-left: 1.75rem; } .section-products-view .toggle-view a:hover, .section-products-view .toggle-view a.active { opacity: 1; } .section-products-view .section__body { position: relative; } .section-products-view .section__aside { width: 20rem; background-color: #f1f1f2; padding: 1.375rem 2.19rem 1.56rem 2.19rem; position: absolute; left: 0; top: 0; } .section-products-view .section__content-inner { padding-left: 20rem; } .section-products-view .section__view { position: relative; padding-bottom: 4.69rem; overflow: hidden; } .section-products-view .section__grid { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-products-view .btn--compare { background-color: #d50032; color: #fff; } /* List View */ .section-products-view .view-list { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .section-products-view .view-list .product-grid { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; } .section-products-view .view-list .product-grid ~ .product-grid { margin-top: 2rem; padding-top: 2rem; position: relative; } .section-products-view .view-list .product-grid ~ .product-grid:before { content: ''; width: 25rem; height: 1px; background-color: #1da1f2; position: absolute; left: 50%; margin-left: -12.5rem; top: 0; opacity: .2; } .section-products-view .view-list .product-grid__image { -webkit-flex: 0 0 28.9%; -ms-flex: 0 0 28.9%; flex: 0 0 28.9%; text-align: center; padding: 1.125rem 0; position: relative; margin-bottom: 0; } .section-products-view .view-list .product-grid__image .label { padding: 0.31rem 0.69rem 0.19rem; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.125rem; color: #fff; text-transform: uppercase; background-color: #d50032; position: absolute; left: 0; top: 0; } .section-products-view .view-list .product-grid__body { -webkit-flex: 0 0 46%; -ms-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%; padding-left: 5rem; text-align: left; } .section-products-view .view-list .product-grid__body h3, .section-products-view .view-list .product-grid__body p { width: 100%; } .section-products-view .view-list .product-grid__body p { margin: 0 0 1.81rem; } .section-products-view .view-list .product-grid__body h6, .section-products-view .view-list .product-grid__body .lists { display: block; } .section-products-view .view-list .product-grid__body h6 { font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.125rem; text-transform: none; margin: 0 0 0.19rem; } .section-products-view .view-list .product-grid__body .lists { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-products-view .view-list .product-grid__body .lists ul { list-style: none; margin: 0; padding: 0; max-width: 48%; } .section-products-view .view-list .product-grid__body .lists li { padding-left: 0.75rem; position: relative; font-size: 1.125rem; } .section-products-view .view-list .product-grid__body .lists li ~ li { margin-top: .19rem; } .section-products-view .view-list .product-grid__body .lists li:before { content: ''; width: .25rem; height: .25rem; background-color: #444041; border-radius: 10px; position: absolute; left: 0; top: .56rem; } .section-products-view .view-list .product-grid__actions { -webkit-flex: 0 0 25.1%; -ms-flex: 0 0 25.1%; flex: 0 0 25.1%; max-width: 25.1%; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; padding-left: 1.875rem; text-align: right; margin-bottom: 1.25rem; padding-top: 0; } .section-products-view .view-list .product-grid__actions .checkbox { display: block; vertical-align: middle; margin: 0 0 1.25rem; padding-right: 1.56rem; } .section-products-view .view-list .product-grid__actions .btn { max-width: 10.25rem; } .section-products-view .section__actions { width: 100%; padding-top: 1.56rem; background-color: rgba(36, 43, 49, .6); text-align: center; position: fixed; left: 0; bottom: 0; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .section-products-view .section__actions.active { opacity: 1; visibility: visible; } .section-products-view .section__actions.hide { opacity: 0 !important; visibility: hidden !important; } .section-products-view .section__actions .btn { width: 8rem; height: auto; border-radius: 1.25rem 1.25rem 0 0; font-weight: 600; font-size: 0.81rem; background-color: #f4f4f4; box-shadow: 0 0 0.375rem rgba(0,0,0, .3); padding: 0.375rem 1.375rem 0.44rem; } @media (max-width: 1899px) { .section-products-view .section__content-inner { padding-left: 21.25rem; } .section-products-view .view-list .product-grid__actions { margin-bottom: 0; } .section-products-view .view-list .product-grid__actions .checkbox { margin: 0 0 1.25rem; padding-right: 1.56rem; } } @media (max-width: 1399px) { .section-products-view .view-list .product-grid__body { padding-left: 1.25rem; } } /* Small Desktop */ @media (max-width: 1199px) { .section-products-view .section__aside { width: 15rem; } .section-products-view .section__content-inner { padding-left: 15rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .section-products-view .view-list .product-grid { display: block; } .section-products-view .view-list .product-grid ~ .product-grid { margin-top: 20px; padding-top: 10px; } .section-products-view .view-list .product-grid__image { margin-bottom: 0; } .section-products-view .view-list .product-grid__body, .section-products-view .view-list .product-grid__actions { max-width: 100%; padding: 0; } .section-products-view .view-list .product-grid__actions { margin-top: 30px; text-align: center; } .section-products-view .view-list .product-grid__actions .checkbox { display: block; padding-right: 0; } } /* Mobile */ @media (max-width: 767px) { .section-products-view .section__bar { padding: 13px 0; } .section-products-view .section__title { padding: 32px 0 24px; } .section-products-view .floating-shares { display: none; } .section-products-view .toggle-view { display: none; } .section-products-view .section__bar ul a.back { height: auto; font-size: 13.5px; padding: 7px 14px 3px 15px; } .section-products-view .section__bar ul a.back:before { width: 8px; height: 8px; left: 7px; top: 9px; } .section-products-view .section__bar ul span { font-size: 14px; padding-left: 0; } .section-products-view .section__aside { width: 100%; height: 100%; padding: 22px 40px 25px 40px; position: fixed; z-index: 999; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .section-products-view .section__aside.active { opacity: 1; visibility: visible; } .section-products-view .section__aside-actions { width: 100%; padding: 25px 10px 0; position: fixed; z-index: 999; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; font-size: 0; text-align: center; left: 0; bottom: 0; background-color: rgba(0,0,0, .6); } .section-products-view .section__aside-actions.active { opacity: 1; visibility: visible; } .section-products-view .section__aside-actions .btn { width: 128px; height: auto; border-radius: 20px 20px 0 0; font-weight: 600; font-size: 13px; background-color: #f4f4f4; box-shadow: 0 0 6px rgba(0,0,0, .3); padding: 6px 22px 7px; } .section-products-view .section__aside-actions .btn ~ .btn { margin-left: 40px; } .section-products-view .section__content-inner { padding: 0; } .section-products-view .list-categories { margin-bottom: 24px; } .section-products-view .section__body { min-height: 0 !important; } .section-products-view .section__view { padding-bottom: 36px; } .section-products-view .section__aside .close-sidebar { font-size: 32px; color: #444041; text-decoration: none; position: absolute; right: 10px; top: 5px; } .section-products-view .section__grid { display: block; } .section-products-view .view-list .product-grid, .section-products-view .view-grid .product-grid { position: relative; padding-left: 100px; padding-top: 70px; } .section-products-view .view-list .product-grid ~ .product-grid, .section-products-view .view-grid .product-grid ~ .product-grid { margin-top: 28px; } .section-products-view .view-list .product-grid__image, .section-products-view .view-grid .product-grid__image { width: 76px; padding: 16px 0; position: absolute; left: 0; top: 60px; } .section-products-view .view-list .product-grid__image .label, .section-products-view .view-grid .product-grid__image .label { display: none; } .section-products-view .view-list .product-grid__body h3, .section-products-view .view-grid .product-grid__body h3 { font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 18px; position: absolute; left: 0; top: 25px; margin: 0; } .section-products-view .view-list .product-grid__body h5, .section-products-view .view-grid .product-grid__body h5 { font-size: 11px; color: #444041; padding-top: 10px; position: absolute; left: 0; top: 0; } .section-products-view .view-list .product-grid__body h5:before, .section-products-view .view-grid .product-grid__body h5:before { content: ''; width: 14px; height: 1px; background-color: #d50032; position: absolute; left: 0; top: 0; } .section-products-view .view-list .product-grid__body .rating, .section-products-view .view-grid .product-grid__body .rating, .section-products-view .view-list .product-grid__body .lists, .section-products-view .view-grid .product-grid__body .lists, .section-products-view .view-list .product-grid__body h6, .section-products-view .view-grid .product-grid__body h6 { display: none; } .section-products-view .view-list .product-grid__body p, .section-products-view .view-grid .product-grid__body p { font-size: 14px; margin-bottom: 13px; } .section-products-view .view-list .product-grid__actions, .section-products-view .view-grid .product-grid__actions { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin: 0; width: 100%; max-width: 100%; text-align: left; } .section-products-view .view-list .product-grid__actions .checkbox, .section-products-view .view-grid .product-grid__actions .checkbox { margin: 0; padding: 0; } .section-products-view .view-list .product-grid__actions .btn, .section-products-view .view-grid .product-grid__actions .btn { min-width: 120px; } .section-products-view .section__actions .btn { font-size: 13px; } } /* Mobile */ @media (max-width: 374px) { .section-products-view .view-list .product-grid__actions .checkbox label, .section-products-view .view-grid .product-grid__actions .checkbox label { font-size: 12px; padding-left: 24px; } .section-products-view .view-list .product-grid__actions .checkbox label:before, .section-products-view .view-grid .product-grid__actions .checkbox label:before { margin-top: -8px; } .section-products-view .view-list .product-grid__actions .btn, .section-products-view .view-grid .product-grid__actions .btn { height: auto; min-width: 0; font-size: 12px; margin-top: 3px; } } /* ------------------------------------------------------------ *\ Selection \* ------------------------------------------------------------ */ .selection__image { margin-bottom: 4.5rem; } .selection__head { text-align: center; margin-bottom: 1.5rem; } .selection__head h3 { width: 80%; font-size: 1.75rem; text-transform: uppercase; margin: 0 auto 1.125rem; } .selection__body { padding: 0 1.375rem; } .selection__body p { width: 110%; font-size: 1.125rem; margin: 0 0 1.69rem; line-height: 1.3; letter-spacing: 0; } .selection__body h5 { font-family: 'Segoe UI', sans-serif; font-weight: 700; text-transform: none; margin: 0; color: #444041; } .selection__body ul { list-style: none; margin: 0; padding: 0; } .selection__body ul li { font-size: 1.125rem; position: relative; padding-left: 0.81rem; } .selection__body ul li:before { content: ''; width: 0.25rem; height: 0.25rem; background-color: #444041; border-radius: 0.375rem; position: absolute; left: 0; top: 0.56rem; } .selection__body ul li ~ li { margin-top: 0.19rem; } .selection__actions { padding-top: 5.625rem; text-align: center; } /* Equinoa .selection__actions .btn { transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; } .selection__actions .btn:hover { background-color: #fff; box-shadow: inset 0 0 0 1px #fff; } */ /* Selection Alt */ .selection--alt .selection__head h3 { width: 90%; } .selection--alt .selection__image { margin-bottom: 1.875rem; } .selection--alt .selection__body { padding: 0 3.125rem; } @media (max-width: 1399px) { .selection__body p { width: 100%; } .selection--alt .selection__head h3 { width: 100%; font-size: 1.5rem; } .selection--alt .selection__body { padding: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .selection--alt .selection__head h3 { width: auto; font-size: 1.125rem; margin-left: -0.31rem; margin-right: -0.31rem; } .selection--alt .selection__body { padding: 0 0.94rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .selection__image { margin-bottom: 30px; } .selection__head h3 { width: 100%; } .selection__body { padding: 0; } .selection__body p { width: 100%; font-size: 16px; } .selection__body ul li { font-size: 16px; } .selection__actions { padding-top: 30px; } } /* Mobile */ @media (max-width: 767px) { .selection__image { margin-bottom: 15px; padding: 0 55px; } .selection__head { margin-bottom: 13px; padding: 0 55px; } .selection__head h3 { font-size: 17px; margin-bottom: 8px; } .selection__body p, .selection__body h5, .selection__body ul li { font-size: 14px; } .selection__body p { margin-bottom: 18px; } .selection__body h5, .selection__body ul { padding-left: 12px; } .selection__body ul li { padding-left: 10px; } .selection__body ul li ~ li { margin-top: 1px; } .selection__actions { padding-top: 16px; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider .owl-prev, .slider .owl-next { font-size: 0; width: 1.875rem; height: 1.875rem; border: 2px solid #4d4d4f; transition: opacity .4s ease; } .slider .owl-prev:hover, .slider .owl-next:hover { opacity: .5; } .slider .owl-prev { border-right: 0; border-bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .slider .owl-next { border-left: 0; border-bottom: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Mobile */ @media (max-width: 767px) { .slider .owl-prev, .slider .owl-next { width: 20px; height: 20px; } } /* ------------------------------------------------------------ *\ Slider Main \* ------------------------------------------------------------ */ .slider-main, .slider-main .slider__slide { position: relative; } .slider-main .slider__slide-image { height: 51.625rem; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; z-index: 1; } .slider-main .slider__slide-content { width: 39.06rem; position: absolute; right: 13%; top: 5.625rem; z-index: 3; } .slider-main .slider__slide-content h1 { font-weight: 500; text-transform: uppercase; line-height: 1.2; margin: 0 0 0.625rem; } .slider-main .slider__slide-content p { margin: 0 0 2.25rem; font-size: 1.125rem; } .slider-main .owl-dots { width: 100%; text-align: center; font-size: 0; position: absolute; left: 0; bottom: 2.1875rem; z-index: 3; } .slider-main .owl-dot { width: 0.69rem; height: 0.69rem; display: inline-block; vertical-align: middle; margin: 0 0.25rem; border-radius: 50%; background-color: rgba(255,255,255, .5); transition: background-color .4s ease; } .slider-main .owl-dot:hover, .slider-main .owl-dot.active { background-color: #d50032; } @media (max-width: 1399px) { .slider-main .slider__slide-content { right: 1.75rem; } } /* Medium Desktop */ @media (max-width: 1399px) { .slider-main .slider__slide-image { height: 44rem; } } /* Small Desktop */ @media (max-width: 1199px) { .slider-main .slider__slide-image { height: 37.5rem; background-size: 130% auto; background-position: 80% center; } .slider-main .slider__slide-image:before { content: ''; width: 100%; height: 100%; background-color: #000; opacity: .25; position: absolute; left: 0; top: 0; z-index: 2; } .slider-main .slider__slide-content { width: 30rem; text-align: center; right: auto; left: 50%; top: 3.25rem; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .slider-main .slider__slide-content h1 { font-size: 2.5rem; /*Equinoa color: #fff;*/ text-shadow: 0 0 0.625rem rgba(0,0,0, .25); margin-bottom: 1.125rem; } .slider-main .slider__slide-content p { /*display: none;*/ font-size: 11px; width: 93%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .slider-main .slider__slide-image { background-size: 170% auto; background-position: 60% center; } } /* Mobile */ @media (max-width: 767px) { .slider-main .slider__slide-image { height: 254px; } .slider-main .slider__slide-content { width: 100%; padding: 0 30px; top: 23px; } .slider-main .slider__slide-content h1 { font-size: 25px; margin-bottom: 11px; } .slider-main .owl-dot { width: 6px; height: 6px; margin: 0 2px; } .slider-main .owl-dots { bottom: 15px; } } /* Mobile */ @media (max-width: 374px) { .slider-main .slider__slide-image { background-size: 200% auto; } } /* ------------------------------------------------------------ *\ Slider Latest \* ------------------------------------------------------------ */ .slider-latest { position: relative; padding: 0 11.75rem 0 11.125rem; } .slider-latest .slider__slide { text-align: center; } .slider-latest .slider__slide a { display: block; text-decoration: none; } .slider-latest .slider__slide-image { height: 14.625rem; } .slider-latest .slider__slide-image img { display: inline-block; width: auto; height: auto; max-height: 100%; } .slider-latest .slider__slide-content { margin-bottom: 2.25rem; } .slider-latest .slider__slide-content h5 { margin: 0; font-family: 'Segoe UI', sans-serif; font-weight: 700; font-size: 1rem; color: #444041; text-transform: none; } .slider-latest .owl-stage-outer:before, .slider-latest .owl-stage-outer:after { content: ''; width: 6rem; position: absolute; top: 0; bottom: 12.125rem; z-index: 10; } .slider-latest .owl-stage-outer:before { left: -5px; background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bfffffff',GradientType=1 ); } .slider-latest .owl-stage-outer:after { right: -5px; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#ffffff',GradientType=1 ); } .slider-latest .slider__slides:before, .slider-latest .slider__slides:after { content: ''; width: 6rem; height: 12.125rem; position: absolute; bottom: 0; z-index: 10; } .slider-latest .slider__slides:before { left: -5px; background: linear-gradient(to right, rgba(241,241,242,1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f2', endColorstr='#00ffffff',GradientType=1 ); } .slider-latest .slider__slides:after { right: -5px; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(241,241,242,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f1f1f2',GradientType=1 ); } .slider-latest .owl-prev, .slider-latest .owl-next { position: absolute; top: 31%; margin-top: -1.25rem; z-index: 10; } .slider-latest .owl-prev { left: -4.375rem; } .slider-latest .owl-next { right: -5rem; } @media (max-width: 1899px) { .slider-latest { padding: 0 3.75rem; } .slider-latest .owl-prev { left: -2.31rem; } .slider-latest .owl-next { right: -2.31rem; } .slider-latest .slider__slides:before, .slider-latest .slider__slides:after { height: 9.125rem; } .slider-latest .owl-stage-outer:before, .slider-latest .owl-stage-outer:after { display: none; } } /* Small Desktop */ @media (max-width: 1199px) { .slider-latest .slider__slide-image { height: 12.25rem; } .slider-latest .slider__slide-image img { max-width: 70%; max-height: 11.56rem; } .slider-latest .slider__slide-content { margin-bottom: 0.9375rem; } .slider-latest .owl-prev { left: -3.4375rem; } .slider-latest .owl-next { right: -3.4375rem; } } /* Mobile */ @media (max-width: 767px) { .slider-latest .owl-prev, .slider-latest .owl-next { top: 27%; } .slider-latest .slider__slide-image { height: 148px; } .slider-latest .slider__slide-image img { max-width: 86%; max-height: 136px; } .slider-latest .slider__slide-content h5 { font-size: 14px; } .slider-latest .slider__slides:before, .slider-latest .slider__slides:after { height: 125px; } .slider-latest .owl-stage-outer:before, .slider-latest .owl-stage-outer:after { bottom: 125px; } .slider-latest .owl-stage-outer:before, .slider-latest .owl-stage-outer:after, .slider-latest .slider__slides:before, .slider-latest .slider__slides:after { width: 4rem; } } /* ------------------------------------------------------------ *\ Slider Related \* ------------------------------------------------------------ */ .slider-related { padding: 0 11rem; position: relative; } .slider-related .slider__slide { padding: 0 3.625rem; } .slider-related .owl-prev, .slider-related .owl-next { position: absolute; top: 27%; margin-top: -1.25rem; } .slider-related .owl-prev { left: -4.375rem; } .slider-related .owl-next { right: -4.375rem; } @media (max-width: 1399px) { .slider-related { padding: 0 1.875rem; } .slider-related .owl-prev { left: 0; } .slider-related .owl-next { right: 0; } } /* Tablet Portrait */ @media (max-width: 1024px) { .slider-related { padding: 0 60px; } .slider-related .slider__slide { padding: 0 25px; } .slider-related .owl-prev { left: -20px; } .slider-related .owl-next { right: -20px; } } /* Mobile */ @media (max-width: 767px) { .slider-related { padding: 0 72px; } .slider-related .slider__slide { padding: 0; } .slider-related .owl-prev, .slider-related .owl-next { top: 32%; } .slider-related .owl-prev { left: -70px; } .slider-related .owl-next { right: -70px; } } /* ------------------------------------------------------------ *\ Slider Product \* ------------------------------------------------------------ */ .slider-product .swiper-button { display: none; } .slider-product .swiper-slide img { width: 100%; height: auto; } .slider-product ~ .swiper-pagination { text-align: center; position: absolute; left: 0; right: 9.69rem; bottom: -2.69rem; } .slider-product ~ .swiper-pagination .swiper-pagination-bullet { width: 0.69rem; height: 0.69rem; background-color: #f1f1f2; margin: 0 0.25rem; cursor: pointer; opacity: 1; transition: background-color .4s ease; } .slider-product ~ .swiper-pagination .swiper-pagination-bullet:hover, .slider-product ~ .swiper-pagination .swiper-pagination-bullet-active { background-color: #d50032; } /* Small Desktop */ @media (max-width: 1199px) { .slider-product ~ .swiper-pagination { bottom: 1.25rem } } /* Mobile */ @media (max-width: 767px) { .slider-product ~ .swiper-pagination { right: 0; bottom: 13px; } .slider-product ~ .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 2px; } .slider-product .swiper-button { display: block; background: none; width: 28px; height: 28px; position: absolute; top: 50%; margin-top: -14px; } .slider-product .swiper-button:before { content: ''; width: 20px; height: 20px; border: 2px solid #444041; position: absolute; left: 50%; top: 50%; } .slider-product .swiper-button-prev { left: 0; } .slider-product .swiper-button-prev:before { border-right: 0; border-bottom: 0; -webkit-transform: translate(-25%, -50%) rotate(-45deg); -ms-transform: translate(-25%, -50%) rotate(-45deg); transform: translate(-25%, -50%) rotate(-45deg); } .slider-product .swiper-button-next { right: 0; } .slider-product .swiper-button-next:before { border-left: 0; border-bottom: 0; -webkit-transform: translate(-75%, -50%) rotate(45deg); -ms-transform: translate(-75%, -50%) rotate(45deg); transform: translate(-75%, -50%) rotate(45deg); } .slider-product .swiper-slide { padding: 0 20px; } } /* ------------------------------------------------------------ *\ Slider Product Thumns \* ------------------------------------------------------------ */ .slider-product-thumbs { height: 100%; } .slider-product-thumbs .swiper-slide { position: relative; transition: opacity .4s ease; } .slider-product-thumbs .swiper-slide.active { opacity: .2; } .slider-product-thumbs .swiper-slide-active:before, .slider-product-thumbs .swiper-slide-active + .swiper-slide:before, .slider-product-thumbs .swiper-slide-active + .swiper-slide + .swiper-slide:before { content: ''; width: 1.5rem; height: 1px; background-color: #bbbdc0; position: absolute; left: 50%; margin-left: -0.75rem; bottom: 0.75rem; } .slider-product-thumbs ~ .swiper-button { width: 1rem; height: 1rem; border: 2px solid #444041; background: none; position: absolute; margin-top: 0; left: auto; right: 2.31rem; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: auto; z-index: 10; transition: opacity .4s ease; } .slider-product-thumbs ~ .swiper-button-disabled { opacity: 0; } .slider-product-thumbs ~ .swiper-button-prev { top: -1.25rem; border-bottom: 0; border-right: 0; } .slider-product-thumbs ~ .swiper-button-next { bottom: -0.625rem; border-top: 0; border-left: 0; } /* Small Desktop */ @media (max-width: 1199px) { .slider-product-thumbs ~ .swiper-button { right: 3.31rem; } } /* ------------------------------------------------------------ *\ Slider Home Categorie \* ------------------------------------------------------------ */ .slider-home-categorie { position: relative; margin-top: -3.75rem; min-height: 37.625rem; } .slider-home-categorie .owl-carousel { opacity: 0; transition: opacity .5s ease; } .slider-home-categorie .owl-carousel.owl-loaded { opacity: 1; } .slider-home-categorie .slider__slide { height: 37.625rem; overflow: hidden; } .slider-home-categorie .slider__slide-bg { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; left: 0; top: 0; z-index: 1; } .slider-home-categorie .slider__slide-content { width: 100%; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } .slider-home-categorie .slider__slide-content h2 { font-weight: 500; margin: 0 0 0.625rem; } .slider-home-categorie .slider__slide-content p { font-size: 1.125rem; margin: 0 0 2.25rem; } .slider-home-categorie .slider__slide-content .btn { margin-left: 0.375rem; transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; } .slider-home-categorie .slider__slide-content .btn:hover { background-color: #fff; box-shadow: inset 0 0 0 1px #fff; } .slider-home-categorie .slider__slide-content-inner { width: 36%; margin-left: 18.8%; } .slider-home-categorie .owl-dots { text-align: center; font-size: 0; width: 100%; position: absolute; left: 0; bottom: 2.125rem; z-index: 2; } .slider-home-categorie .owl-dot { display: inline-block; vertical-align: middle; width: 0.69rem; height: 0.69rem; border-radius: 50%; background-color: #fff; opacity: .5; transition: opacity .4s ease, background-color .4s ease; margin: 0 0.25rem; } .slider-home-categorie .owl-dot.active, .slider-home-categorie .owl-dot:hover { opacity: 1; background-color: #d50032; } /* Slider Home Category White */ .slider-home-categorie--white .slider__slide-content { color: #fff; } @media (max-width: 1899px) { .slider-home-categorie .slider__slide-content-inner { margin-left: 0; width: 50%; } } @media (max-width: 1399px) { .slider-home-categorie .slider__slide-content-inner { width: 40%; } } /* Small Desktop */ @media (max-width: 1199px) { .slider-home-categorie { margin-top: 0; } .slider-home-categorie .slider__slide-content h2 { font-size: 2.19rem; } .slider-home-categorie .slider__slide-content p { font-size: 1rem; } } /* Mobile */ @media (max-width: 767px) { .slider-home-categorie { min-height: 0; } .slider-home-categorie .slider__slide { height: 254px; } .slider-home-categorie .slider__slide-content-inner { width: 100%; } .slider-home-categorie .slider__slide-content { text-align: center; top: 24px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .slider-home-categorie .slider__slide-content h2 { font-size: 25px; text-shadow: 0 0 5px #9c9ea2; } .slider-home-categorie .slider__slide-content p { display: none; } .slider-home-categorie .slider__slide-image { overflow: hidden; } .slider-home-categorie .slider__slide-image img { height: 254px; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .slider-home-categorie .owl-dots { bottom: 16px; } .slider-home-categorie .owl-dot { width: 6px; height: 6px; margin: 0 2px; } } /* ------------------------------------------------------------ *\ Slider Selection \* ------------------------------------------------------------ */ .slider-selection .slider__slide { padding: 0 3.625rem; } .slider-selection .owl-prev, .slider-selection .owl-next { position: absolute; top: 12.5%; } .slider-selection .owl-prev { left: -4.375rem; } .slider-selection .owl-next { right: -4.375rem; } .slider-selection--alt .slider__slide { padding: 0 1.875rem; } @media (max-width: 1899px) { .slider-selection .owl-prev, .slider-selection .owl-next { top: 9%; } .slider-selection .owl-prev { left: -0.94rem; } .slider-selection .owl-next { right: -0.94rem; } } @media (max-width: 1399px) { .slider-selection .slider__slide { padding: 0 1.25rem; } .slider-selection .owl-prev { left: -2.19rem; } .slider-selection .owl-next { right: -2.19rem; } } /* Small Desktop */ @media (max-width: 1199px) { .slider-selection .owl-prev, .slider-selection .owl-next { top: 6%; } } /* Tablet Portrait */ @media (max-width: 1024px) { .slider-selection .owl-prev, .slider-selection .owl-next { top: 9.8%; } } /* Mobile */ @media (max-width: 767px) { .slider-selection .slider__slide { padding: 0; } .slider-selection .owl-prev, .slider-selection .owl-next { top: 11%; } .slider-selection .owl-prev { left: -15px; } .slider-selection .owl-next { right: -15px; } } /* ------------------------------------------------------------ *\ Social \* ------------------------------------------------------------ */ .socials span, .socials ul { display: inline-block; vertical-align: middle; margin: 0; padding: 0; } .socials span { font-family: 'WindleshamPro', sans-serif; font-weight: 400; font-size: 0.875rem; color: #fff; margin-right: 0.94rem; text-transform: uppercase; } .socials ul { list-style: none; } .socials ul li { display: inline-block; vertical-align: middle; } .socials ul li ~ li { margin-left: 1.25rem; padding-left: 1.25rem; position: relative; } .socials ul li ~ li:before { content: ''; width: 1px; height: 1.5rem; background-color: #fff; position: absolute; left: 0; top: 50%; margin-top: -0.875rem; } .socials ul a { display: block; text-decoration: none; } .socials ul .fa { font-size: 1.25rem; color: #fff; transition: color .4s ease; } .socials ul a:hover .fa { color: rgb(179, 179, 179); } /* Small Desktop */ @media (max-width: 1199px) { .socials span { font-weight: 500; font-size: 1.56rem; margin-right: 2.875rem; position: relative; top: 2px; } .socials ul li ~ li:before { height: 1.875rem; margin-top: -1.06rem; } .socials ul .fa { font-size: 2rem; } } /* Mobile */ @media (max-width: 767px) { .socials span { font-size: 18px; margin-right: 30px; } .socials ul .fa { font-size: 24px; } .socials ul li ~ li { margin-left: 16px; padding-left: 15px; } } /* ------------------------------------------------------------ *\ Tabs \* ------------------------------------------------------------ */ .tabs__nav { width: 19.69rem; background-color: #f4f4f5; } .tabs__nav ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } .tabs__nav a { height: 5.625rem; display: block; text-decoration: none; font-weight: 400; font-size: 1.125rem; color: #444041; text-transform: uppercase; text-align: center; line-height: 5.69rem; position: relative; transition: background-color .4s ease, color .4s ease; } .tabs__nav a:after { content: ''; width: 1.5rem; height: 1px; background-color: #444041; position: absolute; left: 50%; margin-left: -0.75rem; bottom: 0; } .tabs__nav a:before { content: ''; width: 100%; height: 1px; background-color: #444041; position: absolute; left: 0; top: -1px; opacity: 0; transition: opacity .4s ease; } .tabs__nav li:last-child a:after { display: none; } .tabs__nav li.active a, .tabs__nav li a:hover { background-color: #444041; color: #fff; } .tabs__nav li a:hover:before, .tabs__nav li.active a:before { opacity: 1; } .tab { display: none; } .tab.active { display: block; } /* Small Desktop */ @media (max-width: 1199px) { .tabs__nav { width: 15rem; } .tabs__nav a { height: 3.75rem; line-height: 3.75rem; font-size: 0.875rem; } } /* Mobile */ @media (max-width: 767px) { .tabs__nav { width: 100%; } .tabs__nav a { height: 40px; line-height: 40px; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table { width: 100%; } .table th { text-align: left; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.75rem; text-transform: uppercase; padding-bottom: 1.125rem; } .table td { width: 50%; padding: 0.44rem 1.25rem; font-size: 1.125rem; vertical-align: top; } .table tbody tr:nth-child(odd) td { background-color: #f4f4f4; } /* Small Desktop */ @media (max-width: 1199px) { .table td { font-size: 16px; } } /* Mobile */ @media (max-width: 767px) { .table th { padding: 0 10px 5px 20px; font-size: 14px; } .table td { font-size: 14px; padding: 4px 20px; } .table td:first-child { padding-right: 0; } } /* ------------------------------------------------------------ *\ Table Compare \* ------------------------------------------------------------ */ .table-compare { margin-bottom: 5.81rem; } .table-compare .head { height: 18.69rem; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .table-compare th .head p { width: 100%; margin-top: auto; } .table-compare th, .table-compare td { width: 27.2%; } .table-compare th:first-child, .table-compare td:first-child { width: 18.4%; } .table-compare th ~ th, .table-compare td ~ td { border-left: 0.375rem solid #fff; text-align: center; } .table-compare th { position: relative; padding-top: 1.875rem; padding-bottom: 1.875rem; vertical-align: top; } .table-compare th .delete { display: inline-block; width: 1.875rem; height: 1.875rem; border: 1px solid #444041; color: #444041; text-decoration: none; font-size: 1.5rem; line-height: 1.44rem; position: absolute; right: 1.125rem; top: 0; transition: opacity .4s ease; } .table-compare th .delete:hover { opacity: .5; } .table-compare th p { margin: 0; font-family: 'WindleshamPro', sans-serif; font-weight: 700; font-size: 1.69rem; text-transform: uppercase; } .table-compare tbody h5 { margin-bottom: 1.75rem; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.125rem; color: #444041; text-transform: uppercase; margin-left: -0.31rem; } .table-compare tbody td { height: 2.19rem; font-size: 1.125rem; } .table-compare tbody td:first-child { padding-left: 1.25rem; } .table-compare tfoot td { padding-top: 3.375rem; } .table-compare tfoot td .btn { padding-left: 1.56rem; padding-right: 1.56rem; } @media (min-width: 768px) { .table-compare { padding-top: 0 !important; } .table-compare tbody tr:nth-child(even) { background-color: #f4f4f4; } } @media (max-width: 1899px) { .table-compare th { padding-top: 2.5rem; } } @media (max-width: 1399px) { .table-compare th .delete { right: 0; } } /* Small Desktop */ @media (max-width: 1199px) { .table-compare th { padding: 2.5rem 0.625rem 1.875rem; } .table-compare th p { font-size: 1.5rem; } .table-compare .head { height: 15.625rem; } .table-compare tbody td { padding-top: 0.31rem; padding-bottom: 0.31rem; } } /* Tablet Portrait */ @media (max-width: 1024px) { .table-compare { margin-bottom: 30px; } .table-compare .head { height: 180px; } .table-compare th .head p { font-size: 20px; } .table-compare tbody h5 { font-size: 16px; margin-bottom: 10px; } .table-compare tbody td { font-size: 16px; } .table-compare tfoot td { padding-top: 25px; } } /* Mobile */ @media (max-width: 767px) { .table-compare { margin-bottom: 20px; position: relative; } .table-compare table, .table-compare thead, .table-compare tbody, .table-compare tfoot, .table-compare tr, .table-compare th, .table-compare td { display: block; } .table-compare thead { width: 100%; overflow: hidden; padding: 0 10px; background-color: #fff; position: absolute; left: 0; top: 0; z-index: 99; -webkit-transform: translateZ(0); transform: translateZ(0); } .table-compare thead tr { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .table-compare thead.fixed { position: fixed; top: 53px; padding: 10px; } .table-compare thead.fixed th .head img { height: 0; } .table-compare th { -webkit-flex: 1 0 33.3333%; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; padding: 0; } .table-compare th:first-child { display: none; } .table-compare .head { height: auto; text-align: center; padding: 0 10px 19px; position: relative; } .table-compare th .head img { display: inline-block; height: 61px; width: auto; max-width: 100%; margin-bottom: 10px; transition: height .4s ease; } .table-compare th .head p { font-size: 9px; } .table-compare th .head p br { display: none; } .table-compare th .delete { width: 12px; height: 12px; font-size: 14px; line-height: 6px; top: auto; bottom: 0; right: auto; left: 50%; margin-left: -6px; } .table-compare th ~ th, .table-compare td ~ td { border: 0; } .table-compare tbody { margin-top: 23px; } .table-compare tbody td { height: auto; font-size: 13px; padding-top: 5px; padding-bottom: 4px; } .table-compare tbody h5 { font-size: 14px; margin-bottom: 8px; } .table-compare tbody tr:first-child td { display: none; } .table-compare tbody tr:first-child td:first-child { width: 100%; display: block; text-align: center; padding: 0; } .table-compare tbody tr ~ tr { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .table-compare tbody tr ~ tr td:first-child { -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; background-color: #f4f4f4; text-align: center; padding-left: 0; } .table-compare tbody tr ~ tr td { -webkit-flex: 1 0 33.3333%; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; } .table-compare tfoot { padding: 0 19px; margin: 0 0 0 -17px; } .table-compare tfoot tr { overflow: hidden; } .table-compare tfoot td { float: left; width: 33.3333%; padding-left: 17px; padding-top: 18px; } .table-compare tfoot td:first-child { display: none; } .table-compare tfoot td .btn { width: 100%; height: auto; font-size: 11px; padding-left: 10px; padding-right: 10px; text-align: center; } } /* Mobile */ @media (max-width: 374px) { .table-compare tfoot td .btn { font-size: 9px; padding-top: 6px; } } /* ------------------------------------------------------------ *\ Timeline \* ------------------------------------------------------------ */ .timeline-desktop .media ~ .media { margin-top: 6px; } .timeline-desktop .timeline__body { overflow: hidden; } .timeline-desktop .timeline__body-left, .timeline-desktop .timeline__body-right { float: left; width: 50%; } .timeline-desktop .timeline__body-left { text-align: right; padding-right: 3px; } .timeline-desktop .timeline__body-left .media { float: right; clear: right; } .timeline-desktop .timeline__body-right { text-align: left; padding-left: 3px; } .timeline-desktop .timeline__body-right .media { float: left; clear: left; } /* Mobile */ @media (max-width: 767px) { .timeline .media { max-width: 100%; width: calc(100% - 60px); margin-bottom: 10px; } .timeline .media img { width: 100%; height: auto; } .timeline .media .media__meta { width: 60px; font-size: 22px; } .timeline .media:nth-child(odd) { margin-right: 60px; } .timeline .media:nth-child(odd) .media__meta { left: 100%; text-align: right; } .timeline .media:nth-child(even) { margin-left: 60px; } .timeline .media:nth-child(even) .media__meta { right: 100%; text-align: left; } } /* ------------------------------------------------------------ *\ Timeline History \* ------------------------------------------------------------ */ .timeline-history { position: relative; padding-top: 4.81rem; padding-bottom: 12.19rem; } .timeline-history:after { content: ''; width: 0.75rem; height: 13.75rem; position: absolute; left: 50%; margin-left: -0.375rem; bottom: 0; z-index: 2; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } .timeline-history:before { content: ''; width: 0.75rem; height: 100%; background-color: #d50032; position: absolute; left: 50%; margin-left: -0.375rem; top: 0; } .timeline-history .timeline__item { width: 50%; position: relative; } .timeline-history .timeline__item-inner { display: inline-block; position: relative; } .timeline-history .timeline__item:before { content: ''; width: 5.625rem; height: 2px; background-color: #d50032; position: absolute; top: 2.69rem; } .timeline-history .timeline__item h2, .timeline-history .timeline__item p { position: relative; z-index: 2; } .timeline-history .timeline__item h2 { font-weight: 500; font-size: 5rem; color: #444041; margin-bottom: 0; } .timeline-history .timeline__item p { font-size: 1.125rem; color: #444041; letter-spacing: 0; margin: 0; } .timeline-history .timeline__item img { position: absolute; max-width: none; } .timeline-history .timeline__item:nth-child(odd) { text-align: right; padding-right: 7.69rem; } .timeline-history .timeline__item:nth-child(odd):before { right: 0.375rem; } .timeline-history .timeline__item:nth-child(odd) img { right: 100%; margin-right: 0.94rem; } .timeline-history .timeline__item:nth-child(even) { text-align: left; margin-left: 50%; padding-left: 6.94rem; } .timeline-history .timeline__item:nth-child(even):before { left: 0.375rem; } .timeline-history .timeline__item:nth-child(even) img { left: 100%; margin-left: 0.94rem; z-index: 1; } .timeline-history .timeline__item:nth-child(2) { margin-top: 8rem; } .timeline-history .timeline__item:nth-child(2):before { top: 2.94rem; } .timeline-history .timeline__item:nth-child(2) img { margin-left: 1.56rem; top: -1.56rem; max-width: none; } .timeline-history .timeline__item:nth-child(3) { margin-top: -2.25rem; } .timeline-history .timeline__item:nth-child(3):before { top: 2.56rem; } .timeline-history .timeline__item:nth-child(3) img { margin-right: 0.19rem; top: -6.06rem; max-width: none; } .timeline-history .timeline__item:nth-child(4) { margin-top: 16.44rem; } .timeline-history .timeline__item:nth-child(4):before { top: 2.94rem; } .timeline-history .timeline__item:nth-child(5) { margin-top: -4rem; } .timeline-history .timeline__item:nth-child(5):before { top: 3.06rem; } .timeline-history .timeline__item:nth-child(5) img { margin-right: -0.81rem; top: -7.56rem; max-width: none; } .timeline-history .timeline__item:nth-child(6) { margin-top: 10.25rem; } .timeline-history .timeline__item:nth-child(6):before { top: 2.94rem; } .timeline-history .timeline__item:nth-child(7) { margin-top: 6rem; } .timeline-history .timeline__item:nth-child(7):before { top: 2.625rem; } .timeline-history .timeline__item:nth-child(7) img { margin-right: -8.5rem; top: -11.625rem; max-width: none; } .timeline-history .timeline__item:nth-child(8) { margin-top: 0.25rem; } .timeline-history .timeline__item:nth-child(8):before { top: 2.56rem; } .timeline-history .timeline__item:nth-child(8) img { margin-left: -6.56rem; top: -0.69rem; max-width: none; } .timeline-history .timeline__item:nth-child(9) { margin-top: -1.125rem; } .timeline-history .timeline__item:nth-child(9):before { top: 1.56rem; } .timeline-history .timeline__item:nth-child(10) { margin-top: 0.44rem; } .timeline-history .timeline__item:nth-child(10):before { top: 2.56rem; } .timeline-history .timeline__item:nth-child(11) { margin-top: 3.5rem; } .timeline-history .timeline__item:nth-child(11):before { top: 2.625rem; } .timeline-history .timeline__item:nth-child(11) img { margin-right: -0.75rem; top: -7.19rem; max-width: none; } .timeline-history .timeline__item:nth-child(12) { margin-top: -1.875rem; } .timeline-history .timeline__item:nth-child(12):before { top: 2.875rem; } .timeline-history .timeline__item:nth-child(12) img { margin-left: 1.44rem; top: -2.56rem; max-width: none; } .timeline-history .timeline__item:nth-child(13) { margin-top: -2.75rem; } .timeline-history .timeline__item:nth-child(13):before { top: 2.56rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .timeline-history .timeline__item h2 { font-size: 50px; } .timeline-history .timeline__item p { font-size: 16px; } .timeline-history .timeline__item p br { display: none; } .timeline-history .timeline__item:nth-child(2) img { margin-left: -150px; top: -156px; } .timeline-history .timeline__item:nth-child(3) img { margin-right: -120px; top: -117px; } .timeline-history .timeline__item:nth-child(5) img { margin-right: -133px; top: -121px; } .timeline-history .timeline__item:nth-child(7) img { margin-right: -136px; top: -166px; } .timeline-history .timeline__item:nth-child(8) img { margin-left: -135px; top: -41px; } .timeline-history .timeline__item:nth-child(11) img { margin-right: -112px; top: -131px; } .timeline-history .timeline__item:nth-child(11) p { padding-left: 20px; } .timeline-history .timeline__item:nth-child(12) img { width: 230px; margin-left: -120px; top: -91px; } } /* Mobile */ @media (max-width: 767px) { .timeline-history { padding: 30px 0 50px; } .timeline-history:before { left: 0; margin-left: 0; } .timeline-history:after { left: 0; margin-left: 0; } .timeline-history .timeline__item-inner { display: block; } .timeline-history .timeline__item:nth-child(odd), .timeline-history .timeline__item:nth-child(even) { width: 100%; text-align: left; margin-left: 0; padding: 0 0 0 50px; } .timeline-history .timeline__item:nth-child(odd):before, .timeline-history .timeline__item:nth-child(even):before { width: 30px; right: auto; margin: 0; left: 8px; top: 19px; } .timeline-history .timeline__item:nth-child(odd) img, .timeline-history .timeline__item:nth-child(even) img { right: 0; margin: 0; left: auto; } .timeline-history .timeline__item h2 { font-size: 36px; } .timeline-history .timeline__item p { width: 50%; font-size: 14px; } .timeline-history .timeline__item img { max-width: 160px !important; height: auto; } .timeline-history .timeline__item ~ .timeline__item { margin-top: 100px; } .timeline-history .timeline__item:nth-child(2) img { margin-left: 0; margin-right: -20px; top: -23px; } .timeline-history .timeline__item:nth-child(3) img { margin-right: -10px; top: -40px; } .timeline-history .timeline__item:nth-child(5) img { margin-right: -15px; top: -28px; } .timeline-history .timeline__item:nth-child(7) img { margin-right: -10px; top: 10px; } .timeline-history .timeline__item:nth-child(8) img { margin-left: 0; margin-right: -12px; top: 29px; } .timeline-history .timeline__item:nth-child(11) img { margin-right: -10px; top: -6px; } .timeline-history .timeline__item:nth-child(11) p { padding-left: 0; } .timeline-history .timeline__item:nth-child(12) img { width: 230px; margin-left: 0; margin-right: -15px; top: -1px; } } /* Mobile */ @media (max-width: 374px) { .timeline-history .timeline__item p { width: 60%; } .timeline-history .timeline__item img { max-width: 100px !important; } .timeline-history .timeline__item:nth-child(2) img { margin-right: -10px; top: -7px; } .timeline-history .timeline__item:nth-child(3) img { top: -15px; } .timeline-history .timeline__item:nth-child(5) img { margin-right: -10px; top: -5px; } } /* ------------------------------------------------------------ *\ Tooltips \* ------------------------------------------------------------ */ .tooltips { display: none; } /* Mobile */ @media (max-width: 767px) { .tooltips { display: block; position: relative; z-index: 10; } .tooltips p { width: 100%; background-color: #f4f4f4; font-size: 14px; color: #444041; padding: 30px 20px 20px; position: absolute; left: 0; bottom: 100%; z-index: 999; text-align: left; letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; } .tooltips p.active { opacity: 1; visibility: visible; } .tooltips p a { text-decoration: none; font-size: 32px; color: #444041; position: absolute; right: 5px; top: -5px; } } /* ------------------------------------------------------------ *\ Touch \* ------------------------------------------------------------ */ .touch .list-features li p, .touch .list-features li:hover p { opacity: 0; visibility: hidden; } .touch .list-features li.hover p { opacity: 1; visibility: visible; } @media(max-width: 1024px) { .touch .list-gammes > li:hover:before, .touch .list-gammes > li:hover + li:before { opacity: 1; } .touch .gamme:hover .gamme__overlay { opacity: 0; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget Buttons \* ------------------------------------------------------------ */ .widget-buttons { margin-bottom: 3.56rem; } .widget-buttons ul { list-style: none; margin: 0; padding: 0; } .widget-buttons ul li { margin-bottom: 2.31rem; } .widget-buttons ul li:last-child { margin-bottom: 0; } .widget-buttons .btn { width: 100%; text-align: left; padding-right: 0.94rem; padding-left: 3.75rem; position: relative; } .widget-buttons .btn .icon { position: absolute; left: 1.875rem; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .widget-buttons .btn .icon i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity .4s ease; -webkit-backface-visibility: hidden; } .widget-buttons .btn i[class^='ico-visible'] { opacity: 1; } .widget-buttons .btn i[class^='ico-invisible'] { opacity: 0; } .widget-buttons .btn:hover { background-color: #444041; color: #fff; } .widget-buttons .btn.disabled { background-color: #fff; color: #444041; } .widget-buttons .btn.disabled i[class^='ico-visible'] { opacity: 0; } .widget-buttons .btn.disabled i[class^='ico-invisible'] { opacity: 1; } /* Tablet Portrait */ @media (max-width: 1024px) { .widget-buttons { margin-bottom: 15px; } .widget-buttons ul { margin: 0 -17px; overflow: hidden; } .widget-buttons ul li { float: left; width: 50%; padding: 0 17px; margin-bottom: 0; } .widget-buttons .btn { text-align: center; padding-left: 20px; padding-right: 20px; } .widget-buttons .btn .icon { width: 23px; height: 14px; display: inline-block; vertical-align: middle; position: relative; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-right: 10px; top: -1px; left: auto; } } /* Mobile */ @media (max-width: 767px) { .widget-buttons { margin-bottom: 0; } .widget-buttons .btn .icon i { -webkit-transform: translate(-50%, -50%) scale(.7); -ms-transform: translate(-50%, -50%) scale(.7); transform: translate(-50%, -50%) scale(.7); } } /* Mobile */ @media (max-width: 374px) { .widget-buttons ul { margin: 0 -10px; } .widget-buttons ul li { padding: 0 10px; } .widget-buttons .btn { padding-left: 10px; padding-right: 10px; } } /* ------------------------------------------------------------ *\ Widget Nav \* ------------------------------------------------------------ */ .widget-nav ul { list-style: none; margin: 0; padding: 0; } .widget-nav ul a { display: block; padding: 0.375rem 0 0.31rem; text-decoration: none; text-align: right; font-family: 'WindleshamPro', sans-serif; font-weight: 500; font-size: 1.25rem; text-transform: uppercase; color: #444041; letter-spacing: .05em; margin-right: 4.06rem; border-bottom: 1px solid #444041; transition: margin .4s ease, font-size .4s ease; will-change: margin, font-size; } .widget-nav ul li:hover a, .widget-nav ul .active a { margin-right: 0; font-size: 3rem; } /* Tablet Portrait */ @media (max-width: 1024px) { .widget-nav { position: relative; z-index: 98; } .widget-nav .widget__body { position: relative; height: 50px; } .widget-nav .toggle { width: 14px; height: 14px; border: 2px solid #444041; border-left: 0; border-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; right: 20px; top: 15px; z-index: 11; } .widget-nav ul { background-color: #fff; position: absolute; left: -30px; right: -30px; padding: 0 30px 0; top: 0; } .widget-nav ul li { display: none; } .widget-nav ul a { text-align: center; margin-right: 0; border-bottom-color: #b5b9bc; padding: 13px 0 12px; text-transform: none; } .widget-nav ul .active { display: block; position: relative; } .widget-nav ul .active a { font-size: 20px; } .widget-nav ul.active li { display: block; } .widget-nav .toggle.active { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); top: 20px; } } /* Mobile */ @media (max-width: 767px) { .widget-nav ul .active a { padding: 13px 0 4px; } } /* ------------------------------------------------------------ *\ Widget Filters \* ------------------------------------------------------------ */ .widget-filters .widget__group-head { margin-bottom: 1.25rem; position: relative; padding-bottom: 0.94rem; } .widget-filters .widget__group-head:after { content: ''; width: 1.44rem; height: 1px; background-color: #000; position: absolute; left: 0; bottom: 0; } .widget-filters .widget__group-head h5 { font-family: 'WindleshamPro', sans-serif; font-weight: 700; font-size: 1rem; color: #444041; letter-spacing: .03em; text-transform: uppercase; margin: 0; } .widget-filters .widget__group ~ .widget__group { margin-top: 1.875rem; } .widget-filters ul:not([class]) { list-style: none; margin: 0; padding: 0; font-size: 1rem; } .widget-filters ul:not([class]) li ~ li { margin-top: 0.625rem; } .widget-filters ul:not([class]) a { width: 1rem; height: 1rem; border: 1px solid #444041; display: inline-block; vertical-align: middle; text-decoration: none; position: relative; margin-right: 0.625rem; transition: opacity .4s ease; position: relative; top: -2px; } .widget-filters ul:not([class]) a:hover { opacity: .5; } .widget-filters ul:not([class]) a span { font-size: 1.5rem; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -60%); -ms-transform: translate(-50%, -60%); transform: translate(-50%, -60%); } .widget-filters h6 { font-family: 'Segoe UI', sans-serif; font-weight: 600; font-size: 1rem; text-transform: none; margin: 0 0 0.625rem; } .widget-filters h6 ~ h6 { margin-top: 1.56rem; } .widget-filters .list-radios li ~ li, .widget-filters .list-checkboxes li ~ li { margin-top: 0.625rem; } .widget-filters .widget__actions { text-align: center; padding-top: 1.875rem; } /* Small Desktop */ @media (max-width: 1199px) { .widget-filters ul:not([class]) li { position: relative; padding-left: 1.875rem; } .widget-filters ul:not([class]) a { margin: 0; position: absolute; left: 0; top: 2px; } } /* Mobile */ @media (max-width: 767px) { .widget-filters ul:not([class]) li, .widget-filters .widget__group-head h5 { font-size: 17px; } } /* ------------------------------------------------------------ *\ IV. Themes \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Theme Magnific \* ------------------------------------------------------------ */ .mfp-fade.mfp-bg { opacity: 0; transition: all .4s ease; background-color: #242b31; } .mfp-fade.mfp-bg.mfp-ready { opacity: .6; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all .4s ease; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* Mobile */ @media (max-width: 767px) { .mfp-container { padding: 0; } } .ico-desktop, .ico-desktop-active { width:37px; height:37px; }