/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- Mobile ----------------------------------- 03. Fonts ------------------------------------ 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Responsive Helpers ----------------------- Upper Case ------------------------------- Line Through ----------------------------- Gutter ----------------------------------- Tablet Portrait -------------------------- II. Regions -------------------------------------- 01. Container -------------------------------- Mobile ----------------------------------- 02. Content ---------------------------------- Tablet Portrait -------------------------- 03. Content Centered ------------------------- 04. Footer ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 05. Footer Inverse --------------------------- Tablet Portrait -------------------------- 06. Header ----------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 07. Header Inverse --------------------------- 08. Main ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 09. Main Banner ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 10. Main Secondary --------------------------- 11. Main Primary ----------------------------- 12. Shell ------------------------------------ 13. Shell Inner ------------------------------ 14. shell-large ------------------------------ 15. Sidebar ---------------------------------- 16. Sidebar Secondary ------------------------ 17. Sidebar Right ---------------------------- 18. Wrapper ---------------------------------- Tablet Portrait -------------------------- III. Modules -------------------------------------- 01. Accordion -------------------------------- 02. Accordion Details ------------------------ Mobile ----------------------------------- 03. Accordion Faq ---------------------------- 04. Article ---------------------------------- Article Alt ------------------------------ Article Alt Inverse ---------------------- Article Offset Top ----------------------- Article Simple --------------------------- Article Blog ----------------------------- 05. Article Small ---------------------------- 06. Article Primary -------------------------- 07. Banner ----------------------------------- 08. Bar -------------------------------------- 09. Bar Inverse ------------------------------ 10. Blog Items ------------------------------- 11. Blog Post -------------------------------- 12. Box -------------------------------------- Tablet Portrait -------------------------- 13. Box Small -------------------------------- 14. Box Medium ------------------------------- 15. Box XXLarge ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 16. Box Info --------------------------------- Tablet Portrait -------------------------- 17. Breadcrumbs ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 18. Breadcrumbs Center ----------------------- 19. Button ----------------------------------- Btn Square ------------------------------- Tablet Portrait -------------------------- Btn Square Large ------------------------- Btn Black -------------------------------- Btn Grey --------------------------------- Mobile ----------------------------------- Btn White -------------------------------- Btn Transparent -------------------------- Btn Small -------------------------------- Btn Link --------------------------------- Btn Link Inverse ------------------------- Btn Plus --------------------------------- Btn Filter ------------------------------- Button Block ----------------------------- 20. Btn Go Top ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 21. Btn Zoom --------------------------------- Mobile ----------------------------------- 22. Btn Menu --------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 23. Btn White Solid -------------------------- 24. Btn White Transparent -------------------- 25. Callout ---------------------------------- Mobile ----------------------------------- 26. Callout Primary -------------------------- 27. Cart ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 28. Cart Products ---------------------------- Mobile ----------------------------------- 29. Cart Product Large ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 30. Cart Product Checkout -------------------- Mobile ----------------------------------- 31. Cart Product Small ----------------------- Mobile ----------------------------------- 32. Collection Items ------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 33. Cookie ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 34. Cookie Inverse --------------------------- 35. Custom Scroll ---------------------------- 36. Designers -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 37. Dropdown --------------------------------- Tablet Portrait -------------------------- 38. Flipster Holder -------------------------- 39. Form Elements ---------------------------- Form Cols -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Form Row Inline -------------------------- Field ------------------------------------ Mobile ----------------------------------- Field Alt -------------------------------- Field Large ------------------------------ Select Holder ---------------------------- Mobile ----------------------------------- Select Uppercase ------------------------- Textarea --------------------------------- Radio Color ------------------------------ Radio White ------------------------------ Checkbox --------------------------------- Checkbox Black --------------------------- Mobile ----------------------------------- Erorr Message ---------------------------- Custom select ---------------------------- 40. Select White Transparent ----------------- 41. Select Primary --------------------------- 42. Select Small ----------------------------- 43. Form Contacts ---------------------------- 44. Form Prodcut ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 45. Form Filters ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 46. Form Stock ------------------------------- Mobile ----------------------------------- 47. Form Check Gift -------------------------- Mobile ----------------------------------- 48. Form Gift -------------------------------- Mobile ----------------------------------- 49. Form Code -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 50. Form Default ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 51. Form Checkout ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 52. Form Promo ------------------------------- Mobile ----------------------------------- 53. Form Simple ------------------------------ Mobile ----------------------------------- 54. Form Sort -------------------------------- 55. Gallery ---------------------------------- 56. Grid ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 57. Intro ------------------------------------ Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 58. Intro Blog ------------------------------- 59. Jobs ------------------------------------- 60. Link ------------------------------------- Tablet Portrait -------------------------- 61. List ------------------------------------- 62. List Options ----------------------------- 63. List Colors ------------------------------ Mobile ----------------------------------- 64. List Radios Colors ----------------------- Mobile ----------------------------------- 65. List Links ------------------------------- 66. List Thumbs ------------------------------ 67. List Thumbs Large ------------------------ 68. List Checkboxes Inline ------------------- Tablet Portrait -------------------------- 69. List Simple Products --------------------- 70. List Radios Inline ----------------------- 71. List Products ---------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 72. List Links Inverse ----------------------- Mobile ----------------------------------- 73. List Images ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 74. List Posts ------------------------------- Mobile ----------------------------------- 75. List Widget Total ------------------------ Tablet Portrait -------------------------- 76. List Small Security ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 77. List Checkout Steps ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 78. List Checkout Info ----------------------- Mobile ----------------------------------- 79. List Cards ------------------------------- 80. List Order Details ----------------------- Mobile ----------------------------------- 81. List Account Info ------------------------ Mobile ----------------------------------- 82. List Simple ------------------------------ Mobile ----------------------------------- 83. List Years ------------------------------- 84. List Anchors ----------------------------- 85. List Grid -------------------------------- 86. List Jobs -------------------------------- 87. List Steps ------------------------------- 88. List Stylist ----------------------------- 89. List Stores ------------------------------ 90. List Buttons ----------------------------- 91. Logo ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 92. Logo Sticky ------------------------------ 93. Logo Inverse ---------------------------- 94. Nav -------------------------------------- Large Desktop ---------------------------- Tablet Portrait -------------------------- 95. Nav Inverse ------------------------------ Tablet Portrait -------------------------- 96. Nav Utilities ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 97. Nav Utilities Inverse -------------------- 98. Nav Footer ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 99. Nav Footer Inverse ----------------------- 100. Nav Category ---------------------------- 101. Nav Secondary --------------------------- 102. Nav Wrapper ----------------------------- Tablet Portrait -------------------------- 103. Nav Blog -------------------------------- 104. Nav Stylist ----------------------------- 105. Nav Site Map ---------------------------- 106. Pagination ------------------------------ 107. Popover --------------------------------- Popover Alt ------------------------------ 108. Popup ----------------------------------- Mobile ----------------------------------- 109. Popup Quickview ------------------------- 110. Popup Quickview Simple ------------------ 111. Popup Pdp Preview ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 112. Popup Size Guide ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 113. Popup Stock ----------------------------- Mobile ----------------------------------- 114. Popup Video ----------------------------- 115. Popup CVV ------------------------------- Mobile ----------------------------------- 116. Post Items ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 117. Products -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 118. Products Set Filters -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 119. Product Shoe ---------------------------- Tablet Portrait -------------------------- 120. Product Alt ----------------------------- Tablet Portrait -------------------------- 121. Products List --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 122. Products Small List --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 123. Products List Grid ---------------------- 124. Product --------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 125. Product Small --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 126. Products Simple ------------------------- 127. Product Quick View ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 128. Product Collection ---------------------- 129. Proggress ------------------------------- 130. Quote ----------------------------------- Mobile ----------------------------------- 131. Quote Inverse --------------------------- 132. Quote Bordered -------------------------- 133. Quote Small ----------------------------- 134. Referral Links -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 135. Region ---------------------------------- Tablet Portrait -------------------------- 136. Scene ----------------------------------- 137. Search ---------------------------------- 138. Search Results -------------------------- Mobile ----------------------------------- 139. Section --------------------------------- Mobile ----------------------------------- 140. Section Primary ------------------------- 141. Section Secondary ----------------------- 142. Section Aside Inverse ------------------- 143. Section Region -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 144. Sectio Bags ----------------------------- 145. Section Fashion ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 146. Section Shoes --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 147. Section Numbers ------------------------- Tablet Portrait -------------------------- 148. Section Product ------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 149. Section Products ------------------------ 150. Section Article ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 151. Section Related ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 152. Section Links --------------------------- Mobile ----------------------------------- 153. Section Grid ---------------------------- 154. Section Collection ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 155. Section Collection Secondary ------------ 156. Section Designer ------------------------ Mobile ----------------------------------- 157. Section Gifts --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 158. Section Checkout ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 159. Section Login --------------------------- Mobile ----------------------------------- 160. Section Order Details ------------------- Tablet Portrait -------------------------- 161. Section Posts --------------------------- Mobile ----------------------------------- 162. Section Account ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 163. Section Account Alt --------------------- 164. Section Blog ---------------------------- 165. Section Category ------------------------ 166. Section Experience ---------------------- 167. Section Timeline ------------------------ 168. Section Video --------------------------- 169. Section Store --------------------------- 170. Section Steps --------------------------- 171. Section Copy ---------------------------- 172. Section Sitemap ------------------------- 173. Section Services ------------------------ 174. Section Returns ------------------------- 175. Slider ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 176. Slider Intro ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 177. Slider Intro Secondary Small ------------ Tablet Portrait -------------------------- 178. Slider Intro Simple --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 179. Slider Model ---------------------------- Mobile ----------------------------------- 180. Slider Category ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 181. Sldier Hood ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 182. Slider Pdp ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 183. Slider Counter -------------------------- 184. Slider Mobile --------------------------- 185. Slider Mobile Simple -------------------- 186. Slider Products ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 187. Slider Simple Products ------------------ Mobile ----------------------------------- 188. Slider Colection ------------------------ 189. Slider Seasons -------------------------- 190. Socials --------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 191. Socials Secondary ----------------------- 192. Socials Tertiary ------------------------ 193. Store ----------------------------------- Store Small ------------------------------ 194. Subscribe ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 195. Subscribe Inverse ----------------------- 196. Subscribe Newsletter -------------------- Mobile ----------------------------------- 197. Tabs ------------------------------------ 198. Tabs Details ---------------------------- 199. Tabs Simple ----------------------------- Mobile ----------------------------------- 200. Tabs Default ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 201. Tabs Stores ----------------------------- 202. Tabs Chart ------------------------------ 203. Tabs Inline ----------------------------- 204. Tabs Images ----------------------------- 205. Table Size ------------------------------ Mobile ----------------------------------- 206. Table Cart ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 207. Table Default --------------------------- Mobile ----------------------------------- 208. Table Account --------------------------- Mobile ----------------------------------- 209. Table Returns --------------------------- 210. Tags ------------------------------------ 211. Testimonial ----------------------------- 212. Timeline -------------------------------- Small Desktop ---------------------------- 213. Video Holder ---------------------------- 214. Video Placeholder ----------------------- 215. Widget ---------------------------------- 216. Widget Links ---------------------------- Tablet Portrait -------------------------- 217. Widget Sort ----------------------------- 218. Widget Total ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 219. Widget Nav ------------------------------ 220. Widget Nav ------------------------------ Mobile ----------------------------------- IV. Themes --------------------------------------- 01. Theme Autocomplete ----------------------- */ .ico-arrow-down-alt { background-image: url(../css/images/sprite.png); background-position: -140px -236px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-down-small { background-image: url(../css/images/sprite.png); background-position: -277px -234px; width: 12px; height: 6px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-down { background-image: url(../css/images/sprite.png); background-position: -90px -236px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-left-black { background-image: url(../css/images/sprite.png); background-position: -138px -192px; width: 18px; height: 33px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-left { background-image: url(../css/images/sprite.png); background-position: -50px -192px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-right-black { background-image: url(../css/images/sprite.png); background-position: -160px -192px; width: 18px; height: 33px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-alt { background-image: url(../css/images/sprite.png); background-position: -165px -236px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-mobile-white { background-image: url(../css/images/sprite.png); background-position: -139px -157px; width: 32px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-mobile { background-image: url(../css/images/sprite.png); background-position: -103px -157px; width: 32px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up { background-image: url(../css/images/sprite.png); background-position: -65px -236px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-hover, a:hover .ico-arrow-up, button:hover .ico-arrow-up, a.hover .ico-arrow-up, button.hover .ico-arrow-up, .ico-arrow-up.hover { background-image: url(../css/images/sprite.png); background-position: -115px -236px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-xsmall { background-image: url(../css/images/sprite.png); background-position: -277px -218px; width: 6px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cart-white { background-image: url(../css/images/sprite.png); background-position: -210px -192px; width: 24px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cart { background-image: url(../css/images/sprite.png); background-position: -182px -192px; width: 24px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0;margin-top:-6px; } .ico-close-small { background-image: url(../css/images/sprite.png); background-position: -238px -174px; width: 17px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-white-large { background-image: url(../css/images/sprite.png); background-position: -175px -157px; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-white { background-image: url(../css/images/sprite.png); background-position: -277px -161px; width: 11px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-xsmall { background-image: url(../css/images/sprite.png); background-position: -277px -244px; width: 8px; height: 8px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-xxsmall-white { background-image: url(../css/images/sprite.png); background-position: -277px -266px; width: 6px; height: 6px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-xxsmall { background-image: url(../css/images/sprite.png); background-position: -277px -256px; width: 6px; height: 6px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close { background-image: url(../css/images/sprite.png); background-position: -211px -81px; width: 22px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cols { background-image: url(../css/images/sprite.png); background-position: -192px -116px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cols-hover, a:hover .ico-cols, button:hover .ico-cols, a.hover .ico-cols, button.hover .ico-cols, .ico-cols.hover { background-image: url(../css/images/sprite.png); background-position: 0 -157px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-envelope { background-image: url(../css/images/sprite.png); background-position: -157px -81px; width: 50px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-large { background-image: url(../css/images/sprite.png); background-position: -277px -44px; width: 11px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-small { background-image: url(../css/images/sprite.png); background-position: -277px -142px; width: 8px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-white { background-image: url(../css/images/sprite.png); background-position: -277px -91px; width: 9px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook { background-image: url(../css/images/sprite.png); background-position: -277px -69px; width: 9px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-grid { background-image: url(../css/images/sprite.png); background-position: -35px -157px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-grid-hover, a:hover .ico-grid, button:hover .ico-grid, a.hover .ico-grid, button.hover .ico-grid, .ico-grid.hover { background-image: url(../css/images/sprite.png); background-position: -157px -116px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-instagram-small { background-image: url(../css/images/sprite.png); background-position: 0 -257px; width: 16px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-instagram-white { background-image: url(../css/images/sprite.png); background-position: -21px -236px; width: 17px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-instagram { background-image: url(../css/images/sprite.png); background-position: 0 -236px; width: 17px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-black { background-image: url(../css/images/sprite.png); background-position: -261px -81px; width: 12px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-small { background-image: url(../css/images/sprite.png); background-position: -238px -114px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-small-hover, a:hover .ico-left-arrow-small, button:hover .ico-left-arrow-small, a.hover .ico-left-arrow-small, button.hover .ico-left-arrow-small, .ico-left-arrow-small.hover { background-image: url(../css/images/sprite.png); background-position: -238px -24px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow { background-image: url(../css/images/sprite.png); background-position: -94px -192px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-hover, a:hover .ico-left-arrow, button:hover .ico-left-arrow, a.hover .ico-left-arrow, button.hover .ico-left-arrow, .ico-left-arrow.hover { background-image: url(../css/images/sprite.png); background-position: -238px -84px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-pinterest-white { background-image: url(../css/images/sprite.png); background-position: -277px 0; width: 14px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-pinterest { background-image: url(../css/images/sprite.png); background-position: -277px -22px; width: 14px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-large { background-image: url(../css/images/sprite.png); background-position: 0 0; width: 153px; height: 153px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-mobile { background-image: url(../css/images/sprite.png); background-position: -157px 0; width: 77px; height: 77px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-plus { background-image: url(../css/images/sprite.png); background-position: -277px -113px; width: 12px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-black { background-image: url(../css/images/sprite.png); background-position: -261px 0; width: 12px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-small { background-image: url(../css/images/sprite.png); background-position: -238px -144px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-small-hover, a:hover .ico-right-arrow-small, button:hover .ico-right-arrow-small, a.hover .ico-right-arrow-small, button.hover .ico-right-arrow-small, .ico-right-arrow-small.hover { background-image: url(../css/images/sprite.png); background-position: -238px -54px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow { background-image: url(../css/images/sprite.png); background-position: -116px -192px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-hover, a:hover .ico-right-arrow, button:hover .ico-right-arrow, a.hover .ico-right-arrow, button.hover .ico-right-arrow, .ico-right-arrow.hover { background-image: url(../css/images/sprite.png); background-position: -72px -192px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-mobile-white { background-image: url(../css/images/sprite.png); background-position: -238px 0; width: 19px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-mobile { background-image: url(../css/images/sprite.png); background-position: -277px -204px; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-mobile-2-x-copy { background: url(../css/images/sprite/ico-search-mobile@2x - Copy.png) no-repeat 0 0; width: 20px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-white { background-image: url(../css/images/sprite.png); background-position: -277px -176px; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search { background-image: url(../css/images/sprite.png); background-position: -277px -190px; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-select-arrow { background-image: url(../css/images/sprite.png); background-position: -277px -129px; width: 14px; height: 9px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-left { background-image: url(../css/images/sprite.png); background-position: 0 -192px; width: 21px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-next-white { background-image: url(../css/images/sprite.png); background-position: -261px -54px; width: 12px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-prev-white { background-image: url(../css/images/sprite.png); background-position: -261px -27px; width: 12px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-right { background-image: url(../css/images/sprite.png); background-position: -25px -192px; width: 21px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tweets { background-image: url(../css/images/sprite.png); background-position: -70px -157px; width: 29px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-large { background-image: url(../css/images/sprite.png); background-position: -201px -157px; width: 24px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-small { background-image: url(../css/images/sprite.png); background-position: -42px -236px; width: 19px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-white { background-image: url(../css/images/sprite.png); background-position: -238px -196px; width: 19px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter { background-image: url(../css/images/sprite.png); background-position: -238px -216px; width: 19px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-arrow-down-alt { background-image: url(../css/images/sprite.@2x.png); background-position: -44px -172px; background-size: 207px 187px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-down-small { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -164px; background-size: 207px 187px; width: 12px; height: 6px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-down { background-image: url(../css/images/sprite.@2x.png); background-position: -21px -172px; background-size: 207px 187px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-left-black { background-image: url(../css/images/sprite.@2x.png); background-position: -40px -136px; background-size: 207px 187px; width: 18px; height: 33px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-left { background-image: url(../css/images/sprite.@2x.png); background-position: -154px -36px; background-size: 207px 187px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-right-black { background-image: url(../css/images/sprite.@2x.png); background-position: -20px -136px; background-size: 207px 187px; width: 18px; height: 33px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-alt { background-image: url(../css/images/sprite.@2x.png); background-position: -79px -66px; background-size: 207px 187px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-mobile-white { background-image: url(../css/images/sprite.@2x.png); background-position: 0 -112px; background-size: 207px 187px; width: 32px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-mobile { background-image: url(../css/images/sprite.@2x.png); background-position: -34px -112px; background-size: 207px 187px; width: 32px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up { background-image: url(../css/images/sprite.@2x.png); background-position: -67px -172px; background-size: 207px 187px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-up-hover, a:hover .ico-arrow-up, button:hover .ico-arrow-up, a.hover .ico-arrow-up, button.hover .ico-arrow-up, .ico-arrow-up.hover { background-image: url(../css/images/sprite.@2x.png); background-position: -102px -66px; background-size: 207px 187px; width: 21px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow-xsmall { background-image: url(../css/images/sprite.@2x.png); background-position: -144px -112px; background-size: 207px 187px; width: 6px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cart-white { background-image: url(../css/images/sprite.@2x.png); background-position: -84px -136px; background-size: 207px 187px; width: 24px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cart { background-image: url(../css/images/sprite.@2x.png); background-position: -118px -112px; background-size: 207px 187px; width: 24px; height: 19px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-small { background-image: url(../css/images/sprite.@2x.png); background-position: -110px -136px; background-size: 207px 187px; width: 17px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-white-large { background-image: url(../css/images/sprite.@2x.png); background-position: -68px -112px; background-size: 207px 187px; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-white { background-image: url(../css/images/sprite.@2x.png); background-position: -90px -172px; background-size: 207px 187px; width: 11px; height: 11px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-xsmall { background-image: url(../css/images/sprite.@2x.png); background-position: -60px -161px; background-size: 207px 187px; width: 8px; height: 8px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-xxsmall-white { background-image: url(../css/images/sprite.@2x.png); background-position: -70px -161px; background-size: 207px 187px; width: 6px; height: 6px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close-xxsmall { background-image: url(../css/images/sprite.@2x.png); background-position: -78px -161px; background-size: 207px 187px; width: 6px; height: 6px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close { background-image: url(../css/images/sprite.@2x.png); background-position: -60px -136px; background-size: 207px 187px; width: 22px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cols { background-image: url(../css/images/sprite.@2x.png); background-position: -33px -79px; background-size: 207px 187px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-cols-hover, a:hover .ico-cols, button:hover .ico-cols, a.hover .ico-cols, button.hover .ico-cols, .ico-cols.hover { background-image: url(../css/images/sprite.@2x.png); background-position: 0 -79px; background-size: 207px 187px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-envelope { background-image: url(../css/images/sprite.@2x.png); background-position: -79px 0; background-size: 207px 187px; width: 50px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-large { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -84px; background-size: 207px 187px; width: 11px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-small { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -147px; background-size: 207px 187px; width: 8px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook-white { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -107px; background-size: 207px 187px; width: 9px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-facebook { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -127px; background-size: 207px 187px; width: 9px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-grid { background-image: url(../css/images/sprite.@2x.png); background-position: -79px -33px; background-size: 207px 187px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-grid-hover, a:hover .ico-grid, button:hover .ico-grid, a.hover .ico-grid, button.hover .ico-grid, .ico-grid.hover { background-image: url(../css/images/sprite.@2x.png); background-position: -66px -79px; background-size: 207px 187px; width: 31px; height: 31px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-instagram-small { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -113px; background-size: 207px 187px; width: 16px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-instagram-white { background-image: url(../css/images/sprite.@2x.png); background-position: -190px 0; background-size: 207px 187px; width: 17px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-instagram { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -19px; background-size: 207px 187px; width: 17px; height: 17px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-small { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -56px; background-size: 207px 187px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-small-hover, a:hover .ico-left-arrow-small, button:hover .ico-left-arrow-small, a.hover .ico-left-arrow-small, button.hover .ico-left-arrow-small, .ico-left-arrow-small.hover { background-image: url(../css/images/sprite.@2x.png); background-position: -174px -28px; background-size: 207px 187px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow { background-image: url(../css/images/sprite.@2x.png); background-position: -154px 0; background-size: 207px 187px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-left-arrow-hover, a:hover .ico-left-arrow, button:hover .ico-left-arrow, a.hover .ico-left-arrow, button.hover .ico-left-arrow, .ico-left-arrow.hover { background-image: url(../css/images/sprite.@2x.png); background-position: -112px -33px; background-size: 207px 187px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-pinterest-white { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -131px; background-size: 207px 187px; width: 14px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-pinterest { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -151px; background-size: 207px 187px; width: 14px; height: 18px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-mobile { background-image: url(../css/images/sprite.@2x.png); background-position: 0 0; background-size: 207px 187px; width: 77px; height: 77px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-black { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -38px; background-size: 207px 187px; width: 12px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-small { background-image: url(../css/images/sprite.@2x.png); background-position: -154px -108px; background-size: 207px 187px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-small-hover, a:hover .ico-right-arrow-small, button:hover .ico-right-arrow-small, a.hover .ico-right-arrow-small, button.hover .ico-right-arrow-small, .ico-right-arrow-small.hover { background-image: url(../css/images/sprite.@2x.png); background-position: -174px 0; background-size: 207px 187px; width: 14px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow { background-image: url(../css/images/sprite.@2x.png); background-position: -154px -72px; background-size: 207px 187px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-arrow-hover, a:hover .ico-right-arrow, button:hover .ico-right-arrow, a.hover .ico-right-arrow, button.hover .ico-right-arrow, .ico-right-arrow.hover { background-image: url(../css/images/sprite.@2x.png); background-position: 0 -136px; background-size: 207px 187px; width: 18px; height: 34px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-mobile-white { background-image: url(../css/images/sprite.@2x.png); background-position: -131px -84px; background-size: 207px 187px; width: 19px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-mobile { background-image: url(../css/images/sprite.@2x.png); background-position: -103px -172px; background-size: 207px 187px; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search-white { background-image: url(../css/images/sprite.@2x.png); background-position: -115px -172px; background-size: 207px 187px; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-left { background-image: url(../css/images/sprite.@2x.png); background-position: -131px -42px; background-size: 207px 187px; width: 21px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-next-white { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -88px; background-size: 207px 187px; width: 12px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-prev-white { background-image: url(../css/images/sprite.@2x.png); background-position: -190px -63px; background-size: 207px 187px; width: 12px; height: 23px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-slider-right { background-image: url(../css/images/sprite.@2x.png); background-position: -131px 0; background-size: 207px 187px; width: 21px; height: 40px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-tweets { background-image: url(../css/images/sprite.@2x.png); background-position: -99px -79px; background-size: 207px 187px; width: 29px; height: 28px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-large { background-image: url(../css/images/sprite.@2x.png); background-position: -92px -112px; background-size: 207px 187px; width: 24px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-small { background-image: url(../css/images/sprite.@2x.png); background-position: 0 -172px; background-size: 207px 187px; width: 19px; height: 15px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-white { background-image: url(../css/images/sprite.@2x.png); background-position: -150px -136px; background-size: 207px 187px; width: 19px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter { background-image: url(../css/images/sprite.@2x.png); background-position: -129px -136px; background-size: 207px 187px; width: 19px; height: 16px; display: inline-block; vertical-align: middle; font-size: 0; } } .cols:after, .container:after, .header .header-body:after, .main .main-head:after, .main-secondary:after, .main-primary:after, .main-primary .main-body:after, .shell:after, .article .article-inner:after, .bar:after, .blog-items:after, .form-row:after, .gallery:after, .grid:after, .list-stylist:after, .list-stores:after, .nav > ul:after, .nav-utilities > ul:after, .nav-stylist ul:after, .section-product:after, .section-collection-secondary .section-head-options:after, .section-services .section-body:after, .table-grid:after, .testimonial .testimonial-inner:after, .timeline: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 \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 15px; line-height: 1.2; color: #000; letter-spacing: 0.15em; } a { color: inherit; text-decoration: underline; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.6em; } h1 { font-size: 108px; letter-spacing: 0.2em; line-height:1; } h2 { font-size: 35px; text-transform: uppercase; font-weight:400; letter-spacing: 0.2em; line-height:1; } h3 { font-size: 27px; } h4 { font-size: 15px; } h5 { font-size: 13px; } h6 { font-size: 12px; 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; } /* Mobile */ @media (max-width: 767px) { h1 { font-size: 32px; } h2 { font-size: 25px; font-weight: 400; } h6 { font-size: 13px; font-weight: 400; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: 'Bebas Neue'; src: url('fonts/bebasneue_bold.eot'); src: url('fonts/bebasneue_bold.eot?#iefix') format('embedded-opentype'), url('fonts/bebasneue_bold.woff2') format('woff2'), url('fonts/bebasneue_bold.ttf') format('truetype'), url('fonts/bebasneue_bold.svg#bebas_neuebold') format('svg'); font-weight: 700; font-style: normal; } /*------------------------------------------------------------ *\ 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 { } .cols-table { margin: 0; display: table; table-layout: fixed; table-layout: fixed; width:100%; } .col { float: left; width: 100%; padding: 0 15px; } .col-table { display: table-cell; vertical-align: middle; } .col-1of2 { width: 50%; } .col-1of4 { width:25%; } .col-4 { width: 33.3%; } /* Tablet Portrait */ @media (max-width: 1023px) { .col-4 { width: 33.33%; } .col-4-small { width: 30%; } .col-4-large { width: 40%; } } /* Mobile */ @media (max-width: 767px) { .col { float: none; display: block; width: 100%; } .col-table, .cols-table { display: block; width: 100%; } .col + .col { margin-left: 0; } } .text { display: inline-block; vertical-align: middle; } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } /* 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, .visible-xs-table-hd-group { 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; } .visible-xs-table-hd-group { display: table-header-group !important; } } @media (min-width: 768px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1044px) { .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: 1045px) { .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; } } /* Upper Case */ .uppercase { text-transform: uppercase; } /* Line Through */ .line-through { text-decoration: line-through; } @media (max-width: 767px) { footer-cols.footer-cols-flex, .flex-sections-home { -webkit-display: flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-sections-home .section-bags { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .flex-sections-home .section-fashion { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .flex-sections-home .section-shoes { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .flex-sections-home .section-region { -webkit-order: 4; -ms-flex-order: 4; order: 4; } /*.footer-cols-flex .footer-col-1 { order: 1; }*/ /*.footer-cols-flex .footer-col-4 { order: 2; }*/ /*.footer-cols-flex .footer-col-2 { order: 3; }*/ /*.footer-cols-flex .footer-col-3 { order: 4; }*/ } /* Gutter */ @media (max-width: 1200px) { .gutter-left-lg-220 { margin-left: 220px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .gutter-left-lg-220 { margin-left: 0; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { margin-bottom:112px; } .container:after { } /* Mobile */ @media (max-width: 767px) { .container { margin-bottom: 0; } } /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content { overflow: hidden; height: 100%; } .content > p { font-size: 8px; letter-spacing: 0.03em; } .content .content-title { margin: 20px 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 18px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; } .content .content-inner { padding: 0 104px; } /* Tablet Portrait */ @media (max-width: 1023px) { .content { overflow: visible; margin-top: 40px; } } @media (max-width: 767px) { .content .content-inner { padding: 0; text-align:left; } } /* ------------------------------------------------------------ *\ Content Centered \* ------------------------------------------------------------ */ .content-centered { max-width: 570px; margin: 0 auto; overflow: hidden; } @media (max-width: 1023px) { .content-centered { max-width: none; padding: 0 160px; } } @media (max-width: 767px) { .content-centered { padding: 0 25px; height: auto !important; } .content-centered.content-fullwidth { padding-left:0; padding-right:0; margin: 0 -10px; } } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { overflow: hidden; border-top:2px solid #000; padding-top:80px; position: relative; top:132px; } .footer-cols { display: table; width:100%; margin-bottom:120px; padding: 0 20px; } .footer-col { display: table-cell; vertical-align: top; } .footer-foot { text-align:center; text-transform: uppercase; font-size:10px; letter-spacing: 0.25em; margin-bottom:20px; } .footer-foot li { list-style:none; list-style-position: outside; display: inline-block; vertical-align: middle; padding: 0 28px; } .footer-foot a { text-decoration: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .footer { position: relative; top: auto; margin-top: 20px; padding-top: 40px; border: none; } .footer:before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; background-color: #404040; } .footer-cols { padding: 0 10px; table-layout: inherit; } .footer-col { width: 180px; } .footer-col:last-child { width: 360px;} } /* Mobile */ @media (max-width: 767px) { .footer { padding-top: 15px; } .footer h5 { font-size: 10px; } .footer:before { left: 20px; right: 20px; } .footer-cols { display: block; margin-bottom: 10px; } .footer-col { display: block; } .footer-col-last-mobile { float: left; width: 50%; } .footer-col-first-mobile { width: 100%; } .footer-foot { text-align: left; margin-bottom: 4px; } .footer-foot li { padding: 0; } .footer-foot ul > li { display: inline-block; padding: 0 5px; letter-spacing: 0; } .footer-foot ul > li:first-child { display: block; width: 100%; margin-bottom: 4px; } } /* ------------------------------------------------------------ *\ Footer Inverse \* ------------------------------------------------------------ */ .footer-inverse { color: #fff; border-top: 2px solid #fff; } .footer-inverse .link { color: #535353; } /* Tablet Portrait */ @media (max-width: 1023px) { .footer-inverse { border: none; } .footer-inverse:before { background-color: #fff; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: fixed; top: 0; left: 0; width: 100%; background:#fff; text-transform: uppercase; z-index: 9999; transition: left .4s; width:100%; } .header + * { margin-top: 147px; } .header + .intro { margin-top: 167px; } .header.header-inverse + * { margin-top:108px; } .header.header-inverse .header-inner { padding-top:11px; } .header .header-inner { padding: 20px 15px 0 18px; position: relative; margin: 0 auto;} .header .header-body {padding-bottom:10px; } .header .header-body:after { } .header .nav { float:left; } .header .nav-utilities { float:right; } .header-sticky .header-promo { display: none; } .header-sticky .nav { width: auto; } .header-sticky .nav + .nav { padding-left: 0; } .header-sticky .nav + .nav > ul { padding-left: 0; } .header-sticky .nav > ul > li { padding-right: 18px; } .header-sticky .nav > ul > li > a { margin: 0 0 10px; font-size: 15px; letter-spacing: .07em; } .header-sticky .nav-utilities { padding-top: 0; } .header-sticky .hide-on-scroll { display: none; } .header-sticky .logo { top: 50%; width: 41px; height: 42px; margin: -21px 0 0 -20px; background: url(images/logo-sticky.png) 0 0 no-repeat; background-size: 100% 100%; } .header-sticky .header-inner { padding-right: 10px; padding-left: 10px; } /* Small Desktop */ @media (max-width: 1044px) { .header .header-inner { padding-left: 0; padding-right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .header { min-height: 80px; } .header + .intro, .header + * { margin-top: 80px; } .header .header-inner { padding-left: 15px; padding-right: 15px; } .header-body:after { content: ''; display: table; clear: both; font-size: 0; } .header-sticky { min-height: 50px; } .header-sticky .cart { right: 0; } .header-sticky .header-inner { position: static; padding-top: 0; } .header-sticky .header-body { padding-top: 10px; } .header-sticky .btn-menu { top: 50%; margin-top: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .header-sticky .logo { width: 40px; height: 40px; margin-top: -20px; } } /* Mobile */ @media (max-width: 767px) { .header { min-height: 65px; margin-bottom: 36px; } .header-sticky .header-body { padding-top: 18px; } } /* ------------------------------------------------------------ *\ Header Inverse \* ------------------------------------------------------------ */ .header-inverse { background-color: #000; } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main { padding: 0 25px; margin-top: 22px; } .main-fluid { padding: 0; } .main .main-head { text-align: center; margin-bottom: 30px; } .main .main-head .shell { padding: 0 30px 0 15px; } .main .main-head:after { } .main .main-head-multiple { text-align: center; margin-bottom: 30px; } .main .main-head-multiple .shell { padding: 0 30px 0 15px; } .main .main-head-multiple:after { } .main .main-title { text-align:center; font-size: 40px; line-height: 1.2; font-weight: 400; letter-spacing: 0.2em; margin: 0; } .main h3.main-title { padding-top: 42px; font-size: 30px; line-height: 2; text-transform: uppercase; } .main .main-head-actions { float:right; font-size:13px; letter-spacing: 0; } .main .main-head-actions a { display: inline-block; vertical-align: middle; text-decoration: none; margin-left:18px; } @media(max-width: 1620px) { .main .main-head .shell { padding: 0; } .main .main-head .breadcrumbs { padding-left: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .main-head { position: relative; } .main-head > .sidebar { visibility: hidden; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; width: auto; padding: 15px 10px; margin-top: 40px; background-color: #fff; opacity: 0; transition: opacity .4s, visibility .4s, margin .4s; } .main-head > .sidebar.open { visibility: visible; opacity: 1; margin-top: 20px; } .main-body { padding-bottom: 40px; } .main-body > .breadcrumbs { overflow: hidden; max-width: 400px; white-space: nowrap; text-overflow: ellipsis; } .main h3.main-title { line-height: 1.3; } } /* Mobile */ @media (max-width: 767px) { .main { padding: 0 10px; margin-top: 10px; } .main .main-head { margin-bottom: 10px; } .main .main-title { font-size: 30px; } .main h3.main-title { padding-top: 20px; font-size: 20px; line-height: 1; } .main-head > .sidebar.open { margin-top: 10px; } .main-body > .breadcrumbs { max-width: none; text-align: center; white-space: normal; } .main > .pagination { margin-bottom: 40px; } } /* ------------------------------------------------------------ *\ Main Banner \* ------------------------------------------------------------ */ .main-banner { padding-bottom: 33px; margin: 0 -25px; text-align: center; } .main-banner-alt { display: table; width: calc(100% + 50px); padding: 31px 0 23px; table-layout: fixed; } .main-banner-inner { padding: 40px 0; margin-bottom: 23px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .main-banner h2 { font-size: 40px; line-height: 1.5; } .main-banner p { max-width: 880px; padding: 0 30px; margin: 0 auto; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.5; letter-spacing: 0; } .main-banner-alt .main-banner-image { display: table-cell; background-size: cover; background-repeat: no-repeat; background-position: 0 0; } .main-banner-alt .main-banner-caption { display: table-cell; padding: 60px 0; background-color: #231f20; } /* Tablet Portrait */ @media (max-width: 1023px) { .main-banner { margin: 0 -35px; } } /* Mobile */ @media (max-width: 767px) { .main-banner { margin: -36px -20px 0; } .main-banner-inner { margin-bottom: 12px; } .main-banner h2 { color: #fff; } .main-banner p { padding: 0 20px; font-size: 12px; } .main-banner-alt { position: relative; display: block; } .main-banner-alt .main-banner-image { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .main-banner-alt .main-banner-caption { position: relative; z-index: 2; display: block; padding: 65px 0 75px; background: none; text-align: center; } .main-banner-alt .main-banner-caption img { max-width: 257px; } } /* ------------------------------------------------------------ *\ Main Secondary \* ------------------------------------------------------------ */ .main-secondary { padding-top:65px; } .main-secondary:after { } /* ------------------------------------------------------------ *\ Main Primary \* ------------------------------------------------------------ */ .main-primary { padding-top:65px; position: relative; } .main-primary:after, .main-primary .main-body:after { } @media (max-width: 767px) { .main-primary { padding-top:20px; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1044px; padding-left: 10px; padding-right: 10px; margin: auto; } .shell:after { } .shell-fluid { max-width: none; } .shell-without-gutters { padding: 0; } .shell.shell-small { max-width: 678px; } /* ------------------------------------------------------------ *\ Shell Inner \* ------------------------------------------------------------ */ .shell-inner { max-width: 786px; margin: 0 auto; } /* ------------------------------------------------------------ *\ shell-large \* ------------------------------------------------------------ */ .shell-large { max-width: 1620px; } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar { width: 122px; float:left; } .sidebar-alt { width: 130px; margin-left: -10px; } /* ------------------------------------------------------------ *\ Sidebar Secondary \* ------------------------------------------------------------ */ .sidebar-secondary { width:225px; padding-left:30px; position: absolute; top:auto; left:0; } @media (max-width: 1023px) { .sidebar-secondary { width:160px; padding: 0; } } @media (max-width: 767px) { .sidebar-secondary { display:none; height: auto !important; } } /* ------------------------------------------------------------ *\ Sidebar Right \* ------------------------------------------------------------ */ .sidebar-right { float:right; width:217px; font-family: 'Roboto', 'Helvetica', sans-serif; padding:0 20px 0 10px; position: absolute; right: 0; } .sidebar-right .sidebar-head { border-bottom:3px solid #000; margin:5px 0 20px 0; padding-bottom:18px; } .sidebar-right .sidebar-title { text-transform: uppercase; font-size:14px; letter-spacing: 0.05em; font-weight: 400; } .sidebar-right .sidebar-body { font-size:12px; letter-spacing: 0; font-weight: 400; } .sidebar-right .sidebar-body h4 { margin: 0; font-size:14px; text-transform: uppercase; margin-bottom:5px; font-weight: 400; } @media (max-width: 1023px) { .sidebar-right { display:none; } } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; overflow: hidden; transition: padding .4s; } .wrapper-inverse { background-color: #000; } .wrapper.no-scroll { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { /* .wrapper-inner { position: relative; } */ .wrapper.fixed { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; padding-left: 220px; } .wrapper-inner { transition: width .4s; } .wrapper.fixed > .wrapper-inner { width: calc(100% + 220px); } .wrapper.fixed .header { left: 220px; } } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion-body { display: none; } .accordion-expanded .accordion-body { display:block; } /* ------------------------------------------------------------ *\ Accordion Details \* ------------------------------------------------------------ */ .accordion-details { border-bottom: 2px solid #000; margin-bottom: 52px; } .accordion-details .accordion-head { position: relative; padding: 10px 30px 10px 12px; border-top: 2px solid #000; } .accordion-details .accordion-title { font-weight: 400; text-transform: uppercase; } .accordion-details .accordion-head > i { position: absolute; top: 50%; right: 12px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .accordion-details .accordion-body { padding: 10px; } .accordion-details p { letter-spacing: 0; } /* Mobile */ @media (max-width: 767px) { .accordion-details { margin-bottom: 26px; } .accordion-details .accordion-head { padding: 13px 30px 13px 12px; } .accordion-details .accordion-title { font-size: 12px; } .accordion-details p { font-size: 12px; } } /* ------------------------------------------------------------ *\ Accordion Faq \* ------------------------------------------------------------ */ .accordion-faq { margin-bottom:90px; } .accordion-faq h3 { font-weight:400; text-transform: uppercase; text-align:center; border-bottom:3px solid #000; padding-bottom:25px; margin: 0; } .accordion-faq .accordion-head { cursor: pointer; } .accordion-faq .accordion-section { border-bottom:1px solid #000; } .accordion-faq .accordion-head h4 { text-transform: uppercase; padding: 34px 0; position: relative; } .accordion-faq .accordion-head h4:after { content:'+'; position: absolute; right:0; top:auto; } .accordion-faq .accordion-body { font-size:12px; letter-spacing: 0; font-family: 'Roboto', 'Helvetica', sans-serif; } .accordion-faq .accordion-expanded .accordion-head h4:after { content:'-'; } .accordion-faq .accordion-body { display:block; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); height: 0; transition: all .3s; } .accordion-faq .accordion-expanded .accordion-body { padding-bottom:35px; height: auto; position: relative; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article { border-bottom:2px solid #000; padding: 56px 0; } .article:first-child { padding-top:0; } .article:last-child { border-bottom:0; } .article .article-inner:after { } .article .article-aside { width:670px; float:left; } .article .article-image { margin-bottom:40px; } .article .article-image:last-child { margin-bottom:0; } .article .article-image img { display:block; width:100%; } .article .article-caption { font-family: 'Roboto', 'Helvetica', sans-serif; color: rgba(0,0,0, .5); font-size:11px; letter-spacing: 0.03em; } .article .article-body { overflow: hidden; padding:34px 0 0 28px; letter-spacing: 0.1em; } .article .article-head p { text-transform: uppercase; font-size:11px; } .article .article-head:after { content:''; display:block; max-width: 82px; height: 2px; background-color:#000; margin: 22px 0; } .article .article-title { font-size:30px; font-weight:400; letter-spacing: 0.2em; } .article .article-content { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:10px; margin-bottom:20px; letter-spacing: 0; max-width: 213px; } .article .article-tags { color: rgba(0,0,0, .5); text-transform: uppercase; font-weight:700; margin-bottom:25px; letter-spacing: 0.03em; } .article .article-actions { font-family: 'Roboto', 'Helvetica', sans-serif; font-weight:700; } .article .article-actions .btn { font-size:10px; } .article .article-foot { text-align:center; margin: 6px 0; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.05em; font-weight:700; } .article .article-foot .btn { font-size:12px; } .article .slider { margin: 0; } @media (max-width: 1023px) { .article .article-aside { width:50%; } .article .article-body { padding-top:0; } .article .article-content { max-width: 100%; } } @media (max-width: 767px) { .article .article-aside { float:none; width: auto; margin-bottom:20px; } .article .article-body { padding-left:0; } } /* Article Alt */ .article.article-alt { padding: 0 0 0 298px; position: relative; border:0; margin: 30px 0; } .article.article-alt .article-aside { width:298px; float:none; position: absolute; top:0; left:0; height: 100%; } .article.article-alt .article-body { padding: 0; } .article.article-alt .article-aside .quote { position: absolute; width:100%; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0; margin-top:-36px; padding: 0 20px; } .article.article-alt .article-aside .quote blockquote { letter-spacing: 0.07em; } @media (max-width: 767px) { .article.article-alt { padding: 0; } .article.article-alt .article-body { margin-bottom:20px; } .article.article-alt .article-aside { position:static; } .article.article-alt .article-aside .quote { position:static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-top:0; } } /* Article Alt Inverse */ .article.article-alt.article-alt-inverse { padding: 0 298px 0 0; } .article.article-alt.article-alt-inverse .article-aside { left:auto; right:0; } @media (max-width: 767px) { .article.article-alt.article-alt-inverse { padding: 0; } } /* Article Offset Top */ .article.article-offset-top { margin-top:106px; } @media (max-width: 767px) { .article.article-offset-top { margin-top:20px; } } /* Article Simple */ .article.article-simple { padding: 0; border:0; } /* Article Blog */ .article.article-blog { border:0; padding:0; } .article.article-blog .article-content { font-size:12px; line-height:1.3; } /* ------------------------------------------------------------ *\ Article Small \* ------------------------------------------------------------ */ .articles-small { text-align:center; margin-bottom:72px; } .article-small { max-width: 283px; display: inline-block; vertical-align: top; margin: 28px 30px 16px 30px; text-align:center; color: #fff; } .article-small .article-image { margin-bottom:12px; } .article-small .article-title { text-transform: uppercase; font-weight:400; letter-spacing: 0.2em; line-height:1; } .article-small .article-content { font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; margin: 5px 0 10px 0; } .article-small .article-actions .btn { font-size:10px; padding: 4px 14px; } @media (max-width: 767px) { .article-small { margin-left:0; margin-right:0; display:block; max-width: 100%; } } /* ------------------------------------------------------------ *\ Article Primary \* ------------------------------------------------------------ */ .article-primary { margin:28px 0 0 0; padding-bottom:7px; } .article-primary + .article-primary { margin-top:31px; } .article-primary .article-actions { text-align:center; margin: 17px 0 5px 0; } .article-primary .article-actions .btn { font-size:12px; padding: 6px 14px; min-width: 162px; } .article-primary .article-title { text-align:center; text-transform: uppercase; font-weight:400; letter-spacing: 0.1em; font-size:30px; margin-bottom:8px; } .article-primary h4 { text-transform: uppercase; letter-spacing: 0.15em; margin-bottom:15px; } @media (max-width: 767px) { .article-primary { margin-top:0; } .article-primary .article-title { font-size:25px; margin-bottom:23px; } .article-primary h4 { font-size:12px; text-align:center; padding: 0 10px; } .article-primary .article-body { font-size:9px; } .article-primary .article-body br { display:none; } } /* ------------------------------------------------------------ *\ Banner \* ------------------------------------------------------------ */ .banner { overflow: hidden; max-height: 445px; position: relative; margin-top:-1px; } .banner img { width: 100%; } .banner .banner-content { position: absolute; top:0; left:0; height: 100%; width:33.3%; padding-top:100px; } .banner .banner-content h3 { margin-bottom:24px; font-weight:400; line-height:0.9; } .banner .btn-square { width:57px; height: 57px; line-height:52px; font-size:9px; letter-spacing: 0.15em; } .banner .btn-square .text { line-height:10px } /* ------------------------------------------------------------ *\ Bar \* ------------------------------------------------------------ */ .bar { margin-bottom:31px; padding-top:2px; font-size:14px; } .bar:after { } .bar .bar-aside-left { float:left; } .bar .bar-aside-right { float:right; } .bar-aside-alt { font-size: 0; letter-spacing: -0px; } .bar-aside-alt span { display: inline-block; font-size: 12px; letter-spacing: .035em; } .bar-aside-alt a { display: inline-block; margin-left: 22px; font-size: 12px; text-decoration: none; letter-spacing: .035em; } /* ------------------------------------------------------------ *\ Bar Inverse \* ------------------------------------------------------------ */ .bar-inverse { color: #fff; } /* ------------------------------------------------------------ *\ Blog Items \* ------------------------------------------------------------ */ .blog-items { margin-bottom:50px; } .blog-items:after { } .blog-items > ul { margin: 0 -7px; } .blog-items > ul > li { padding: 7px; float:left; width:25%; list-style:none; list-style-position: outside; } .blog-item { display:block; } .blog-item img { display:block; width:100%; } @media (max-width: 767px) { .blog-items > ul > li { width:50%; } } /* ------------------------------------------------------------ *\ Blog Post \* ------------------------------------------------------------ */ .blog-post { text-align:center; margin-bottom:48px; } .blog-post .blog-post-image { margin-bottom:10px; } .blog-post .blog-post-image img { display:block; width:100%; } .blog-post .blog-post-body p { letter-spacing: 0; } .blog-post .blog-post-title { font-size:40px; text-transform: uppercase; font-weight:400; } /* ------------------------------------------------------------ *\ Box \* ------------------------------------------------------------ */ .box { position: absolute; bottom: 0; left: -15px; margin-left: -10px; transition: opacity .4s, visibility .4s, -webkit-transform .4s; transition: transform .4s, opacity .4s, visibility .4s; transition: transform .4s, opacity .4s, visibility .4s, -webkit-transform .4s; } .box.close { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .box-animate-bottom.close { visibility: hidden; opacity: 0; -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .box-animate.hide { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .box-animate-bottom { top: 100%; left: 0; bottom: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .box-animate-bottom.hide { -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0); } .box .btn-box { position: absolute; top: 8px; right: 8px; line-height: 1px; transition: opacity .4s; } .box .btn-box:hover { text-decoration: none; opacity: .8; } /* Tablet Portrait */ @media (max-width: 1023px) { .box-animate-bottom { top: auto; bottom: 0; } } /* ------------------------------------------------------------ *\ Box Small \* ------------------------------------------------------------ */ .box-small { padding: 35px 10px; background-color: #000; } .box-small a { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .box-small a:hover { text-decoration: underline; } /* ------------------------------------------------------------ *\ Box Medium \* ------------------------------------------------------------ */ .box-medium { top: -100px; bottom: auto; left: 0; width: 293px; margin-left: 0; padding: 28px 30px 28px 45px; background-color: #000; color: #fff; } .box-medium p { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; } .box-medium p span { display: block; margin: 8px 0; font-size: 20px; } /* ------------------------------------------------------------ *\ Box XXLarge \* ------------------------------------------------------------ */ .box-xxlarge { left: 0; width: 580px; z-index: 99; padding: 37px 55px 62px; background-color: #000; } .box-xxlarge .btn-box { top: 33px; right: 29px; } /* Tablet Portrait */ @media (max-width: 1023px) { .box-xxlarge { bottom: -277px; } } /* Mobile */ @media (max-width: 767px) { .box-xxlarge { width: 320px; padding: 30px 20px; margin-left: 0; } .box-xxlarge .btn-box { top: 10px; right: 10px; } } /* ------------------------------------------------------------ *\ Box Info \* ------------------------------------------------------------ */ .box-info { min-width: 346px; padding: 22px 0px 28px 28px; border: 1px solid #000; margin: 7px 0 33px -23px; } /* Tablet Portrait */ @media (max-width: 1023px) { .box-info { min-width: 0; width: 100%; padding: 20px 15px; margin-left: 0; } } /* ------------------------------------------------------------ *\ Breadcrumbs \* ------------------------------------------------------------ */ .breadcrumbs { font-size:13px; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; } .breadcrumbs a { text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs-left { float:left; padding-left:15px; } /* Tablet Portrait */ @media (max-width: 1023px) { .breadcrumbs { font-size: 12px; } } /* Mobile */ @media (max-width: 767px) { .breadcrumbs { text-align: center; } } /* ------------------------------------------------------------ *\ Breadcrumbs Center \* ------------------------------------------------------------ */ .breadcrumbs-center { text-align:center; text-transform: uppercase; font-size:12px; margin-bottom:22px; } .breadcrumbs-center a { text-decoration: none; } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; border-radius: 0; border:2px solid #000; background: none; padding: 8px 14px; font-size:13px; text-transform: uppercase; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: background .4s, color .4s; font-weight:700; } .btn:hover { background-color: #000; color: #fff; } /*Btn Square*/ .btn-square { width:76px; height: 76px; line-height: 70px; border:3px solid #000; text-align:center; font-size:13px; text-transform: uppercase; text-align:center; padding: 0 7px; display: inline-block; background:#fff; font-weight:700; transition: all .3s; } .btn.btn-inverse { color: #fff; background:#000; } .btn.btn-inverse:hover { background:#fff; color: #000; } .btn-square i { margin-bottom: 5px; } .btn-square .text { line-height: 15px; } .btn-square:hover { background:#000; color: #fff; } .btn-square.btn-square-transparent { background:transparent; } .btn-square.btn-square-transparent:hover { background:#000; } /* Tablet Portrait */ @media (max-width: 1023px) { .btn-square { width: 56px; height: 56px; border-width: 2px; font-size: 10px; line-height: 52px; } .btn-square span { font-size: 11px; } } /* Btn Square Large */ .btn-square-large { width: 123px; height: 123px; border: 2px solid #fff; background: none; line-height : 119px; } .btn-square-large .text { font-size: 14px; letter-spacing: .15em; } .btn-square-large:hover { background-color: #fff; color: #000; } /* Btn Black */ .btn-black { height: 49px; padding: 0 15px; border: none; background-color: #000; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 15px; line-height: 49px; color: #fff; letter-spacing: .1em; transition: opacity .4s; } .btn-black:hover { text-decoration: underline; } /* .btn-dark */ .btn-dark { background:#000; color: #fff; font-size:12px; padding: 6px 14px; } /* Btn Grey */ .btn-grey { height: 49px; padding: 0 15px; border: none; background-color: #dad9da; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 15px; line-height: 49px; color: #000; letter-spacing: .1em; font-weight: 700; transition: all .4s; } .btn-grey:hover { background: #000; color: #fff; opacity: 1; } /* Mobile */ @media (max-width: 767px) { .btn-grey { height: 41px; font-size: 12px; line-height: 41px; } } /* Btn White */ .btn-white { height: 30px; padding: 0 10px; border: none; background-color: #fff; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 30px; color: #000; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; transition: opacity .4s; } .btn-white:hover { background-color: #fff; color: #000; opacity: .8; } /* Btn Transparent */ .btn-transparent, .btn-transparent-black { height: 30px; background: none; border: none; padding: 0 10px; line-height: 30px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 30px; color: #fff; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; transition: opacity .4s; } .btn-transparent-black { font-size: 15px; color: #000; } /* Btn Small */ .btn-small { display: inline-block; border:1px solid #e1e1e1; font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; padding: 0 10px; min-width: 80px; line-height:22px; text-decoration: none; position: relative; } .btn-small i { position: absolute; top:50%; right:10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Btn Link */ .btn-link { font-size: 12px; line-height: 1; letter-spacing: .15em; font-weight: 700; text-transform: uppercase;text-decoration: underline; margin: 5%; } .btn-link:hover { text-decoration: none; } /* Btn Link Inverse */ .btn-link-inverse { color: #fff; } /* Btn Plus */ .btn-plus { position: absolute; z-index: 20; display: block; width: 79px; height: 79px; border: 4px solid transparent; transition: border .4s; } .btn-plus:before { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 2px; background-color: #fff; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn-plus:after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 28px; background-color: #fff; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn-plus:hover:before { height: 4px; } .btn-plus:hover:after { width: 4px; } .btn-plus:hover { border-color: #fff; } /* Btn Filter */ .btn-filter { position: relative; transition: background .4s; } .btn-filter:after { content: ''; position: absolute; top: 50%; right: 9px; width: 10px; height: 2px; background-color: #000; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .btn-filter:before { content: ''; position: absolute; top: 50%; right: 13px; width: 2px; height: 10px; background-color: #000; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .btn-filter.active { border-color: #000; background-color: #dddcdd; } .btn-filter.active:before { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } /* Button Block */ .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; } /* ------------------------------------------------------------ *\ Btn Go Top \* ------------------------------------------------------------ */ .btn-go-top { float:right; margin-right:30px; } .btn-go-top-alt { float: none; width: 174px; margin: 40px auto 0; text-align: center; } .btn-go-top i, .btn-go-top:hover i { display: block; margin: 0 auto 3px; } .btn-go-top-alt i { margin-bottom: 15px; } .btn-go-top .text { font-size: 7px; } .btn-go-top-alt .text { font-size: 15px; text-transform: uppercase; } /* Tablet Portrait */ @media (max-width: 1023px) { .btn-go-top span { font-size: 8px; } } /* Mobile */ @media (max-width: 767px) { .btn-go-top { float: none; display: block; width: 80px; border: none; padding: 0; margin: 0 auto; text-align: center; text-decoration: none; } .btn-go-top-inverse { background: none; color: #a6aaaa; } .btn-go-top-alt { margin-bottom: 20px; } .btn-go-top:hover { background: none; } .btn-go-top span { display: block; margin-top: 5px; font-size: 8px; letter-spacing: 0; } .btn-go-top:hover span { color: #000; } } /* ------------------------------------------------------------ *\ Btn Zoom \* ------------------------------------------------------------ */ .btn-zoom { position: absolute; top: 20px; right: 0; z-index: 20; padding: 30px 5px 5px; font-size: 12px; text-align: center; letter-spacing: 0; text-decoration: none; } .btn-zoom:after, .btn-zoom:before { content: ''; position: absolute; top: 12px; left: 50%; width: 26px; height: 2px; background-color: #000; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .btn-zoom:before { top: 0; width: 2px; height: 26px; } /* Mobile */ @media (max-width: 767px) { .btn-zoom { padding-top: 20px; } .btn-zoom:after { top: 6px; width: 14px; height: 2px; } .btn-zoom:before { width: 2px; height: 14px; } } /* ------------------------------------------------------------ *\ Btn Menu \* ------------------------------------------------------------ */ .btn-menu { position: absolute; top: 32px; left: 32px; display: none; width: 20px; height: 20px; } .btn-menu span { position: absolute; display: block; height: 3px; width: 100%; background: #141414; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, -webkit-transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s, -webkit-transform .2s 0s; } .btn-menu-inverse span { background-color: #fff; } .btn-menu span:nth-child(1) { top: 0; } .btn-menu span:nth-child(2) { top: 8px; } .btn-menu span:nth-child(3) { top: 16px; } /* Tablet Portrait */ @media (max-width: 1023px) { .btn-menu { display: inline-block; } } /* Mobile */ @media (max-width: 767px) { .btn-menu { top: 22px; left: 20px; width: 23px; height: 21px; } .btn-menu span:nth-child(2) { top: 9px; } .btn-menu span:nth-child(3) { top: 18px; } } .btn.btn-xs { font-size:13px; padding: 8px 0; line-height:1.1; height: auto; } /* ------------------------------------------------------------ *\ Btn White Solid \* ------------------------------------------------------------ */ .btn.btn-white-solid { color: #000; background:#fff; border-color: #fff; border-width: 1px; } .btn.btn-white-solid:hover { background:transparent; color: #fff; } /* ------------------------------------------------------------ *\ Btn White Transparent \* ------------------------------------------------------------ */ .btn.btn-white-transparent { color: #fff; border-color: #fff; border-width: 1px; } .btn.btn-white-transparent:hover { background:#fff; color: #000; } /* ------------------------------------------------------------ *\ Callout \* ------------------------------------------------------------ */ .callout { padding: 40px 0; background-color: #000; color: #fff; text-align: center; font-size: 0; letter-spacing: 0; } .callout-content { display: inline-block; margin-right: 15px; vertical-align: top; text-align: left; } .callout-content h4 { margin-bottom: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .2em; } .callout-content h4:last-child { margin-bottom: 0; } .callout-content h2 { margin-bottom: 12px; font-size: 40px; letter-spacing: .15em; } .callout figure { display: inline-block; vertical-align: top; } .callout figure a { display: block; text-decoration: none; transition: opacity .4s; } .callout figure a:hover { opacity: .8; } .callout figure + figure { margin-left: 16px; } .callout figcaption { margin-top: 10px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 15px; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; } /* Mobile */ @media (max-width: 767px) { .callout { margin-bottom: 40px; } .callout-content { display: block; width: 100%; margin-bottom: 20px; text-align: center; } .callout-content h4 { font-size: 12px; } .callout-content h2 { font-size: 25px; } } /* ------------------------------------------------------------ *\ Callout Primary \* ------------------------------------------------------------ */ .callout.callout-primary { margin: 0 43px 97px 43px; padding: 50px 0; } .callout.callout-primary .callout-title { font-size:40px; letter-spacing: 0.2em; margin-bottom:27px; } .callout.callout-primary h3 { font-size:14px; text-transform: uppercase; font-weight:400; letter-spacing: 0.2em; margin-bottom:38px; } .callout.callout-primary .callout-actions { padding-bottom:12px; } .callout.callout-primary .callout-actions .btn { min-width: 258px; font-size:12px; padding: 5px; margin: 0 13px; } @media (max-width: 767px) { .callout.callout-primary { margin: 0 -10px; padding: 30px 0; } .callout.callout-primary .callout-actions { padding-bottom:0; } .callout.callout-primary h3 { font-size:10px; } .callout.callout-primary .callout-title { font-size:20px; } .callout.callout-primary .callout-actions .btn { margin-bottom:10px; } } /* ------------------------------------------------------------ *\ Cart \* ------------------------------------------------------------ */ .cart { visibility: hidden; position: absolute; top: 100%; right: 0; z-index: 99; width: 340px; padding: 18px 16px 35px; border: 1px solid #000; margin-top: 30px; background-color: #fff; opacity: 0; transition: visibility .4s, opacity .4s, margin .4s; } .cart.open { visibility: visible; opacity: 1; margin-top: 10px; } .cart-head { position: relative; padding: 0 40px 8px 0; border-bottom: 5px solid #000; } .cart-head .edit, .cart-close { position: absolute; top: 50%; right: 0; margin-top: -10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .cart-head .edit { margin-top: -4px; font-size: 11px; letter-spacing: .06em; } .cart .cart-title { font-size: 11px; letter-spacing: .06em; } .cart .custom-scroll { overflow: hidden; max-height: 232px; } .cart-foot { padding-top: 16px; border-top: 1px solid #000; margin-top: 28px; font-size: 0; } .cart-total { overflow: hidden; padding: 0 20px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.3; text-align: right; } .cart-total span { display: inline-block; } .cart-total span + span { margin-left: 22px; } .cart-foot .btn { min-width: 144px; height: 30px; padding: 6px 14px; font-size: 12px; } .cart-foot .btn + .btn { margin-left: 16px; } .cart-foot .btn-black { padding: 0 14px; line-height: 30px; } .cart-body-inner { padding: 60px 0 77px; text-align: center; } .cart-body-inner h6 { position: relative; display: inline-block; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; letter-spacing: 0.06em; font-weight: 700; } .cart-body-inner h6:after { content: ''; position: absolute; top: 100%; left: -5px; right: -5px; height: 5px; background-color: #000; } .cart .custom-scroll .mCSB_scrollTools { border: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .cart { right: -20px; } } /* Mobile */ @media (max-width: 767px) { .cart { top: 0; right: 0; max-width: 320px; padding: 18px 0 35px; border-right: none; } .cart.open { margin-top: 0; } .cart-body, .cart-head { margin: 0 7px 4px; } .cart-foot { padding: 15px 7px 0; } } /* ------------------------------------------------------------ *\ Cart Products \* ------------------------------------------------------------ */ .cart-products { padding-top: 30px; } .cart-product { overflow: hidden; position: relative; margin-bottom: 19px; } .cart-product > p { clear: both; padding-top: 10px; text-align: center; } .cart-product a { overflow: hidden; display: block; } .cart-product-image { float: left; margin-right: 11px; } .cart-product-description { overflow: hidden; } .cart-product h6 { margin-bottom: 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.36; font-weight: 700; letter-spacing: .15em; } .cart-product p { margin-bottom: 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.36; text-transform: none; } .cart-product ul { margin-top: 15px; list-style: none outside none; } .cart-product .red { color: #e8242d; } .cart-product-info { position: absolute; top: 0; right: 10px; text-align: right; } .cart-product .form-row { font-size: 11px; letter-spacing: 0; } .cart-product .form-label { display: inline-block; margin-right: 12px; font-size: 10px; vertical-align: middle; text-transform: uppercase; } .cart-product .form-controls { display: inline-block; width: 31px; margin-right: 8px; vertical-align: middle; } .cart-product .field { height: 20px; padding: 0; font-size: 10px; text-align: center; } .cart-product .form-row > a { display: inline-block; font-size: 10px; text-transform: uppercase; vertical-align: middle; } .visible-xs-block .form-label { margin-bottom: 0px; margin-right: 0px; } .visible-xs-block .form-label .form-controls { margin-bottom: 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.36; text-transform: none; } /* Mobile */ @media (max-width: 767px) { .cart-product > p { clear: none; overflow: hidden; padding-top: 5px; text-align: left; } .cart-product-remove { position: absolute; bottom: 0; left: 0; font-size: 10px; line-height: 1; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; } } /* ------------------------------------------------------------ *\ Cart Product Large \* ------------------------------------------------------------ */ .cart-product-large { overflow: visible; position: relative; padding: 0; margin: 0; font-size: 0; letter-spacing: 0; white-space: nowrap; } .cart-product-large .cart-product-image { float: none; display: inline-block; width: 121px; background-color: #f0f0f0; vertical-align: top; } .cart-product-large .cart-product-description { display: inline-block; width: 142px; padding-top: 24px; vertical-align: top; white-space: normal; } .cart-product-large .error-message { overflow: hidden; position: absolute; bottom: 0; left: 132px; white-space: nowrap; text-overflow: ellipsis; } /* Tablet Portrait */ @media (max-width: 1023px) { .cart-product-large .cart-product-image { width: 81px; } .cart-product-large .cart-product-description { width: 120px; padding-top: 0; } .cart-product-large .error-message { left: 92px; } } /* Mobile */ @media (max-width: 767px) { .cart-product-large .cart-product-description { width: calc(100% - 91px); padding-right: 60px; } .cart-product-large ul { margin: 8px 0; } .cart-product-large .cart-product-info { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .cart-product-large .cart-product-info p { font-size: 10px; line-height: 1; } .cart-product-large .cart-product-info .old { display: block; color: #808080; text-decoration: line-through; } .cart-product-large .error-message { max-width: 100%; top: 100%; bottom: auto; white-space: normal; } } /* ------------------------------------------------------------ *\ Cart Product Checkout \* ------------------------------------------------------------ */ .cart-product-checkout { padding-right: 0; letter-spacing: 0; } .cart-product-checkout ul { margin: 0 0 15px; } .cart-product-checkout .cart-product-description h6 { margin-bottom: 0; } .cart-product-checkout .price { font-size: 13px; } /* Mobile */ @media (max-width: 767px) { .cart-product-checkout { padding-bottom: 15px; } .cart-product-checkout .cart-product-image { width: 80px; } .cart-product-checkout .cart-product-image img { width: 100%; } .cart-product-checkout ul { margin-top: 10px; } .cart-product-checkout .cart-product-info { top: 30%; } .cart-product-checkout .cart-product-info p { font-size: 10px; line-height: 1; } .cart-product-checkout .cart-product-info .old { display: block; color: #808080; text-decoration: line-through; } } /* ------------------------------------------------------------ *\ Cart Product Small \* ------------------------------------------------------------ */ .cart-product-small { margin-bottom: 0; letter-spacing: 0; } .cart-product-small .cart-product-image { width: 61px; } .cart-product-small .cart-product-image img { width: 100%; height: auto; } /* Mobile */ @media (max-width: 767px) { .cart-product-small .cart-product-image { width: 80px; } .cart-product-small .cart-product-info { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .cart-product-small .cart-product-info p { font-size: 10px; line-height: 1; } .cart-product-small .cart-product-info .old { display: block; color: #808080; text-decoration: line-through; } .cart-product-small .cart-product-description ul li:last-child { margin-top: 10px; } } .categorys {} /* ------------------------------------------------------------ *\ Collection Items \* ------------------------------------------------------------ */ .collection-items { width: 100%; margin: 0 0 15px 0; font-size: 0; letter-spacing: 0; display: inline-block; }/*Ticket #195*/ .collection-items-inverse { color: #fff; } .collection-item { display: inline-block; width: calc(50% - 36px); margin-right: 36px; vertical-align: top; text-align: center; }/*Ticket #195*/ .collection-item .quote { padding-top: 4px; margin-bottom: 50px; } .collection-item-image { margin-bottom: 13px; } .collection-item-image a { display: block; } .collection-item .collection-item-price { margin-bottom: 25px; } .collection-item img { width: 100%; height: auto; } .collection-item p { margin-bottom: 7px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; } .collection-item h4 { margin-bottom: 4px; font-size: 15px; font-weight: 400; letter-spacing: .15em; } .collection-item .collection-item-content h3 { margin: -5px 0 4px; font-size: 29px; line-height: 1; letter-spacing: .2em; } .collection-item .collection-item-content h3 + p { max-width: 315px; margin: 0 auto 8px; } /* Small Desktop */ @media (max-width: 1044px) { .collection-items { margin-right: -3%; } .collection-item { width: 47%; margin-right: 3%; } } /* Mobile */ @media (max-width: 767px) { .collection-items { margin: 0; } .collection-item { display: block; width: 100%; margin: 0; } .collection-item .quote { position: relative; padding-bottom: 15px; margin-bottom: 31px; } .collection-item .quote blockquote { position: static; } .collection-item-image { margin-bottom: 9px; } .collection-item h4, .collection-item p { margin-bottom: 2px; font-size: 13px; } .collection-item .collection-item-content h3 { font-size: 25px; } .collection-item .collection-item-price { margin-bottom: 9px; } .collection-item .btn-link { display: block; height: 27px; border: 2px solid #000; margin-bottom: 41px; font-size: 13px; line-height: 23px; letter-spacing: .15em; text-decoration: none; } } /* ------------------------------------------------------------ *\ Cookie \* ------------------------------------------------------------ */ .cookie { overflow: hidden; background:#e1e1e1; text-transform: uppercase; padding: 5px 0; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .cookie.cookie-hide { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .cookie .shell { position: relative; } .cookie p { margin: 0; } .cookie-close { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Tablet Portrait */ @media (max-width: 1023px) { .cookie-close { right: 10px; } } /* Mobile */ @media (max-width: 767px) { .cookie { font-size: 8px; } } /* ------------------------------------------------------------ *\ Cookie Inverse \* ------------------------------------------------------------ */ .cookie-inverse { background-color: #1e1e1e; color: #fff; } /* ------------------------------------------------------------ *\ Custom Scroll \* ------------------------------------------------------------ */ .custom-scroll { overflow: hidden; } .custom-scroll .mCSB_inside > .mCSB_container { margin-right: 11px; } .custom-scroll .mCSB_scrollTools { width: 11px; border-left: 1px solid #eaeaea; } .custom-scroll .mCSB_scrollTools .mCSB_draggerContainer { top: 3px; bottom: 3px; } .custom-scroll .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; background-color: #ccc; } .custom-scroll .mCSB_scrollTools .mCSB_draggerRail { display: none; } /* ------------------------------------------------------------ *\ Designers \* ------------------------------------------------------------ */ .designers ul { list-style: none outside none; } .designers-head { padding: 8px 10px 12px; margin-bottom: 38px; background-color: #000; color: #fff; font-size: 0; letter-spacing: 0; text-align: center; } .designers-head ul { display: inline-block; max-width: 865px; margin-right: -29px; list-style: none outside none; } .designers-head li { display: inline-block; margin-right: 29px; font-size: 20px; line-height: 1.6; vertical-align: top; } .designers-head a { text-decoration: none; } .designers-head a:hover, .designers-head .current a { text-decoration: underline; } .designers-body { padding: 0 30px; font-size: 0; letter-spacing: 0; text-align: left; } .designers-body > ul { display: inline-block; width: 33.33%; vertical-align: top; } .designers-body > ul > li { padding-right: 23px; margin-bottom: 17px; } .designers-body h3 { margin-bottom: 9px; font-size: 30px; letter-spacing: .075em; font-weight: 400; text-transform: uppercase; } .designers-body a { font-size: 11px; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; } .designers-body a:hover { text-decoration: underline; } /* Tablet Portrait */ @media (max-width: 1023px) { .designers-body { padding: 0; } .designers-body > ul > li { padding-right: 0; } .designers-body h3 { font-size: 25px; } } /* Mobile */ @media (max-width: 767px) { .designers-head ul { margin-right: -10px; } .designers-head li { margin-right: 10px; } .designers-body > ul { display: block; width: auto; text-align: center; } .designers-body > ul ul li { margin-bottom: 10px; } } /* ------------------------------------------------------------ *\ Dropdown \* ------------------------------------------------------------ */ .dropdown { border-top:2px solid #000; border-bottom:2px solid #000; padding: 20px 0 45px 0; position: absolute; left:0; z-index: 9999; width:100%; background:#fff; opacity: 0; visibility: hidden; transition: all .3s; } .dropdown:before { content:''; width:100%; background:#fff; left:-100%; top:-2px; bottom:-2px; border-top:2px solid #000; border-bottom:2px solid #000; position: absolute; } .dropdown:after { content:''; width:100%; background:#fff; right:-100%; top:-2px; bottom:-2px; border-top:2px solid #000; border-bottom:2px solid #000; position: absolute; } .dropdown { text-align:center; } .dropdown .dropdown-inner { display: inline-block; vertical-align: top; } .dropdown .dropdown-inner .dropdown-cols { width: auto; } .dropdown .dropdown-inner .dropdown-col + .dropdown-col { padding-left:90px; } .dropdown .dropdown-cols { display: table; width:100%; table-layout: fixed; padding: 0 15px; text-align:left; } .dropdown .dropdown-col { display: table-cell; vertical-align: top; } .dropdown .dropdown-col.dropdown-col-middle { vertical-align: middle; } .dropdown .dropdown-col .dropdown-cols { padding: 0; } .dropdown .dropdown-nav { font-family: 'Roboto', 'Helvetica', sans-serif; text-transform: none; line-height:2; font-size:12px; } .dropdown .dropdown-nav h5 { margin-bottom:2px; letter-spacing: 0.1em; text-transform: uppercase; } .dropdown .dropdown-nav a img { display:block; width:100%; } .dropdown .dropdown-nav a:hover { text-decoration: underline; } /* Tablet Portrait */ @media (max-width: 1023px) { .dropdown { position: static; visibility: visible; opacity: 1; padding: 10px 0; border: none; display: none; transition: none; } .dropdown .dropdown-cols, .dropdown .dropdown-inner .dropdown-cols { display: block; width: 100%; padding-left: 10px; padding-right: 0; } .dropdown .dropdown-col { display: block; } .dropdown .dropdown-nav h5 { position: relative; font-size: 14px; line-height: 1.64; font-weight: 400; text-transform: capitalize; } .dropdown .dropdown-nav h5 + .dropdown-cols, .dropdown .dropdown-nav h5 + ul { display: none; } .dropdown .dropdown-nav h5:after { content: ''; position: absolute; top: 50%; right: 12px; width: 6px; height: 10px; background: url(images/arrow-right.png) 0 0 no-repeat; background-size: 100% 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .dropdown .dropdown-nav h5.active:after { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .dropdown .dropdown-nav ul { padding: 0 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.64; font-weight: 400; text-transform: capitalize; letter-spacing: 0; } .dropdown .dropdown-nav a img { margin: 10px 0; } .dropdown .dropdown-nav li { margin-bottom: 5px; } .dropdown .dropdown-inner .dropdown-col + .dropdown-col { padding-left: 0; } .dropdown .dropdown-inner { display: block; } } /* ------------------------------------------------------------ *\ Flipster Holder \* ------------------------------------------------------------ */ .flipster-holder { width: 604px; height: 404px; margin: 0 auto; position: relative; } .flipster { position: relative; width: 100%; height: 100%; -webkit-perspective: 1000px; perspective: 1000px; } .flipster-holder .flip-card { position: absolute; top: 0; left: 0; transition: z-index 0s .15s, opacity .3s, -webkit-transform .3s; transition: transform .3s, z-index 0s .15s, opacity .3s; transition: transform .3s, z-index 0s .15s, opacity .3s, -webkit-transform .3s; } .flipster-holder .flip-slide-1 { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; } .flipster-holder .flip-slide-2 { -webkit-transform: translate3d(60px,-40px,0); transform: translate3d(60px,-40px,0); z-index: 9; } .flipster-holder .flip-slide-3 { -webkit-transform: translate3d(120px,-80px,0); transform: translate3d(120px,-80px,0); z-index: 8; } .flipster-holder .flip-slide-4 { -webkit-transform: translate3d(180px,-120px,0); transform: translate3d(180px,-120px,0); z-index: 7; } .flipster-holder .flip-slide-5 { -webkit-transform: translate3d(240px,-160px,0); transform: translate3d(240px,-160px,0); z-index: 6; } .flipster-holder .flip-slide-6 { -webkit-transform: translate3d(300px,-200px,0); transform: translate3d(300px,-200px,0); z-index: 5; } .flipster-holder .flip-slide-7 { -webkit-transform: translate3d(360px,-240px,0); transform: translate3d(360px,-240px,0); z-index: 4; } .flipster-holder .flip-slide-8 { -webkit-transform: translate3d(420px,-280px,0); transform: translate3d(420px,-280px,0); z-index: 3; } .flipster-holder .flip-slide-9 { -webkit-transform: translate3d(480px,-320px,0); transform: translate3d(480px,-320px,0); z-index: 2; } .flipster-holder .flip-slide-10 { -webkit-transform: translate3d(540px,-360px,0); transform: translate3d(540px,-360px,0); z-index: 1; } .flipster-holder .flip-incoming { -webkit-transform: scale(.75) rotateY(-15deg) translate3d(740px,0px,0px); transform: scale(.75) rotateY(-15deg) translate3d(740px,0px,0px); z-index: 15; } .flipster-holder .flip-outgoing { -webkit-transform: scale(.75) rotateY(15deg) translate3d(-640px,0px,-350px); transform: scale(.75) rotateY(15deg) translate3d(-640px,0px,-350px); z-index: 1; } .flipster-actions { margin-top:-80px; } .flipster-actions a { width:58px; height: 58px; text-align:center; display: inline-block; background: #000; line-height: 58px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 22; } .flipster-actions a.flip-prev { left:-76px; } .flipster-actions a.flip-next { right:-76px; } .flipster-actions a:hover { background: #fff; } @media (max-width: 1023px) { .flipster-holder .fg-card { width: 100%; } .flipster-holder .fg-card img { width: 100%; } } @media (max-width: 767px) { .flipster-holder { width: 100%; height: auto; padding-bottom: 66%; } .flipster-holder .flip-slide-1, .flipster-holder .flip-slide-2, .flipster-holder .flip-slide-3, .flipster-holder .flip-slide-4, .flipster-holder .flip-slide-5, .flipster-holder .flip-slide-6, .flipster-holder .flip-slide-7, .flipster-holder .flip-slide-8, .flipster-holder .flip-slide-9, .flipster-holder .flip-slide-10, .flipster-holder .flip-incoming, .flipster-holder .flip-outgoing { opacity: 0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); transition: opacity .5; } .flipster-holder .flip-card { right: 0; } .flipster-holder .flip-card img { width: 100%; max-width: none; height: auto; display: block; } .flipster-holder .flip-slide-1 { opacity: 1; } .flipster-actions a.flip-prev { position: absolute; top: 50%; width: 9px; height: 17px; border: none; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; background: url(images/ico-arrow-left@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .flipster-actions a.flip-next { position: absolute; top: 50%; width: 9px; height: 17px; border: none; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; background: url(images/ico-arrow-right@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .flipster-actions a.flip-prev i, .flipster-actions a.flip-next i { display: none; } } /* ------------------------------------------------------------ *\ 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; } .form-label { text-transform: uppercase; font-family: 'Roboto', 'Helvetica', sans-serif; font-size:11px; font-weight:700; margin-bottom:5px; display:block; } @media (max-width: 767px) { .form-label { font-size:8px; } } /* Form Cols */ .form-cols { display: table; width: 100%; } .form-cols-alt { display: block; } .form-cols-alt:after { content: ''; display: table; clear: both; font-size: 0; } .form-col { display: table-cell; width: 577px; padding-bottom: 10px; } .form-col-alt { display: block; float: left; } .form-col + .form-col { border-left: 1px solid #eaeaea; } .form-col-small { width: 300px; } .form-col-1of2 { width: 278px; } .form-col-1of2 + .form-col-1of2 { margin-left: 20px; } .form-col-1of2-fluid { width: 47%; } .form-col-1of2-fluid + .form-col-1of2-fluid { margin-left: 6%; } /* Tablet Portrait */ @media (max-width: 1023px) { .form-col-1of2 { width: 48%; } .form-col-1of2 + .form-col-1of2 { margin-left: 4%; } } /* Mobile */ @media (max-width: 767px) { .form-cols { display: block; } .form-col { display: block; width: 100%; } .form-col-alt { float: none; display: block; width: 100%; } .form-col-alt + .form-col-alt { margin-left: 0; } } .form-row:after { } /* Form Row Inline */ .form-row-inline { display: inline-block; vertical-align: top; } /* Field */ .field { display: block; width: 100%; padding: 11px 10px; border: 1px solid #000; border-radius: 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.07; letter-spacing: .06em; } .field.error { border-color: #ff0000; } .error .field, .error .select2-container--default .select2-selection--single { border:2px solid #ff0000; } .textarea { display: block; width: 100%; padding: 0 10px; border: 1px solid #000; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.07; letter-spacing: .06em; } /* Mobile */ @media (max-width: 767px) { .field { height: 32px; } } /* Field Alt */ .field-alt { display: block; width: 100%; padding: 0 8px; border: none; border-bottom: 1px solid #000; border-radius: 0; font-size: 13px; } /* Field Large */ .field-large { height: 40px; padding: 0 9px; font-size: 11px; } .field-large::-webkit-input-placeholder { text-transform: uppercase; } .field-large::-moz-placeholder { text-transform: uppercase; } .field-large:-ms-input-placeholder { text-transform: uppercase; } .field-large::placeholder { text-transform: uppercase; } /* Select Holder */ .select-holder { position: relative; } .select-holder .select { overflow: hidden; display: block; width: 100%; height: 39px; padding: 0 20px 0 10px; border: 1px solid #000; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.07; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-holder.error .select { border: 2px solid #ff0000; } .select-holder .ico-holder { position: absolute; top: 50%; right: 6px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .select-holder .ico-holder-alt { right: 17px; } .select-holder .select::-ms-expand { display: none; } /* Mobile */ @media (max-width: 767px) { .select-holder .select { height: 32px; letter-spacing: 0; } .select-holder.error .select { border: 1px solid #000; } } /* Select Uppercase */ .select-holder .select-uppercase { height: 40px; font-size: 11px; text-transform: uppercase; } /* Textarea */ .textarea { height: 174px; padding: 10px; resize: none; } .textarea-small { height: 100px; font-size: 11px; } .textarea-small::-webkit-input-placeholder { text-transform: uppercase; } .textarea-small::-moz-placeholder { text-transform: uppercase; } .textarea-small:-ms-input-placeholder { text-transform: uppercase; } .textarea-small::placeholder { text-transform: uppercase; } /* Radio Color */ .radio-color { position: relative; } .radio-color input { visibility: hidden; position: absolute; top: 0; left: 0; opacity: 0; } .radio-color .radio-box { position: relative; display:block; width: 38px; text-align:center; display: inline-block; vertical-align: middle; } .radio-color .radio-box .text { position: absolute; top: 100%; left: 50%; display:block; margin-top: 5px; font-size: 11px; text-transform: uppercase; visibility: hidden; opacity: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .radio-color .radio-box img { border:1px solid #000; width: 38px; height: 37px; padding: 2px; border-color: transparent; } .radio-color input:checked + .radio-box img { border-color: #000; } .radio-color input:checked + .radio-box .text { opacity: 1; visibility: visible; } /* Radio White */ .radio-white { position: relative; } .radio-white input { visibility: hidden; position: absolute; top: 0; left: 0; opacity: 0; } .radio-white .form-label { position: relative; display: inline-block; padding-left: 20px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.36; color: #fff; text-transform: uppercase; font-weight: 400; letter-spacing: .1em; } .radio-white .form-label:before { content: ''; position: absolute; top: 1px; left: 0; width: 11px; height: 11px; border: 1px solid #fff; transition: background .4s; } .radio-white input:checked + .form-label:before { background-color: #fff; } /* Checkbox */ .checkbox { position: relative; margin-bottom: 8px; } .checkbox input { visibility: hidden; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; } .checkbox label { position: relative; display: inline-block; padding: 0 16px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.4; color: #000; } .checkbox .form-label-small { font-size: 11px; } .checkbox label:before { content: ''; position: absolute; top: 4px; left: 0; width: 9px; height: 9px; border: 1px solid #bcbcbc; background-color: #fff; transition: background .3s; } .checkbox input:checked ~ label:before { background-color: #bcbcbc; } /* Checkbox Black */ .checkbox-black label { padding-left: 21px; text-transform: uppercase; letter-spacing: .1em; } .checkbox-black label:before { top: 2px; width: 11px; height: 11px; border-color: #000; } .checkbox-black input:checked ~ label:before { background-color: #000; } /* Mobile */ @media (max-width: 767px) { .checkbox-black label { font-size: 11px; } } /* Erorr Message */ .error-message { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.15; color: #e8242d; font-weight: 400; } /* Custom select */ .select-wrapper { padding-right:45px; } .select2-container { display:block; } .select2-container--default .select2-selection--single { border-radius: 0; border-color: #000; } .select2-container--default .select2-selection--single .select2-selection__arrow { width: 30px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border:0 !important; width: 12px; height: 6px; margin-left: -6px; background: url(images/ico-select.png) no-repeat 0 0; } .select-holder .select2-container--default .select2-selection--single .select2-selection__rendered { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; color: #000; letter-spacing: 0; } .select-holder .select2-container .select2-selection--single { height: auto; } .select-holder .select2-container--default .select2-selection--single { border-color: #000; } .select-holder .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:37px; height: 37px; } .select-holder .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } .select2-dropdown { border-radius: 0; } .select2-dropdown-fluid { min-width: 160px; letter-spacing: 0; } .select2-results__option { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #000; } @media (max-width: 767px) { .select-wrapper { padding: 0; } .select-holder .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 11px; } } /* ------------------------------------------------------------ *\ Select White Transparent \* ------------------------------------------------------------ */ .select-white-transparent .select2-container .select2-selection--single { line-height:30px; height: 30px; } .select-white-transparent .select2-container--default .select2-selection--single { background:transparent; border-color: #fff; } .select-white-transparent .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; font-size:12px; text-transform: capitalize; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.03em; } .select-white-transparent .select2-container--default .select2-selection--single .select2-selection__arrow b { background-image:url(images/ico-select-white.png); } /* ------------------------------------------------------------ *\ Select Primary \* ------------------------------------------------------------ */ .select-primary .select2-container { font-size:13px; letter-spacing: .06em; font-family: 'Roboto', 'Helvetica', sans-serif; } .select-primary .select2-container .select2-selection--single { height: auto; } .select-primary .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:inherit; padding: 11px 10px 11px 10px; text-transform: uppercase; } .select-primary .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } /* ------------------------------------------------------------ *\ Select Small \* ------------------------------------------------------------ */ .select-small { width: 80px; } .select-small .select2-container--default .select2-selection--single { border-color: #e1e1e1; } .select-small .select2-container--default .select2-selection--single .select2-selection__rendered { height: 26px; padding: 0 25px 0 10px; font-size: 12px; line-height: 28px; color: #000; } /* ------------------------------------------------------------ *\ Form Contacts \* ------------------------------------------------------------ */ .form-contacts { margin: 40px 0; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.06em; } .form-contacts .form-row { margin-bottom:25px; } .form-contacts .form-actions { text-align:center; } .form-contacts .form-actions .btn { min-width: 290px; } .form-contacts .form-body { padding-bottom:30px; } .form-contacts p { font-size:13px; } .form-contacts .success-message { text-align:center; font-size:13px; font-weight:700; } /* ------------------------------------------------------------ *\ Form Prodcut \* ------------------------------------------------------------ */ .form-product { margin-bottom: 24px; font-size: 0; letter-spacing: 0; text-align: left; } .form-product .form-body { margin-bottom: 28px; } .form-product .form-row-inline { position: relative; width: 52px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.15; } .form-product .form-row-inline + .form-row-inline { width: 128px; margin-left: 9px; } .form-product .form-body .form-row-inline:last-child { width: 100px; padding-bottom: 12px; margin-left: 0; vertical-align: bottom; text-align: right; } .form-product .form-label { display: inline-block; font-family: 'Roboto', 'Helvetica', sans-serif; margin-bottom: 3px; font-size: 11px; line-height: 1.36; letter-spacing: .1em; } .form-product .form-row-inline a { letter-spacing: .06em; } .form-product .form-actions { text-align: center; } .form-product .form-actions .btn { margin-bottom: 30px; } .form-product .form-actions .btn-grey { margin-bottom: 15px; } .form-product .form-actions > a { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.17; color: #000; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; text-decoration: underline; } .form-product .form-actions > .link { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.15; font-weight: 400; letter-spacing: .03em; text-transform: none; } .form-product .error-message { position: absolute; top: 100%; left: 0; margin-top: 4px; } /* Tablet Portrait */ @media (max-width: 1023px) { .form-product .form-body .form-row-inline:last-child { width: 112px; } .form-product .form-row-inline + .form-row-inline { width: 230px; } } /* Mobile */ @media (max-width: 767px) { .form-product { max-width: 236px; margin: 0 auto 10px; } .form-product-alt { max-width: 290px; } .form-product .form-body { margin-bottom: 19px; } .form-product .form-row-inline { width: 40px; } .form-product-alt .form-row-inline { margin-top: 15px; } .form-product .form-row-inline + .form-row-inline { width: 93px; margin-left: 7px; } .form-product .form-body .form-row-inline:last-child { width: 57px; } .form-product .form-row-inline a { font-size: 10px; letter-spacing: 0; } .form-product .form-label { font-size: 9px; } .form-product-alt .form-label { font-size: 11px; } .form-product-alt .field, .form-product-alt .select { height: 39px; } .form-product .btn { height: 40px; font-size: 12px; line-height: 40px; } .form-product-alt .btn { height: 49px; font-size: 15px; line-height: 49px; } .form-product .form-row-inline { position: static; } .form-product .form-body { position: relative; } .form-product .form-actions > .link { font-size: 11px; letter-spacing: 0; } .form-product .form-actions .btn-grey { color: #fff; } } /* ------------------------------------------------------------ *\ Form Filters \* ------------------------------------------------------------ */ .form-filters h5 { padding: 8px 5px 8px 24px; margin: 0 -20px 12px; background-color: #000; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.31; color: #fff; letter-spacing: .15em; text-transform: uppercase; text-align: left; } .form-filters .form-col { padding: 0 20px 8px; font-size: 0; } .form-filters .form-row { margin-bottom: 10px; font-size: 0; letter-spacing: 0; } .form-filters a:not(.btn), .form-filters .form-btn { display: inline-block; border: none; background: none; border-radius: 0; font-size: 13px; line-height: 2.62; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; vertical-align: middle; text-decoration: none; transition: opacity .4s; } .form-filters .form-btn { padding-top: 2px; font-size: 11px; line-height: 1.9; } .form-filters a:not(.btn):hover, .form-filters .form-btn:hover { opacity: .8; } .form-filters .form-controls { display: inline-block; width: 160px; margin-right: 7px; vertical-align: middle; } .form-filters .form-controls-small { width: 83px; } .form-filters .list-checkboxes-inline { width: 33.33%; padding: 8px 0; } /* ACADACA editing the max-height */ .form-filters .custom-scroll { max-height: 231px; padding-left: 8px; border: 1px solid #eaeaea; margin-bottom: 8px; } .form-filters .form-actions { overflow: hidden; text-align: right; } .form-filters .form-actions a { float: right; } .form-filters .form-actions a:not(.btn) { text-decoration: underline; } .form-filters .form-actions a:not(.btn):hover { text-decoration: none; } .form-filters .form-actions .btn { min-width: 126px; margin-left: 28px; vertical-align: middle; } @media (max-width: 1499px) { .form-filters .list-checkboxes-inline { width: 50%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .form-filters h5 { margin-right: -10px; margin-left: -10px; } .form-filters .form-col { padding: 0 10px 10px; } .form-filters .list-checkboxes-inline { width: 100%; padding: 0; margin-bottom: 0; } } /* Mobile */ @media (max-width: 767px) { .form-filters h5 { overflow: hidden; position: relative; max-width: 150px; padding: 0 15px 0 0; margin: 0;background: none; font-size: 15px; line-height: 1.33; text-transform: uppercase; letter-spacing: .15em; color: #000; text-overflow: ellipsis; } .form-filters h5:after { content: ''; position: absolute; top: 50%; right: 0; width: 6px; height: 10px; background: url(images/arrow-right.png) 0 0 no-repeat; background-size: 100% 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: margin .4s, -webkit-transform .4s; transition: transform .4s, margin .4s; transition: transform .4s, margin .4s, -webkit-transform .4s; } .form-filters h5.active:after { margin-right: 4px; -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .form-filters .form-col { margin-bottom: 10px; } .form-filters .form-col + .form-col { border: none; } .form-filters .form-col-inner { display: none; padding-top: 20px; } .form-filters .form-actions { padding-top: 10px; text-align: center; } .form-filters .form-actions a, .form-filters .form-actions .btn { float: none; display: block; margin: 0; } .form-filters .form-actions .btn { margin-bottom: 15px; } } /* ------------------------------------------------------------ *\ Form Stock \* ------------------------------------------------------------ */ .form-stock { overflow: hidden; font-size: 0; letter-spacing: 0; } .form-stock .form-head { padding: 0 20px; margin-bottom: 32px; text-align: center; } .form-stock .form-title { line-height: 1; text-transform: uppercase; font-weight: 400; letter-spacing: .2em; } .form-stock .form-image { display: inline-block; width: 157px; border: 1px solid #868686; margin-right: 35px; vertical-align: top; } .form-stock .form-body { display: inline-block; width: 270px; padding-top: 20px; vertical-align: middle; } .form-stock p { padding: 0 5px; margin-bottom: 17px; font-size: 11px; line-height: 1.23; letter-spacing: .1em; text-align: left; } .form-stock p span:first-child { display: inline-block; width: 56px; text-transform: uppercase; } .form-stock .form-row { margin-bottom: 17px; } .form-stock .field { height: 40px; border: 1px solid #000; font-size: 11px; } .form-stock .field::-webkit-input-placeholder { text-transform: uppercase; } .form-stock .field::-moz-placeholder { text-transform: uppercase; } .form-stock .field:-ms-input-placeholder { text-transform: uppercase; } .form-stock .field::placeholder { text-transform: uppercase; } .form-stock .btn { min-width: 162px; border-width: 2px; margin-right: 20px; } .form-stock .form-actions a { position: static; font-size: 13px; text-transform: uppercase; vertical-align: middle; font-weight: 700; } /* Mobile */ @media (max-width: 767px) { .form-stock { text-align: center; } .form-stock .form-content { display: inline-block; vertical-align: middle; } .form-stock .form-image { width: 75px; margin-right: 10px; vertical-align: middle; } .form-stock .form-body { display: block; width: 100%; } .form-stock .form-title { font-size: 20px; letter-spacing: .15em; } .form-stock .form-head { padding: 0; } .form-stock .field { border-width: 2px; line-height: 36px; } .form-stock .btn { display: block; margin: 0 auto 20px; } } /* ------------------------------------------------------------ *\ Form Check Gift \* ------------------------------------------------------------ */ .form-check-gift { font-family: 'Roboto', 'Helvetica', sans-serif; } .form-check-gift h6 { margin-bottom: 15px; text-transform: uppercase; letter-spacing: .05em; } .form-check-gift p { margin-bottom: 23px; font-size: 12px; line-height: 1.25; letter-spacing: -.01em; } .form-check-gift .form-row { margin-bottom: 16px; font-size: 0; } .form-check-gift .form-controls { display: inline-block; width: 162px; margin-right: 8px; vertical-align: middle; } .form-check-gift .field { height: 30px; padding: 0 11px; border: 2px solid #000; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; } .form-check-gift .btn { display: inline-block; height: 30px; padding: 0 12px; font-size: 12px; line-height: 30px; text-transform: uppercase; font-weight: 700; letter-spacing: .1em; vertical-align: middle; } /* Mobile */ @media (max-width: 767px) { .form-check-gift { text-align: left; font-size: 0; letter-spacing: 0; } .form-check-gift .form-controls { width: calc(100% - 30px); margin-right: 0; } } /* ------------------------------------------------------------ *\ Form Gift \* ------------------------------------------------------------ */ .form-gift .form-row { position: relative; margin-bottom: 29px; text-align: left; } .form-gift .form-row-alt { margin-top: 40px; } .form-gift .field::-webkit-input-placeholder { text-transform: uppercase; } .form-gift .field::-moz-placeholder { text-transform: uppercase; } .form-gift .field:-ms-input-placeholder { text-transform: uppercase; } .form-gift .field::placeholder { text-transform: uppercase; } .form-gift .form-row > span { display: block; margin-top: 10px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.15; letter-spacing: .06em; } .form-gift .form-actions { padding-top: 7px; text-align: center; } .form-gift .btn { display: inline-block; width: 100%; max-width: 290px; } .form-gift .error-message { position: absolute; top: 100%; left: 0; margin-top: 4px; } /* Mobile */ @media (max-width: 767px) { .form-gift { margin-bottom: 60px; } .form-gift .field, .form-gift .select { height: 40px; font-size: 11px; } .form-gift .textarea { height: 176px; } .form-gift .form-row > span { text-align: left; } } /* ------------------------------------------------------------ *\ Form Code \* ------------------------------------------------------------ */ .form-code { margin-bottom: 26px; font-size: 0; letter-spacing: 0; transition: all .4s; } .form-code.hide { overflow: hidden; height: 0; margin: 0; } .form-code.open { overflow: visible; height: 39px; margin-bottom: 26px; } .form-code .form-row { position: relative; } .form-code .form-title { margin-bottom: 13px; } .form-code .form-controls { display: inline-block; width: 144px; vertical-align: top; } .form-code .field { height: 39px; border-right: 0; } .form-code .field.error { border: 2px solid #ff0000; } .form-code .btn { display: inline-block; height: 39px; width: 66px; border-width: 1px; padding: 0; line-height: 37px; vertical-align: top; } .form-code .error-message { overflow: hidden; position: absolute; top: 100%; left: 0; max-width: 100%; margin-top: 4px; white-space: nowrap; text-overflow: ellipsis; } .form-code .success-message { overflow: hidden; position: absolute; top: 100%; left: 0; max-width: 100%; margin-top: 4px; font-family: 'Roboto', 'Helvetica', sans-serif; white-space: nowrap; font-size: 12px; text-overflow: ellipsis; font-weight: 400; font-style: italic; } /* Tablet Portrait */ @media (max-width: 1023px) { .form-code .form-controls { width: calc(100% - 66px); } } /* Mobile */ @media (max-width: 767px) { .form-code .btn { border-left: none; font-weight: 700; } .form-code .field.error { border: 1px solid #000; border-right: 0; } } /* ------------------------------------------------------------ *\ Form Default \* ------------------------------------------------------------ */ .form-default { position: relative; display: inline-block; width: 448px; vertical-align: top; } .form-default-fluid { width: auto; } .form-default + .form-default { width: 482px; padding-left: 34px; margin-left: 33px; } .form-default + .form-default:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 1px; min-height: 445px; background-color: #000; } .form-default .form-head { margin-bottom: 12px; text-align: center; } .form-default .form-head p { margin: 20px 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 2.17; } .form-default .form-title { font-size: 40px; line-height: 1.1; color: #000; text-transform: uppercase; letter-spacing: .2em; } .form-default .form-inner { max-width: 288px; margin: 0 auto; } .form-default .form-body > .checkbox { margin-bottom: 25px; } .form-default .form-row { position: relative; margin-bottom: 25px; } .form-default .form-row:last-child { margin-bottom: 21px; } .form-default .form-actions { margin-top: 44px; } .form-default .form-actions .checkbox { margin-bottom: 30px; text-align: left; } .form-default .form-actions-inner { margin-bottom: 27px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.23; } .form-default .btn { min-width: 290px; margin-bottom: 25px; font-weight: 700; } .form-default .form-note { overflow: hidden; margin-top: 8px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; letter-spacing: .06em; } .form-default .form-note .link { float: right; } .form-default .link { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.3; letter-spacing: .06em; font-weight: 400; text-decoration: underline; text-transform: none; } .form-default .link:hover { text-decoration: none; } .form-default h6 { margin-bottom: 10px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; text-transform: uppercase; font-weight: 700; } .form-default .form-head h6 { margin: 15px 0 30px; } .form-default .form-body > ul { margin-bottom: 23px; font-family: 'Roboto', 'Helvetica', sans-serif; list-style: none outside none; font-size: 12px; line-height: 1.8; } .form-default .error-message { margin: 8px 0 -12px; text-align: left; } .form-default .checkbox .form-label { font-weight: 400; } /* Tablet Portrait */ @media (max-width: 1023px) { .form-default { width: 48%; } .form-default + .form-default { width: 50%; padding-left: 2%; margin-left: 2%; } .form-default .form-title { font-size: 26px; } } /* Mobile */ @media (max-width: 767px) { .form-default { display: block; width: 100%; } .form-default + .form-default { width: 100%; padding-left: 0; margin: 55px 0 0; } .form-default + .form-default:before { display: none; } .form-default .form-title { font-size: 20px; } .form-default .form-actions-inner { text-align: right; } .form-default .form-actions-inner p { text-align: center; } .form-default .form-actions-inner br { display: none; } .form-default .btn { min-width: 0; width: 100%; } .form-default .form-inner { max-width: none; } .form-default .form-head p { line-height: 1.3; } } /* ------------------------------------------------------------ *\ Form Checkout \* ------------------------------------------------------------ */ .form-checkout .form-head { margin-bottom: 16px; text-align: center; } .form-checkout .form-title { font-size: 40px; line-height: 1.1; letter-spacing: .2em; } .form-checkout .form-subtitle { margin-bottom: 15px; font-size: 14px; line-height: 1.08; text-transform: uppercase; letter-spacing: .1em; } .form-checkout .form-body { margin-bottom: 40px; } .form-checkout .form-body-inner { padding-top: 13px; margin-bottom: 25px; } .form-checkout .form-body-inner-alt { margin-bottom: 0; padding-top: 0; } .form-checkout .form-body-inner-border { padding-top: 36px; border-top: 1px solid #ccc; margin-top: -12px; } .form-checkout .form-body-inner > .checkbox:first-child { margin-bottom: 20px; } .form-checkout .form-row { position: relative; margin-bottom: 24px; } .form-checkout .error-message { margin-top: 10px; letter-spacing: .06em; text-align: left; } .form-checkout .form-row .error-message { position: absolute; top: 100%; left: 0; margin-top: 3px; } .form-checkout .checkbox { margin-bottom: 3px; } .form-checkout .checkbox .form-label { font-weight: 400; } .form-checkout .checkbox + .form-row { margin-top: 15px; } .form-checkout .checkbox + .form-note { margin-top: 20px; } .form-checkout .form-note { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.15; letter-spacing: .06em; } .form-checkout .form-actions { text-align: center; } .form-checkout .form-actions .btn { min-width: 290px; } .form-checkout .form-actions .form-note { margin: 20px 0; font-size: 11px; } .form-checkout .form-col-alt { font-size: 0; letter-spacing: 0; } .form-checkout .form-controls-inline { display: inline-block; width: 49%; vertical-align: middle; } .form-checkout .form-controls-inline + .form-controls-inline { margin-left: 2%; } .form-checkout .form-controls-inline a { display: inline-block; margin-left: 4px; font-size: 13px; line-height: 1.3; letter-spacing: .05em; opacity: .5; transition: opacity .4s; } .form-checkout .form-controls-inline a:hover { opacity: 1; } .form-checkout .link { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.33; letter-spacing: .1em; text-transform: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .form-checkout .form-title { font-size: 32px; } } /* Mobile */ @media (max-width: 767px) { .form-checkout { margin-bottom: 40px; } .form-checkout .form-body { margin-bottom: 20px; } .form-checkout .form-actions .btn { min-width: 0; width: 100%; } .form-checkout .error-message { font-size: 12px; } .form-checkout .form-body-inner .checkbox label { font-size: 10px; letter-spacing: .05em; } } /* ------------------------------------------------------------ *\ Form Promo \* ------------------------------------------------------------ */ .form-promo { font-size: 0; letter-spacing: 0; } .form-promo .form-controls { display: inline-block; width: 273px; margin-right: 25px; vertical-align: middle; } /* Mobile */ @media (max-width: 767px) { .form-promo .form-controls { width: calc(100% - 84px); margin-right: 14px; } } /* ------------------------------------------------------------ *\ Form Simple \* ------------------------------------------------------------ */ .form-simple { max-width: 600px; margin: 0 auto; text-align: left; } .form-simple .form-head { margin-bottom: 24px; text-align: center; } .form-simple .form-head p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; letter-spacing: 0; } .form-simple .form-title { margin-bottom: 16px; font-size: 40px; line-height: 1.1; letter-spacing: .2em; } .form-simple .form-inner { max-width: 288px; margin: 0 auto; } .form-simple .form-row { position: relative; margin-bottom: 25px; } .form-simple .form-group + .form-group { padding-top: 37px; border-top: 5px solid #000; margin-top: 42px; } .form-simple .checkbox { margin-bottom: 40px; } .form-simple .form-actions { padding-top: 9px; text-align: center; } .form-simple .form-actions .btn { min-width: 290px; margin-bottom: 10px; } .form-simple .form-note { margin-bottom: 20px; font-size: 13px; letter-spacing: .06em; } .form-simple .form-col-alt { font-size: 0; letter-spacing: 0; } .form-simple .form-controls-inline { display: inline-block; width: 49%; vertical-align: middle; } .form-simple .form-controls-inline + .form-controls-inline { margin-left: 2%; } .form-simple .form-controls-inline a { display: inline-block; margin-left: 4px; font-size: 13px; line-height: 1.3; letter-spacing: .05em; opacity: .5; transition: opacity .4s; } .form-simple .form-controls-inline a:hover { opacity: 1; } .form-simple .popup-cvv { left: auto; right: 0; text-align: left; } /* Mobile */ @media (max-width: 767px) { .form-simple { max-width: none; margin-bottom: 40px; } .form-simple .form-inner { max-width: none; } .form-simple .form-title { font-size: 30px; } .form-simple .form-actions .btn { min-width: 0; width: 100%; } .form-simple .checkbox { margin-bottom: 15px; } } /* ------------------------------------------------------------ *\ Form Sort \* ------------------------------------------------------------ */ .form-sort { font-family: 'Roboto', 'Helvetica', sans-serif; min-width: 256px; } .form-sort .form-label { background:#fff; color: #000; text-align:center; width:129px; color: #000; display:block; float:left; margin: 0 10px 0 0; line-height:30px; } .form-sort .form-controls { overflow: hidden; } @media (max-width: 1023px) { .form-sort .form-label { display:none; } } /* ------------------------------------------------------------ *\ Gallery \* ------------------------------------------------------------ */ .gallery { padding-bottom: 40px; } .gallery:after { } .gallery-item { width:20%; float:left; padding: 3px; position: relative; } .gallery-item img { display:block; width:100%; } .gallery-item h6 { position: absolute; width:100%; text-align:center; top:100%; font-family: 'Roboto', 'Helvetica', sans-serif; font-weight:400; font-size:11px; } .gallery-item.gallery-item-alt { text-align:center; position: relative; } .gallery-item.gallery-item-alt img { visibility: hidden; opacity: 0; } .gallery-item.gallery-item-alt .gallery-item-actions { position: absolute; width:100%; left:0; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 33px; } .gallery-item.gallery-item-alt .gallery-item-actions .btn { margin: 18px 0; } .gallery-item.gallery-item-empty { visibility: hidden; opacity: 0; } @media (max-width: 767px) { .gallery-item { width:33.3%; } .gallery-item.gallery-item-alt .gallery-item-actions { padding: 0 10px; } } /* ------------------------------------------------------------ *\ Grid \* ------------------------------------------------------------ */ .grid { overflow: hidden; position: relative; font-size: 0; letter-spacing: 0; } .grid.has-open-element .grid-item-holder:not(.show-content) { opacity: .52; } .grid-alt.has-open-element .grid-item-holder:not(.show-content) { opacity: 1; } .grid:after { } .grid ul { position: relative; z-index: 2; margin: 0 -7px; overflow: hidden; list-style: none outside none; } .grid li { display: inline-block; width: 20%; padding: 4px; position: relative; vertical-align: top; } .grid-item { display:block; position: relative; } .grid-item img { display:block; width:100%; } .grid-item h2 { display: inline-block; text-align:center; font-size:24px; line-height: 1; font-weight:400; width:100%; } .grid-item.grid-item-text { position: relative; padding-top: calc(100% - 14px); } .grid-item.grid-item-text h2 { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .grid-item.grid-item-text h2 span { display: block; transition: margin .4s; } .grid-item.grid-item-text h2 .link { visibility: hidden; position: absolute; top: 100%; left: 50%; opacity: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: opacity .4s, visibility .4s; } .grid-item-holder { position: relative; letter-spacing: 0; transition: opacity .4s; } .grid .grid-item-square { position: static; } .grid-item-holder.show-content { z-index: 20; } .grid-item-holder > img { display: block; width: 100%; height: auto; } .grid-alt .grid-item-holder > img { opacity: 0; } .grid-item-inner { overflow: hidden; position: absolute; top: 4px; left: 4px; z-index: 20; width: 0; height: 0; min-width: 0; min-height: 0; background-size: cover; background-position: center center; transition: all .4s; } .grid-item-inner.right { left: auto; right: 4px; } .grid-item-inner.bottom { top: auto; bottom: 4px; } .grid-item-images { position: absolute; top:4px; left:4px; right:4px; bottom: 4px; } .grid-item-images img:first-child, .grid-item-images img:nth-child(2) { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid-item-images img:nth-child(2) { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .grid-item-holder:hover .grid-item-images img:first-child { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .grid-item-holder:hover .grid-item-images img:nth-child(2) { -webkit-transform: rotateY(0); transform: rotateY(0); } .grid-item-square .grid-item-inner { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .grid-item-content { visibility: hidden; position: absolute; bottom: 37px; right: 37px; display: table; width: 133px; height: 137px; background-color: #fff; opacity: 0; transition: all .4s; transition-delay: .6s; } .grid-item-content-alt { width: 170px; height: 161px; } .grid-item-content-alt:after { content: ''; position: absolute; top: -54px; right: -28px; bottom: -54px; left: 0; z-index: -1; background-color: rgba(255, 255, 255, .6); } .grid-item-content.left { bottom: 54px; left: 0; right: auto; } .grid-item-holder.show-content .grid-item-content { visibility: visible; opacity: 1; } .grid-item-content-inner { display: table-cell; vertical-align: middle; text-align: center; } .grid-item-content-inner p { font-size: 10px; line-height: 1.32; color: #000; letter-spacing: .1em; } .grid-item-content-inner h4 { font-weight: 400; letter-spacing: .15em; } .grid-item-content-inner a { font-size: 13px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; } .grid-item-content-inner a:hover { text-decoration: underline; } .grid-item-holder .btn-popup { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .grid-item-square.show-content .grid-item-text { z-index: 99; background-color: #fff; } .grid-item-square.show-content .grid-item-text h2 .link { visibility: visible; opacity: 1; } .grid-item-square.show-content .grid-item-text h2 span { margin-bottom: 10px; } .grid-item-square.show-content .grid-item-inner { min-width: 100%; min-height: 100%; } .grid-item-holder .grid-close { position: absolute; top: 14px; right: 12px; } /* Tablet Portrait */ @media (max-width: 1023px) { .grid-item-content { bottom: 50px; right: 50px; width: auto; height: auto; } .grid-item-content-alt { width: 125px; height: 117px; } .grid-item-content.left { bottom: 40px; } .grid-item-content-alt:after { top: -40px; bottom: -40px; right: -21px; } .grid-item-content-inner .grid-link-alt { display: table; width: 44px; height: 44px; border: 2px solid #000; font-size: 8px; } .grid-item-content-inner .grid-link-alt span { display: table-cell; line-height: 1; letter-spacing: .1em; vertical-align: middle; } .grid-item-content-inner a, .grid-item-content-inner p { font-size: 9px; } .grid-item-content-inner h4 { font-size: 11px; } } /* Mobile */ @media (max-width: 767px) { .grid-items > div { width: auto; } .grid-items .slick-slide { width: auto; margin: 0 4px; } .grid .slider-mobile { margin: 0; } .grid li { width:50%; } } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { position: relative; z-index: 20; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); opacity: 0; transition: opacity 5s, -webkit-transform 5s; transition: transform 5s, opacity 5s; transition: transform 5s, opacity 5s, -webkit-transform 5s; } .intro.animated { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .intro .intro-inner { text-align:center; width: 220px; margin-left:25%; margin-top:38px; position: absolute; top:0; z-index: 3; } .intro .intro-inner-alt { top: 50px; width: 230px; margin-left: 9%; } .intro .intro-title { font-weight: 400; text-transform: uppercase; margin-bottom: 30px; font-size:26px; margin-top:3px; } .intro h6 { text-transform: uppercase; letter-spacing: 0.15em; margin-bottom:0; } .intro h4 { margin-bottom: 5px; font-weight: 400; text-transform: uppercase; } .intro h4 ~ h4 { margin-bottom: 35px; } .intro .intro-inner-alt h2 { font-size: 30px; letter-spacing: .2em; } /* Small Desktop */ @media (max-width: 1044px) { .intro .intro-inner { margin-left: 20%; } .intro .intro-inner-alt { margin-left: 9%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .intro { margin-bottom: 50px; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } .intro .intro-inner { margin: 58px 0 0 17%; } .intro .intro-inner-alt { margin: -20px 0 0 9%; } .intro h6 { font-size: 9px; } .intro h2 { margin-bottom: 20px; font-size: 20px; } } /* Mobile */ @media (max-width: 767px) { .intro { margin-bottom: 65px; } .intro .intro-inner { position: static; margin: 0; width: auto; text-align: center; } .intro .intro-inner h6 { font-size: 13px; font-weight: 400; } .intro .intro-inner h2 { font-size: 25px; letter-spacing: .2em; font-weight: 400; } .intro h4 ~ h4 { margin-bottom: 0; } .intro .intro-inner .btn-square { position: absolute; bottom: -24px; left: 50%; z-index: 2; width: auto; height: 40px; line-height: 36px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .intro .intro-inner-alt { position: static; width: auto; max-width: 370px; padding: 0; margin: 0 auto; } .intro .intro-inner-alt br { display: none; } .intro .intro-inner-alt .btn-square { background-color: #fff; } } /* ------------------------------------------------------------ *\ Intro Blog \* ------------------------------------------------------------ */ .intro-blog { position: relative; text-align:center; margin-bottom:35px; } .intro-blog .intro-image { background-repeat: no-repeat; background-position:50% 50%; background-size: cover; padding-top: 530px; } .intro-blog .intro-title { font-size:40px; } .intro-blog .intro-head { font-size:12px; padding: 15px 0; } .intro-blog .intro-head .btn { font-size:15px; } /* ------------------------------------------------------------ *\ Jobs \* ------------------------------------------------------------ */ .jobs .jobs-head { border-bottom:3px solid #000; margin-bottom:24px; } .jobs .jobs-title { font-size:17px; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom:25px; } .jobs h4 { font-size:17px; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom:8px; } @media (max-width: 767px) { .jobs { border-top:1px solid #000; padding-top:38px; text-align:center; margin-bottom:160px; } .jobs h4 { font-size:20px; } .jobs .jobs-title { font-size:25px; } .jobs .jobs-head { border-bottom:0; } } /* ------------------------------------------------------------ *\ Link \* ------------------------------------------------------------ */ .link { text-transform: uppercase; font-size:9px; letter-spacing: 0.15em; } .link-sale { position: relative; display: inline-block; padding: 8px 0; margin: 10px 0; font-size: 14px; color: #cfcfcf; font-weight: 700; text-transform: uppercase; text-decoration: none; } .link-sale:before { content: ''; position: absolute; top: 0; left: 0; width: 75px; height: 2px; background-color: #cfcfcf; } /* Tablet Portrait */ @media (max-width: 1023px) { .link { font-size: 8px; } .link-sale { display: block; padding: 0; margin: 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; line-height: 1.64em; color: #000; font-weight: 400; text-transform: none; } .link-sale:before { top: 50%; left: auto; right: 12px; width: 6px; height: 10px; background: url(images/arrow-right.png) 0 0 no-repeat; background-size: 100% 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Options \* ------------------------------------------------------------ */ .list-options { display: inline-block; padding-bottom:9px; } .list-options > li { display: inline-block; vertical-align: middle; text-align:left; } .list-options > li + li { padding-left:24px; } /* ------------------------------------------------------------ *\ List Colors \* ------------------------------------------------------------ */ .list-colors { margin: 0; padding: 10px 0 5px; font-size: 0; letter-spacing: 0; } .list-colors li { display: inline-block; padding-bottom: 15px; vertical-align: top; } .list-colors li + li { padding-left: 10px; } /* Mobile */ @media (max-width: 767px) { .list-colors { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; } .list-colors li + li { padding-left: 4px; } } /* ------------------------------------------------------------ *\ List Radios Colors \* ------------------------------------------------------------ */ .list-radios-colors { text-align:center; margin-bottom: 38px; font-size: 0; } .list-radios-colors li { display: inline-block; vertical-align: middle; } .list-radios-colors li + li { margin-left: 7px; } /* Mobile */ @media (max-width: 767px) { .list-radios-colors { margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ List Links \* ------------------------------------------------------------ */ .list-links { border-top: 1px solid #000; } .list-links li { border-bottom: 1px solid #000; } .list-links a { display: block; padding: 12px 5px; font-size: 20px; line-height: 1; letter-spacing: .2em; text-align: center; text-decoration: none; text-transform: uppercase; } /* ------------------------------------------------------------ *\ List Thumbs \* ------------------------------------------------------------ */ .list-thumbs { margin: 0 -5px 34px 0; font-size: 0; letter-spacing: 0; } .list-thumbs-block { margin-right: 0; } .list-thumbs li { display: inline-block; width: 54px; margin: 0 5px 5px 0; vertical-align: top; } .list-thumbs-block li { display: block; margin: 0 0 8px; } .list-thumbs a { display: block; border: 1px solid #868686; transition: border .4s; } .list-thumbs li:hover a, .list-thumbs .current a { border: 2px solid #1b1b1b; } .list-thumbs img { width: 100%; height: auto; } /* ------------------------------------------------------------ *\ List Thumbs Large \* ------------------------------------------------------------ */ .list-thumbs-large li { width: 74px; } /* ------------------------------------------------------------ *\ List Checkboxes Inline \* ------------------------------------------------------------ */ .list-checkboxes-inline { display: inline-block; vertical-align: top; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-checkboxes-inline { display: block; } } /* ------------------------------------------------------------ *\ List Simple Products \* ------------------------------------------------------------ */ .list-simple-products { margin: 5px -13px 0 0; font-size: 0; letter-spacing: 0; text-align: center; } .list-simple-products:not(.slides) li, .list-simple-products:not(.slides) > div { display: inline-block; width: 142px; border: 1px solid #c4c4c4; margin-right: 13px; vertical-align: top; } .list-simple-products a { display: block; } .list-simple-products img { max-width: 100%; } /* ------------------------------------------------------------ *\ List Radios Inline \* ------------------------------------------------------------ */ .list-radios-inline { margin-right: -48px; font-size: 0; } .list-radios-inline li { display: inline-block; margin-right: 48px; vertical-align: middle; } /* ------------------------------------------------------------ *\ List Products \* ------------------------------------------------------------ */ .list-products { margin-bottom: 42px; font-size: 0; letter-spacing: 0; } .list-products li { display: inline-block; width: calc(25% - 16px); height: auto; vertical-align: top; }/*Ticket #195*/ .list-products-fluid li {border: 1px solid #8c8c8c;} .list-products li.alt { background-color: #000000; } .list-products-inverse li.alt { background: none; } .list-products li + li { margin-left: 14px; } .list-products a { position: relative; display: block; height: 100%; text-align: center; transition: opacity .4s; }/*Ticket #195*/ .list-products a:hover { opacity: .8; } .list-products img { width: 100%; vertical-align: bottom; }/*Ticket #195*/ .list-products a > span { position: absolute; top: 50%; left: 0; right: 0; font-size: 29px; line-height: 1.34; color: #fff; letter-spacing: .2em; text-decoration: none; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .list-products a > span > span { border-bottom: 3px solid #fff; }@media(max-width: 1240px) { .list-products-fluid { margin-right: -2%; } .list-products-fluid li { width: 23%; margin-right: 2%; } .list-products-fluid li + li { margin-left: 0; } } /* Small Desktop */ @media (max-width: 1044px) { .list-products { margin-right: -2%; } .list-products li { width: 23%; margin-right: 2%; } .list-products li + li { margin-left: 0; } } /* Mobile */ @media (max-width: 767px) { .list-products { margin: 0 -9px 17px 0; text-align: center; } .list-products li { position: relative; width: 143px; height: 215px; margin: 0 9px 11px 0; }/*Ticket #195*/ .list-products a { position: relative; height: 100%; padding: 0; }/*Ticket #195*/ .list-products a > span { font-size: 30px; } } /* ------------------------------------------------------------ *\ List Links Inverse \* ------------------------------------------------------------ */ .list-links-inverse { max-width: 470px; margin: 0 auto 57px; } .list-links-inverse li { margin-bottom: 15px; } .list-links-inverse a { display: block; height: 61px; padding: 0 10px; border: 2px solid #fff; font-size: 29px; line-height: 57px; letter-spacing: .2em; text-transform: uppercase; transition: background .4s, color .4s; } .list-links-inverse a:hover { background-color: #fff; color: #000; } /* Mobile */ @media (max-width: 767px) { .list-links-inverse a { height: 39px; font-size: 20px; line-height: 35px; letter-spacing: .15em; } } /* ------------------------------------------------------------ *\ List Images \* ------------------------------------------------------------ */ .list-images, .list-images:last-child { margin: 0 -30px 72px 0; padding-top: 15px; font-size: 0; letter-spacing: 0; text-align: center; } .list-images li { display: inline-block; width: 302px; margin-right: 31px; vertical-align: top; } .list-images figure { margin-bottom: 22px; } .list-images h5 { margin-bottom: 17px; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: .15em; text-transform: uppercase; } .list-images .btn { min-width: 160px; font-weight: 700; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-images, .list-images:last-child { margin-right: -2%; } .list-images li { width: 31.33%; margin-right: 2%; } } /* Mobile */ @media (max-width: 767px) { .list-images, .list-images:last-child { margin: 0; } .list-images li { width: 100%; margin: 0 0 30px; } } /* ------------------------------------------------------------ *\ List Posts \* ------------------------------------------------------------ */ .list-posts { padding: 27px 0 36px; margin-right: -60px; list-style: none outside none; font-size: 0; letter-spacing: 0; text-align: center; } .list-posts li { display: inline-block; width: 197px; margin: 0 60px 53px 0; font-size: 12px; vertical-align: top; } .list-posts a { display: block; text-decoration: none; } .list-posts figure { overflow: hidden; height: 132px; margin-bottom: 10px; line-height: 132px; } .list-posts img { width: 100%; height: auto; vertical-align: middle; } .list-posts span, .list-posts h6 { margin-bottom: 2px; line-height: 1.33; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; } .list-posts span { text-decoration: underline; } .list-posts span:hover { text-decoration: none; } /* Mobile */ @media (max-width: 767px) { .list-posts { margin: 0 -31px 0 -10px; } .list-posts li { width: 134px; margin: 0 21px 34px 0; } .list-posts figure { height: 89px; line-height: 89px; } .list-posts span, .list-posts h6 { font-size: 9px; } } /* ------------------------------------------------------------ *\ List Widget Total \* ------------------------------------------------------------ */ .list-widget-total { margin-bottom: 15px; font-family: 'Roboto', 'Helvetica', sans-serif; } .list-widget-total-bd-bottom { padding-bottom: 10px; border-bottom: 1px solid #000; } .list-widget-total li { overflow: hidden; } .list-widget-total span, .list-widget-total strong { float: left; } .list-widget-total span + span, .list-widget-total strong + strong { float: right; } .list-widget-total small { display: block; margin: -3px 0 4px; line-height: 1; color: #9e9e9e; white-space: nowrap; text-transform: none; } .list-widget-total span, .list-widget-total strong { font-size: 11px; line-height: 1.91; letter-spacing: .06em; text-transform: uppercase; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-widget-total small { font-size: 8px; } } /* ------------------------------------------------------------ *\ List Small Security \* ------------------------------------------------------------ */ .list-small-security { display: inline-block; margin: 0 7px 26px 0; font-size: 0; letter-spacing: 0; vertical-align: top; } .list-small-security li { display: inline-block; vertical-align: middle; } .list-small-security li + li { margin-left: 6px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-small-security { margin-bottom: 10px; } } /* Mobile */ @media (max-width: 767px) { .list-small-security { margin-bottom: 25px; } } /* ------------------------------------------------------------ *\ List Checkout Steps \* ------------------------------------------------------------ */ .list-checkout-steps { margin-bottom: 57px; font-size: 0; letter-spacing: 0; } .list-checkout-steps li { display: inline-block; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 16px; line-height: 1.34; vertical-align: middle; font-weight: 400; } .list-checkout-steps li.current { font-weight: 700; } .list-checkout-steps li + li { margin-left: 34px; } .list-checkout-steps span { display: inline-block; margin-left: 29px; font-weight: 400; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-checkout-steps li + li { margin-left: 20px; } .list-checkout-steps span { margin-left: 20px; } } /* Mobile */ @media (max-width: 767px) { .list-checkout-steps { margin-bottom: 30px; text-align: center; } .list-checkout-steps li { font-size: 12px; } .list-checkout-steps li + li { margin-left: 7px; } .list-checkout-steps span { margin-left: 5px; } } /* ------------------------------------------------------------ *\ List Checkout Info \* ------------------------------------------------------------ */ .list-checkout-info { padding-top: 12px; margin-bottom: 30px; font-size: 0; letter-spacing: 0; } .list-checkout-info li { display: inline-block; width: 50%; max-width: 250px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.33; vertical-align: top; letter-spacing: .1em; } .list-checkout-info-inline li { max-width: 288px; } .list-checkout-info-inline li > *:last-child { margin-bottom: 0; } .list-checkout-info address, .list-checkout-info p { margin-bottom: 21px; text-transform: uppercase; } .list-checkout-info h5 { overflow: hidden; max-width: 214px; margin-bottom: 25px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; text-transform: uppercase; } .list-checkout-info h5 a { float: right; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: none; } /* Mobile */ @media (max-width: 767px) { .list-checkout-info li { max-width: none; width: 100%; margin-bottom: 30px; } .list-checkout-info-inline { margin-bottom: 0; } .list-checkout-info-inline li { width: 50%; } .list-checkout-info li:last-child { margin-bottom: 0; } .list-checkout-info address { margin-bottom: 18px; } .list-checkout-info h5 { margin-bottom: 15px; font-size: 12px; } .list-checkout-info-inline address, .list-checkout-info-inline p { font-size: 10px; } } /* ------------------------------------------------------------ *\ List Cards \* ------------------------------------------------------------ */ .list-cards { margin: 30px -11px 33px 0; font-size: 0; letter-spacing: 0; } .list-cards li { display: inline-block; margin-right: 11px; } /* ------------------------------------------------------------ *\ List Order Details \* ------------------------------------------------------------ */ .list-order-details { padding: 0 22px; margin: 40px 0 61px; font-size: 0; letter-spacing: 0; } .list-order-details-alt { margin-bottom: 10px; } .list-order-details li { display: inline-block; width: 25%; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.33; letter-spacing: .1em; vertical-align: top; text-transform: uppercase; } .list-order-details-alt li { width: 33.33%; margin-bottom: 38px; } .list-order-details h5 { margin-bottom: 27px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; line-height: 1.08; } .list-order-details address + p { margin-top: 15px; } .list-order-details p a { font-weight: 700; } /* Mobile */ @media (max-width: 767px) { .list-order-details { padding: 0; margin-bottom: 30px; } .list-order-details li { width: 50%; margin-bottom: 25px; font-size: 10px; } .list-order-details h5 { margin-bottom: 10px; font-size: 12px; } } /* ------------------------------------------------------------ *\ List Account Info \* ------------------------------------------------------------ */ .list-account-info { margin-right: -60px; font-size: 0; letter-spacing: 0; } .list-account-info li { position: relative; display: inline-block; padding-bottom: 55px; margin-right: 60px; vertical-align: top; } .list-account-info h4 { margin-bottom: 12px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .list-account-info address, .list-account-info p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.37; text-transform: uppercase; } .list-account-info p span { display: block; margin-bottom: 15px; word-break: break-word; } .list-account-info li > a { position: absolute; bottom: 0; left: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;} /* Mobile */ @media (max-width: 767px) { .list-account-info { margin-right: 0; } .list-account-info li { height: auto !important; display: block; width: 100%; margin-right: 0; text-align: center; } .list-account-info h4 { white-space: normal; } .list-account-info address, .list-account-info p { margin-bottom: 10px; font-size: 9px; } .list-account-info li > a, .list-account-info a { position: static; font-size: 9px; font-weight: 700; } } /* ------------------------------------------------------------ *\ List Simple \* ------------------------------------------------------------ */ .list-simple { max-width: 444px; margin: 0 auto 50px; font-size: 0; letter-spacing: 0; } .list-simple li { display: inline-block; width: 50%; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; text-align: center; vertical-align: top; text-transform: uppercase; letter-spacing: .1em; } .list-simple address { margin-bottom: 15px; } .list-simple a { display: inline-block; font-weight: 700; } .list-simple a + a { margin-left: 15px; } /* Mobile */ @media (max-width: 767px) { .list-simple li { display: block; width: 100%; margin-bottom: 30px; } } /* ------------------------------------------------------------ *\ List Years \* ------------------------------------------------------------ */ .list-years { margin: 0 0 14px 0; } .list-years { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:14px; letter-spacing: 0.15em; text-align:center; } .list-years li { list-style:none; list-style-position: outside; display: inline-block; vertical-align: middle; font-weight:700; margin: 5px 10px; } .list-years li a { text-decoration: none; } @media (max-width: 767px) { .list-years li { margin: 5px; } } /* ------------------------------------------------------------ *\ List Anchors \* ------------------------------------------------------------ */ .list-anchors { color: #fff; margin: 0; text-transform: uppercase; font-size:12px; text-transform: uppercase; text-align:center; padding: 15px 0; margin-bottom:45px; } .list-anchors li { padding: 0 20px; display: inline-block; vertical-align: middle; } .list-anchors a { text-decoration: none; display:block; } /* ------------------------------------------------------------ *\ List Grid \* ------------------------------------------------------------ */ .list-grid { overflow: hidden; } .list-grid li { float:left; padding: 3px; } .list-grid-5-cols li { width:20%; } .list-grid-3-cols li { width:33.3%; } @media (max-width: 767px) { .list-grid-5-cols li, .list-grid-3-cols li { width:50%; } } /* ------------------------------------------------------------ *\ List Jobs \* ------------------------------------------------------------ */ .list-jobs { font-weight:400; font-family: 'Roboto', 'Helvetica', sans-serif; text-transform: uppercase; letter-spacing: 0.15em; font-size:9px; margin-bottom:30px; } .list-jobs li { margin-bottom:16px; } /* ------------------------------------------------------------ *\ List Steps \* ------------------------------------------------------------ */ .list-steps { text-transform: uppercase; overflow: hidden; text-align:center; } .list-steps li { display: inline-block; vertical-align: middle; } .list-steps li + li { margin-left:60px; } .list-steps a { display:block; width:220px; height: 220px; border:2px solid #000; text-align:center; font-size:29px; font-weight:700; position: relative; margin: auto ; } .list-steps a .text { position: absolute; width:100%; left:0; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height:50px; } @media (max-width: 1023px) { .list-steps li + li { margin: 0; } .list-steps a { width:80px; height: 80px; font-size:11px; letter-spacing: 0.07em; } .list-steps a .text { line-height:18px; } } /* ------------------------------------------------------------ *\ List Stylist \* ------------------------------------------------------------ */ .list-stylist { margin: 0 -2px; padding-top:18px; } .list-stylist:after { } .list-stylist li { float:left; padding:0 2px; width:33.3%; } @media (max-width: 767px) { .list-stylist { margin: 0 -10px; } .list-stylist li { width:50%; padding: 0 10px; margin-bottom:20px; } } /* ------------------------------------------------------------ *\ List Stores \* ------------------------------------------------------------ */ .list-stores { margin: 0 -37px; padding: 34px 145px 20px 145px; } .list-stores:after { } .list-stores > li { float:left; width:33.3%; padding:0 37px} @media (max-width: 1023px) { .list-stores { padding: 0 60px; } .list-stores > li { float:none; width: auto; } } /* ------------------------------------------------------------ *\ List Buttons \* ------------------------------------------------------------ */ .list-buttons { margin: 0 -10px; overflow: hidden; } .list-buttons li { padding:0 10px; float:left; width:50%; } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { background: url(images/logo.png) no-repeat 0 0; width:108px; height: 108px; display:block; font-size: 0; line-height: 0; text-indent: -4000px; position: absolute; top:0; left:50%; margin-left:-54px; } /* Tablet Portrait */ @media (max-width: 1023px) { .logo { width: 80px; height: 80px; margin-left: -40px; background-size: 100% 100%; } } /* Mobile */ @media (max-width: 767px) { .logo { width: 66px; height: 66px; margin-left: -33px; } } /* ------------------------------------------------------------ *\ Logo Sticky \* ------------------------------------------------------------ */ .logo-sticky { display:none; } /* ------------------------------------------------------------ *\ Logo Inverse \* ------------------------------------------------------------ */ .logo-inverse { background-image: url(images/logo-inverse.png); } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { width:50%; } .nav a { text-decoration: none; } .nav > ul:after { } .nav > ul > li { float: left; padding-right: 19px; list-style:none; list-style-position: outside; } .nav > ul > li > a { font-size:18px; letter-spacing: 0.07em; display: inline-block; margin-bottom:17px; } .nav > ul > li:hover > a { font-weight:700; } .nav > ul > li:hover .dropdown { visibility: visible; opacity: 1; transition: none; } .nav + .nav { padding-left:54px; } .nav + .nav > ul { padding-left:46px; } /* Large Desktop */ @media (max-width: 1200px) { .nav { width: auto; } } /* Tablet Portrait */ @media (max-width: 1023px) { .nav { width: auto; } .nav > ul > li { float: none; display: block; padding: 0; margin-bottom: 15px; } .nav + .nav > ul, .nav + .nav { padding: 0; } .nav > ul > li > a { margin-bottom: 0; font-size: 18px; line-height: 1.23; font-weight: 700; letter-spacing: .025em; } .nav .has-dropdown > a { position: relative; display: block; } .nav .has-dropdown > a:after { content: ''; position: absolute; top: 50%; right: 12px; width: 6px; height: 10px; background: url(images/arrow-right.png) 0 0 no-repeat; background-size: 100% 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .nav .has-dropdown > a.active:after { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .nav em { font-style: normal; } .nav strong { font-weight: 400; } } /* ------------------------------------------------------------ *\ Nav Inverse \* ------------------------------------------------------------ */ .nav-inverse > ul > li > a { color: #fff; } /* Tablet Portrait */ @media (max-width: 1023px) { .nav-inverse > ul > li > a { color: #000; } } /* ------------------------------------------------------------ *\ Nav Utilities \* ------------------------------------------------------------ */ .nav-utilities { padding: 2px 0 12px; position: absolute; right:15px; } .nav-utilities a { text-decoration: none; } .nav-utilities > ul:after { } .nav-utilities > ul > li { position: relative; float: left; padding-left: 20px; list-style: none; list-style-position: outside; letter-spacing: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .nav-utilities { position: static; padding-bottom: 0; margin-top: 12px; } .nav-utilities > ul { font-size: 0; } .nav-utilities > ul > li { float: none; display: inline-block; padding: 0; vertical-align: middle; } .nav-utilities > ul > li + li { margin-left: 35px; } .nav-utilities > ul > li > a { position: relative; display: block; } .nav-utilities .cart-counter { position: absolute; top: -7px; right: -7px; font-size: 10px; } } /* Mobile */ @media (max-width: 767px) { .nav-utilities { margin-top: 6px; } .nav-utilities > ul > li { position: static; } .nav-utilities > ul > li.alt { position: relative; } .nav-utilities > ul > li + li { margin-left: 15px; } } /* ------------------------------------------------------------ *\ Nav Utilities Inverse \* ------------------------------------------------------------ */ .nav-utilities-inverse > ul > li > a { color: #fff; } /* ------------------------------------------------------------ *\ Nav Footer \* ------------------------------------------------------------ */ .nav-footer { padding-right:40px; text-transform: uppercase; } .nav-footer ul { margin-bottom: 0; } .nav-footer h5 { text-transform: uppercase; letter-spacing: 0.25em; margin-bottom:20px; font-weight:800; } .nav-footer li { margin-bottom:17px; } .nav-footer a { font-size:14px; letter-spacing: 0.15em; text-decoration: none; } .nav-footer a:hover { text-decoration: underline; } /* Tablet Portrait */ @media (max-width: 1023px) { .nav-footer h5 { margin-bottom: 10px; letter-spacing: 0; font-weight: 600; } .nav-footer li { margin-bottom: 10px; } .nav-footer a { font-size: 13px; letter-spacing: 0; } } /* Mobile */ @media (max-width: 767px) { .nav-footer li, .nav-footer h5 { margin-bottom: 5px; } .nav-footer a { font-size: 10px; } } /* ------------------------------------------------------------ *\ Nav Footer Inverse \* ------------------------------------------------------------ */ .nav-footer-inverse a { color: #fff; } /* ------------------------------------------------------------ *\ Nav Category \* ------------------------------------------------------------ */ .nav-category { font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; line-height:1.9; letter-spacing: 0; } .nav-category + .nav-category { margin-top: 30px; } .nav-category li ul { line-height:1.75; padding-left:10px; margin-bottom:5px; } .nav-category a { text-decoration: none; } .nav-category a:hover { text-decoration: underline; } .nav-category h5 { text-transform: uppercase; cursor: pointer; } .nav-category li.current { font-weight:700; } .nav-category li ul { display:none; } .nav-category .accordion-expanded ul { display:block; } /* ------------------------------------------------------------ *\ Nav Secondary \* ------------------------------------------------------------ */ .nav-secondary { padding: 15px 10px 0; margin-top: 30px; border-top: 2px solid #e0e0e0; } .nav-secondary ul { list-style: none outside none; } .nav-secondary li { margin-bottom: 15px; } .nav-secondary a { font-size: 12px; line-height: 1.4; font-weight: 400; text-transform: uppercase; font-weight: 400; text-decoration: none; } /* ------------------------------------------------------------ *\ Nav Wrapper \* ------------------------------------------------------------ */ .nav-wrapper { overflow-y: auto; overflow-x: hidden; position: fixed; top: 0; bottom: 0; left: 0; z-index: 999; display: none; width: 220px; padding: 25px 7px 25px 17px; background-color: #fff; -webkit-transform: translateX(-220px); -ms-transform: translateX(-220px); transform: translateX(-220px); transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .nav-wrapper.open { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* Tablet Portrait */ @media (max-width: 1023px) { .nav-wrapper { display: block; } } /* ------------------------------------------------------------ *\ Nav Blog \* ------------------------------------------------------------ */ .nav-blog { background:#000; color: #fff; text-transform: uppercase; font-size:20px; padding: 15px 0; text-align:center; margin-bottom:45px; } .nav-blog li { list-style:none; list-style-position: outside; display: inline-block; vertical-align: middle; padding: 0 24px; } .nav-blog a { display:block; text-decoration: none; } .nav-blog .current a { text-decoration: underline; } @media (max-width: 767px) { .nav-blog { font-size:10px; } .nav-blog li { padding: 0 10px; } } /* ------------------------------------------------------------ *\ Nav Stylist \* ------------------------------------------------------------ */ .nav-stylist { font-size:15px; font-family: 'Roboto', 'Helvetica', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom:25px; } .nav-stylist ul:after { } .nav-stylist li { float:left; width:33.3%; text-align:left; margin: 30px 0; } .nav-stylist a { text-decoration: none; display: inline-block; vertical-align: middle; margin: 10px 0; } @media (max-width: 767px) { .nav-stylist li { width: auto; float:none; margin: 0; } } /* ------------------------------------------------------------ *\ Nav Site Map \* ------------------------------------------------------------ */ .nav-site-map { } .nav-site-map { letter-spacing: 0.08em; } .nav-site-map h4 { font-size:18px; text-transform: uppercase; font-weight:400; letter-spacing: 0.15em; margin-bottom:20px; } .nav-site-map ul { text-transform: uppercase; font-family: 'Roboto', 'Helvetica', sans-serif; font-size:9px; font-weight:700; margin-bottom:49px; } .nav-site-map li { list-style:none; list-style-position: outside; padding-bottom:10px; } /* ------------------------------------------------------------ *\ Pagination \* ------------------------------------------------------------ */ .pagination { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; letter-spacing: 0; } .pagination li { list-style:none; list-style-position: outside; } .pagination li + li { padding-left:6px; } .pagination ul { margin: 0 10px; } .pagination li, .pagination ul, .pagination > a { display: inline-block; vertical-align: middle; } .pagination a { text-decoration: none; } .pagination a:hover { text-decoration: underline; } /* ------------------------------------------------------------ *\ Popover \* ------------------------------------------------------------ */ .popover { visibility: hidden; opacity: 0; max-height: 0; padding: 0; position: relative; transition: all .3s; } .popover .popover-close { display: inline-block; position: absolute; top:0; right:0; } .popover .popover-actions { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; font-weight:700; text-align:center; margin-top:40px; } .popover.open { visibility: visible; opacity: 1; max-height: none; padding: 44px 0 0 0; } /* Popover Alt */ .popover.popover-alt { border-top:2px solid #000; border-bottom:2px solid #000; padding: 70px 0 30px 0; margin: 0 0 55px 0; } .popover.popover-alt .popover-close { top:20px; } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup { visibility: hidden; position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; opacity: 0; transition: opacity .4s, visibility .4s; } .popup.open { visibility: visible; opacity: 1; } .popup .popup-close { position: absolute; top: 22px; right: 28px; z-index: 20; font-size: 0; text-decoration: none; transition: opacity .4s; } .popup .popup-close:hover { opacity: .8; } .popup .popup-close span { font-size: 13px; font-weight: 700; text-transform: uppercase; vertical-align: middle; } .popup .popup-close i { margin-left: 12px; } .popup .popup-inner { position: absolute; top: 50%; left: 50%; border: 1px solid #868686; background-color: #fff; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup .slider-pdp .slick-arrow { display:none !important; } /* Mobile */ @media (max-width: 767px) { .popup .popup-close { top: 16px; right: 10px; } .popup .popup-close span { font-size: 9px; } .popup .popup-close i { margin-left: 10px; } } /* ------------------------------------------------------------ *\ Popup Quickview \* ------------------------------------------------------------ */ .popup-quickview { position: absolute; bottom: 0; left: 0; z-index: -1; opacity: 0; visibility: hidden; background-color: #fff; transition: visibility .4s, opacity .4s; } .popup-quickview.hide { visibility: hidden; opacity: 0; } .popup-quickview .popup-close { position: absolute; top: 10px; right: 10px; z-index: 20; } .popup-quickview.open { opacity: 1; visibility: visible; left: auto; z-index: 20; } /* ------------------------------------------------------------ *\ Popup Quickview Simple \* ------------------------------------------------------------ */ .popup-quickview-simple { bottom: auto; top: 50%; left: 50%; width: 100%; max-width: 1024px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .popup-quickview-simple.open { left: 50%; } /* ------------------------------------------------------------ *\ Popup Pdp Preview \* ------------------------------------------------------------ */ .popup-pdp-preview { overflow: hidden; overflow-y: auto; background-color: #fff; } .popup-pdp-preview .slider-pdp-paging { position: absolute; top: 23px; left: 20px; } /* Tablet Portrait */ @media (max-width: 1023px) { .popup-pdp-preview .slider-pdp { width: 50%; margin: 0 auto; } .popup-pdp-preview .tabs-body.main-images { margin-top:10%; padding:0; } } /* Mobile */ @media (max-width: 767px) { .popup-pdp-preview .slider-pdp-paging { display: none; } .popup-pdp-preview .slider-pdp { width: 100%; padding: 25px 0; } } /* ------------------------------------------------------------ *\ Popup Size Guide \* ------------------------------------------------------------ */ /* ACDC TWEAK size chart PDP popup fix */ .popup-size-guide .popup-inner { max-width: 806px; width: 100%; padding: 94px 34px 64px; } /* Tablet Portrait */ @media (max-width: 1023px) { .popup-size-guide .popup-inner { max-width: 700px; } } /* Mobile */ @media (max-width: 767px) { .popup-size-guide .popup-inner { padding: 45px 0 20px; border: none; } } /* ------------------------------------------------------------ *\ Popup Stock \* ------------------------------------------------------------ */ .popup-stock .popup-inner { max-width: 550px; width: 100%; padding: 63px 24px 45px; } .popup-stock .popup-close { top: 14px; right: 15px; } /* Mobile */ @media (max-width: 767px) { .popup-stock .popup-inner { max-width: none; width: auto; left: 13px; right: 13px; padding: 45px 11px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } /* ------------------------------------------------------------ *\ Popup Video \* ------------------------------------------------------------ */ .popup-video { z-index: 99; } .popup-video .popup-inner { position: absolute; top: 50%; bottom: auto; left: 50%; width: 100%; max-width: 500px; border: none; } .popup-video .popup-close { top: auto; bottom: 100%; margin-bottom: 10px; right: 0; } /* ------------------------------------------------------------ *\ Popup CVV \* ------------------------------------------------------------ */ .popup-cvv { top: 100%; left: -65px; width: 490px; height: auto; padding: 53px 43px 45px; border: 1px solid #868686; margin-top: 14px; background-color: #fff; font-size: 0; letter-spacing: 0; } .popup-cvv figure + figure { margin-top: 27px; } .popup-cvv figure img { display: inline-block; vertical-align: middle; } .popup-cvv figcaption { display: inline-block; padding-left: 15px; vertical-align: middle; } .popup-cvv figcaption h5 { margin-bottom: 0; line-height: 1.54; text-transform: uppercase; } .popup-cvv figcaption p { font-size: 12px; line-height: 1.67; } /* Mobile */ @media (max-width: 767px) { .popup-cvv { left: 0; width: 100%; padding: 30px 25px; } .popup-cvv figure img { max-width: 108px; } .popup-cvv figcaption { width: calc(100% - 108px); } .popup-cvv figcaption p, .popup-cvv figcaption h5 { font-size: 9px; } } /* ------------------------------------------------------------ *\ Post Items \* ------------------------------------------------------------ */ .post-items { list-style: none outside none; } .post-item { display: table; width: 100%; margin-bottom: 68px; } .post-item-image { display: table-cell; width: 450px; } .post-item-image a { display: block; } .post-item-image img { width: 100%; height: auto; } .post-item-content { display: table-cell; padding-left: 66px; vertical-align: middle; text-align: center; } .post-item-content h4 { margin-bottom: 5px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 16px; line-height: 1.88; text-transform: uppercase; text-transform: uppercase; font-weight: 400; letter-spacing: .2em; } .post-item-content h3 { margin-bottom: 8px; font-size: 30px; line-height: 1; text-transform: uppercase; font-weight: 400; letter-spacing: .2em; } .post-item-content .post-item-meta { margin-bottom: 9px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 12px; line-height: 2.5; text-transform: uppercase; letter-spacing: .2em; } .post-item p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.28; letter-spacing: .025em; } /* Tablet Portrait */ @media (max-width: 1023px) { .post-item-image { width: 350px; } .post-item-content { padding-left: 30px; } } /* Mobile */ @media (max-width: 767px) { .post-item { display: block; } .post-item-content, .post-item-image { display: block; width: 100%; } .post-item-content { padding: 15px 8px 0; } } /* ------------------------------------------------------------ *\ Products \* ------------------------------------------------------------ */ .products .products-head { position: relative; font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; letter-spacing: 0; text-align:right; margin-bottom:24px; font-size: 0; } .products .products-view { display: inline-block; vertical-align: middle; margin-right:30px; font-size: 12px; } .products .products-view a { margin: 0 2px; text-decoration: none; } .products .products-view a:hover, .products .products-view a.current { text-decoration: underline; } .products .pagination { display: inline-block; vertical-align: middle; } .products-foot { text-align: right; } .products-foot:after, .products-options:after { content: ''; display: table; clear: both; font-size: 0; } .products-filters-dropdown { visibility: hidden; position: relative; top: 100%; left: 0; z-index: 2; width: 100%; max-height: 0; overflow-y: hidden; border: 1px solid #eaeaea; border-top: none; margin-top: 20px; opacity: 0; background-color: #fff; transition: all .4s; } .products-filters-dropdown.open { visibility: visible; opacity: 1; max-height: 700px; } .products-filters > .list-checkboxes { display: inline-block; vertical-align: middle; font-size: 0; letter-spacing: 0; } .products-filters > .list-checkboxes li { display: inline-block; vertical-align: middle; } .products-filters > .list-checkboxes .checkbox { margin-bottom: 0; } .products-filters > h5 { margin-right: 20px; vertical-align: middle; } .product-filters-links { margin-bottom: 15px; } .product-filters-links > a { display: inline-block; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.3; vertical-align: middle; text-decoration: none; } .product-filters-links > a + a { margin-left: 20px; } .products .prev-list-products { float: left; margin-top: 20px; font-size: 0; text-decoration: none; text-align: left; } .products .next-list-products { float: right; margin-top: 20px; font-size: 0; text-decoration: none; text-align: right; } .products .prev-list-products > span, .products .next-list-products > span { display: inline-block; width: 155px; margin-bottom: 2px; font-size: 12px; line-height: 1.17; color: #000; font-weight: 700; text-transform: uppercase; vertical-align: middle; } .products .prev-list-products > span:first-child, .products .next-list-products > span:first-child { display: block; width: auto; line-height: 2.5; } .products .prev-list-products > figure, .products .next-list-products > figure { display: inline-block; width: 130px; height: auto; vertical-align: middle; } .products .prev-list-products > figure { margin-right: 16px; } .products .next-list-products > figure { margin-left: 16px; } .products .prev-list-products > figure img, .products .next-list-products > figure img { width: 100%; height: auto; } .products .prev-list-products > span ~ span, .products .next-list-products > span ~ span { text-align: center; } /* Tablet Portrait */ @media (max-width: 1023px) { .products .products-head { margin-top: -18px; } .products .products-foot { text-align: center; } } /* Mobile */ @media (max-width: 767px) { .products .products-head { margin-top: 15px; text-align: center; } .products-filters-dropdown { left: -20px; padding: 25px 20px 35px; border: 1px solid #ececec; border-left: none; border-right: none; } .products-filters-dropdown.open { left: -20px; right: -20px; width: auto; margin: 10px 0 0; } .products-filters > h5, .products-filters > .list-checkboxes { margin-bottom: 26px; } .products .prev-list-products > figure, .products .next-list-products > figure { width: 111px; } } /* ------------------------------------------------------------ *\ Products Set Filters \* ------------------------------------------------------------ */ .products-set-filters { display: inline-block; font-size: 12px; vertical-align: middle; } .products-set-filters span, .products-set-filters a { display: inline-block; } .products-set-filters span { margin-right: 10px; } .products-set-filters a { margin-right: 18px; text-decoration: none; } .products-set-filters a:hover { text-decoration: underline; } .products-set-filters i { margin-left: 3px; } /* Tablet Portrait */ @media (max-width: 1023px) { .products-set-filters { float: left; margin-top: -4px; } } /* Mobile */ @media (max-width: 767px) { .products-set-filters { overflow: hidden; position: absolute; top: 100%; left: 0; right: 0; float: none; margin-top: 5px; white-space: nowrap; } } /* ------------------------------------------------------------ *\ Product Shoe \* ------------------------------------------------------------ */ .product-shoe { text-align:center; font-size:12px; } .product-shoe a { text-decoration: none; } .product-shoe a:hover { text-decoration: underline; } .product-shoe p { font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; margin: 0; } .product-shoe h4 { font-weight:400; margin: 5px 0; } .product-shoe.product-shoe-alt { position: relative; top:-70px; left:-60px; } /* Tablet Portrait */ @media (max-width: 1023px) { .product-shoe.product-shoe-alt { top: -70px; left: 0; } } /* ------------------------------------------------------------ *\ Product Alt \* ------------------------------------------------------------ */ .product-alt { text-align:center; } .product-alt h1 { position: relative; display: inline-block; text-transform: uppercase; font-weight:700; line-height:1; letter-spacing: 0; margin: 0; } .product-alt h1 > i { position: absolute; bottom: 100%; left: 100%; margin-bottom: -10px; } .product-alt h1 small { font-size:70px; display:block; } .product-alt h3 { text-transform: uppercase; font-weight:400; } .product-alt h4 { text-transform: uppercase; font-weight:400; } .product-alt h6 { margin-top: 2px; } .product-alt p { margin: 0; } .product-alt .product-actions { margin: 30px 0 0; } .product-alt .product-actions a { font-weight:700; font-size:12px; } .product-alt .product-content { margin: 40px 0 25px 0; } .product-alt .product-title { margin: 4px 0; } .product-alt .product-title a { text-decoration: none; } .product-alt .product-title a:hover { text-decoration: underline; } .product-alt p { font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; font-size:12px; } .product-alt p a { text-decoration: none; } .product-alt p a:hover { text-decoration: underline; } /* Tablet Portrait */ @media (max-width: 1023px) { .product-alt { margin-top: 20px; } .product-alt h1 { font-family: 'Bebas Neue', sans-serif; font-size: 100px; } .product-alt h1 small { font-size: 60px; line-height: 1; letter-spacing: .04em; } .product-alt h6 { margin-bottom: 40px; font-size: 14px; } .product-alt h6 strong { display: block; font-size: 22px; font-weight: 500; } .product-alt .product-content { margin-bottom: 45px; } .product-alt .product-title { font-weight: 700; } } /* ------------------------------------------------------------ *\ Products List \* ------------------------------------------------------------ */ .products-list { font-size: 0; letter-spacing: 0; } .products-list > li { display: inline-block; width: 33.3%; font-size: 15px; list-style: none outside none; vertical-align: top; letter-spacing: 0.15em; transition: width .4s; } .products-list > li.item-wide { display: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .products-list > li:nth-child(3n+3) .popup-quickview, .products-list > li:nth-child(3n+2) .popup-quickview { left: 50%; margin-left: 0; -webkit-transform: translateX(-83%); -ms-transform: translateX(-83%); transform: translateX(-83%); } .products-list > li:nth-child(3n+2) .popup-quickview { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } /* Mobile */ @media (max-width: 767px) { .products-list > li, .products-list > li.item-wide { width: 50%; } .products-list > li:nth-child(even) .popup-quickview { margin-left: 0; left: 50%; -webkit-transform: translateX(-75%); -ms-transform: translateX(-75%); transform: translateX(-75%); } .products-list > li:nth-child(odd) .popup-quickview { left: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /* ------------------------------------------------------------ *\ Products Small List \* ------------------------------------------------------------ */ .products-small-list { margin-right: -1%; } .products-small-list > li { width: 19%; margin-right: 1%; } .products-small-list > li:nth-child(5n+1) .popup-quickview { margin-left: 0; } .products-small-list > li:nth-child(5n+2) .popup-quickview { margin-left: -197px; } .products-small-list > li:nth-child(5n+3) .popup-quickview { margin-left: -394px; } .products-small-list > li:nth-child(5n+4) .popup-quickview { margin-left: -591px; } .products-small-list > li:nth-child(5n+5) .popup-quickview { margin-left: -788px; } /* Tablet Portrait */ @media (max-width: 1023px) { .products-small-list > li { width: 49%; margin-right: 1%; } .products-small-list > li:nth-child(odd) .popup-quickview { left: 50%; margin-left: 0; -webkit-transform: translateX(-25%); -ms-transform: translateX(-25%); transform: translateX(-25%); } .products-small-list > li:nth-child(even) .popup-quickview { left: 50%; margin-left: 0; -webkit-transform: translateX(-75%); -ms-transform: translateX(-75%); transform: translateX(-75%); } } /* Mobile */ @media (max-width: 767px) { .products-small-list { margin-right: -2%; } .products-small-list > li { width: 48%; margin: 0 2% 20px 0; } } /* ------------------------------------------------------------ *\ Products List Grid \* ------------------------------------------------------------ */ .products-list-grid > li { width: 20%; } .products-list-grid > li.item-wide { display: inline-block; width: 60%;} .products-list-grid .product .product-title { padding: 0 8px; font-size: 13px; line-height: 1; } .products-list-grid .product-banner .product-image-inner h3 { font-size: 24px; } .products-list-grid .product-banner .product-image-inner h4 { font-weight: 400; } .products-list-grid .product .product-links { font-size: 13px; } .products-list-grid > li:nth-child(5n+1) .popup-quickview { margin-left: 0; } .products-list-grid > li:nth-child(5n+2) .popup-quickview { margin-left: -100%; } .products-list-grid > li:nth-child(5n+3) .popup-quickview { margin-left: -200%; } .products-list-grid > li:nth-child(5n+4) .popup-quickview { margin-left: -300%; } .products-list-grid > li:nth-child(5n+5) .popup-quickview { margin-left: -400%; } @media (max-width: 1044px) { .products-list-grid > li .list-colors li + li { padding-left: 6px; } } /* ------------------------------------------------------------ *\ Product \* ------------------------------------------------------------ */ .product { position: relative; text-align:center; font-size:12px; margin-bottom: 5px; } .product.show-view { padding-bottom: 505px; } .product p { font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; margin: 0; } .product a { text-decoration: none; } .product a:hover { text-decoration: underline; } .product .product-title { font-weight:400; margin: 7px 0 5px 0; transition: padding .4s; } .product .product-image { position: relative; } .product .product-body { border: 1px solid transparent; border-top: none; padding: 10px 0 35px 0; transition: border-color .3s; } /* ACADACA editing the padding */ .product .product-options { position: absolute; width:100%; bottom:0; background:#fff; visibility: hidden; opacity: 0; padding: 16px 0 6px 0; transition: all .3s; } .product .old-price { display: inline-block; margin-right: 8px; color: #999; letter-spacing: .06em; text-decoration: line-through; } .product .promo { margin-top: 5px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.79; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; } /* ACADACA commenting this out .product:hover .product-options { visibility: visible; opacity: 1; } */ /* ACADACA removing the margin */ .product .product-links { font-size:15px; text-transform: uppercase; font-weight:700; text-transform: uppercase; } .product-banner .product-image { padding-top: 70%; position: relative; margin: 0; } .product-banner .product-image-inner { position: absolute; width:100%; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Tablet Portrait */ @media (max-width: 1023px) { .product p { font-size: 9px; } .product .product-title { padding: 0 10px; font-size: 12px; letter-spacing: .15em; } .product .promo { font-size: 9px; } .product-banner .product-image-inner h3 { font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: .2em; } .product-banner .product-image-inner h4 { font-weight: 400; } .product .product-options { padding: 20px 0 0; } .product .product-body { padding-bottom: 10px; } .product:hover .product-options { /* border: 1px solid #000; border-bottom: none; */ } .product:hover .product-body { border: 1px solid #000; /* border-top: none; */ } } /* Mobile */ @media (max-width: 767px) { .product.show-view { padding-bottom: 890px; } .product .product-body { padding-bottom: 10px; } .product p { font-size: 8px; } .product .product-title { margin-top: 3px; font-size: 9px; } .product .promo { font-size: 7px; } .product .product-links { font-size: 10px; } .product .product-links span { display: block; margin: 5px 0; font-size: 0; } } /* ------------------------------------------------------------ *\ Product Small \* ------------------------------------------------------------ */ .product-small .product-image { overflow: hidden; height: 270px; border: 1px solid #c5c5c5; margin-bottom: 27px; line-height: 268px; } .product-small .product-image a { display: block; } .product-small .product-image img {vertical-align: middle;height: 270px;} .product-small .product-title { max-width: 150px; margin: 5px auto; } .product-small .product-size { margin: 14px 0; text-align:left; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.06em; } /* Tablet Portrait */ @media (max-width: 1023px) { .product-small .product-body, .product-small:hover .product-body { border: none; } } /* Mobile */ @media (max-width: 767px) { .product-small .product-image img {height: 202px;} .product-small .product-image {height: 202px;line-height: 200px;margin-bottom: 12px;} .product-small .product-body { padding: 0; } } /* ------------------------------------------------------------ *\ Products Simple \* ------------------------------------------------------------ */ .products-simple .product p { margin-bottom: 2px; font-size: 10px; text-transform: uppercase; } .products-simple .product p strong { font-size: 12px; } .products-simple .product-actions { margin-top: 10px; } /* ------------------------------------------------------------ *\ Product Quick View \* ------------------------------------------------------------ */ .product-quick-view { position: relative; max-width: 856px; width: 100%; padding: 44px 40px; margin: 0 auto; background-color: #fff; } .product-quick-view .section-product { margin-bottom: 0; } .product-quick-view .section-product .section-images { width: 338px; margin-right: 68px; } .product-quick-view .section-product .section-inner { max-width: 290px; padding-top: 48px; } .product-quick-view .mfp-close { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: url(images/ico-close@2x.png) 0 0 no-repeat; font-size: 0; background-size: 100% 100%; opacity: 1; } .product-quick-view .mfp-close:hover { opacity: .8; } .product-quick-view .form-product .form-row-inline + .form-row-inline { width: 128px; } .product-quick-view .form-product .form-row-inline:last-child { width: 99px; } /* Tablet Portrait */ @media (max-width: 1023px) { .product-quick-view { padding: 20px; } .product-quick-view .section-product .section-images { float: left; margin-right: 38px; } } /* Mobile */ @media (max-width: 767px) { .product-quick-view { padding: 20px 0; } .product-quick-view .section-product .section-images { float: none; width: auto; max-width: 290px; margin: 0 auto; } .product-quick-view .section-product .section-inner { margin: 0 auto; text-align: center; } .product-quick-view .form-body { text-align: center; } .product-quick-view .form-row { text-align: left; } .product-quick-view .section-product .section-images .slider-pdp { padding: 0; } } /* ------------------------------------------------------------ *\ Product Collection \* ------------------------------------------------------------ */ .product-collection { text-align:center; padding: 0 3px; } .product-collection h6 { font-weight:400; margin: 6px 0; font-size:12px; } .product-collection .product-image img { display:block; width:100%; } .product-collection .product-overlay { background: rgba(0,0,0, .5); text-align:center; color: #fff; position: absolute; top:0; left:0; width:100%; height: 100%; opacity: 0; visibility: hidden; transition: all .3s; } .product-collection .product-overlay .product-overlay-inner { position: absolute; width:100%; left:0; top:60%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all .3s; } .product-collection .product-overlay h6 { text-transform: uppercase; font-weight:400; } .product-collection .product-overlay p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; letter-spacing: 0; } .product-collection:hover .product-overlay { visibility: visible; opacity: 1; } .product-collection:hover .product-overlay .product-overlay-inner { top:50%; } @media (max-width: 767px) { .product-collection .product-overlay { position: relative; color: #fff; visibility: visible; opacity: 1; padding-bottom:10px; } .product-collection .product-overlay .product-overlay-inner { position: relative; top:auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .product-collection .product-overlay .btn { display:block; } } /* ------------------------------------------------------------ *\ Proggress \* ------------------------------------------------------------ */ .proggress { display:block; height: 2px; background:#000; position: relative; } .proggress span { position: absolute; top:0; left:0; width:40%; height: 100%; background:#fff; } /* ------------------------------------------------------------ *\ Quote \* ------------------------------------------------------------ */ .quote { margin-bottom: 27px; text-align: center; color: #000; } .quote span { position: absolute; top: 0; left: 50%; display: block; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 43px; line-height: .58; letter-spacing: .075em; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .quote span ~ span { top: auto; bottom: 0; -webkit-transform: translateX(-50%) rotate(180deg); -ms-transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg); } .quote blockquote { position: relative; padding: 15px 0 20px; margin: 0 0 11px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 29px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; } .quote p { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; } .quote.quote-large blockquote { font-size:40px; } .quote.quote-large p { font-size:15px; } .quote.quote-large span { font-size:60px; } /* Mobile */ @media (max-width: 767px) { .quote blockquote { padding-bottom: 3px; font-size: 20px; letter-spacing: .15em; } .quote p { letter-spacing: 0; } } /* ------------------------------------------------------------ *\ Quote Inverse \* ------------------------------------------------------------ */ .quote-inverse { color: #fff; } .quote-inverse span { color: #fff; } .quote-inverse blockquote { letter-spacing: .075em; } /* ------------------------------------------------------------ *\ Quote Bordered \* ------------------------------------------------------------ */ .quote.quote-bordered { border-top:5px solid #000; border-bottom:5px solid #000; padding: 70px 0 45px 0; } .quote.quote-bordered blockquote span { font-size:60px; } .quote.quote-bordered blockquote p { margin-top:10px; font-weight:700; } @media (max-width: 767px) { .quote.quote-bordered { padding: 45px 0; } } /* ------------------------------------------------------------ *\ Quote Small \* ------------------------------------------------------------ */ .quote.quote-small { padding: 0 20px; } .quote.quote-small blockquote { font-size:10px; line-height:1.1; letter-spacing: 0.15em; } .quote.quote-small span { font-size:52px; } .quote.quote-small p { font-size:8px; } @media (max-width: 767px) { .quote.quote-small blockquote { font-size:8px; } } /* ------------------------------------------------------------ *\ Referral Links \* ------------------------------------------------------------ */ .referral-links { margin-top: 78px; font-size: 0; letter-spacing: normal; text-align: center; } .referral-link { position: relative; display: inline-block; width: 450px; vertical-align: top; } .referral-link + .referral-link { margin-left: 20px; } .referral-link img { width: 100%; height: auto; } .referral-link h2 { position: relative; margin-bottom: -15px; font-size: 46px; line-height: 1; } .referral-link .btn-square { position: relative; width: 70px; height: 70px; margin-top: -22px; line-height: 64px; font-size: 12px; } /* Tablet Portrait */ @media (max-width: 1023px) { .referral-link { width: 46%; } .referral-link + .referral-link { margin-left: 2%; } .referral-link h2 { font-size: 40px; } } /* Mobile */ @media (max-width: 767px) { .referral-links { margin-top: 40px; } .referral-link { display: block; width: 100%; margin-bottom: 30px; } .referral-link + .referral-link { margin-left: 0; } .referral-link h2 { font-size: 29px; text-transform: uppercase; } } /* ------------------------------------------------------------ *\ Region \* ------------------------------------------------------------ */ .region { text-align:center; max-width: 245px; margin: 0 auto; } .region .region-head { text-transform: uppercase; } .region .region-head p { margin: 0; line-height: 1; } .region .region-title { font-weight:400; line-height:1; letter-spacing: 0.2em; margin: 10px 0; } .region .region-body { font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; margin-bottom: 20px; letter-spacing: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .region .region-body { letter-spacing: 0; } } /* ------------------------------------------------------------ *\ Scene \* ------------------------------------------------------------ */ .scene img { display:block; width:100%; } .scene.scene-dark { padding-top:100%; position: relative; color: #fff; text-align:center; } .scene.scene-dark h3 { position: absolute; width:100%; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight:400; } .scene.scene-white { padding-top:100%; position: relative; background: #fff; } .scene.scene-white .quote { position: absolute; width:100%; top:50%; left:0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 767px) { .scene.scene-white .quote { padding: 0; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { position: absolute; top:-6px; right:0; background:#fff; max-width: 0; overflow: hidden; transition: all .3s; } .search .search-field { height: 30px; width:100%; padding: 0 30px 0 10px; border:1px solid #000; font-size:12px; text-transform: uppercase; } .search .search-btn { position: absolute; top:0; right:0; height: 30px; width:20px; text-align:center; border:0; background:transparent; } .search.open { max-width:186px; width:186px; } /* ------------------------------------------------------------ *\ Search Results \* ------------------------------------------------------------ */ .search-results { font-size: 0; letter-spacing: 0; text-align: center; } .search-results-inner { position: relative; display: inline-block; } .search-results label { display: inline-block; margin-right: 20px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 16px; line-height: 1.3; letter-spacing: .025em; font-weight: 700; vertical-align: middle; } .search-results .search-field { display: inline-block; height: 32px; width: 186px; padding: 0 25px 0 9px; border: 1px solid #000; font-size: 13px; letter-spacing: .025em; vertical-align: middle; } .search-results .search-field::-webkit-input-placeholder { text-transform: uppercase; } .search-results .search-field::-moz-placeholder { text-transform: uppercase; } .search-results .search-field:-ms-input-placeholder { text-transform: uppercase; } .search-results .search-field::placeholder { text-transform: uppercase; } .search-results .search-btn { position: absolute; top: 50%; right: 7px; z-index: 2; border: none; border-radius: 0; background: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .search-results h4 { font-size: 20px; line-height: 3; text-transform: uppercase; letter-spacing: .2em; font-weight: 400; } .search-results h4 + .search-results-inner { margin-bottom: 20px; } /* Mobile */ @media (max-width: 767px) { .search-results { padding-top: 10px; } .search-results label { display: block; margin: 0 0 8px; } .search-results .search-btn { bottom: 12px; top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .search-results h4 { margin-bottom: 15px; font-size: 15px; line-height: 1; } .search-results h4 + .search-results-inner { margin-bottom: 10px; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section { margin-bottom:56px; } .last-content-block .section { margin-bottom: 0; } .section.gutter-bottom-20 { margin-bottom: 20px; } .section.gutter-bottom-130 { margin-bottom:130px; } .section .section-head { line-height: 1; text-align:center; margin-bottom:-20px; position: relative; z-index: 4; } .section .section-head h6 { margin: 0; letter-spacing: 0.15em; } .section .section-title { line-height:0.9; margin: 0; font-weight:400; letter-spacing: 0.2em; } .section .section-title-large { font-size: 46px; } .section .section-actions { text-align:center; } .section .section-actions a { text-decoration: underline; text-transform: uppercase; } .section .section-actions a:hover { text-decoration: none; } .section .section-actions { padding: 15px 0; font-size:13px; font-weight:700; } /* Mobile */ @media (max-width: 767px) { .section .section-head { margin-bottom: 5px; } .section br { display: none; } .section .section-actions { position: relative; z-index: 20; padding: 0; margin-top: -14px; } .section .section-actions a:not(.btn) { display: inline-block; height: 40px; padding: 0 11px; border: 2px solid #000; background-color: #fff; font-size: 13px; line-height: 36px; letter-spacing: .15em; text-decoration: none; } .section .section-title-large { margin-bottom: 20px; font-size: 25px; } } /* ------------------------------------------------------------ *\ Section Primary \* ------------------------------------------------------------ */ .section-careers .section-head { text-align:center; } .section-careers .section-title { text-align:center; font-size:40px; margin-bottom:18px; letter-spacing: 0.2em; } .section-careers .section-content { font-size:12px; letter-spacing: 0; font-family: 'Roboto', 'Helvetica', sans-serif; } .section-careers .section-content p { text-align:justify; margin-bottom:1.4em; line-height:1.3; } .section-careers .section-content p:last-child { margin-bottom:0; } .section-careers .section-content a:not(.btn) { font-weight:700; text-decoration: underline; letter-spacing: 0.15em; text-transform: uppercase; } .section-careers .section-aside { position: absolute; top:0; right:30px; width:190px; padding-top:55px; font-family: 'Roboto', 'Helvetica', sans-serif; } @media (max-width: 1023px) { .section-careers .section-aside { position: relative; right:auto; width: auto; } .section-careers .section-content p { text-align:center; line-height:14px; } } @media (max-width: 767px) { .section-careers .section-title { font-size:28px; } } /* ------------------------------------------------------------ *\ Section Secondary \* ------------------------------------------------------------ */ .section-secondary { color: #fff; margin-bottom:60px; padding-top:23px; } .section-secondary .section-head { text-align:center; margin-bottom:15px; } .section-secondary .section-head p { font-size:12px; line-height:1; font-family: 'Roboto', 'Helvetica', sans-serif; max-width: 500px; display: inline-block; vertical-align: middle; letter-spacing: 0; } .section-secondary .section-title { font-size:34px; font-weight:400; letter-spacing: 0.2em; } .section-secondary .section-title small { font-size:12px; display:block; letter-spacing: 0.15em; } .section-secondary .section-image img { display:block; width:100%; } .section-secondary .section-image-caption { display:block; font-size:11px; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; margin: 20px 0; text-align:center; } /* ------------------------------------------------------------ *\ Section Aside Inverse \* ------------------------------------------------------------ */ .section-aside-inverse { color: #fff; } /* ------------------------------------------------------------ *\ Section Region \* ------------------------------------------------------------ */ /* .section-region { margin-bottom:150px; } */ /* Tablet Portrait */ @media (max-width: 1023px) { .section-region { margin-bottom: 40px; } } /* Mobile */ @media (max-width: 767px) { .section-region { margin-bottom: 80px; } .section-region .section-head { margin-bottom: 15px; text-align: center; } } /* ------------------------------------------------------------ *\ Sectio Bags \* ------------------------------------------------------------ */ .section-bags { position: relative; } /* ------------------------------------------------------------ *\ Section Fashion \* ------------------------------------------------------------ */ .section-fashion { position: relative; /* padding-bottom:57px; background: rgb(211,61,46); background: linear-gradient(to bottom, rgba(211,61,46,1) 0%,rgba(225,70,144,1) 49%,rgba(225,70,144,1) 100%); */ background: white; overflow: hidden; } .section-fashion .section-head { text-align:center; text-transform: uppercase; padding: 34px 0 10px 0; } .section-fashion .section-head h6 { letter-spacing: 0.15em; font-weight:400; } .section-fashion .section-body { position: relative; margin: 0 80px; } .section-fashion .section-actions { text-align:center; margin-top:-35px; position: relative; z-index: 33; } @media (max-width: 1044px) { .section-fashion .section-body { position: relative; margin: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-fashion .section-head { padding: 20px 0 0; margin-bottom: 50px; } .section-fashion .section-head h6 { margin-bottom: 20px; } .section-fashion .section-body { margin: 0 -10px; text-align: center; } .section-fashion .section-actions { padding: 0 140px 0 57px; } .section-fashion .btn-square { width: 76px; height: 76px; line-height: 72px; } .section-fashion .btn-square .text { font-size: 16px; line-height: 1.1; letter-spacing: 0; } } /* Mobile */ @media (max-width: 767px) { .section-fashion { background: none; } .section-fashion .section-head, .section-fashion .section-body { padding: 0; } .section-fashion .section-head { margin-bottom: 20px; } .section-fashion .section-head h6 { padding: 0 20px; } .section-fashion .section-body { margin: 0; } .section-fashion .section-actions { position: relative; z-index: 99; padding: 0 10px; margin-top: 60px; } .section-fashion .btn-square { height: 40px; width: auto; padding: 0 10px; font-size: 13px; line-height: 36px; top: -75px; position: relative; } .section-fashion .btn-square .text { font-size: 13px; letter-spacing: .15em; } } /* ------------------------------------------------------------ *\ Section Shoes \* ------------------------------------------------------------ */ /* .section-shoes { padding-bottom:60px; } */ .section-shoes .section-head { text-align:center; position: relative; top: 143px; position: relative; z-index: 1; } .section-shoes .section-head a { font-size:13px; font-weight:700; } .section-shoes .section-head h6 { margin: 0; } .section-shoes .section-title { margin-bottom:10px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-shoes .section-head { top: 90px; } } /* Mobile */ @media (max-width: 767px) { .section-shoes { text-align: center; } .section-shoes .section-head { position: static; } .section-shoes .btn { min-width: 142px; height: 40px; padding: 0 10px; border-width: 2px; margin-top: 10px; line-height: 36px; font-size: 13px; font-weight: 700; text-align: center; } } /* ------------------------------------------------------------ *\ Section Numbers \* ------------------------------------------------------------ */ .section-numbers { margin:100px 0; } .section-numbers .section-head { text-align:center; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-numbers { margin: 50px 0; text-align: center; } .section-numbers .section-head { margin-bottom: 25px; } } /* ------------------------------------------------------------ *\ Section Product \* ------------------------------------------------------------ */ .section-product { margin-bottom: 120px; } .section-product:after { } .section-product .section-images { float: left; width: 542px; margin-right: 32px; } .section-product .section-inner { overflow: hidden; max-width: 290px; padding-top: 78px; } .section-product .section-head { text-align:center; margin-bottom:10px; } .section-product .section-head h6 { font-weight:400; line-height:1.25; margin-bottom:11px; } .section-product .section-head h6 small { display: block; margin-top: 4px; font-size:10px; } .section-product .section-head h4 { font-family: 'Roboto', 'Helvetica', sans-serif; font-weight: 700; } .section-product .section-title { margin-bottom: 3px; font-size: 18px; font-weight:700; letter-spacing: 0.1em; } .section-product .section-actions { text-align: center; } .section-product .section-actions .btn { margin-bottom: 11px; } .section-product .section-actions p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1.15; color: #000; letter-spacing: .06em; } .section-product .section-actions p a { text-decoration: underline; } .section-product .section-actions p a:hover { text-decoration: none; } @media(max-width: 1090px) { .section-product .section-images { width: 650px; } } /* Small Desktop */ @media (max-width: 1044px) { .section-product .section-images { width: 540px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-product { position: relative; margin-bottom: 80px; } .section-product .section-images { float: none; display: block; width: 522px; max-width: 100%; margin: 0 auto; } .section-product .section-inner { max-width: 404px; margin: 0 auto; } } /* Mobile */ @media (max-width: 767px) { .section-product .section-head h6 { font-size: 12px; } .section-product .section-images .slider-pdp { position: relative; padding: 0 60px; } .section-product .section-images .slick-slider { position: static; } .section-product .section-inner { padding-top: 20px; } } /* ------------------------------------------------------------ *\ Section Products \* ------------------------------------------------------------ */ .section-products.show-view .popup-quickview { position: relative; z-index: 1; opacity: 1; visibility: visible; } /* ------------------------------------------------------------ *\ Section Article \* ------------------------------------------------------------ */ .section-article { display: table; width: 100%; padding: 0 29px; margin-bottom: 68px; } .section-article .section-image { display: table-cell; width: 450px; vertical-align: top; } .section-article .section-image img { width: 100%; height: auto; } .section-article .section-body { display: table-cell; padding: 0 40px; text-align: center; vertical-align: middle; } .section-article .section-body p { margin-bottom: 20px; font-size: 12px; line-height: 1.28; letter-spacing: .025em; } .section-article h2 { font-size:46px; } .section-article-big { padding: 0; } .section-article-big .section-body { padding: 0 20px; } .section-article-big .section-image { width:50%; } .section-article-big h2 { font-size:60px; letter-spacing: 0.2em; margin-bottom:22px; } .section-article-big .section-content { max-width:290px; margin: 0 auto; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-article { padding: 0; margin-bottom: 58px; } .section-article .section-image { width: 390px; } .section-article .section-image img { width: 100%; height: auto; } .section-article .section-body { padding: 0 20px; } .section-article br { display: none; } .section-article h2 { font-size: 26px; } } /* Mobile */ @media (max-width: 767px) { .section-article { display: block; } .section-article .section-image, .section-article .section-body { display: block; width: 100%; } .section-article .section-body { padding: 25px 10px; } .section-article h2 { font-size: 35px; } .section-article p { font-size: 10px; } } /* ------------------------------------------------------------ *\ Section Related \* ------------------------------------------------------------ */ .section-related { margin-bottom: 70px; } .section-related .section-actions { padding: 15px 55px; font-size: 0; text-align: right; } .section-related .section-actions a { display: inline-block; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1; text-decoration: none; font-weight: 400; letter-spacing: .15em; } .section-related .section-actions a:hover { text-decoration: underline; } .section-related .section-actions a + a { margin-left: 18px; } .section-related .section-actions .current { text-decoration: underline; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-related .section-actions { padding: 15px 10px; text-align: center; } } /* Mobile */ @media (max-width: 767px) { .section-related {margin-bottom: 20px; } .section-related .section-actions a:not(.btn) { padding: 0; border: none; font-size: 12px; } } /* ------------------------------------------------------------ *\ Section Links \* ------------------------------------------------------------ */ .section-links { position: relative; text-align: center; } .section-links .section-head { font-size: 0; } .section-links .section-title { margin-bottom: 15px; font-size: 30px; } .section-links .btn { letter-spacing: .05em; font-weight: 700; } .section-links .btn + .btn { margin-left: 22px; } /* Mobile */ @media (max-width: 767px) { .section-links { margin: 0 -5px; } .section-links .shell { padding: 0; } .section-links .section-title { font-size: 25px; font-weight: 400; letter-spacing: .2em; } .section-links .btn { padding: 5px 15px; font-size: 11px; } .section-links .btn + .btn { margin-left: 14px; } } /* ------------------------------------------------------------ *\ Section Grid \* ------------------------------------------------------------ */ .section-grid { position: relative; } /* ------------------------------------------------------------ *\ Section Collection \* ------------------------------------------------------------ */ .section-collection { padding: 28px 0 0 18px; color: #000; } .section-collection-center { position: relative; } .section-collection-inverse { color: #fff; } .section-collection:after { content: ''; display: table; clear: both; font-size: 0; } .section-collection .section-aside { float: left; width: 123px; padding-top: 74px; } .section-collection-center .section-aside { position: absolute; top: 0; left: 20px; } .section-collection .section-content { overflow: hidden; } .section-collection-center .section-content { margin: 0 auto; }/*Ticket #195*/ .section-collection .section-title { margin-bottom: 8px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 29px; line-height: 1; color: #000; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; text-align: center; } .section-collection-inverse .section-title { color: #fff; } .section-collection .section-subtitle { margin: 108px 0 6px; font-size: 25px; color: #fff; letter-spacing: .2em; font-weight: 400; text-align: center; } .section-collection h3 { margin-bottom: 26px; font-size: 29px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; } @media(max-width: 1240px) { .section-collection-center .section-content { max-width: 740px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-collection { padding: 0; } .section-collection .section-aside { float: none; display: block; width: auto; text-align: center; } .section-collection-center .section-aside { position: static; } } /* Mobile */ @media (max-width: 767px) { .section-collection { padding: 23px 0 96px; margin: 0 -8px; } .section-collection .section-title { font-size: 15px; line-height: 1.33; letter-spacing: .15em; } .section-collection .section-subtitle { margin-top: 37px; font-size: 15px; letter-spacing: .15em; } } /* ------------------------------------------------------------ *\ Section Collection Secondary \* ------------------------------------------------------------ */ .section-collection-secondary { max-width: 780px; color: #fff; margin: 0 auto 46px; } .section-collection-secondary .section-title { text-align:center; font-size:34px; text-transform: uppercase; font-weight:400; line-height:1; position: relative; display: inline-block; vertical-align: middle; } .section-collection-secondary .section-title small { font-size:12px; position: absolute; bottom:100%; width:100%; letter-spacing: 0.1em; } .section-collection-secondary .section-head { position: relative; text-align:center; margin-bottom:20px; } .section-collection-secondary .section-head-options { position: absolute; top:0; z-index: 1; text-align:left; } .section-collection-secondary .section-head-options-left { left:0; } .section-collection-secondary .section-head-options-right { right:0; } .section-collection-secondary .section-head .btn { font-size:12px; font-weight:400; text-transform: capitalize; padding: 6px 14px; } @media (max-width: 1023px) { .section-collection-secondary { padding: 0; } } @media (max-width: 767px) { .section-collection-secondary:last-child { margin-bottom:150px; } .section-collection-secondary .section-title small { font-size:inherit; position:static; display:block; } .section-collection-secondary .section-head-options:after { } .section-collection-secondary .section-head-options { position: relative; margin:10px 0; } .section-collection-secondary .section-head-options .btn { width:49%; float:left; } .section-collection-secondary .section-head-options .btn + .btn { margin-left:2%; } .section-collection-secondary .section-head-options .btn { display:block; } .section-collection-secondary .section-title { font-size:25px; } } /* ------------------------------------------------------------ *\ Section Designer \* ------------------------------------------------------------ */ .section-designer { padding-top: 54px; text-align: center; } .section-designer .section-head { margin-bottom: 14px; } .section-designer .section-subtitle { font-size: 12px; font-weight: 400; letter-spacing: .15em; } /* Mobile */ @media (max-width: 767px) { .section-designer { padding-top: 30px; } } /* ------------------------------------------------------------ *\ Section Gifts \* ------------------------------------------------------------ */ .section-gifts { padding: 53px 0 40px; } .section-gifts .section-head { margin-bottom: 49px; text-align: center; } .section-gifts .section-title { font-size: 40px; line-height: 1.1; } .section-gifts .section-body { max-width: 884px; margin: 0 auto; } .section-gifts .section-body:after { content: ''; display: table; clear: both; font-size: 0; } .section-gifts .section-image { float: left; width: 398px; margin-right: 54px; } .section-gifts .section-image figure { overflow: hidden; border-radius: 12px; margin-bottom: 20px; } .section-gifts .section-image img { width: 100%; height: auto; } .section-gifts .section-content { overflow: hidden; } .section-gifts .section-content p { margin-bottom: 35px; font-size: 14px; line-height: 1.25; letter-spacing: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-gifts .section-image { width: 300px; } } /* Mobile */ @media (max-width: 767px) { .section-gifts { padding: 20px 5px 40px; } .section-gifts .section-head { margin-bottom: 20px; } .section-gifts .section-title { font-size: 25px; } .section-gifts .section-image { float: none; display: block; width: auto; margin-right: 0; } .section-gifts .section-content { max-width: none; text-align: center; } .section-gifts .section-content p { margin: 0 auto 20px; } } /* ------------------------------------------------------------ *\ Section Checkout \* ------------------------------------------------------------ */ .section-checkout { padding: 48px 0 20px; } .section-checkout-gutters { padding: 61px 28px 20px 33px; } .section-checkout .shell { padding: 0 22px; } .section-checkout .shell:after { content: ''; display: table; clear: both; font-size: 0; } .section-checkout .section-title { margin-bottom: 17px; font-size: 40px; line-height: 1.1; text-transform: uppercase; font-weight: 400; letter-spacing: .2em; } .section-checkout .section-content { float: left; width: 690px; margin-right: 72px; } .section-checkout .section-content-small { width: 576px; margin-right: 178px; } .section-checkout .section-aside { overflow: hidden; max-width: 210px; padding-top: 61px; } .section-checkout .section-aside-fluid { max-width: none; padding-top: 91px; } .section-checkout .section-aside .widgets { border-top: 5px solid #000; } .section-checkout .section-aside-fluid .widgets { border: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-checkout .shell { padding: 0 20px; } .section-checkout .section-content { width: calc(100% - 230px); margin-right: 20px; } .section-checkout .section-aside { max-width: 190px; } } /* Mobile */ @media (max-width: 767px) { .section-checkout { padding: 20px 0 80px; } .section-checkout-gutters { padding: 15px 0 60px; } .section-checkout .section-title { font-size: 30px; } .section-checkout .section-content { float: none; width: auto; margin-right: 0; } .section-checkout .section-aside { max-width: none; padding-top: 0; } } /* ------------------------------------------------------------ *\ Section Login \* ------------------------------------------------------------ */ .section-login { min-height: 712px; padding-top: 53px; } .section-login .section-head { max-width: 964px; margin: 0 auto 52px; } .section-login .section-head > a { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 16px; line-height: 1.34; letter-spacing: 0; font-weight: 700; text-decoration: none; } .section-login .section-head > a:hover { text-decoration: underline; } .section-login .section-body { max-width: 964px; margin: 0 auto; font-size: 0; letter-spacing: 0; } /* Mobile */ @media (max-width: 767px) { .section-login { padding: 20px 10px 50px; } .section-login .section-head { margin-bottom: 30px; } .section-login .section-head > a { font-size: 13px; } .section-login .section-title { margin-top: 25px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; } } /* ------------------------------------------------------------ *\ Section Order Details \* ------------------------------------------------------------ */ .section-order-details { padding-top: 54px; } .section-order-details-small { max-width: 678px; margin: 0 auto; } .section-order-details .section-head { position: relative; padding-bottom: 46px; margin-bottom: 46px; text-align: center; } .section-order-details .section-head-alt { padding-bottom: 20px; } .section-order-details .section-head:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 680px; height: 1px; background-color: #999; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-order-details .section-head-alt:after { display: none; } .section-order-details .section-title { margin-bottom: 25px; font-size: 40px; line-height: 1; text-align: center; } .section-order-details .section-head > p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; letter-spacing: 0; } .section-order-details .section-head > p a { font-weight: 700; } .section-order-details .section-subtitle { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; line-height: 1.07; text-transform: uppercase; letter-spacing: .15em; } .section-order-details .section-body { max-width: 878px; margin: 0 auto 138px; } .section-order-details .section-foot { max-width: 878px; margin: 0 auto; } .section-order-details .section-foot .section-subtitle { padding-bottom: 20px; border-bottom: 3px solid #000; margin-bottom: 19px; } .section-order-details .section-foot p { margin-bottom: 17px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.42; letter-spacing: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-order-details { padding: 20px 0 60px; } .section-order-details .section-head { margin-bottom: 30px; } .section-order-details .section-title { font-size: 20px; } .section-order-details .section-head:after { left: 0; right: 0; width: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .section-order-details .section-body { margin-bottom: 60px; } .section-order-details .section-foot .section-subtitle { padding-bottom: 0; border-bottom: none; } } /* ------------------------------------------------------------ *\ Section Posts \* ------------------------------------------------------------ */ .section-posts { padding-top: 13px; border-top: 5px solid #000; margin-top: 16px; } .section-posts .section-head { margin-bottom: 35px; text-align: center; } .section-posts .section-title { font-size: 40px; line-height: 1.5; text-transform: uppercase; } /* Mobile */ @media (max-width: 767px) { .section-posts { padding-top: 20px; } .section-posts .section-head { margin-bottom: 20px; } .section-posts .section-title { font-size: 30px; } } /* ------------------------------------------------------------ *\ Section Account \* ------------------------------------------------------------ */ .section-account { padding: 65px 0 94px; } .section-account .section-order-details { padding-top: 0; } .section-account .shell:after { content: ''; display: table; clear: both; font-size: 0; letter-spacing: 0; } .section-account .section-aside { float: left; width: 226px; padding: 2px 0 0 30px; } .section-account .section-content { overflow: hidden; max-width: 584px; } .section-account .section-content-fluid { max-width: none; } .section-account .section-content-inner { padding-bottom: 42px; border-bottom: 1px solid #000; margin-bottom: 25px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; letter-spacing: 0; } .section-account .section-content-inner-without-bd { padding-bottom: 20px; border: none; } .section-account .section-content > .btn { min-width: 290px; margin-bottom: 10px; } .section-account .section-title { margin-bottom: 15px; font-size: 40px; line-height: 1.1; letter-spacing: .2em; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-account .section-aside { width: 150px; padding-left: 0; } } /* Mobile */ @media (max-width: 767px) { .section-account { padding: 20px 6px 30px; } .section-account .section-content > .btn { max-width: 100%; } .section-account .section-aside { float: none; display: block; width: 100%; margin-bottom: 25px; } .section-account .section-title { font-size: 25px; } .section-account .section-content { max-width: none; } } /* ------------------------------------------------------------ *\ Section Account Alt \* ------------------------------------------------------------ */ .section-account.section-account-alt .section-content { max-width: 680px; } .section-account.section-account-alt .section-aside { width:171px; } .section-account.section-account-alt .section-title { letter-spacing: 0.1em; } @media (max-width: 767px) { .section-account.section-account-alt .section-aside { width:100%; } } /* ------------------------------------------------------------ *\ Section Blog \* ------------------------------------------------------------ */ .section-blog .section-inner { max-width: 816px; margin: auto; padding: 0 10px; } /* ------------------------------------------------------------ *\ Section Category \* ------------------------------------------------------------ */ .section-category { padding: 65px 0; } .section-category .section-head { text-align:center; margin-bottom:50px; } .section-category .section-title { font-size:40px; } .section-category .section-actions { text-align:center; padding: 16px 0; } .section-category .section-foot { text-align:center; padding: 0 90px; color: rgba(0,0,0, .5); font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; letter-spacing: 0; font-weight:700; margin: 30px 0; } @media (max-width: 767px) { .section-category .section-foot { padding: 0; } } /* ------------------------------------------------------------ *\ Section Experience \* ------------------------------------------------------------ */ .section-experience { margin-bottom:56px; } .section-experience .section-title { text-align:center; font-size:40px; line-height:1.2; margin-bottom:7px; } .section-experience .section-content { font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; text-align:justify; letter-spacing: 0; line-height:1.3; margin-bottom:28px; } @media (max-width: 767px) { .section-experience .section-title { font-size:25px; } } /* ------------------------------------------------------------ *\ Section Timeline \* ------------------------------------------------------------ */ .section-timeline .section-body { overflow: hidden; padding-top: 8px; margin-bottom:86px; } .section-timeline .section-actions { text-align:center; font-weight:700; letter-spacing: 0.05em; } .section-timeline .section-actions h2 { text-transform: uppercase; font-size:30px; letter-spacing: 0.2em; margin-bottom:20px; } .section-timeline .section-actions .btn { min-width: 160px; margin: 5px 10px; } @media (max-width: 767px) { .section-timeline .section-body { margin-bottom:40px; } .section-timeline .section-actions { margin-bottom:20px; } .section-timeline .section-actions h2 { font-size:20px; } .section-timeline .section-actions .btn { min-width: 0; } } /* ------------------------------------------------------------ *\ Section Video \* ------------------------------------------------------------ */ .section-video { position: relative; color: #fff; text-align:center; } .section-video .section-head { width:100%; letter-spacing: 0.2em; text-transform: uppercase; line-height:1; z-index: 1; position: absolute; left:0; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .section-video .section-title { text-transform: uppercase; font-weight:400; font-size:34px; } .section-video .proggress { position: absolute; bottom: 10px; z-index: 1; left:15px; right:15px; } .section-video .btn-play { position: absolute; top:50%; left:50%; margin: -38px 0 0 -38px; opacity: 0.5; transition: all .3s; } .section-video .btn-play:hover { opacity: 1; } .section-video .section-image img { width: 100%; height: auto; } /* ------------------------------------------------------------ *\ Section Store \* ------------------------------------------------------------ */ .section-store { padding: 0 25px; } .section-store .section-head { text-align:center; margin-bottom:70px; } .section-store .section-title { font-weight:400; } @media (max-width: 767px) { .section-store { padding: 0; margin: 0 -10px; } } /* ------------------------------------------------------------ *\ Section Steps \* ------------------------------------------------------------ */ .section-steps { margin-bottom:94px; } .section-steps h6 { text-align:center; font-weight:400; letter-spacing: 0.15em; margin-bottom:25px; } /* ------------------------------------------------------------ *\ Section Copy \* ------------------------------------------------------------ */ .section-copy .section-title { font-size:18px; text-transform: uppercase; letter-spacing: 0.2em; text-align:center; margin-bottom:20px; } .section-copy .section-body { font-family: 'Roboto', 'Helvetica', sans-serif; text-align:justify; letter-spacing: 0; } .section-copy h4 { text-transform: uppercase; letter-spacing: 0.15em; } @media (max-width: 767px) { .section-copy { margin-bottom:100px; } .section-copy .section-title { font-size:28px; } .section-copy h4 { font-size:12px; } .section-copy .section-body { font-size:12px; } } /* ------------------------------------------------------------ *\ Section Sitemap \* ------------------------------------------------------------ */ .section-sitemap .section-title { text-align:center; margin-bottom:18px; font-size:40px; } /* ------------------------------------------------------------ *\ Section Services \* ------------------------------------------------------------ */ .section-services { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; letter-spacing: 0; } .section-services .section-head { text-align:center; padding: 30px 0; } .section-services .section-body { padding-top:53px; } .section-services .section-body:after { } .section-services .section-aside { float:left; } .section-services .section-content { overflow: hidden; padding: 27px 0 0 25px; } .section-services h4 { text-transform: uppercase; margin: 0; letter-spacing: 0.15em; word-spacing: -0.2em; } .section-services .btn { min-width: 160px; } @media (max-width: 767px) { .section-services { margin-bottom:100px; } .section-services .section-body { padding-top:0; } .section-services .section-content { padding: 0; text-align:center; } } /* ------------------------------------------------------------ *\ Section Returns \* ------------------------------------------------------------ */ .section-returns { letter-spacing: 0; font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; margin-bottom:150px; } .section-returns .section-head { text-align:center; margin-bottom:40px; } .section-returns .section-head .btn { font-size:12px; letter-spacing: 0.05em; } .section-returns .section-title { font-size:40px; letter-spacing: 0.2em; margin-bottom:20px; } .section-returns .section-subtitle { margin-bottom:25px; font-weight:400; } .section-returns h4 { text-transform: uppercase; margin-bottom:18px; text-align:center; } @media (max-width: 767px) { .section-returns .section-title { font-size:25px; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider { position: relative; margin-bottom: 48px; color: #000; text-align: center; } .slider-inverse { color: #fff; } .slider-without-arrows { padding-top: 30px; margin-bottom: 70px; } .slider .slider-clip-gutter-60 { position: relative; padding: 40px 63px 0; } .slider .slider-clip-gutter-60 .slick-slider { position: static; } .slider .slide-image { margin-bottom: 8px; } .slider img { width: 100%; height: auto; } .slider h3 { margin-bottom: 5px; font-size: 29px; line-height: 1; color: #000; font-weight: 400; letter-spacing: .2em; } .slider-inverse h3 { color: #fff; } .slider p { margin-bottom: 7px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0; font-weight: 400; } .slider .slick-arrow { position: absolute; top: 250px; z-index: 4; width: 58px; height: 58px; border: none; background-color: #000; background-size: 18px 33px; background-repeat: no-repeat; background-position: center center; font-size: 0; letter-spacing: 0; line-height: 58px; text-align: center; transition: opacity .4s; } .slider-inverse .slick-arrow { background-color: #fff; } .slider .slick-arrow:hover { opacity: .8; } .slider .slick-prev { left: 0; background-image: url(images/ico-arrow-left-white@2x.png); } .slider-inverse .slick-prev { background-image: url(images/ico-arrow-left-black@2x.png); } .slider .slick-next { right: 0; background-image: url(images/ico-arrow-right-white@2x.png); } .slider-inverse .slick-next { right: 0; background-image: url(images/ico-arrow-right-black@2x.png); } .slider .slider-clip-gutter-60 .slick-prev { left: -27px; margin-top: 40px; } .slider .slider-clip-gutter-60 .slick-next { right: -27px; margin-top: 40px; } .slider-without-arrows .slick-arrow { visibility: hidden; display: none; opacity: 0; z-index: -1; } .slider-without-arrows .slide-caption { margin-top: 28px; } .slider-without-arrows h4 { margin-bottom: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .15em; } .slider-without-arrows .btn { font-weight: 700; } .slider.slider-centered .slick-arrow { top:50%; margin-top: -29px; } /* Desktop */ @media (min-width: 1024px) { .slider .slick-arrow { top: 50%; }/*Ticket #195*/ } /* Tablet Portrait */ @media (max-width: 1023px) { .slider .slider-clip-gutter-60 { padding: 20px 0; } } /* Mobile */ @media (max-width: 767px) { .slider { margin-bottom: 46px; } .slider-without-arrows { padding-top: 20px; margin-bottom: 20px; } .slider-gutter-bottom-0 { margin-bottom: 0; } .slider .slider-clip-gutter-60 { padding: 10px 0; margin: 0 -20px; } .slider .slide-image { margin-bottom: 3px; } .slider h3 { font-size: 25px; line-height: 1.14; } .slider p { margin-bottom: 13px; font-size: 13px; } .slider .btn-link { display: block; height: 27px; border: 2px solid #000; font-size: 13px; line-height: 23px; letter-spacing: .15em; text-decoration: none; } .slider-inverse .btn-link { border-color: #fff; } .slider-without-arrows h4 { letter-spacing: .1em; } } /* ------------------------------------------------------------ *\ Slider Intro \* ------------------------------------------------------------ */ .slider-intro, .slider-intro .slide { position: relative; } .slider-intro .slide { overflow: hidden; } .slider-intro .slide-image { transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s; } .slider-intro .slide-image-primary { width: 58.5%; margin-left: 15%; margin-top: -95px; position: relative; z-index: 1; } .slider-intro .slide-image-primary-large { position: relative; width: 75%; padding: 120px 0 232px; margin: 0; } .slider-intro .slide-image-secondary { width: 26%; padding-top: 145px; } .slider-intro .slide-image-secondary-small { position: absolute; top: 0; right: 0; z-index: 2; padding-top: 172px; width: 35%; } .slider-intro .slide-image-tertiary { position: absolute; top: 0; right: 0; width: 58%; } .slider-intro .slide-image img { display: block; width: 100%; } .slider-intro .slide-caption { position: absolute; top: 70px; z-index: 3; width: 220px; margin: 38px 0 0 25%; text-align: center; transition: top 1.5s; } .slider-intro .slide-caption-middle { position: absolute; top: 100%; right: 15%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-intro .slide-caption-alt { top: 100%; width: 230px; margin-left: 9%; } .slider-intro.animated-finished .slide-caption, .slider-intro.animated .slide-caption { top: 70px; } .slider-intro.animated .slide-caption-middle, .slider-intro.animated-finished .slide-caption-middle { top: 100%; } .slider-intro.animated-finished .slick-current .slide-caption, .slider-intro.animated .slick-current .slide-caption { top: 0; } .slider-intro.animated .slick-current .slide-caption-middle, .slider-intro.animated-finished .slick-current .slide-caption-middle { top: 50%; } .slider-intro .slide-title { font-weight: 400; text-transform: uppercase; margin-bottom: 30px; font-size:26px; margin-top:3px; } .slider-intro .slide-caption-alt h6 { text-transform: uppercase; letter-spacing: 0.15em; margin-bottom:0; } .slider-intro .slide-caption-alt h4 { margin-bottom: 5px; font-weight: 400; text-transform: uppercase; } .slider-intro .slide-caption-alt h4 ~ h4 { margin-bottom: 35px; } .slider-intro .slide-caption-alt h2 { font-size: 30px; letter-spacing: .2em; } .slider-intro .slider-actions { position: absolute; top: 50%; z-index: 2; width: 100%; margin-top: -100px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-intro .slider-actions a { width: 58px; height: 58px; text-align:center; line-height: 58px; background: #000; display: inline-block; transition: background .3s, margin .6s; transition-delay: 5s; } .slider-intro .slider-actions a:hover { background: #fff; } .slider-intro .slider-actions .slider-prev { float: left; margin-left: -58px; } .slider-intro .slider-actions .slider-next { float: right; margin-right: -58px; } .slider-intro .slider-actions a.slick-disabled { visibility: hidden; opacity: 0; } .slider-intro.animated .slider-actions .slider-prev, .slider-intro.animated-finished .slider-actions .slider-prev { margin-left: 0; } .slider-intro.animated-finished .slider-actions .slider-prev { transition-delay: 0s; } .slider-intro.animated .slider-actions .slider-next, .slider-intro.animated-finished .slider-actions .slider-next { margin-right: 0; } .slider-intro.animated-finished .slider-actions .slider-next { transition-delay: 0s; } .slider-intro .gutter-left-460 { -webkit-transform: translateX(460px); -ms-transform: translateX(460px); transform: translateX(460px); } .slider-intro .gutter-left-120 { -webkit-transform: translateX(120px); -ms-transform: translateX(120px); transform: translateX(120px); } .slider-intro .gutter-left-860 { -webkit-transform: translateX(860px); -ms-transform: translateX(860px); transform: translateX(860px); } .slider-intro .slick-current .gutter-left-860, .slider-intro .slick-current .gutter-left-120, .slider-intro .slick-current .gutter-left-460 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-intro .slider-actions { margin-top: -30px; } .slider-intro .slider-actions a { width: 46px; height: 46px; line-height: 46px; } .slider-intro .slide-image-tertiary { top: 58px; } .slider-intro .slide-image-secondary { padding-top: 160px; } .slider-intro .slide-caption { margin: 58px 0 0 17%; } .slider-intro .slide-caption-alt { margin: -20px 0 0 9%; } .slider-intro .slide-image-primary-large { padding-top: 82px; } .slider-intro .slide-image-secondary-small { top: 0; padding-top: 122px; } } /* Mobile */ @media (max-width: 767px) { .slider-intro .slide-image-primary { width: 100%; margin: 0; } .slider-intro .slider-actions { display: none; margin-top: 0; } .slider-intro .slide { padding-bottom: 30px; } .slider-intro .gutter-left-460 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slider-intro .gutter-left-120 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slider-intro .gutter-left-860 { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .slider-intro .slide-caption-middle { -webkit-transform: none; -ms-transform: none; transform: none; } .slider-intro .slide-caption { position: static; margin: 0; width: auto; text-align: center; } .slider-intro .slide-caption h6 { font-size: 13px; font-weight: 400; } .slider-intro .slide-caption h2 { font-size: 25px; letter-spacing: .2em; font-weight: 400; } .slider-intro .slide-caption-alt h4 ~ h4 { margin-bottom: 10px; } .slider-intro .slide-caption .btn-square { position: static; width: auto; height: 40px; line-height: 36px; } .slider-intro .slide-title { margin-bottom: 15px; } .slider-intro .slide-caption-alt { position: static; width: auto; max-width: 370px; padding: 0; margin: 0 auto; } .slider-intro .slide-caption-alt br { display: none; } .slider-intro .slide-caption-alt .btn-square { background-color: #fff; } .slider-intro .slide-image-primary-large { width: 100%; padding: 0; } .slider-intro .slide-caption .btn-square { position: absolute; top: 100%; left: 50%; z-index: 99; margin-top: -50px; background-color: #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .slider-intro p br { display: none; } .slider-intro + .slider-counter { position: absolute; bottom: 10px; right: 47%; margin-top: 5px; background-color: #fff; } } /* ------------------------------------------------------------ *\ Slider Intro Secondary Small \* ------------------------------------------------------------ */ /* Tablet Portrait */ @media (max-width: 1023px) { .slider-intro-secondary-small { top: 0; padding-top: 122px; } } /* ------------------------------------------------------------ *\ Slider Intro Simple \* ------------------------------------------------------------ */ .slider-intro-simple { width: auto; margin: 0; } .slider-intro-simple .slide { position: relative; } .slider-intro-simple .slide-caption { position: absolute; top: 100%; right: 15%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-intro-simple.animated .slide-caption, .slider-intro-simple.animated-finished .slide-caption { top: 50%; } .slider-intro-simple h2 { font-size: 40px; line-height: .93; letter-spacing: .2em; text-transform: uppercase; } .slider-intro-simple h2 small { display: block; margin-bottom: 12px; font-size: 15px; letter-spacing: .15em; } .slider-intro-simple p { margin-bottom: 30px; font-size: 15px; line-height: 1.13; text-transform: uppercase; letter-spacing: .15em; } .slider-intro-simple .slider-actions { bottom: auto; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-intro-simple .btn-square { background-color: #fff; } } /* Mobile */ @media (max-width: 767px) { .slider-intro-simple .slide-caption { position: static; padding: 10px; -webkit-transform: none; -ms-transform: none; transform: none; } .slider-intro-simple br { display: none; } .slider-intro-simple h2 { margin-bottom: 10px; font-size: 20px; } .slider-intro-simple h2 small { font-size: 10px; } .slider-intro-simple p { margin-bottom: 15px; font-size: 12px; } .slider-intro-simple .btn-square { width: auto; height: auto; line-height: 30px; } } /* ------------------------------------------------------------ *\ Slider Model \* ------------------------------------------------------------ */ .slider-model { position: relative; max-width:220px; margin: auto; padding: 0 30px; } .slider-model .slide { opacity: 0; transition: opacity .4s; } .slider-model .slide.slick-current { opacity: 1; } .slider-model .slider-actionz a { position: absolute; top:50%; } .slider-model .slider-actionz .slider-prev { left:0; } .slider-model .slider-actionz .slider-next { right:0; } .slider-model .slide-image img { display:block; width:100%; } /* Mobile */ @media (max-width: 767px) { .slider-model { margin-bottom: 20px; } .slider-model .slider-counter { left: 0; right: auto; margin-top: 20px; font-size: 9px; white-space: nowrap; } } /* ------------------------------------------------------------ *\ Slider Category \* ------------------------------------------------------------ */ .slider-category { margin-top: 30px; text-align:center; position: relative; font-size:9px; text-transform: uppercase; letter-spacing: 0.15em; } .slider-category .slide { padding: 4px 0; } .slider-category a { font-size: 10px; text-decoration: none; transition: font-size .5s; } .slider-category .slick-list { overflow: hidden; height: 160px !important; padding: 60px 0 20px !important; } .slider-category .slick-current a { font-size: 26px; letter-spacing: 3px; } .slider-category .slider-actionz a { position: absolute; left:0; width:100%; display:block; background:#fff; transition: visibility .4s, opacity .4s; } .slider-category .slider-prev { top:-22px; } .slider-category .slider-next { bottom:-15px; } .slider-category .slick-disabled { visibility: hidden; opacity: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-category { max-width: 250px; margin: 30px auto 0; } .slider-category .slick-list { height: 160px !important; } .slider-category .slick-current a { font-size: 22px; } } /* Mobile */ @media (max-width: 767px) { .slider-category { max-width: none; margin-top: 40px; text-align: center; } } /* ------------------------------------------------------------ *\ Sldier Hood \* ------------------------------------------------------------ */ .slider-hood { position: relative; padding-top:84px; } .slider-hood .slide { position: relative; } .slider-hood .slide-image img { width:100%; } .slider-hood .slider-clip { width:614px; } .slider-hood .slider-clip-primary { position: relative; z-index: 2; } .slider-hood .slider-clip-secondary { position: absolute; top:42px; left:66px; z-index: 1; } .slider-hood .slider-clip-tertiary { position: absolute; top:0; left:132px; } .slider-hood .slider-actions { position: absolute; top:50%; left:0; width:100%; } .slider-hood .slider-actions a { display: inline-block; width:58px; height: 58px; text-align:center; line-height:58px; background:#000; } .slider-hood .slider-actions a:hover { background-color: #fff; } .slider-hood .slider-prev { float: left; margin-left: -76px; } .slider-hood .slider-next { float: right; margin-right: -76px; } .slider-hood .rotate-text { position: absolute; top: 70px; left: -76px; font-size: 12px; line-height: 1.33; letter-spacing: .15em; text-transform: uppercase; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: 25% 30%; -ms-transform-origin: 25% 30%; transform-origin: 25% 30%; } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-hood { position: relative; display: inline-block; margin: 0 152px 0 58px; } .slider-hood .slider-clip { width: 550px; } .slider-hood .slider-clip-secondary { top: -40px; left: 60px; } .slider-hood .slider-clip-tertiary { top: -76px; left: 120px; } .slider-hood .slider-actions a { position: relative; z-index: 10; width: 46px; height: 46px; line-height: 46px; } .slider-hood .slider-prev { margin-left: -67px; } .slider-hood .slider-next { margin-right: -150px; } } /* Mobile */ @media (max-width: 767px) { .slider-hood { display: block; width: auto; padding: 0 14px; margin: 0; } .slider-hood .slider-clip { width: 100%; } .slider-hood .slider-actions .slick-arrow { position: absolute; top: 50%; width: 9px; height: 17px; border: none; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-hood .slider-actions .slider-prev { left: 0; margin: 0; background: transparent url(images/ico-arrow-left@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-hood .slider-actions .slider-next { right: 0; margin: 0; background: transparent url(images/ico-arrow-right@2x.png) 0 0 no-repeat; background-size: 100% 100%; } } /* ------------------------------------------------------------ *\ Slider Pdp \* ------------------------------------------------------------ */ .slider-pdp { position: relative; } .slider-pdp .slide { text-align: center; } .slider-pdp img { display: inline-block; } .slider-pdp .slick-arrow { text-decoration: none; position: absolute; top: 50%; z-index: 9; width: 21px; height: 37px; border: none; border-radius: 0; background: none; margin-top: -47px; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-pdp .slick-prev { left: 0; background: url(images/ico-slider-left.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-pdp .slick-next { right: 0; background: url(images/ico-slider-right.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-pdp-without-arrows .slick-arrow { visibility: hidden; display: none; opacity: 0; z-index: -1; } .slider-pdp .slide-image a { display: block; } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-pdp .slick-arrow { text-decoration: none; position: absolute; top: 50%; z-index: 9; width: 21px; height: 37px; border: none; border-radius: 0; background: none; margin-top: -47px; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-pdp .slick-prev { left: 0; background: url(images/ico-slider-left.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-pdp .slick-next { right: 0; background: url(images/ico-slider-right.png) 0 0 no-repeat; background-size: 100% 100%; } } /* Mobile */ @media (max-width: 767px) { .slider-pdp-alt .slick-arrow { text-decoration: none; position: absolute; top: 50%; z-index: 9; width: 10px; height: 17px; border: none; border-radius: 0; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-pdp-alt .slick-prev { left: 0; background: url(images/ico-arrow-left@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-pdp-alt .slick-next { right: 0; background: url(images/ico-arrow-right@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-pdp .slider-counter { position: absolute; bottom: 20px; right: 0; font-size: 8px; } } /* ------------------------------------------------------------ *\ Slider Counter \* ------------------------------------------------------------ */ .slider-counter { position: absolute; top: 100%; right: 10px; margin-top: 5px; } /* ------------------------------------------------------------ *\ Slider Mobile \* ------------------------------------------------------------ */ .slider-mobile { position: relative; padding: 0 10px; margin: 0; } .slider-mobile .slick-slide { padding: 0; margin: 0 4px; } .slider-mobile .slick-arrow { position: absolute; top: 50%; width: 9px; height: 17px; border: none; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-mobile .slick-prev { left: 0; background: url(images/ico-arrow-left@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-mobile .slick-next { right: 0; background: url(images/ico-arrow-right@2x.png) 0 0 no-repeat; background-size: 100% 100%; } /* ------------------------------------------------------------ *\ Slider Mobile Simple \* ------------------------------------------------------------ */ .slider-mobile-simple { position: relative; padding: 0 10px; margin: 0; } .slider-mobile-simple .slide { padding: 0 15px; text-align: center; } .slider-mobile-simple img { display: inline-block; } .slider-mobile-simple .slick-slide { padding: 0; margin: 0 4px; } .slider-mobile-simple .slick-arrow { position: absolute; top: 50%; z-index: 10; width: 9px; height: 17px; border: none; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-mobile-simple .slick-prev { left: 0; background: url(images/ico-arrow-left@2x.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-mobile-simple .slick-next { right: 0; background: url(images/ico-arrow-right@2x.png) 0 0 no-repeat; background-size: 100% 100%; } /* ------------------------------------------------------------ *\ Slider Products \* ------------------------------------------------------------ */ .slider-products { position: relative; z-index: 1; max-width: 916px; margin: -10px auto 0; } .slider-products .slider-prev, .slider-products .slider-next { position: absolute; top: 50%; margin-top: -50px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: all .4s; } .slider-products .slider-next { right: -40px; } .slider-products .slider-prev { left: -40px; } .slider-products .slick-disabled { visibility: hidden; opacity: 0; z-index: -1; } .slider-products .slide { margin: 0 4px; } .slider-products .product-image { border: 1px solid #c6c6c6; text-align: center; } .slider-products .product-image img { display: inline-block; } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-products { padding: 0 30px; } .slider-products .slider-prev { left: -20px; } .slider-products .slider-next { right: -20px; } } /* Mobile */ @media (max-width: 767px) { .slider-products .slider-prev { left: -10px; } .slider-products .slider-next { right: -10px; } } /* ------------------------------------------------------------ *\ Slider Simple Products \* ------------------------------------------------------------ */ .slider-simple-products { padding: 0 30px; } .slider-simple-products .slides { margin-right: 0; } .slider-simple-products .slick-track { margin: 0 auto; } .slider-simple-products .slide a { min-width: 146px; border: 1px solid #c4c4c4; margin: 0 7px; } .slider-simple-products .slide img { width: 100%; height: auto; } .slider-simple-products .slick-arrow { text-decoration: none; position: absolute; top: 50%; z-index: 9; width: 21px; height: 37px; border: none; border-radius: 0; background: none; font-size: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-simple-products .slick-prev { left: -40px; background: url(images/ico-slider-left.png) 0 0 no-repeat; background-size: 100% 100%; } .slider-simple-products .slick-next { right: -40px; background: url(images/ico-slider-right.png) 0 0 no-repeat; background-size: 100% 100%; } /* Mobile */ @media (max-width: 767px) { .slider-simple-products .slide a { max-width: 142px; margin: 0 auto; } } /* ------------------------------------------------------------ *\ Slider Colection \* ------------------------------------------------------------ */ .slider-colection { position: relative; } .slider-colection .slide { list-style:none; list-style-position: outside; position: relative; } .slider-colection .slider-actions a { text-decoration: none; position: absolute; top:50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-colection .slider-prev { left: -29px; } .slider-colection .slider-next { right:-29px; } .slider-colection .slider-actions .slick-disabled { visibility: hidden; opacity: 0; } @media (max-width: 767px) { .slider-colection { padding: 0 20px; } .slider-colection .slider-prev { left: 0; } .slider-colection .slider-next { right: 0; } } /* ------------------------------------------------------------ *\ Slider Seasons \* ------------------------------------------------------------ */ .slider-seasons { position: relative; padding-bottom:33px; } .slider-seasons .slider-clip { max-width: 460px; margin: 0 auto; position: relative; } .slider-seasons .slide-image img { display:block; width:100%; } .slider-seasons .slider-next { position: absolute; top:50%; right:-46px; margin-top:-16px; } .slider-seasons .slider-prev { position: absolute; top:50%; left:-46px; margin-top:-16px; } .slider-seasons .slider-head { position: absolute; top:0; right:-55px; color: #fff; text-align:center; top:50%; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.1em; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top:-33px; letter-spacing: 0; } .slider-seasons .slider-head h6 { font-size:13px; font-weight:400; margin-bottom:15px; letter-spacing: 0; } .slider-seasons .slider-head h3 { font-size:20px; font-weight:400; letter-spacing: 0; margin-bottom:20px; } .slider-seasons .slider-head a { font-weight:700; letter-spacing: 0; font-size:13px; } @media (max-width: 1023px) { .slider-seasons .slider-clip { max-width:100%; margin: 0 50px; } .slider-seasons .slider-head { width:60px; right:-10px; margin: 15px 0 0 0; } .slider-seasons .slider-head h3 { margin: 0; } } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { margin-top:47px; } .socials li { list-style:none; list-style-position: outside; display: inline-block; vertical-align: middle; } .socials li + li { padding-left:88px; } .socials a { transition: opacity .4s; } .socials a:hover { opacity: .8; } /* Tablet Portrait */ @media (max-width: 1023px) { .socials { margin-top: 30px; } .socials ul { text-align: justify; } .socials ul:after { content: '' ; display: inline-block; width: 100%; } .socials li + li { padding-left: 0; } } /* Mobile */ @media (max-width: 767px) { .socials { padding: 0 10px; margin: 20px 0; } } /* ------------------------------------------------------------ *\ Socials Secondary \* ------------------------------------------------------------ */ .socials-secondary { margin-bottom: 25px; } .socials-secondary ul { list-style: none outside none; font-size: 0; letter-spacing: 0; text-align: center; } .socials-secondary li { display: inline-block; vertical-align: middle; } .socials-secondary li + li { margin-left: 34px; } .socials-secondary i { opacity: .25; transition: opacity .4s; } .socials-secondary a:hover i { opacity: 1; } .socials-secondary span { display: block; padding-top: 5px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.36; color: #bfbfbf; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } /* ------------------------------------------------------------ *\ Socials Tertiary \* ------------------------------------------------------------ */ .socials-tertiary { overflow: hidden; border:1px solid #c3c3c3; padding: 9px 20px; display: inline-block; vertical-align: middle; } .socials-tertiary .socials-label { font-size:10px; text-transform: uppercase; font-weight:700; display: inline-block; vertical-align: middle; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.03em; } .socials-tertiary ul { display:block; overflow: hidden; display: inline-block; vertical-align: middle; } .socials-tertiary ul li { list-style:none; list-style-position: outside; display: inline-block; vertical-align: middle; padding-left:27px; } .socials-tertiary a { display: inline-block; vertical-align: middle; } /* ------------------------------------------------------------ *\ Store \* ------------------------------------------------------------ */ .store { font-size:12px; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0; margin-bottom:68px; } .store .store-head { margin-bottom:18px; } .store .store-body { margin-bottom:28px; } .store .store-body h6 { text-transform: none; margin: 0; } .store .store-image { padding-bottom:22px; } .store .store-image img { display:block; width:100%; } .store .store-title { letter-spacing: 0.15em; } .store .store-actions { overflow: hidden; } .store .store-actions ul { display: table; width:100%; } .store .store-actions li { list-style:none; list-style-position: outside; display: table-cell; vertical-align: top; padding: 0 9px; } .store .store-actions li:first-child { padding-left:0; } .store .store-actions li:last-child { padding-right:0; } .store .store-actions .btn { display:block; font-size:12px; padding: 6px 2px; letter-spacing: 0; min-width: 140px; } @media (max-width: 1023px) { .store { padding: 0 20px; } .store .store-actions li { display: inline-block; padding: 0; margin:5px 10px; } .store .store-actions .btn { padding:6px 8px; min-width: 0; } .store .store-image { margin: 0 -20px; } .store .store-actions ul { margin: 0 -10px; } } /* Store Small */ .store.store-small { font-size:12px; } .store.store-small .store-actions .btn { display: inline-block; min-width: 160px; } .store.store-small .store-actions li { display:block; padding: 6px 0; } .store.store-small .store-image { padding-bottom:28px; } @media (max-width: 1023px) { .store.store-small { padding: 0; text-align:center; } .store.store-small .store-image { margin: 0; } } /* ------------------------------------------------------------ *\ Subscribe \* ------------------------------------------------------------ */ .subscribe { position: relative; border-bottom:1px solid #000; font-size: 0; padding-bottom:14px; margin-bottom:8px; width:334px; max-width: 100%; } .subscribe.success { border-bottom: none; } .subscribe:after { content: ''; display: table; clear: both; font-size: 0; } .subscribe h5 { text-transform: uppercase; letter-spacing: 0.1em; margin-bottom:20px; } .subscribe label { text-transform: uppercase; } .subscribe .subscribe-field { border:0; width:70%; font-size: 15px; float: left; } .subscribe .subscribe-btn { width:30%; font-size: 15px; float: left; border:0; background:transparent; text-transform: uppercase; letter-spacing: 0.05em; text-align: right; } .subscribe .form-error { position: absolute; top: 100%; right: 0; margin-top: 8px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 14px; color: #e8242d; max-width: 50%; } .subscribe .form-success { font-size: 15px; color: #333; letter-spacing: .05em; } /* Tablet Portrait */ @media (max-width: 1023px) { .subscribe { padding-bottom: 8px; width: auto; margin-bottom: 4px; } .subscribe .subscribe-field { font-size: 13px; } .subscribe .subscribe-btn { font-size: 13px; float: right; text-align: right; } .subscribe .form-error, .subscribe .form-success { font-size: 12px; } .subscribe .form-error { right: auto; left: 80px; } } /* Mobile */ @media (max-width: 767px) { .subscribe .subscribe-btn, .subscribe .subscribe-field { font-size: 9px; } .subscribe .form-error { left: 0; font-size: 8px; } } /* ------------------------------------------------------------ *\ Subscribe Inverse \* ------------------------------------------------------------ */ .subscribe-inverse { border-color: #fff; } .subscribe-inverse .subscribe-field { background: none; } /* ------------------------------------------------------------ *\ Subscribe Newsletter \* ------------------------------------------------------------ */ .subscribe-newsletter { max-width: 358px; margin: 0 auto; text-align: center; color: #fff; } .subscribe-newsletter-head { margin-bottom: 13px; } .subscribe-newsletter h2 { margin-bottom: 15px; font-size: 40px; color: #fff; font-weight: 400; text-transform: uppercase; letter-spacing: 0.10em; } .subscribe-newsletter h4 { margin-bottom: 26px; font-size: 15px; color: #fff; letter-spacing: .2em; font-weight: 400; } .subscribe-newsletter .form-row { margin-bottom: 24px; text-align: right; } .subscribe-newsletter .form-row:after { content: ''; display: table; clear: both; font-size: 0; } .subscribe-newsletter .form-row > .form-label { float: left; font-weight: 400; } .subscribe-newsletter .field-alt { height: 32px; padding: 0; border-color: #fff; background: none; } .subscribe-newsletter .btn + .btn { margin-top: 4px; } /* Mobile */ @media (max-width: 767px) { .subscribe-newsletter h2 { font-size: 20px; } .subscribe-newsletter h4 { font-size: 10px; } } /* ------------------------------------------------------------ *\ Tabs \* ------------------------------------------------------------ */ .tab { display: none; } .tab.current { display: block; } /* ------------------------------------------------------------ *\ Tabs Details \* ------------------------------------------------------------ */ .tabs-details { margin-bottom: 28px; } .tabs-details .tabs-nav { margin-bottom: 10px; } .tabs-details .tabs-nav ul { display: table; width: 100%; table-layout: fixed; list-style: none outside none; } .tabs-details .tabs-nav li { display: table-cell; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.36; color: #000; letter-spacing: .1em; text-align: center; } .tabs-details .tabs-nav a { position: relative; text-decoration: none; } .tabs-details .tabs-nav a:before { content: ''; position: absolute; top: 100%; left: 0; width: 0; height: 2px; margin-top: 1px; background-color: #000; } .tabs-details .tabs-nav li:hover a:before, .tabs-details .tabs-nav .current a:before { width: 100%; } .tabs-details .tabs-nav li:first-child { text-align: left; } .tabs-details .tabs-nav li:last-child { text-align: right; } .tabs-details .tab p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; letter-spacing: .025em; text-align: justify; font-weight: 400; } /* ------------------------------------------------------------ *\ Tabs Simple \* ------------------------------------------------------------ */ .tabs-simple > .tabs-head { margin-bottom: 39px; font-size: 0; text-align: center; letter-spacing: 0; } .tabs-simple > .tabs-head > .tabs-nav { display: inline-block; } .tabs-simple > .tabs-head > .tabs-nav ul { list-style: none outside none; } .tabs-simple > .tabs-head > .tabs-nav li { display: inline-block; vertical-align: middle; } .tabs-simple > .tabs-head > .tabs-nav li + li { margin-left: 56px; } .tabs-simple > .tabs-head > .tabs-nav a { position: relative; font-size: 40px; line-height: 1.13; text-transform: uppercase; text-decoration: none; letter-spacing: .2em; } .tabs-simple > .tabs-head > .tabs-nav a:after { content: ''; position: absolute; top: 100%; left: 0; width: 0; height: 3px; background-color: #000; transition: width .4s; } .tabs-simple > .tabs-head > .tabs-nav .current a:after { width: 100%; } .tabs-simple > .tabs-head { text-align:center; margin: 33px 0 39px 0; } .tabs-simple > .tabs-head > .tabs-nav ul { font-size: 0; } .tabs-simple > .tabs-head > .tabs-nav li { display: inline-block; vertical-align: middle; font-size: 24px; text-transform: uppercase; padding: 0 40px; } .tabs-simple > .tabs-head > .tabs-nav li + li { margin-left: 0; } .tabs-simple > .tabs-head > .tabs-nav a { font-size: 24px; text-decoration: none; } /* Mobile */ @media (max-width: 767px) { .tabs-simple > .tabs-head { margin-bottom: 20px; } .tabs-simple > .tabs-head > .tabs-nav a { font-size: 35px; } .tabs-simple > .tabs-head > .tabs-nav li + li { margin-left: 20px; } } /* ------------------------------------------------------------ *\ Tabs Default \* ------------------------------------------------------------ */ .tabs-default-alt { padding: 0 27px; } .tabs-default .tabs-head { margin-bottom: 31px; } .tabs-default-fluid .tabs-head { margin-bottom: 10px; } .tabs-default .tabs-nav { padding: 2px 20px; background-color: #000; } .tabs-default-fluid .tabs-nav { padding: 2px 0; } .tabs-default .tabs-nav ul { display: table; width: 100%; table-layout: fixed; list-style: none outside none; } .tabs-default-fluid .tabs-nav ul { table-layout: inherit; } .tabs-default-alt .tabs-nav ul { display: block; text-align: center; } .tabs-default .tabs-nav li { display: table-cell; font-size: 12px; line-height: 3.08; color: #fff; letter-spacing: .2em; text-transform: uppercase; text-align: center; } .tabs-default-alt .tabs-nav li { display: inline-block; } .tabs-default-fluid .tabs-nav li { padding: 0 10px; } .tabs-default-alt .tabs-nav li + li { margin-left: 54px; } .tabs-default .tabs-nav a { position: relative; display: inline-block; padding: 5px 0; text-decoration: none; } .tabs-default .tabs-nav a:after { content: ''; position: absolute; bottom: 7px; left: 0; width: 0; height: 3px; background-color: #fff; transition: width .4s; } .tabs-default .tabs-nav .current a:after { width: 100%; } .tabs-default .tabs-body { padding: 0 65px; } .tabs-default-fluid .tabs-body { padding: 0; } .tabs-default-alt .tabs-body { padding: 0; } /* Only hover on non-mobile*/ @media(min-width: 768px) { .tabs-simple > .tabs-head > .tabs-nav li:hover a:after { width: 100%; } .tabs-default .tabs-nav li:hover a:after { width: 100%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .tabs-default .tabs-body { padding: 0; } .tabs-default-alt .tabs-body { padding: 0 10px; } .tabs-default-alt { padding: 0; } } /* Mobile */ @media (max-width: 767px) { .tabs-default .tabs-nav { overflow: hidden; padding: 0 10px; text-align: center; } .tabs-default .tabs-nav ul { display: block; padding: 0; margin-right: -30px; } .tabs-default .tabs-nav li { display: inline-block; margin-right: 30px; text-align: center; } } /* ------------------------------------------------------------ *\ Tabs Stores \* ------------------------------------------------------------ */ .tabs-location { margin: 57px 0 57px 0; } .tabs-location .tabs-head { text-align:center; padding-bottom:55px; } .tabs-location .tabs-head h6 { text-align:center; margin: 0; font-weight:400; } .tabs-location .tabs-nav { font-size:40px; text-transform: uppercase; letter-spacing: 0.2em; margin: 10px 0; } .tabs-location .tabs-nav li { list-style:none; list-style-position: outside; display: inline-block; padding: 0 40px; } .tabs-location .tabs-nav a { text-decoration: none; } .tabs-location .tabs-nav .current a { text-decoration: underline; } /* ------------------------------------------------------------ *\ Tabs Chart \* ------------------------------------------------------------ */ .tabs-chart > .tabs-head { text-align:center; margin:33px 0 39px 0; } .tabs-chart > .tabs-head li { list-style:none; list-style-position: outside; display: inline-block; vertical-align: middle; font-size:24px; text-transform: uppercase; padding: 0 40px; } .tabs-chart > .tabs-head a { text-decoration: none; } .tabs-chart > .tabs-head .current a { text-decoration: underline; } /* ------------------------------------------------------------ *\ Tabs Inline \* ------------------------------------------------------------ */ .tabs-inline { font-size:12px; } .tabs-inline .tabs-head { background:#000; color: #fff; text-transform: uppercase; text-align:center; } .tabs-inline .tabs-nav { overflow: hidden; } .tabs-inline .tabs-head ul { display: table; width:50%; float:left; margin: 0; } .tabs-inline .tabs-head li { display: table-cell; vertical-align: middle; padding: 18px 0 15px 0; } .tabs-inline .tabs-head li a { text-decoration: none; border-bottom:3px solid transparent; display: inline-block; } .tabs-inline .tabs-head li.current a { border-bottom-color: #fff; } .tabs-inline table { font-family: 'Roboto', 'Helvetica', sans-serif; margin-top:10px; table-layout: fixed; } .tabs-inline th { text-transform: uppercase; } .tabs-inline th { vertical-align: top; text-align:center; padding:9px 0; letter-spacing: 0.01em; } .tabs-inline td { vertical-align: top; text-align:center; padding:12px 0; letter-spacing: 0.01em; } .tabs-inline tr:nth-child(odd) td { background:#e5e5e5; padding:6px 0; } @media (max-width: 767px) { .tabs-inline .tabs-head ul { float:none; width: auto; display:block; } .tabs-inline .tabs-head li { display: inline-block; letter-spacing: 0.02em; } .tabs-inline .tabs-head li + li { padding-left:55px; } .tabs-inline tr:nth-child(odd) td { background:transparent; } } /* ------------------------------------------------------------ *\ Tabs Images \* ------------------------------------------------------------ */ .tabs-images .tab { text-align:center; } /* ------------------------------------------------------------ *\ Table Size \* ------------------------------------------------------------ */ .table-size table { table-layout: fixed; } .table-size th, .table-size td { text-align: center; } .table-size th { padding: 8px 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; vertical-align: top; } .table-size tr:nth-child(even) { background-color: #e5e5e5; } .table-size td { padding: 6px 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1; letter-spacing: .075em; text-transform: uppercase; font-weight: 400; vertical-align: top; } /* Mobile */ @media (max-width: 767px) { .table-size tr:nth-child(even) { background: none; } .table-size th { font-size: 9px; } .table-size td { font-size: 9px; } } /* ------------------------------------------------------------ *\ Table Cart \* ------------------------------------------------------------ */ .table-cart { border-top: 5px solid #000; margin-bottom: 40px; } .table-cart .table-body { margin-bottom: 34px; } .table-cart th { padding: 23px 0 11px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1; letter-spacing: .1em; text-align: left; text-transform: uppercase; font-weight: 400; } .table-cart td { padding: 0 0 9px 0; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 13px; line-height: 1; letter-spacing: .06em; font-weight: 400; vertical-align: top; } .table-cart td:last-child { padding-right: 0; text-align: right; } .table-cart td + td { padding: 30px 33px 9px 0; } .table-cart td span, .table-cart td > a { line-height: 2.5; transition: color .4s; } .table-cart td > a { position: relative; padding-bottom: 2px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; font-size: 12px; color: #9e9e9e; letter-spacing: .15em; font-weight: 700; text-decoration: none; } .table-cart td > a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #9e9e9e; } .table-cart td > a:hover { color: #000; text-decoration: none; } .table-cart .select { min-width: 51px; height: 30px; border: 1px solid #d0d0d0; } .table-cart .select-holder .error-message { overflow: hidden; position: absolute; top: 100%; left: 0; margin-top: 25px; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; } /* Tablet Portrait */ @media (max-width: 1023px) { .table-cart td { padding-right: 0; } .table-cart th + th, .table-cart td + td { padding-right: 10px; letter-spacing: 0; } .table-cart .select-holder .error-message { max-width: 260px; margin-top: 10px; } } /* Mobile */ @media (max-width: 767px) { .table-cart { padding-top: 25px; } .table-cart thead { display: none; } .table-cart tbody, .table-cart tr, .table-cart td { display: block; padding-bottom: 0; } .table-cart td + td { padding: 0; } .table-cart td:last-child { padding-bottom: 15px; text-align: left; } .table-cart td > a { font-size: 10px; text-transform: uppercase; color: #000; } .table-cart .cart-product .form-label { margin-bottom: 0; font-weight: 400; } } /* ------------------------------------------------------------ *\ Table Default \* ------------------------------------------------------------ */ .table-default + .table-default { margin-top: 80px; } .table-default thead tr { border-bottom: 5px solid #000; text-align: left; } .table-default th { padding-bottom: 10px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; } .table-default th.offset-left-55 { padding-left: 55px; } .table-default td { padding: 23px 0; border-bottom: 1px solid #000; font-size: 13px; line-height: 1.16; letter-spacing: .06em; vertical-align: top; } .table-default td.text-center { padding: 23px 20px; } .table-default td > span { padding-right: 10px; color: #999; } .table-default .table-head { margin-bottom: 20px; text-transform: uppercase; } .table-default .table-foot { padding: 25px 30px 0; font-size: 0; letter-spacing: 0; text-align: right; } .table-default .table-foot ul { display: inline-block; max-width: 214px; width: 100%; } .table-default .table-foot ul li { overflow: hidden; } .table-default .table-foot ul span, .table-default .table-foot ul strong { float: left; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.98; letter-spacing: .06em; } .table-default .table-foot ul span + span, .table-default .table-foot ul strong + strong { float: right; } .table-default .table-actions { text-align:center; padding: 40px 0; max-width:290px; margin: 0 auto; letter-spacing: 0.1em; } .table-default .table-actions a:not(.btn) { font-size:15px; font-weight:700; text-transform: uppercase; text-decoration: none; } /* Mobile */ @media (max-width: 767px) { .table-default table, .table-default thead, .table-default tbody, .table-default tr, .table-default td, .table-default th { display: block; } .table-default td { padding: 15px 0; border: none; } .table-default + .table-default { margin-top: 56px; } .table-default thead { margin-bottom: 15px; } .table-default .table-head { margin-bottom: 5px; } .table-default .table-head h4 { font-size: 12px; } .table-default .table-foot { padding: 25px 0 0; border-top: 5px solid #000; margin-top: 15px; } .table-default .table-foot ul { display: block; max-width: none; } .table-default .table-foot ul span, .table-default .table-foot ul strong { font-size: 13px; } } /* ------------------------------------------------------------ *\ Table Account \* ------------------------------------------------------------ */ .table-account { margin-bottom: 63px; } .table-account .table-head { margin-bottom: 32px; } .table-account .table-title { font-size: 30px; line-height: 1.47; text-transform: uppercase; font-weight: 400; } .table-account .table-head p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; letter-spacing: 0; } .table-account .table-body { padding-bottom: 6px; } .table-account-alt .table-body { border-bottom: 1px solid #000; } .table-account thead { border-bottom: 1px solid #000; } .table-account th { padding-bottom: 5px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 9px; text-align: left; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; } .table-account td { padding-bottom: 20px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.37; text-transform: uppercase; vertical-align: top; } .table-account-alt td { padding-bottom: 40px; } .table-account-alt td:last-child { width: 180px; } .table-account td + td { padding-left: 10px; } .table-account td p { margin-bottom: 0; letter-spacing: 0.1em; } .table-account td > a { font-weight: 700; letter-spacing: 0.1em; } .table-account td strong { display: block; letter-spacing: 0.1em; } .table-account td .btn { max-width: 162px; margin-bottom: 5px; letter-spacing: 0; } .table-account td .link { font-size: 9px; line-height: 1; letter-spacing: .1em; opacity: .65; transition: opacity .4s; } .table-account td .link:hover { opacity: 1; } .table-account .table-foot { padding-top: 10px; border-top: 1px solid #000; text-align: center; } .table-account .table-foot .link { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.3; font-weight: 700; } /* Mobile */ @media (max-width: 767px) { .table-account { margin-bottom: 40px; } .table-account .table-title { font-size: 15px; font-weight: 700; } .table-account td { padding: 10px 0; font-size: 9px; } .table-account td + td { padding-left: 0; } .table-account td:last-child { width: 120px;} .table-account td .btn { display: inline-block; font-size: 9px; letter-spacing: .05em; } .table-account .table-foot .link { font-size: 9px; } } @media (max-width: 767px) { .table-grid:after { } .table-grid-col { float:left; padding-right:20px; width:100px; } .table-grid-col + .table-grid-col { width:145px; } /*.table-grid-col .form-label { text-transform: uppercase; font-family: $font-family-roboto; font-size:8px; font-weight:700; margin-bottom:5px; display:block; }*/ .table-grid h5 { text-transform: uppercase; font-size:8px; font-family: 'Roboto', 'Helvetica', sans-serif; font-weight:400; } } /* ------------------------------------------------------------ *\ Table Returns \* ------------------------------------------------------------ */ .table-returns { margin-top:40px; } .table-returns table { table-layout: fixed; text-transform: uppercase; } .table-returns th { vertical-align: top; text-align:left; text-transform: uppercase; font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; padding-bottom:13px; border-bottom:3px solid #000; } .table-returns td { vertical-align: top; border-bottom:1px solid #000; padding: 40px 0; } .table-returns p { font-size:13px; letter-spacing: 0.06em; } .table-returns li { list-style:none; list-style-position: outside; margin-bottom:20px; } .table-returns li:last-child { margin-bottom:0; } @media (max-width: 767px) { .table-returns { font-size:8px; letter-spacing: 0; } .table-returns th { font-size:8px; } .table-returns td { padding: 20px 0; letter-spacing: 0; } .table-returns p { font-size:9px; letter-spacing: 0; } } /* ------------------------------------------------------------ *\ Tags \* ------------------------------------------------------------ */ .tags { text-transform: uppercase; color: rgba(0,0,0, .5); font-family: 'Roboto', 'Helvetica', sans-serif; padding: 0 90px; font-size:14px; } .tags a { text-decoration: underline; font-weight:700; letter-spacing: 0.03em; } @media (max-width: 767px) { .tags { padding: 0; } } /* ------------------------------------------------------------ *\ Testimonial \* ------------------------------------------------------------ */ .testimonials { margin-bottom:120px; } .testimonial { margin: 23px 0 168px 0; } .testimonial:last-child { margin-bottom:0; } .testimonial .testimonial-title { text-transform: uppercase; text-align:center; margin-bottom:-50px; position: relative; z-index: 1; } .testimonial .testimonial-inner { position: relative; } .testimonial .testimonial-inner:after { } .testimonial .testimonial-image { width:310px; margin: 0 auto; } .testimonial .testimonial-body { width:250px; position: absolute; top:0; left:60px; padding-top:122px; } .testimonial .testimonial-aside { width:300px; position: absolute; padding-top:130px; top:0; right:0; padding-right:30px; } .testimonial .testimonial-head { text-align:center; margin-bottom:28px; } .testimonial .testimonial-head h4 { font-weight:400; text-transform: uppercase; } .testimonial .testimonial-head h4 strong { display:block; } .testimonial .testimonial-head h2 { font-size:73px; margin: 10px 0 3px 0; line-height:1; } .testimonial .testimonial-content { letter-spacing: 0; font-family: 'Roboto', 'Helvetica', sans-serif; } .testimonial .testimonial-content h4 { margin-bottom:0; } .testimonial .quote blockquote { letter-spacing: 0.075em; } @media (max-width: 1023px) { .testimonial .testimonial-image { width: auto; display:block; text-align:center; } .testimonial .testimonial-body { position:static; width: auto; padding: 0; } .testimonial .testimonial-aside { padding: 0; position:static; width: auto; } .testimonial .testimonial-content { text-align:center; } } @media (max-width: 767px) { .testimonial { margin-bottom:75px; } .testimonial .testimonial-title { font-size:50px; margin-bottom:-20px; } } /* ------------------------------------------------------------ *\ Timeline \* ------------------------------------------------------------ */ .timeline { margin: 0 -47px; position: relative; } .timeline:after { } .timeline:before { content:''; display:block; width:1px; height: 100%; background:#000; position: absolute; top:0; left:50%; } .timeline-item { float:left; width:50%; text-align:center; padding: 0 47px; } .timeline-item:first-child { padding-bottom:247px; } .timeline-item .timeline-item-subtitle { padding: 56px 0; text-align:left; text-transform: uppercase; font-weight:700; font-family: 'Roboto', 'Helvetica', sans-serif; letter-spacing: 0.02em; } .timeline-item .timeline-item-body { margin: 30px 0; } .timeline-item .timeline-item-title { font-size:60px; font-weight:400; margin-bottom:15px; } .timeline-item .timeline-item-content { font-family: 'Roboto', 'Helvetica', sans-serif; font-size:12px; letter-spacing: 0.02em; max-width: 290px; display: inline-block; vertical-align: top; } .timeline-item .timeline-item-content h6 { margin: 0; } .timeline-item:before { content:''; display:block; width:13px; height: 13px; border:1px solid #000; position: absolute; top:0; right:-6px; background-color:#fff; margin-top:-8px; } .timeline-item.timeline-item-large { padding-bottom:100px; } .timeline-item.timeline-item-simple:before { top:50%; margin-left:-6px; left:0; } .timeline-item.timeline-item-simple-inverse .timeline-item-subtitle { text-align:right; } .timeline-item.timeline-item-simple-inverse:before { top:50%; } .timeline-item.timeline-item-inverse:before { right:auto; left:-6px; } /* Small Desktop */ @media (max-width: 1044px) { .timeline-item.timeline-item-simple-inverse:before { top:50%; right: 98.5%; } .timeline-item.timeline-item-inverse:before { left: 98.75%;} } @media (max-width: 767px) { .timeline { margin: 0; } .timeline:before { display: none;} .timeline-item { float:none; width:100%; padding: 0; } .timeline:before { left:0; } .timeline-item:before { display: none; } .timeline-item.timeline-item-large, .timeline-item:first-child { padding-bottom:0; } .timeline-item.timeline-item-simple-inverse .timeline-item-subtitle { text-align:left; } } /* ------------------------------------------------------------ *\ Video Holder \* ------------------------------------------------------------ */ .video-holder { position: relative; height: 0; padding-bottom: 56.25%; } .video-holder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ------------------------------------------------------------ *\ Video Placeholder \* ------------------------------------------------------------ */ .video-placeholder { position: relative; } .video-placeholder img { display:block; word-wrap: 100%; } .video-placeholder .btn-play { position: absolute; top:50%; left:50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); opacity: .8; transition: all .3s; } .video-placeholder .btn-play:hover { opacity: 1; } .video-placeholder {} /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget Links \* ------------------------------------------------------------ */ .widget-links h5 { margin-bottom: 2px; font-family: 'Archivo Narrow', 'Helvetica', sans-serif; line-height: 1.33; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; } .widget-links ul { margin-bottom: 21px; list-style: none outside none; } .widget-links a { font-size: 12px; line-height: 1.67; letter-spacing: 0; text-decoration: none; transition: opacity .4s; } .widget-links ul.alt a { font-family: 'Roboto', 'Helvetica', sans-serif; } .widget-links a:hover { opacity: .8; } /* Tablet Portrait */ @media (max-width: 1023px) { .widget-links { font-size: 0; letter-spacing: 0; } .widget-links .widget-inner { display: inline-block; width: 33.33%; vertical-align: top; } } /* ------------------------------------------------------------ *\ Widget Sort \* ------------------------------------------------------------ */ .widget-sort { padding-top: 3px; margin-bottom: 30px; } .widget-sort h5 { margin-bottom: 6px; font-family: 'Roboto', 'Helvetica', sans-serif; line-height: 1.92; letter-spacing: 0; text-transform: uppercase; } .widget-sort .list-checkboxes { padding-top: 3px; } .widget-sort .checkbox { margin-bottom: 7px; } .widget-sort .checkbox label { padding-right: 0; letter-spacing: 0; } .widget-sort .checkbox .form-label { font-weight: 400; } .widget-sort .checkbox .form-label:before { top: 3px; } .widget-sort .custom-scroll { overflow: hidden; width: 126px; max-height: 484px; border: 1px solid #eaeaea; } .widget-sort .custom-scroll ul { padding: 10px 9px; list-style: none outside none; } .widget-sort .custom-scroll li { margin-bottom: 10px; } .widget-sort .custom-scroll a { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 10px; line-height: 1; letter-spacing: 0; text-decoration: none; } .widget-sort .custom-scroll a:hover { text-decoration: underline; } /* ------------------------------------------------------------ *\ Widget Total \* ------------------------------------------------------------ */ .widget-total { padding-top: 21px; } .widget-total h6 { margin-bottom: 7px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; } .widget-total h6 ~ h6 { margin-bottom: 26px; } .widget-total .list-small-security ~ h6 { margin-bottom: 16px; } .widget-total .btn-black { margin-bottom: 20px; font-size: 12px; } .widget-total > .btn:last-child { padding: 6px 14px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; } .widget-total > a:not(.btn) { display: inline-block; padding-top: 6px; font-size: 11px; letter-spacing: 0; } .widget-total > p { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 1.25; color: #000; letter-spacing: 0; } .widget-total .cart-head h6 { margin-bottom: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .widget-total > a:not(.btn) { padding-top: 0; margin-bottom: 10px; } } /* Mobile */ @media (max-width: 767px) { .widget-total .btn-black { height: 40px; padding: 0; font-size: 15px; line-height: 40px; } .widget-total h6 { font-weight: 700; } } /* ------------------------------------------------------------ *\ Widget Nav \* ------------------------------------------------------------ */ .widget-results:first-child { padding-top: 64px; } .widget-results ul { list-style: none outside none; } .widget-results ul a { font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 12px; line-height: 2; color: #000; text-decoration: none; letter-spacing: 0; } .widget-results ul a:hover { text-decoration: underline; } .widget-results h5 { line-height: 1.31; text-transform: uppercase; letter-spacing: .15em; } /* ------------------------------------------------------------ *\ Widget Nav \* ------------------------------------------------------------ */ .widget-nav { letter-spacing: 0; font-family: 'Roboto', 'Helvetica', sans-serif; } .widget-nav .widget-title { margin-bottom: 2px; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 14px; line-height: 1.54; text-transform: uppercase; letter-spacing: 0; } .widget-nav ul { margin-bottom: 23px; list-style: none outside none; } .widget-nav ul a { font-size: 12px; line-height: 1.8; text-decoration: none; opacity: .75; } .widget-nav ul a:hover, .widget-nav ul .current a { opacity: 1; } .widget-nav ul .current a { font-weight: 700; } .widget-nav .widget-inner > a { font-size: 12px; line-height: 1.8; text-transform: uppercase; font-weight: 700; } /* Mobile */ @media (max-width: 767px) { .widget-nav .widget-title { height: 48px; border: 2px solid #000; line-height: 44px; font-size: 12px; letter-spacing: .05em; text-align: center; } .widget-nav .widget-title span { position: relative; } .widget-nav .widget-title span:after { content: ''; position: absolute; top: 50%; left: 100%; width: 10px; height: 2px; margin-left: 10px; background-color: #000; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .widget-nav .widget-title span:before { content: ''; position: absolute; top: 50%; left: 100%; width: 2px; height: 10px; background-color: #000; margin-left: 14px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .widget-nav .widget-title.active span:before { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .widget-nav .widget-inner { display: none; padding: 15px 0; text-align: center; } } /* ------------------------------------------------------------ *\ IV. Themes \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Theme Autocomplete \* ------------------------------------------------------------ */ .ui-autocomplete { overflow: hidden; width: 126px; max-height: 484px; border: none; border-bottom: 1px solid #eaeaea; padding-top: 10px; } .ui-autocomplete .ui-state-focus { margin: 0; border-bottom: none; border-top: none; } .ui-autocomplete .ui-menu-item:first-child { padding-top: 10px; border-top: 1px solid #eaeaea; } .ui-autocomplete .ui-menu-item { padding: 8px 5px; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; font-family: 'Roboto', 'Helvetica', sans-serif; font-size: 10px; color: #000; letter-spacing: 0; font-weight: 400; letter-spacing: .025em; } .ui-autocomplete .ui-menu-item .ui-highlight { font-weight: 400; color: #cfcfcf; } .ui-autocomplete .mCSB_inside > .mCSB_container { margin-right: 11px; } .ui-autocomplete .mCSB_scrollTools { width: 12px; border: 1px solid #eaeaea; } .ui-autocomplete .mCSB_scrollTools .mCSB_draggerContainer { top: 3px; bottom: 3px; } .ui-autocomplete .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; background-color: #ccc; } .ui-autocomplete .mCSB_scrollTools .mCSB_draggerRail { display: none; } .slider-category .slide a { white-space:nowrap; width: 100%; height:26px; line-height: 26px; display: block; overflow: hidden; text-overflow:ellipsis; transition: font-size .5s; } .slider-category .slick-current a { transition: font-size .5s; } section.main-product.section-product .section-product-homecat a { text-decoration:none; } .oc-subscription-birthday { font-size: 11px; font-family: 'Roboto', 'Helvetica', sans-serif; line-height: 1.07; letter-spacing: .06em; } .main .main-head__entry { max-width: 900px; margin: -16px auto 36px auto; font-size:18px; line-height:22px; text-align:center; letter-spacing: 0.015em; } /* Home page banner slider Arrows */ .slider-arrow.top-banner .slick-arrow { position: absolute; top: 50%; z-index: 10; width: 58px; height: 58px; margin-top: -29px; border: 0 none; border-radius: 0; background: transparent; font-size: 0; color: #fff; transition: .3s; } .slider-arrow.top-banner .slick-arrow:after { content: ''; position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-width: 0 3px 3px 0; border-style: solid; border-color: #fff; } .slider-arrow.top-banner .slick-arrow:hover { opacity: .7; } .slider-arrow.top-banner .slick-prev { left: 0; } .slider-arrow.top-banner .slick-next { right: 0; } .slider-arrow.top-banner .slick-prev:after { left: 24px; transform: rotate(135deg); } .slider-arrow.top-banner .slick-next:after { right: 24px; transform: rotate(-45deg); } .slider-arrow-intro.top-banner { margin-bottom: 0 !important; } .slider-arrow-intro.top-banner .slick-arrow { margin-top: -30px; }